JSON:
HTML5 Game Implementations
- JSON
helps in getting image data.
Example: Image files name, width &
height, etc
- It is
very light weight java data interchange format based on JavaScript object
format.
- It is
Easy to implement as compare to XML.
- JSON
used to parse the object and JavaScript help in execute those parsed
object.
Example:
JSONExample="frames":
{
"chaingun.png":
{ //File name
"frame":
{
"x":
1766, //X coordinate
"y":
202, //Y coordinate
"w":
42, //width
"h":
34 //height
},
"rotated":
false, //Rotated or not
"trimmed":
true, //trim(Discussed further)
"spriteSourceSize":
{
"x":
38,
"y":
32,
"w":
42,
"h":
34
},
"sourceSize":
{
"w":
128,
"h":
128
}
},
How to
Parse JSON Data
- Retrieve
data from the server.
- XML
HttpRequest() allows JavaScript code to run on browser and fire request to
server on specific URL.
- Then
Server uses the Response and request format.
Steps
to send request.
- Create
a XML request object à new XML HttpRequest()
- xhr.open
(“GET”, ”URL”, Asynchronous)
- xhr.onload=function(){Body
Code}
- xhr.send();
Explanation:
var
setup=function(){
1. new XML HttpRequest() //Create new XML httpRequest
2. xhr.open (“GET”, ”weapon.JSON”, true) //method, resource url, bool
3. xhr.onload= function () {
parsedJSON
= JSON.parse(this.responseText); //Body
Code
console.log{
parsedJSON['frames']['chaingun_impact.png']['spriteSourceSize']['x']
};
4.xhr.send();
Atlases
Once
you get the ability to manipulate the CANVAS,
then it is necessary to work with its functionality. It is obvious if you
develop a big application like games then it must contain many image files. It
may be big images or small ones but you have a good set of images to implement
in your game set.
To
manage these small and big images you can use the concept of ATLASES.
Atlases
reduce the complexity and enhance the working capability of game or
application.
Modern
browser can handle maximum of 6 connection or request from the server and after
that all connection get blocked and it slow down that application. To enhance
this you have to reduce the complexity of request by dividing one heavy request
to small many requests. It reduces the load time of application.
To
implement this strategy you have to use the concept of JSON.
Bind
all small images into a big image and parse the image that you want to use. It
reduces the server request and enhances the application on the performance
basis.
This
technique is called Texture Atlasing . To implement this technique you can use a tool
called Texture Packer. Texture Packer binds
all the images into one big image and provides you to the way to parse your
desire image easily by JSON technique. Image discussed about the parsing of
particular image inside the box.
Let’s
observer the format of Images as code:
"chaingun.png": { //File
name1
"frame": {
"x":
1766, //input X
coordinate
"y":
202, //input Y coordinate
"w":
42,
"h":
34
},
"rotated":
false, //Rotated or not
"trimmed":
true, //trim to the desired object size
"spriteSourceSize":
{
"x":
38, // output X coordinate
"y":
32, //output Y coordinate
"w":
42, //output width after trimmed
"h":
34 //output height after trimmed
},
"sourceSize":
{
"w":
128, //Image’s
real width
"h":
128 //Image’s
real width
}
},
"chaingun_impact.png": { //File
name 2
"frame":
{
"x":
1162,
"y":
322,
"w":
38,
"h":
34
},
"rotated":
false,
"trimmed":
true,
"spriteSourceSize":
{
"x":
110,
"y":
111,
"w":
38,
"h":
34
},
"sourceSize":
{
"w":
256,
"h":
256
}
},
Comments