I've made some quick changes to DeathRun in preparation for changes to come.  At this point the base game is finished and working and all the major components are in place.  Next I need to start working on content generation and figuring out how the game is going to flow.  So I wanted to generate some new content and get it into the game.  The goal is to be able to create new content and integrate it with what I already have quickly and easily, so this will be a good test.

Adding a new enemy

I decided to add a new enemy to the game.  This is an enemy that simply jumps up and down in one place.  There isn't much logic to it, so the framework that I've already built should work nicely. 

I created a new class called Jumper.hx.  There isn't much in there.  Here's the contents:

class Jumper extends Enemy

	var JMPSTR = 600;
	public function new(X:Float=0, Y:Float=0) 
		super(X, Y);
		makeGraphic(50, 50, FlxColor.RED);
	override public function step() 
		if (isTouching(FlxObject.FLOOR))
		velocity.y = -JMPSTR;

In my new funciton I'm just making a red rectangle as a temporary placement.  My enemy class takes care of the gravity already, so there isn't anything that I need to add. 

Next I overrode my step function which is called during every update.  It just has a simple statement that says if the Jumper is touching the floor jump back up. The Jumper is done.

Now I'll add him to the game in the LevelState.create() function.

addEnemy(new Jumper(), 1200, 100);

Done!  He is jumping up and down in the game with no issues.  He can be killed and respawns normally and hurts the player when touched.  All for only a couple lines of code.  I'm extremely happy with how this turned out.

New tilemap

I also was messing around with Tile Studio which is my favorite pixel art program and put together a new tilemap to replace those ugly boxes with numbers in them.   I am going to use HaxeFlixel's autotiler (I talk about it here) to put the approperiate tiles on the board so I need to make the right graphics.  I'm imagining Guy running around in a forest with stone platforms, so after messing around for awhile here's what I've got:

The order of the sprites in the sheet is important because Autotiler is going to lay them out in a certain way, so I was sure to match up with the templates HaxeFlixel provided. 

There are some tricks to autotiling.  I understand that it renumbers my tiles based on the tiles around it, but it causes me problems because I have two different types of tiles.  If I run the autotiler as it is now it will replace all my one way tiles represented by a 2 with the autotile number.  As a result all my tiles become solid.  So I need to find a way around it.

I was going to code some special logic into the autotiler that would tile differently for my additional tile types, but then it would require separate graphics and blah blah blah.  So at the end I just said screw it, I'm adding a second map.  One map will be invisible and my entities will check collision against that one.  The second map will be the display map and I'll autotile that one.  I'm not sure this is the proper way to deal with this problem and there might be something build into FLxTilemap that I'm just not aware of, but this works for now.  Here's the new code in LevelState.hx.

//Declare variables
public var map:FlxTilemap;
var displayMap:FlxTilemap;

//Load the map.
map = new FlxTilemap();
displayMap = new FlxTilemap();
map.loadMap(FlxStringUtil.bitmapToCSV(Assets.getBitmapData("assets/images/testlevel2.png"), false, 1, [0x00FFFFFF, 0x00000000, 0x00FF0000]), "assets/images/numbers40px.png");
displayMap.loadMap(FlxStringUtil.bitmapToCSV(Assets.getBitmapData("assets/images/testlevel2.png"), false, 1, [0x00FFFFFF, 0x00000000, 0x00FF0000]), "assets/images/stoneSpriteSheet.png", 40,40,FlxTilemap.AUTO);
map.setTileProperties(2, FlxObject.CEILING);

//Add the displayMap and not the map.

Nothing special going on here that I haven't already done.  I just created a second map called displayMap and chose to add displayMap to the scene instead of map.  Now I didn't change my collide(_entites,map) line, so all the collisions will be detected against map (which maintain the correct tile numbers) and all the graphics will be displayed through displayMap (which the graphics look right but the tile numbers are screwed up). 

Parallax scrolling and background images

I also wanted to add a nice background image to stop Guy from running around in a black world.  Just for fun I decided to also add parallax scrolling, which is just a fancy way to say that the background moves slower than the foreground which gives the illusion of depth.  Luckily, in HaxeFlixel this is simple.  I grabbed a large image that I had sitting on my hard drive that I got from somewhere and created a sprite out of it.

var bg = new FlxSprite(0, 0, "assets/images/bg.jpg");

To get the background to scroll at a different rate I can use the scrollFactor attribute that is attached to every Flxsprite.

bg.scrollFactor.set(.1, .1);

This code simply says for every pixel the camera scrolls, make this sprite scroll .1 pixels instead.  scrollFactor is an FlxPoint and has both an X and a Y component in case you want them to scroll at different rates.  I don't, so this will do.

The last step is to add this sprite to the stage.  I want to add it before all the other sprites so it displays properly in the background the way it is supposed to.

//Add the variables to the stage

With that, my new background is added, my new enemy is bouncing and the new tiles are displaying.  Not bad for only a couple dozen lines of code.  Source code available here.


0 #1 profile 2018-10-28 12:13
Need cheap hosting? Try webhosting1st, just $10 for an year.


Add comment

Security code