Thursday, August 26, 2010

Using Flixel 2.53 & Flan Map Editor - Updated Flan 8.3Alpha Example = 2D Flash Video Game RAD

Updated Flixel 2.53 Example Code For Flan Map Editor Version 8.3 Alpha

I noticed alot of people asking how to update the Flan Map Editor Version 8.3 example code for a newer version of the Flixel library such as the current version 2.53 of Flixel.

Now that I've solved it I will blindly post the functioning code and necessary code changes:

Here is my modified version of the code generated by Flan which was initially for an earlier version of Flixel. Notice how I have modified the code produced by Flixel when creating the tile map object.

layerNewLayer.loadMap(new CSV_NewLayer, Img_NewLayer, 20, 20);

This load map is an extra line needed as the new tile map object's constructor no longer takes parameters and the load map command must be issued after the object constructor. The two values of '20' represent the width and height of each tile in my tile set. Although I followed the lead of Flan example tilesets with a blank initial tile it seems I have furthermore shown the PNG-24 format with transparency to work just great instead of the main example tileset's use of a background colour... I was just guessing that transparent pixels weren't welcome for tiles in the land of Flan for now but I was wrong, which is sweet.

//Code generated by Flan. http://www.tbam.com.ar/utility--flan.php

package com.adamatomic.Mode {
import org.flixel.*;

public class MapNewMap extends MapBase {
//Media content declarations
[Embed(source="MapCSV_NewMap_NewLayer.txt", mimeType="application/octet-stream")] public var CSV_NewLayer:Class;
[Embed(source="../../../data/tiles_Grass.png")] public var Img_NewLayer:Class;


public function MapNewMap() {

_setCustomValues();

bgColor = 0xffffffff;

layerNewLayer = new FlxTilemap();
layerNewLayer.x = 0;
layerNewLayer.y = 0;
layerNewLayer.scrollFactor.x = 1.000000;
layerNewLayer.scrollFactor.y = 1.000000;
layerNewLayer.loadMap(new CSV_NewLayer, Img_NewLayer, 20, 20);

allLayers = [ layerNewLayer ];

boundsMinX = 0; boundsMinY = 0;
boundsMaxX = 2560; boundsMaxY = 1280;
}

override public function customFunction(param:* = null):* {
}
private function _setCustomValues():void {
}
}
}

Remember to make sure your package and import paths and names are fine as I had to tweak some coming out of Flash to match up to the legendary "Demo" Flixel example source code.

The mapBase class generated by Flan is fine and I've left it just the way it is.

In the "Demo" Flixel example code I've replaced the create() function with the following:

override public function create():void
{
_map = new MapNewMap();
FlxG.state.add(_map.layerNewLayer);
_map.addSpritesToLayerNewLayer(onAddSpriteCallback);
FlxG.followBounds(_map.boundsMinX, _map.boundsMinY, _map.boundsMaxX, _map.boundsMaxY);
_player = new Player(_map.layerNewLayer.width/2-4, _map.layerNewLayer.height/2-4, null, null);
this.add(_player);
FlxG.follow(_player,2.5);
FlxG.followAdjust(0.5,0.0);
FlxG.followBounds(0,0,640,640);

}

I doubt the following made any difference but in PlayState.as I also added in constructor for testing which ended up empty:

function PlayState():void {
super();
}

Search for 'onVictory' and comment out the line for checking if the enemy spawners are all gone because we got rid of the spawning for now with our replacement create fuction.

//fading = true;
//FlxG.fade.start(0xffd8eba2,3,onVictory);

Download Flixel
Flan Map Editor Utility
Get MODE Demo Going
Mode Example Flixel Source Code => Click DOWNLOAD SOURCE in the right subtitle position of the page for your choice between ZIP or TAR file archive download.

No comments:

Post a Comment