how to use atlasHash to your advantage.

Lately I have been using as a game framework/engine. And one thing that is quite tedius, is to manage your Sprites and animation frames, it is roughly 40% of your game development time.

However there is one tool that now -that officially supports Phaser- cuts down this time at least by 90%.

View more info or download TexturePacker here:

The tool is named TexturePacker and allows the load of all your assets and combines them very conveniently into a single Spritesheet and exports that Spritesheet along with a .json file that “tells” Phaser where to find each frame (based on coordinates on the spritesheet), this is called an atlasJSONHash/atlasJSONArray.

I have attached a video showcasing a very rough export that I will use to create today’s codepen example (see below).

Here is the end result of our game.

See the Pen OPpgZw by Michael Dobekidis (@netgfx) on CodePen.

Continue to see details about creating a Player and animations with atlasJSONHash.

Continue reading


Components Factory from XML/AS3

In this post we will create Video and Image components by using only an XML file and AS3 code. Finally we will place all these Components into a Grid Gallery.

This approach has many benefits as it will render more smoothly in mobile devices and tablets as mxml code is a bit heavy even with the latest Flex Hero build.

This is the XML structure that we will use:

<item target=”assets/img.jpg” type=”image”/>
<item target=”″ type=”video”/>
<item target=”″ type=”video”/>
<item target=”″ type=”video”/>
<item target=”″ type=”video”/>
<item target=”assets/img.jpg” type=”image”/>
<item target=”assets/img.jpg” type=”image”/>
<item target=”assets/img.jpg” type=”image”/>

The MXML Tile component (this could also be AS3 code)

<s:TileGroup id=”grid” x=”0″ y=”0″  creationComplete=”buildItemsFromXML()”>

Now some AS3 code:

we will create the loader function

[cc lang=”actionscript”]

private function buildItemsFromXML()
var xmlCall:XMLService = new XMLService();

//The magic happens into the success response function

function resultResponse(evt:ResultEvent)
itemArray = new Array();
var result = evt.result as XML;
var xml = result.items.elements(“*”);
for each(var item in xml) //Parse all elements of the XML
if(String(item.@type).toLowerCase()==”video”) // Create a VideoDisplayComponent
var vid:VideoDisplay = new VideoDisplay();
vid.source = String(item.@target);
vid.autoPlay = false;
vid.scaleMode = “stretch”;
vid.width = itemsWidth;
vid.height = itemsHeight;
vid.verticalCenter = 0;
vid.horizontalCenter = 0;
else if(String(item.@type).toLowerCase()==”image”) //Create a spark Image component
var img:Image = new Image();
img.source = String(item.@target);
img.width = itemsWidth;
img.height = itemsHeight;
img.verticalCenter = 0;
img.horizontalCenter = 0;
else if(String(item.@type).toLowerCase()==”videoplayer”)  // Create a VideoPlayer component
var vidp:VideoPlayer = new VideoPlayer();
vidp.source = String(item.@target);
vidp.autoPlay = false;
vidp.scaleMode = “stretch”;
vidp.width = itemsWidth;
vidp.height = itemsHeight;
vidp.verticalCenter = 0;
vidp.horizontalCenter = 0;

placeItems(); // The next function that will place the items into the grid


Now we place all elements into the Tile Gallery

[cc lang=”actionscript”]
function placeItems()
//add all elements into the grid,
for each(var item in itemArray)
var grp = new Group(); //We prefer the Group component because it makes it easy to position elements inside

And we are done! Now you have your own components factory build only by XML and AS3 code.

View an Example Here:



Create/Edit XML with Flex and PHP (part 1/2)

This project of creating and editing an XML through Flex and PHP took me several days to figure out and gather all the info I wanted, and because there isn’t anything really helpfull out there I decided to make this post so that there is at least one viable piece of code for people to learn on.
So on to the code:

//in this example the structure that we will create is like this and stored in a file named “music.xml”:
// have in mind that the initial tag has already been created and we
// add the nodes in there
//we create the http request that will transfer the data to the php file upon call

<mx:HTTPService id=”filePush” showBusyCursor=”true” url=”assets/xmlWriter.php” headers=”null” requestTimeout=”18″ resultFormat=”e4x”
contentType=”application/x-www-form-urlencoded” method=”GET”&gt

//now we throw in some Action script
//to create a unique id for all entries

public function getID():Number

var start:Number=Math.round(Math.random()*today_date.getFullYear());
return start;

//and for the Date

public var today_date:Date = new Date();
public var date_str:String = (today_date.getDate()+”/”+(today_date.getMonth()+1)+”/”+today_date.getFullYear());

//and finaly the PHP code, pretty straightforward using SimpleXML:

$xml=simplexml_load_file($file) or die (“Unable to load XML”);
$vitals = $xml->addChild(‘newItemID’);
$vitals->addAttribute(‘id’, $_GET[‘id’]);
$vitals->addChild(‘titleID’, stripcslashes($_GET[‘title’]));
$vitals->addChild(‘urlID’, $_GET[‘urlID’]);
$vitals->addChild(‘dateID’, $_GET[‘date’]);
$vitals->addChild(‘descriptionID’, stripcslashes($_GET[‘desc’]));

$doc = new DOMDocument(‘1.0’);

$doc->preserveWhiteSpace = false;
$doc->loadXML( $xml->asXML());
$doc->formatOutput = true;

file_put_contents( $file, $doc->saveXML());


for the editing part wait for my next post which won’t be too late!