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

Add/Remove text from HTML using only CSS

This is a neat trick that recently came very handy as I wanted to change the text of a paragraph tag but only had access to the .css file of the page.

Heres what it looked like:



<p class="someclass">
   <a href="#">Some Link</a>
   "Some text embeded in the paragraph tag, oh my!"
</p>

Yes it was that bad. So here’s what I came up with (might be around for sometime now, but could not find something fast in google)

The CSS:


.someclass{
   color: rgba(0,0,0,0); /* to make inside text invisible */
   text-align: center;
   white-space: pre;
}

.someclass a {
   display: none;
}

.someclass:before {
   content: "Powered by Netgfx.com";
   color:#ffffff;
   text-align: center;
   font-weight: bold;
}

So what we did here was to make the existing text invisible by applying a color using rgba and setting the alpha to 0, and then add some new text with the css “content” attribute and the pseudo-selector :before/:after.

Problem solved!

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

Text Effects with TimelineMax

Text is one of the most important aspects of web-development, someone may have great pictures, effects, and complex animations but if there is no content in text, chances are that the viewer will start looking elsewhere. So since text is such a great aspect of the website or application why not try and make it a little more appealing and exciting, after all it’s not only what you say (write) but how you present it.

So I thought to create a series of effects and animations that modify and give text a “Wow factor”.

[[code]]czowOlwiXCI7e1smKiZdfQ==[[/code]]<a href="http://codepen.io/netgfx/pen/DpbIy">Check out this Pen!</a>

Continue reading

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

AS3 send BitmapData to backend efficiently

I was recently asked to send a medium/large file to a backend server running with php. At first I tried sending byteArray but that got messed up from JSON.strigify then I thought to convert the byteArray to base64 format. Although it worked an image of 500×700 occupied ~500kb on the database so it was unacceptable.
The solution was to compess the byteArray and send it, and then decompress it when I received it again. And here is how I did it:


public static function deconstructBitmap(bmp:BitmapData):Object
    {
      // converting the bitmapdata into a byteArray
      var byteArray:ByteArray = bmp.getPixels(bmp.rect);
      // compressing using the default algorithm 'zlib'
      byteArray.compress();
      var enc:Base64Encoder = new Base64Encoder();  
      var b64;
      enc.encodeBytes(byteArray);
      // joining all in one line
      b64 = enc.drain().split("\n").join("");
      // the rectangle is needed for re-contstruction
      return {'bmpData':b64,'rect':bmp.rect};
    }

And now we have a compressed byteArray with our bitmapData the 500×700 bitmap data now occupies ~13kb on the database!

And here is the re-construction of the byteArray into bitmapData ready to be inserted to <s:Image/> or any other component.


public static function constructBitmap(obj:Object):BitmapData
    {
      // to avoid errors
      if(obj!==''&&obj!==undefined&&obj!==null&&obj.bmpData!=='ByteArray'){
        var dec:Base64Decoder = new Base64Decoder();
        dec.decode(obj.bmpData); // decoding using the same algorithm
        var newByteArr:ByteArray=dec.toByteArray();
        newByteArr.uncompress();
        // end of decoding //
        
        var bitmapData:BitmapData = new BitmapData(obj.rect.width, obj.rect.height);
        bitmapData.setPixels(bitmapData.rect, newByteArr);
        return bitmapData;
      }
      else
      {
        return null;
      }
    }

And thats it, two simple functions to make you and your database happy!

Enjoy!

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

Capitalize first letter of a word JS & AS3 (quick tip)

After 10′ of searching for a fast solution I came up with this, I suspect there is a much cooler way of capitalizing with AS3, but if I can’t find it on 2 pages of search results it pretty much doesn’t exist…
So here we go, this might work only for single words but that was the intention.


function capWord(source) {
var cap = String(source).substr(0,1);
cap = String(cap).toUpperCase()+String(source).slice(1);
trace('A capitalized '+cap); // A capitalized Word
window.console.log('A capitalized '+cap);
}

enjoy!

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

Re-arrange objects in a VGroup by Drag&Drop (Flex Spark)

Adding drag and drop support for Group components, as well as swapping of children or reorder.
This might seem like a straightforward issue and an easy solution, but as I found out… only list based views have the ability to re-arrange their children via dragging and droping. But there is one hidden gem, all the Group based components have build-in support for drag and drop operations, and whilst the user cannot enable directly the dropEnabled option (which allows the re-arrange like operation), it is fairly easy to create a custom functionality to imitate it.
Continue reading

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

Flex Repeater component tips and tricks – Pt.1

My latest project demanded of me to go deep into the world of the repeaters, and I managed to learn much about limitations, tricks, and some very usefull information. Which I will be sharing with you in the following weeks…

Tip #1
——

Fill a repeater from XML.
public var myXML:String = “myXML.xml”;
public function Init():void
{
var service:HTTPService = new HTTPService();
service.url = myXML;

service.method = “GET”;
service.contentType = “application/x-www-form-urlencoded”;
service.resultFormat = “e4x”;

service.requestTimeout = 24;

service.headers = null;
service.send();

service.addEventListener(ResultEvent.RESULT, this.ResultData);

}

public function realResultData(e:ResultEvent):void
{
var result:XML=e.result as XML;
setit = result;
myRepeater.dataProvider = setit.data;
}

———–
XML structure:

<?xml version=”1.0″ encoding=”UTF-8″?>
<xml>
<data>
<item path=”www.google.com”/>
<item path=”www.google.com”/>
<item path=”www.google.com”/>
<item path=”www.google.com”/>
<item path=”www.google.com”/>
</data>
</xml>

Tip #2
——

Get the unique IDs from two or three dimensional repeaters using event.target.instanceIndices and event.currentTarget.repeaterIndices
(2D Repeaters, 3D Repeater)
Lets assume the following repeater structure:

<mx:Repeater id=”repPrime”>
<mx:Repeater id=”repMain” >

<mx:Repeater id=”rep” count=”50″>
<mx:HBox width=”500″ y=”50″ id=”box1″>

<mx:TextArea id=”dummyTa” text=”Sample Text” selectable=”false” editable=”false” borderStyle=”none” height=”100″/>
<mx:VBox height=”100%”>
<mx:Button id=”dummyBtn” label=”Sample Button” height=”40″/>
<mx:Button id=”dummyBtn2″ creationComplete=”setColors(dummyBtn2[getNum(event.target.instanceIndices)][getNum2(event.target.instanceIndices)] [getNum3(event.target.instanceIndices)])” label=”Sample Button” height=”40″/>
</mx:VBox>
</mx:HBox>

</mx:Repeater>

</mx:Repeater>
</mx:Repeater>

/*to receive the numbers of the repeater indices we use the following methods */

/*The number here is in the form of 0,0,0 for a 3 dimensional array */
public function getNum(num):Number
{
var n:Number;
var str:String;
String(num).length;

str=String((Number(String(num).length)-1)*-1);
n=Number(String(num).slice(0,Number(str)));

return n;
}

public function getNum2(num):Number
{
var n:Number;
var str:String;
if (Number(String(num).slice(-2))>=10)
{
str=String(num).slice(0,-3);
if(Number(str.slice(-2))>=10)
{
n=Number(str.slice(-2));
}
else
{
n=Number(str.slice(-1));
}
}
else
{
str=String(num).slice(0,-2);
if(Number(str.slice(-2))>=10)
{
n=Number(str.slice(-2));}
else
{
n=Number(str.slice(-1));
}
}

return n;
}

public function getNum3(num):Number
{
var n:Number;
var str:String;

if(Number(String(num).slice(-2))>=10)
{n=Number(String(num).slice(-2));}
else
{n=Number(String(num).slice(-1))}

repeaterNum3D3=n;
return n;
}

//the function that changes the Text color of the button
public function setColors(id)
{
id.setStyle(“color”,”#FF0000″);
}

Tip #3
——

When using an Image component within repeater or a link event do not use event.target.instanceIndices to receive the number of repetition instead use event.currentTarget.repeaterIndices

until next week have fun!

Facebooktwittergoogle_pluspinterestlinkedin
linkedin