Rico’s ActionScript 3 Game Making Guide [Anyone can do it.] ~ (PT.3) FlxTilemaps and CSVs!

//Rico’s ActionScript 3 Game Making Guide [Anyone can do it.] ~ (PT.3) FlxTilemaps and CSVs!

Rico’s ActionScript 3 Game Making Guide [Anyone can do it.] ~ (PT.3) FlxTilemaps and CSVs!

Introduction
Making a Menu

I had been meaning to start this earlier but I figure I’ll just get part of it done tonight and finish up the rest tomorrow. You won’t know this however because it’ll be drafted and then published in full. I’ll begin with stating that I’ve actually moved onto “HaxeFlixel” and may end up writing a guide for that next. It’s like Flixel but with far more functionality and its updated still instead of being kind of left behind.

But even then I’m finding myself needing “moar power” and I might be switching to a genuine physics engine soon. Today we’ll talk about FlxTilemaps and how to use them! I probably won’t build a very comprehensive level with this guide but what I will do is provide you with the tools to do so yourself. The first thing we need to do is create the game state that we’ll be building this level in in the first place! This is easily done in one of two ways. I’m going to use the quickest way which is to just copy the “MenuState.as” file we made and rename the new one “VictoryRunner.as”. You can name yours anything you want. You can even be boring and name it “GameState” which seems to be popular. I don’t advise this only because it obfuscates it. What if your game has multiple gamestates? Well time to start naming them GameState2, 3, and so on… Which is dumb.

Once you pop back into FlashDevelop you should see the file on the right side. Double click and open it. Go into it and clean it up so that it looks like this:

package
{
	import org.flixel.*; //Imports flixel.
	import org.flixel.plugin.photonstorm.*; //Imports FPT.
	
	public class VictoryRunner extends FlxState //Add Flixel API to MenuState.
	{
		
		//Unassigned Variables and Embeddings are put here. They don't NEED to be but I like to keep things clean.

		
		override public function create():void //When the gamestate loads this gets called.
		{			
			FlxG.mouse.show(); //This makes the Flixel mouse visible! FlxG.mouse.hide(); hides it!
			
			
		} // end function create
		
		override public function update():void //Anytime the timers are called this part runs. More on this later!
		{
			FlxG.stage.align = '';
			super.update(); // "Updates" the game every time an action is called or anything is activated.
		} // end function update
 
	} // end class
}// end package  

Note that I changed the class from “MenuState” to VictoryRunner. If you don’t do that you are in for a bad time. Once that’s done go back to your MenuState file and make the following changes to the button:

		public function StartGame():void
		{
			FlxG.switchState(new VictoryRunner());
		}

Now if you press F5 and compile your game you’ll notice that pressing the button takes you to a black screen. That black screen is your game world! It doesn’t look like much now but we can sex it up a bit! The first thing I suggest is to add in a function to the gamestate where pressing “1” will take us back to the menu and “ESC” will reset the game. This is great for getting back to the menu when we are testing things.

But how do I do that? That’s not even related to tilemaps! I know, I’m so generous.

if (FlxG.keys.justPressed("ESCAPE")) {
					FlxG.switchState(new VictoryRunner());
						} else if (FlxG.keys.justPressed("ONE")) {
						FlxG.switchState(new MenuState());
						}

So how does this work? Pretty simple really. The game checks to see if “ESCAPE” was pressed. If that’s the case it will switch the state of your window to “VictoryRunner” which is the game. You effectively reset the game this way. I’ll explain later how to save information between resets (maybe).

The “else” is simply checking if 1 was pressed instead of Escape. You don’t NEED to do these like this but I figured it was a good chance for you to see what “else if” statements look like. If you press “ONE” (1) you’ll go back to the Menu screen. The parentheses that follow the name of the states is a field where you can pass other information. I’ve never tried it with states and for now we can just ignore it. But don’t forget to include it or the entire thing will fail to load.

Next we hit F5 to see if we succeeded! Sweet it worked! With that out of the way I’m going to change my mouse show to a hide.

FlxG.mouse.hide(); //This makes the Flixel mouse visible! FlxG.mouse.show(); shows it!

I’m doing this because now we can confirm the screen works just by hitting 1 instead of seeing the mouse. Next we should work on the tilemap because it is getting late and I am thinking I might be able to finish this before I go to bed. Because of the size of the level “1366 by 768” we have a few options. The first is that we can create an excel sheet of the CSV (Which is short for comma-separated values and is exactly what it sounds like). The second option is that we could just use a level editor. The third is we could just steal the one from the last game I made and then expand on that later. I think we’ll first try the first option and if that doesn’t fail miserably by 11 PM I’ll stick with it. Else…well…

I suppose I should show you what a CSV looks like! First as as just the text and then next as my super clever excel format.

var data:Array = new Array(
		1,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	1,
		1,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	1,
		1,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	1,
		1,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	1,
		1,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	1,
		1,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	1,
		1,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	1,
		1,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	2,	2,	0,	0,	0,	0,	0,	0,	1,
		1,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	1,
		1,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	2,	0,	0,	0,	0,	0,	0,	0,	0,	0,	1,
		1,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	1,
		1,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	2,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	1,
		1,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	1,
		1,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	2,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	1,
		1,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	3,	5,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	1,
		1,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	6,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	1,
		1,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	3,	4,	4,	9,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	1,
		1,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	7,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	1,
		1,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	7,	0,	0,	6,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	1,
		1,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	8,	4,	4,	9,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	1,
		1,	0,	0,	0,	0,	0,	2,	2,	2,	2,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	1,
		1,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	2,	2,	2,	2,	1,
		1,	1,	1,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	1,
		1,	1,	1,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	1,
		1,	1,	1,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	1,
		1,	1,	1,	1,	0,	0,	0,	0,	0,	0,	0,	0,	1,	1,	0,	0,	0,	0,	0,	0,	0,	1,	1,	1,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	1,
		1,	1,	1,	1,	1,	0,	0,	0,	0,	0,	0,	1,	1,	1,	0,	0,	0,	0,	0,	0,	0,	1,	1,	1,	1,	1,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	1,
		1,	1,	1,	1,	1,	1,	1,	1,	1,	1,	1,	1,	1,	1,	0,	0,	0,	0,	0,	0,	0,	1,	1,	1,	1,	1,	1,	1,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	1,
		1,	1,	1,	1,	1,	1,	1,	1,	1,	1,	1,	1,	1,	1,	0,	0,	0,	0,	0,	0,	0,	1,	1,	1,	1,	1,	1,	1,	1,	1,	0,	0,	0,	0,	0,	0,	0,	0,	0,	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
		);

Well that’s a damn mess! Look at all those numbers and commas! I’m having palpitations just looking at it!

exampleofCSV

Now THAT makes more sense to me. Luckily when you copy and paste to and from excel it will format properly because you can both leave newlines AND tabs in! This is why the ); is after that huge paste chunk at the top. This means that I can quickly edit the level and see my edits in the excel file. Easy to visualize and easy to do.

The color differences were all made with conditional formatting:

conditionalformatting

Be sure you leave the comma OFF of the last number. Else Flixel will be waiting for the next number (which won’t exist) and will throw a fatal error. Anyways, if we build an excel file like this that is 1366 across and 768 down that’s going to be somewhat big. But hey let’s try it. The first thing we need to do is gather up our images that’ll be used for this project. I’ve made some incredibly ugly tiles for this little project. Hopefully yours will actually…you know…tile.

leveltiles

Something to consider about these tiles is that they each have a number associated with them. Remember that that number begins at 0 like so:

leveltilesexample

You’ll note I left 0 blank. You don’t NEED to do this but it makes life much easier for us. Otherwise we’ll be putting “-1s” in certain places and then France invades Peru…Cats marry Dogs…it’s just madness. Anyways lets setup what we need to add to the script before we can load a tilemap!

Under the VictoryRunner Class (where I told you before to put embeds and variables) put the following:

private var _level:FlxTilemap; //This is the "group" or "tilemap" of the level itself!
		
[Embed(source="images/leveltiles.png")]	private var _LevelTiles:Class; //Create a class embedded with your lovely new tiles!

Pretty simple! I’ve put an underscore before the variable names just to make 100% sure they don’t impact anything that is already a variable. This is why you’d write “_background” instead of background. Something I did wrong in a previous tutorial. Also be sure to use private variables any chance you have so that you don’t have to spent eternity bug fixing when something goes wrong.

Now that you have these two lets add in the CSV for our gamestate. Even though we are using 1366 by 768 our tile sprites are 30 by 30. This means that the entire thing is only 45.53 by 25.6. Now we are working with whole integers so I’ll tell you what I’ve done to fix this problem. You can resolve it yourself by just using a number that divides into those (it doesn’t NEED to be a square, you could use rectangles).

At any rate:

var _levelCSV:Array = new Array(
			3,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	3,
			3,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	3,
			3,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	3,
			3,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	3,
			3,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	3,
			3,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	3,
			3,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	3,
			3,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	3,
			3,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	3,
			3,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	3,
			3,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	3,
			3,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	3,
			3,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	3,
			3,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	3,
			3,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	3,
			3,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	3,
			3,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	3,
			3,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	3,
			3,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	3,
			3,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	3,
			3,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	3,
			3,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	3,
			3,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	3,
			3,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	3,
			3,	2,	2,	2,	2,	2,	2,	2,	2,	2,	2,	2,	2,	2,	2,	2,	2,	2,	2,	2,	2,	2,	2,	2,	2,	2,	2,	2,	2,	2,	2,	2,	2,	2,	2,	2,	2,	2,	2,	2,	2,	2,	2,	2,	2,	3,
			3,	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,	3
			);
			_level = new FlxTilemap(); //Level is set as a tile map.
			_level.loadMap(FlxTilemap.arrayToCSV(_levelCSV, 46), _LevelTiles, 30, 30, 0, 0, 0, 1); //CSV is comma separated values. It's just pulling from above.
			_level.x = -10; //Moves the entire tilemap 10 pixels to the left. Just an aesthetic thing.
			add(_level);

Alright so we’ve got “var _levelCSV:Array = new Array(” Which is super self explanatory. The variable “_levelCSV” is set as an array and its value is the massive CSV that we’ve generated. Really CSV is just fancy speak. “Apple, Tangerine, Grape” is a CSV. We call it that because saying “Comma Separated Value” is verbose. You COULD just call them arrays too…why people don’t just do that is beyond me. But they don’t, so I don’t. Perpetuating a cycle of obfuscation I suppose. But at least YOU know now!

We end the CSV on a 3 (without a comma) and then );.

“_level = new FlxTilemap(); //Level is set as a tile map.” Is again simple to understand. _Level is a FlxTilemap (as we noted at the top) and we are creating a fresh array with it. This, as I’ve mentioned before, is called Initializing.

Next lets fill that newly initiated variable with stuff!

_level.loadMap(FlxTilemap.arrayToCSV(_levelCSV, 46), _LevelTiles, 30, 30, 0, 0, 0, 1);

Alright lets break it down.

_level.loadmap tells Flixel to literally “load this map of values”.

Then we take that array above and convert it to a CSV (redundant much…), _levelCSV takes care of the height. 46 is our width.

The following value is asking for the images to use for this tilemap. We use our embedded image “_LevelTiles”. We then tell the game they are “30 by 30” with the two numbers following that. This way the game knows where to separate all those different sexy little images we strapped next to one another.

The next thing is asking if it should autotile. I put “0” because no, just no. If you want to use AutoTile you can read up on it yourself :). Following that it asks where is the blank sprite? Put 0, because that’s where you put yours right? You did? I like you, smart kid this one. Then it asks us where it should start DRAWING things. I put 0 again because I’m saucy but you could in theory put 1. Where is the fun in that though?

Finally it asks us where should the character start colliding? Obviously “1” because we don’t want him running into air and stopping.

Next we move the entire thing 10 pixels to the left because its not an exact fit.

“_level.x = -10; //Moves the entire tilemap 10 pixels to the left. Just an aesthetic thing.”

Finally we add it into the game:

“add(_level);”

Hit F5 and then click our level button. What do we have?

leveltilesexample

VictoryLevelTileMap

Well that looks good! So alright I actually DID finish this tonight. Next update we’ll start working on adding in our character, a background, and even some platforming. Following that I’ll show you how to add in a goal.

Honestly by now I feel like you are probably already “getting” it but if you aren’t leave a comment! I’ll gladly help.

By | 2014-06-15T23:52:03+00:00 June 15th, 2014|Journal|2 Comments