Phaser.io how to use atlasHash to your advantage.

Lately I have been using Phaser.io 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: https://www.codeandweb.com/texturepacker

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

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

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:

<main>
<items>
<item target=”assets/img.jpg” type=”image”/>
<item target=”http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-960.mp4″ type=”video”/>
<item target=”http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-960.mp4″ type=”video”/>
<item target=”http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-960.mp4″ type=”video”/>
<item target=”http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-960.mp4″ type=”video”/>
<item target=”assets/img.jpg” type=”image”/>
<item target=”assets/img.jpg” type=”image”/>
<item target=”assets/img.jpg” type=”image”/>
</items>
</main>

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

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

Now some AS3 code:

we will create the loader function

[cc lang=”actionscript”]

private function buildItemsFromXML()
{
var xmlCall:XMLService = new XMLService();
xmlCall.makeCall(XMLSource);
xmlCall.service.addEventListener(ResultEvent.RESULT,resultResponse);
xmlCall.service.addEventListener(FaultEvent.FAULT,faultResponse);
}

//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
{
//trace(item.@type+”::”+item.@target);
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;
vid.validateNow();
vid.invalidateDisplayList();
itemArray.push(vid);
}
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;
img.validateNow();
img.invalidateDisplayList();
itemArray.push(img);
}
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;
vidp.validateNow();
vidp.invalidateDisplayList();
itemArray.push(vidp);
}
}

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

[/cc]

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
grp.addElement(item);
grid.addElement(grp);
grid.validateNow();
grid.invalidateDisplayList();
}
}
[/cc]
 

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

View an Example Here: http://www.netgfx.com/GridGallery/

Enjoy!

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

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”:
//<music&gt
//<newFile&gt
//<id>…</id&gt
//<title>…</title&gt
//<urlID>…</urlID&gt
//<descriptionID>…</descriptionID&gt
//<dateID>…</dateID&gt
//</newFile&gt
//…
//
// 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
<mx:request&gt
<id>{getID()}</id&gt
<title>{titlePush.text}</title&gt
<url>{urlString+titlePush.text}</url&gt
<date>{date_str}</date&gt
<desc>{desc.text}</desc&gt
</mx:request&gt
</mx:HTTPService&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());
start=(start+(today_date.getMonth()+1)+today_date.getDay())*today_date.getSeconds();
return start;
}

//and for the Date

[Bindable]
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:

<?php
$file=”music.xml”;
$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());

?&gt

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

Facebooktwittergoogle_pluspinterestlinkedin
linkedin