HTML5 Game Development
If
you bind up with the texture packer then it gives you lots of hope to move further.
Previous
discussed topics are: Atlases, JSON Implementation, HTML5, and Texture Packer.
For
providing a proper output you need to process these three functions:
- Define
variable for Object.
- Load
object with the help of JSON.
- Draw
the object.
FRAME TRIMMING
FRAME
TRIMMING is a method to remove the unused pixels from the rendered object.
After parsing the image from Texture packer, that image contains lots of unused
area over the boundary. To make that image work for the game you need to remove
the unused pixels and here you need this functionality.
Here
is an example, your main object is the blue one but you have parsed the
rectangular box. To remove those lots of unused area you need to work with
frame trimming.
For
this there is an function named ParseAtlas , The PasreAtlas Defination function
is used to remove the unused pixels.
For
Game Developer tools is the life of Developments Cycle. For any of the fields
tools play a important role rather in Arts, Technology or Geological. You
always need a tool for make you development to a level.
Past
history says that to develop 2D or 3D games HTML and JavaScript have high level
of rendering capabilities. These help to read the data efficiently fast.
To
develop a high level Video Game you must require a Game Map, under which your
robot moves. For developing the same you can use the technique of ATLAS.
That
is by combining lots of small images to the big one image.
To
make them more precise, there is a concept of TILED.
Tiled
is like layers of different Atlases. There is one object image atlas other is
map atlas, both the atlas are combined in a form of layers.
Declaration:
-
var
TILEDmap=class.extend( {
fullyLoaded: false,
load : function [map] {
}
)};
- var gMap=new TILEDmap();
Here
load is used to load the TILED JSON data. It is mainly use for large 2D tiled
data and works on RASTER SCAN ALGORITHM. In this each row is listed over
another one.
Steps to implement the
TILED:
Step 1: Parse the map using JSON
gMap.parseMapJSON(data.response);
this.CurrentMapData=JSON.parse(mapJSON);
Step 2: Loading of TILED Set Data.
Step 3: Tile Set Array à gets filled with objects.
Step 4: Tile Packet à get the image and coordinate position
of specific tile in a tile set Array.
getTilePacket
function();
Step 5: Drawing tiles à Use JSON to Draw the Tiles.
Use
getTilePacket(tileID) to Draw the tiles.
Step 6: Output à you must consider these is two:
a)
Where
to Draw the Tiles.
b)
Use
some Mathematics and calculation to draw is perfectly.
World (X.Y);
Code
Structure:
var TILEDMapClass =
Class.extend({
//
This is where we store the full parsed
// JSON of the map.json file.
currMapData: null,
// This is where we store the width and
// height of the map in tiles. This is
// in the 'width' and 'height' fields
// of map.json, respectively.
// The values 100 here are just set
// so these fields are initialized to
// something, rather than null.
numXTiles: 100,
numYTiles: 100,
//
The size of each individual map
// tile, in pixels. This is in the
// 'tilewidth' and 'tileheight' fields
// of map.json, respectively.
// The values 64 here are just set
// so these fields are initialized to
// something, rather than null.
tileSize: {
"x": 64,
"y": 64
},
// The size of the entire map,
// in pixels. This is calculated
// based on the 'numXTiles', 'numYTiles',
// and 'tileSize' parameters.
// The values 64 here are just set
// so these fields are initialized to
// something, rather than null.
pixelSize: {
"x": 64,
"y": 64
},
// Counter to keep track of how many tile
// images we have successfully loaded.
imgLoadCount: 0,
//
Boolean flag we set once our tile images
// has finished loading.
fullyLoaded: false,
// Load the json file at the url 'map' into
// memory. This is similar to the requests
// we've done in the past using
// XMLHttpRequests.
load: function (map) {
// Perform an XMLHttpRequest to grab
the
// JSON file at url 'map'.
xhrGet(map, function (data) {
// Once the XMLHttpRequest loads,
call the
// parseMapJSON method.
gMap.parseMapJSON(data.responseText);
});
},
parseMapJSON: function (mapJSON) {
// Call JSON.parse on 'mapJSON' and
store
// the resulting map data
gMap.currMapData = JSON.parse(mapJSON);
var map = gMap.currMapData;
// Set 'numXTiles' and 'numYTiles' from the
// 'width' and 'height' fields of our
parsed
// map data.
gMap.numXTiles = map.width;
gMap.numYTiles = map.height;
// Set the 'tileSize.x' and
'tileSize.y' fields
// from the 'tilewidth' and
'tileheight' fields
// of our parsed map data.
gMap.tileSize.x = map.tilewidth;
gMap.tileSize.y = map.tileheight;
// Set the 'pixelSize.x' and
'pixelSize.y' fields
// by multiplying the number of tiles
in our map
// by the size of each tile in pixels.
gMap.pixelSize.x = gMap.numXTiles *
gMap.tileSize.x;
gMap.pixelSize.y = gMap.numYTiles *
gMap.tileSize.y;
// Loop through
'map.tilesets', an Array, loading each
// of the provided tilesets as Images.
Increment the
// above 'imgLoadCount' field of
'TILEDMap' as each
// tileset is loading. Once all the tilesets are
// loaded, set the 'fullyLoaded' flag
to true.
//
// The 'src' value to load each new
Image from is in
// the 'image' property of the
'tilesets'.
//
// Note that TILED by default has a
rather ugly path
// for the 'image' property, which
we'll discuss in
// the answer video. You won't need to
worry about
// that right now.
//
// YOUR CODE HERE
}
});
var gMap = new TILEDMapClass();
Comments