Flashpunk with a tilemap level editor. Need help!

(John Andersson) #1

Hi. I am making a platformer, and I have so far made the character class (without gravity) which you can control with the keyboard.

I read up on how platformers work, and tilemaps seem to be the best way to go, since there are level editors which make it so much easier.

The problem is that I can’t find any good starting point (I’m an absolute beginner). I checked some youtube tutorials on OGMO, but they were to little help, since they skipped some key instructions.

I need a beginner-friendly tutorial on how to use a good level editor with flashpunk! Please help me :frowning:

(Danny) #2

I don’t know much about them, but Flashpunk has some functions that can read XML and use the data from it. Check out Grid’s loadFromString and FP.getXML.

(John Andersson) #3

That’s what I really don’t undersatnd how to use…

(Elias) #4

This video covers the most of the basic stuff for level creation. I can send ya a piece of code to make it easier for you if you want. http://www.youtube.com/watch?v=TPPzgB3fv8A

(John Andersson) #5

Hehe, I saw that guys video before. I just don’t understand all of the bitmapdata stuff. I wish he would have started from the very beginning (make the game from utter scratch). I’m sorry if I’m being a pain here…

(Elias) #6

No problem. When you start to learn something new, it’s normal to have many questions and try to learn every bit of detail. Check this out! Map.as (1.5 KB) Your map will be as a single entity in the world, so dont forget to add it in your Gameworld.

(John Andersson) #7

Thank you for helping me out! I am just a bit confused. I added this to my folder so I can use it in flashdevelop. In the gameworld file, I have typed:

		add(new Character_Hero());
		add(new Enemy_Imp());

I tried doing the same for the map:

                   add(new Map etcetc

But it automatically fills it in as

               add(new DisplacementMapFilter

So I guess I am doing something fundamentally wrong? Thank you little catguy for helping me!! I appreciate it deeply.

(Elias) #8

Did you added it in the same folder with the gameworld? You must type this!

add(new Map);

(John Andersson) #9

Hehe, whoops. I had the map.as in a folder above it.

I tried running it, but I got some error which disappeared quickly. Now whenever I try to run the game it says “Build Failed”.

(Elias) #10

Did you imported your own tileset and an ogmo map in the code i gave you?

(John Andersson) #11

Oh. I’ll try to do that now.

But meanwhile I do that, even without the add new map line and without the map.as (I tried removing it temporarily), it still says build failed.

But I’ll import the tileset and make an ogmo map for now!! :slight_smile:

(John Andersson) #12

Okay, update.

I now have this in the Map.as

	[Embed(source="assets/Tiles/rock.png")] private const TILES:Class; //Importing your tiles
	[Embed(source="../TestLevel.oel", mimeType="application/octet-stream")] private const MAP1:Class; //Importing your XMLmap file

But I get the build failed.

I apologize once again for my mistakes. Maybe I should learn more before I try making a map. But I figured it would be the best to just learn it no matter how hard it is, then work my way from there. Making maps and adjusting game accordingly is really the only thing I have no idea of how to make.

I can make simulator games just fine, but platformer games…

(Elias) #13

Try playing with the code i gave ya so you start to understand how it works. Edit this line with your own preferences. Is your screen 1280 X 480? Are your tiles 8 X 8? When you made a map how do you named your layers?

image = new Tilemap(TILES, 1280, 480, 8, 8); image.loadFromString(xml.tiles, “,”, “\n”);

(John Andersson) #14

Ah, I see. I didn’t realize I had to change the Map.as accordingly to my level.

Just, babysit me once more and see if I forgot something crucial. If not, I’ll try to fix it myself. Hehe.

My TestLevel.oel is:

<level width="1920" height="1080">
  <Ground tileset="Ground" exportMode="CSV">-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1
-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1
-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1
-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1
-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1
-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1
-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1
-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0</Ground>
  <Start>
	<PlayerStart id="0" x="0" y="840" />
  </Start>
</level>

And the project file is:

<?xml version="1.0"?>
<project xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
  <OgmoVersion>2.1.0.6</OgmoVersion>
  <Name>New Project</Name>
  <BackgroundColor A="255" R="0" G="0" B="0" />
  <GridColor A="255" R="54" G="54" B="54" />
  <LevelDefaultSize>
	<Width>1920</Width>
	<Height>1080</Height>
  </LevelDefaultSize>
  <LevelMinimumSize>
	<Width>640</Width>
	<Height>480</Height>
  </LevelMinimumSize>
  <LevelMaximumSize>
	<Width>640</Width>
	<Height>480</Height>
  </LevelMaximumSize>
  <Filename>C:\Pugnotic\Flashpunk\Dwarflets\Test.oep</Filename>
  <AngleMode>Radians</AngleMode>
  <CameraEnabled>false</CameraEnabled>
  <CameraSize>
	<Width>640</Width>
	<Height>480</Height>
  </CameraSize>
  <ExportCameraPosition>false</ExportCameraPosition>
  <LevelValueDefinitions />
  <LayerDefinitions>
	<LayerDefinition xsi:type="TileLayerDefinition">
	  <Name>Ground</Name>
	  <Grid>
		<Width>120</Width>
		<Height>120</Height>
	  </Grid>
	  <ScrollFactor>
		<X>1</X>
		<Y>1</Y>
	  </ScrollFactor>
	  <ExportMode>CSV</ExportMode>
	</LayerDefinition>
	<LayerDefinition xsi:type="EntityLayerDefinition">
	  <Name>Start</Name>
	  <Grid>
		<Width>120</Width>
		<Height>120</Height>
	  </Grid>
	  <ScrollFactor>
		<X>1</X>
		<Y>1</Y>
	  </ScrollFactor>
	</LayerDefinition>
  </LayerDefinitions>
  <Tilesets>
	<Tileset>
	  <Name>Ground</Name>
	  <FilePath>src\assets\Tiles\rock.png</FilePath>
	  <TileSize>
		<Width>120</Width>
		<Height>120</Height>
	  </TileSize>
	  <TileSep>0</TileSep>
	</Tileset>
  </Tilesets>
  <EntityDefinitions>
	<EntityDefinition Name="PlayerStart" Limit="1" ResizableX="false" ResizableY="false" Rotatable="false" RotateIncrement="15">
	  <Size>
		<Width>120</Width>
		<Height>120</Height>
	  </Size>
	  <Origin>
		<X>0</X>
		<Y>0</Y>
	  </Origin>
	  <ImageDefinition DrawMode="Rectangle" ImagePath="" Tiled="false">
		<RectColor A="255" R="255" G="0" B="0" />
	  </ImageDefinition>
	  <ValueDefinitions />
	  <NodesDefinition Enabled="false" Limit="-1" DrawMode="None" Ghost="false" />
	</EntityDefinition>
  </EntityDefinitions>
</project>
(Elias) #15

Well, try this. On your testLevel.oel you only got a tile layer, but you need a grid layer as well if you want to have collisions later. As for the player, you better define his X & Y at his own class.

grid = new Grid(uint(xml.@width), uint(xml.@height), 120, 120);

grid.loadFromString(String(xml.grid), “”, “\n”);

image = new Tilemap(TILES, 1920, 1080, 120, 120);

image.loadFromString(xml.ground, “,”, “\n”);

(John Andersson) #16

Thanks a lot for not leaving me. Haha.

I just modified the code with what you typed, but I get the “Build Failed” text at the bottom left of the program. I can’t seem to run the game at all.

I googled the error and it seems like something VERY BASIC is missing. But I didn’t change anything in the main as files… I’ll have a look around and see if I find anything.

(John Andersson) #17

I’m tearing out my hair over here.

I’ve temporarily removed the map.as and ogmo files just to find the reason for the “Build failed”.

This is all of the code I have at the moment:

Main.as

package 
{
	import net.flashpunk.Engine;
	import net.flashpunk.FP;

	public class Main extends Engine
	{
		public function Main():void 
		{
			super(1920, 1080, 60, false);
			FP.world = new GameWorld;
		}
		
	}
	
}

GameWorld.as

package  
{
	import net.flashpunk.World;
	
	/**
	 * ...
	 * @author Alexander
	 */
	
	public class GameWorld extends World 
	{
		
		public function GameWorld() 
		{
			add(new Character_Hero());
			add(new Enemy_Imp());
		}
		
	}

}

Enemy_Imp.as

package  
{
	import net.flashpunk.Entity;
	import net.flashpunk.Graphic;
	import net.flashpunk.Mask;
	import net.flashpunk.graphics.Image;
	import net.flashpunk.utils.Key;
	import net.flashpunk.utils.Input;
	import net.flashpunk.FP;
	
	/**
	 * ...
	 * @author Alexander
	 */
	public class Enemy_Imp extends Entity 
	{
		
		[Embed(source = 'assets/enemy_imp.png')] private const IMP:Class;
		
		public function Enemy_Imp() 
		{
			
			name = "imp";
			
			setHitbox(120, 120);
			
			type = "enemy";
			
			graphic = new Image(IMP);
			
			x = 500;
			y = 500;
		}
		
		public function destroy():void
		{
			FP.world.remove(this);
		}
	}

}

Character_Hero.as

package  
{
	import net.flashpunk.Entity;
	import net.flashpunk.Graphic;
	import net.flashpunk.graphics.Image;
	import net.flashpunk.graphics.Spritemap;
	import net.flashpunk.Mask;
	import net.flashpunk.graphics.Image;
	import net.flashpunk.utils.Key;
	import net.flashpunk.utils.Input; 
	import net.flashpunk.FP;
	
	/**
	 * ...
	 * @author Alexander
	 */
	
	public class Character_Hero extends Entity 
	{
		[Embed(source = 'assets/hero.png')] 
		private const HERO:Class;
		
		public var sprHero:Spritemap = new Spritemap(HERO, 120, 144);
		
		public function Character_Hero() 
		{
			setHitbox(100, 120);
			type = "player";
			
			sprHero.add("stand", [0, 1, 2, 3, 4, 5, 6, 7, 8], 30, true);
			sprHero.add("run", [9, 10, 11, 12, 13, 14, 15, 16], 30, true);
			sprHero.add("crouch", [17, 18, 19, 20, 21, 22, 23, 24], 30, true);
			sprHero.add("jump", [31, 32, 33, 34, 35, 36, 37, 38, 39], 30, true);
			
			graphic = sprHero;
			
			x = 250;
			y = 250;
			
			Input.define("Right", Key.RIGHT, Key.D);
			Input.define("Left", Key.LEFT, Key.A);
			Input.define("Up", Key.UP, Key.SPACE, Key.W);
			Input.define("Down", Key.DOWN, Key.S);
		}
		
		override public function update():void
		{
			
			var hitImp:Enemy_Imp = collide("enemy", x, y) as Enemy_Imp;
			
			if (hitImp)
			{
				trace("HIT");
				hitImp.destroy();
			}
			
			if (Input.check("Left")) 
			{ 
				sprHero.play("run");
				x -= 5; 
			}
			
			if (Input.check("Right")) 
			{
				sprHero.play("run");
				x += 5; 
			}
				
			if (Input.check("Up")) 
			{
				sprHero.play("jump");
				y -= 5; 
			}
			if (Input.check("Down")) 
			{ 
				sprHero.play("down");
				y += 5;
			}
			
			super.update();
			
		}
	}

}

Then I have the following folder hierarchy.

Game(AS3)
-References

>Bin
- a lot of shit

>src
    >assets
        >Tiles
        -rock.png
    enemy_imp.png
    hero.png
    
    >net
        >flashpunk
   
    Character_Hero.as
    Enemy_Imp.as
    GameWorld.as
    Main.as

What is causing this damn “Build Failed” error!?

(Zachary Lewis) #18

That guys… :unamused:

Here’s a tutorial series by “that guys” for the very basics of FlashPunk.

(Elias) #19

There is only 1 “that guy” i know who can save the day :stuck_out_tongue:

(John Andersson) #20

Hehe. Thank you “that guy”.

But for some reason, I can’t get past the Build Failed error. I have tried finding the error, but I can’t find it!

What the hell!?

Now it works… I can start the game again… Ok, I’m gonna try making the tile mapping work. Brb! :smiley: