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

facebooktwittergoogle_pluspinterestlinkedin
linkedinrss

My game template on Codecanyon!

Finally I have had some free time and thought to try my luck with Codecanyon, which is a place were authors and coders get to monetize their works and for people to get some high-quality code/themes/templates/apps build-in and ready to go.

So I managed to “transform” my game of Easter-egg-hunting into a framework for gathering games (games where items drop and the player has to collect them) I added some code, removed much, and generalized the core to actually adapt and be manageable through a JS file that the user can alter to create his own game.

The template offers:

  • mobile and modern browser support
  • media-queries baked inside
  • responsive gameplay
  • auto pause when the player changes tab or browser loses focus
  • highly customizable options like: background, items, gathering image, score, etc…
  • High performace even on mobile devices, by using multiple canvases
  • And per frame collision detection
  • So check it out, and buy if you also want to create your own gathering game…

    http://codecanyon.net/item/gathering-items-game-template-jquery-tweenmax/4525985

    Note: The template uses jQuery, jQueryUI for dragging, and GSAP to manage animation and update functions per frame.

    facebooktwittergoogle_pluspinterestlinkedin
    linkedinrss

HTML5 Video on Canvas + pixel manipulation

One of my latest experiments was to create a fullscreen background with a video, for this I used HTML5 video tag and loaded it on a canvas element.
Although it worked it somehow felt incomplete because it was simply a video as background, it needed some edge add to it, for this I decided to use Pixelate library http://close-pixelate.desandro.com/ and extend it so it supported video as well as images.
Github extension can be found also here:

https://github.com/netgfx/close-pixelate

** Note This example is best viewed with latest Chrome or Webkit browser. **

DEMO

(more…)

facebooktwittergoogle_pluspinterestlinkedin
linkedinrss

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>

(more…)

facebooktwittergoogle_pluspinterestlinkedin
linkedinrss

ThreeJS camera control with TweenMax

Recently I started exploring the world of 3D, I mostly wanted to work in a familiar environment so I chose ThreeJS an excellent framework for 3D construction/animation with javascript. And of course I wanted to inject my favorite tool for javascript animation TweenMax.
So after a few examples and documentation reading I came up with a very simple example/tutorial of how to control various aspects of the camera in 3D space using TweenMax to animate properties and end-values.
For this example I also used the extremely helpful threejs boilerplate

You can view a DEMO here

(more…)

facebooktwittergoogle_pluspinterestlinkedin
linkedinrss

Image Slideshow with PreloadJS, JQuery and TweenMax

This is a tutorial about how to create a simple slideshow element with dynamicaly loaded images and some cool animations.
PreloadJS is a rather new JS library that aims to help with the loading of various assets, in our case it will provide us with the info of when the images are fully loaded and a value of percentage completion of this task.

DEMO

(more…)

facebooktwittergoogle_pluspinterestlinkedin
linkedinrss

Greensock-TweenMax Javascript animation (JQuery based)

Hello
This is the first post in this blog for javascript based stuff. I am using greensock products for years for flash/flex/air projects and I would not change their animation power with anything. So when greensock announced port to javascript I was thrilled, and excited to try out the “new” implementation… but wait… there is nothing “new” to the way we declare things… its the same compact and straightforward structure I used in flash! Amazing!

Plus it works with JQuery out of the box AND supports CSS animations, HTML properties animations, timeline animations and a bunch of other cool stuff.

So for my next trick I created a page with the pacman eating some dots, this was done in 10′ and the javascript required as you will see its minimum.

!Note: best viewed with a modern browser as I used css3 for the shapes.

Check it out: http://www.netgfx.com/trunk/animateJS/

Learn more about Greensock and its animation platform here: http://www.greensock.com/v12/

facebooktwittergoogle_pluspinterestlinkedin
linkedinrss

Flowplayer auto focus with JS (FF too)

I was asked to find a way to enable auto focus on flowplayer without the user to click anything at all. After much search and thought… I figured out an easy way to do this using the Flowplayer API and JS.
In this example I give auto focus the moment the player is done loading in HTML and by pressing num-key: “2″ it toggles FullScreen.

note: This works on Firefox too.

("player", "../flowplayer/flowplayer.commercial-3.2.5.swf", {
clip: {
url: 'SOMEURL',
provider: 'rtmp',
},
onLoad:function(){
window.document.playerElementID.focus();
},
onKeyPress:(function(e){
if(e == 50){
this.toggleFullscreen();
}
}),
plugins: {
rtmp: {
url: '../flowplayer/flowplayer.rtmp-3.2.3.swf',
netConnectionUrl: 'rtmp://SOMEURL'
}
}
});

Special thanks to @Havoc24k

facebooktwittergoogle_pluspinterestlinkedin
linkedinrss