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

Top Down Tilemap Editor beta

Hello all, this time I’m releasing one big tool as open-source, I have been working on this for the past few weeks and I think it can be of use to some.
So what is a top-down-tilemap-editor, it is a tool that can help when creating top-down maps for various games or simply to print them.

I struggled with many other programs and tilemap editors but almost all were lining towards platform games, however I’m mostly working with topdown games. So I started to create a map-editor that would be easy to use and would export a json string that I could import to my game and be ready to go.

Show case

So what can this map editor do for you:

  • Import of JSON as exported by it.
  • Export of JSON bases on the names of the tile images e.x (corner.png will become corner in the json)
  • Load of a sample Map for quickstart
  • Load extra items along with tiles
  • Load custom tiles from Dropbox
  • Print tiles for export
  • Adjust Width and Height of Map

You can fork or simply download it here: TNTMapEditor on Github

Or try it out here: TNTMapEditor DEMO

Feel free to post any bugs or request features on the github page. (Issues page)
If you use it for a project drop me a line if you wish.

Sample export: http://nightlycoding.com/wordpress/wp-content/uploads/2014/03/www.netgfx.com_trunk_games_tntmap_preview.pdf

Replay system for KineticJS and HTML5 Canvas

I have been struggling with the lack of replay procedures in HTML5 gaming, with flash things were quite easy because we could save all of our game sessions as movies or swf files that could be later on viewed. With HTML5 we don’t quite have that, or it is not as easy. So I was thinking of ways to produce movies from canvas.
And then it hit me… images can produced as urls and canvas can be exported as an image, and what are continuously changing images? A movie!

So I went on and made a codepen about this. And quite frankly it kinda looks awesome. Of course some more brilliant minds than mine could dig into this and help me make it truly useful for all.

So let’s see the pen first. The procedure is as follows:

We click record and move the box around
Then we stop and we watch the movie that was produced.

See the Pen Record & playback for canvas by Michael Dobekidis (@netgfx) on CodePen.

Continue reading

Quick Tip: Parse single object from unknown key-values JSON.

Sometimes we need to read data from JSON but we are not sure which value corresponds to a key or we need to parse a really large object. So here’s a tip about how to read key names and their corresponding values from a JSON object.

Let’s assume the following JSON structure:

var gameOps = {"tanks":[
{
    "type":"T1",
    "velocity":"800",
    "speed":"100",
    "bulletType":"t1Ammo",
    "damagePerHit":"0.25",
    "tankWidth":"74",
    "tankHeight":"128",
    "bulletWidth":"7",
    "bulletHeight":"15"
},
{
    "type":"T2",
    "velocity":"800",
    "speed":"100",
    "bulletType":"t1Ammo",
    "damagePerHit":"0.25"
},
{
    "type":"",
    "velocity":"",
    "speed":"",
    "bulletType":"",
    "damagePerHit":""
}

]};

In this object we notice how the first object has values that the others do not, if we tried to parse it based on the first object the code would halt on error because it would be unable to find the rest of the keys.

So what if we only wanted one of the objects but we did not know what properties it has?

Let’s consider the following snippet:

var myObj = getOptions(gameOps);

function getOptions(type, opts){
        var counter = 0;
        var obj = {};
           
        for(var i = 0; i<opts.tanks.length; i++){
            var temp = opts.tanks[counter];
            var keys = Object.keys( temp );
           
            if( temp.type == type){
               
                for(var j=0; j<keys.length; j++){
                   
                    obj[ keys[ j ] ] = temp[ keys[ j ] ];
               
                        }
                     }
           
            counter += 1;
        }
       
        return obj;
    }

Here we check if the desired “type” is among the object properties, if it is we read the available “keys” that the object has, and then we construct another object with those keys and values.

Browser compatibility:
This solution is compatible with
Firefox (Gecko) – 4 (2.0)
Chrome – 5
Internet Explorer – 9
Opera – 12
Safari – 5

Because it uses: Object.keys(obj)

Read more here: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/keys