Tilemaps – Creating the Game World
Now we will create the game world for the player to stand, run and jump on. Create a new image document that’s 48×16 Pixels. We'll keep it simple and just use the ff:
You might not see it, but the first tile above is ‘blank’.
The first tile is not solid and not going to collide with the player sprites, but the others are. Later, you can make have decent effects by having more non-colliding tile.
Tiles work the same way as the Player’s graphics: each square block will be assigned a number, starting at 0. You can create as many tiles as you want. Save this file as “Tiles.png” in the org/flixel/data directory.
Then, let's make the Tilemap. A tilemap is an easy way to build a map that looks the way you prefer it. To setup the map, let's make it twice as wide and tall as the game screen, so define the tile size as 16 × 16 and set the map to be 40 × 30 tiles in size.
When making the new map, import Tiles.png file and make sure that there are no gaps anywhere on the map so that the player can't leave the map.
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,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,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2 2,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,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2 2,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,2 2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,2 2,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,1,2 2,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2 2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,1,1,1,2 2,1,1,1,1,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,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2 2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,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
Once you finish making your map, save it as “map.txt” and put it to org\flixel\data directory.
Now let's start setting up the PlayState.as.
Setting up the PlayState
The PlayState is a state that where the player is playing the game.
1. Openthe PlayState.as file in the com\Tutorial directory.
2. Then, import the Flixel library:
import org.flixel.*;
3. Extend PlayState as FlxState:
public class PlayState extends FlxState
4. Then, embed the assets to be used in this state. In this case we will embed 2 files: the Tiles.png and map.txt:
[Embed(source = '../../org/flixel/data/Tiles.png')] private var ImgTiles:Class; [Embed(source = '../../org/flixel/data/map.txt', mimeType = "application/octet-stream")] private var DataMap:Class;
This will include the files into the compiled SWF file, it assigns a name so that it can be accessed in the program. This can be done for images, sounds, and many more later on.
5. Then let's define 2 of objects that are needed in the PlayState: the Player and the map. Flixel has a FlxTilemap class which allows to load the map. It also have some other features and then paint them to the screen. using a variable to hold the FlxTilemap can also perform other things like collision detect with that objects. The Player object is actually the Player class we just created from previous part. Let's declare some variables to hold these objects:
private var _player:Player; private var _map:FlxTilemap;
6. Finally, let's define 3 FlxGroup to display our objects. FlxGroup will let you set the group of objects being displayed in the game. In these case, each layer will hold a defined group of objects.
public static var lyrStage:FlxGroup; public static var lyrSprites:FlxGroup; public static var lyrHUD:FlxGroup;
7. Now call the FlxState constructor by:
super();
8. Then, initialize the layer variables defined earlier:
lyrStage = new FlxGroup; lyrSprites = new FlxGroup; lyrHUD = new FlxGroup;
9. Then, initialize the Player object:
_player = new Player(48, 48);10. Now, put the player to the Sprites layer:
lyrSprites.add(_player);
11. Then initialize the Tilemap object and put it in lyrStage:
_map = new FlxTilemap; _map.loadMap(new DataMap, ImgTiles, 16) _map.drawIndex = 1; _map.collideIndex = 1; lyrStage.add(_map);
12. Lastly, attach the layers in order to this State by:
this.add(lyrStage); this.add(lyrSprites); this.add(lyrHUD);
In the lines of code above, the last line will be the topmost layer.
Notice the lyrHUD – we’ll add score and health to that layer later on.
13. Next, override the update function of FlxState and add this next to the constructor:
override public function update():void { super.update(); _map.collide(_player); FlxG.follow(_player,2.5); FlxG.followAdjust(0.5, 0.5); FlxG.followBounds(1,1,640-1,480-1); }
By using the FlxG function: “follow”, the game’s camera will follow the _player.
By calling the FlxState’s update function, we’re telling Flixel to collide our Player object with our tilemap object by using "_map.collide".
Now test the project, we should be able to move around the map.
Here's the complete PlayState.as:
package com.Tutorial
{
/**
* ...
* @author pisces_eyes
*/
import org.flixel.*;
public class PlayState extends FlxState
{
[Embed(source = '../../org/flixel/data/Tiles.png')] private var ImgTiles:Class;
[Embed(source = '../../org/flixel/data/map.txt', mimeType = "application/octet-stream")] private var DataMap:Class;
private var _player:Player;
private var _map:FlxTilemap;
public static var lyrStage:FlxGroup;
public static var lyrSprites:FlxGroup;
public static var lyrHUD:FlxGroup;
public function PlayState():void
{
super();
lyrStage = new FlxGroup;
lyrSprites = new FlxGroup;
lyrHUD = new FlxGroup;
_player = new Player(48, 48);
lyrSprites.add(_player);
_map = new FlxTilemap;
_map.loadMap(new DataMap, ImgTiles, 16)
_map.drawIndex = 1;
_map.collideIndex = 1;
lyrStage.add(_map);
this.add(lyrStage);
this.add(lyrSprites);
this.add(lyrHUD);
}
override public function update():void
{
super.update();
_map.collide(_player);
FlxG.follow(_player,2.5);
FlxG.followAdjust(0.5, 0.5);
FlxG.followBounds(1,1,640-1,480-1);
}
}
}On the next part we will add the Enemy.
Go back to How To Make A Simple Platform Game In Flash
No comments:
Post a Comment