PHP Classes

File: kinetic/js/_game/map.js

Recommend this page to a friend!
  Classes of Vitalij Mik   PHP Tiled to CraftyJS   kinetic/js/_game/map.js   Download  
File: kinetic/js/_game/map.js
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: PHP Tiled to CraftyJS
Convert game level tiled maps CraftyJS components
Author: By
Last change:
Date: 2 years ago
Size: 6,370 bytes
 

Contents

Class file image Download
var Map = function(stage,x,y){ this.stage = stage; this.x = x; this.y = y; this.tilesets = {}; this.map = null; this.tiles = {}; this.grid = {}; this.layers = {}; this.keyboard = new Kinetic.Keyboard(); this.gameDiv = $('#game'); this.moved = { x:0, y:0 }; } Map.prototype.setKeyboard = function(keyboard){ this.keyboard = keyboard; } Map.prototype.draw = function(){ if(!this.map) return; this.layers['background'].draw(); this.layers['object'].draw(); } Map.prototype.resetArea = function(){ this.map.centerAt(this.stage,this.x,this.y); } Map.prototype.load = function(level){ var map = this; $.ajax({ url:"js/maps/"+level, success:function(data){ map.data = data; map.init(); } }); } Map.prototype.update = function(frame){ var bg = this.drawLayer('background'); bg.drawBuffer(); var obj = this.drawLayer('object'); obj.drawBuffer(); //this.drawLayer('object'); //this.draw(); this.clear(); } Map.prototype.init = function(){ $('#info').show(); var stats = new Stats(); $('#fps').append(stats.domElement); stats.begin(); this.createLayers(); this.createTilesets(); this.createMap(); this.resetArea(); var background = this.drawLayer('background'); var objects = this.drawLayer('object'); this.draw(); this.clear(); var map = this; var speed = 2; var backgroundAnim = new Kinetic.Animation({ func:function(frame){ var velocity = speed+~~(speed*frame.timeDiff/1000); map.stage.attrs.x += velocity; map.update(frame); stats.update(); }, node:background }); var objectsAnim = new Kinetic.Animation({ func:function(frame){ var velocity = speed+~~(speed*frame.timeDiff/1000); map.stage.attrs.x += velocity; map.update(); stats.update(); }, node:objects }); backgroundAnim.start(); objectsAnim.start(); this.gameDiv.on('keyup keydown',function(e){ map.keyboard.dispatch(e); }); } Map.prototype.clear = function(){ for(var i in this.tiles){ var t = this.tiles[i]; if(!this.grid[i]){ t.attrs.visible = false; }else{ t.attrs.visible = true; } } this.grid = {}; } Map.prototype.drawLayer = function(name){ var area = this.map.area(this.stage,1); var layer = this.layers[name]; for(var m in area){ var x = area[m][0], //get X y = area[m][1], //get Y index = y*this.map._map.width+x, //get Index of array z=layer.index+1,image=null,pos,name, tile = layer.attrs.data[index]; //get objects if(tile > 0 && this.tilesets[tile]){ z++; tile = this.tilesets[tile]; //get sprite infos pos = this.map.pos2px(x, y); //calculate x/y to top/left position name = "Y"+y+"X"+x+"Z"+z; this.grid[name] = true; if(!this.tiles[name]){ image = new Kinetic.Image({ x: pos.left, y:pos.top-tile.height, image: tile.img, width: tile.width, height: tile.height, crop:{ x:tile.x, y:tile.y, width:tile.width, height:tile.height }, offset :tile.offset, zIndex:pos.top*z, name:name }); layer.add(image); this.tiles[name] = image; } } } return layer; } Map.prototype.createLayers = function(){ for(var l=0,ll=this.data.layers.length;l<ll;l++){ var layer = this.data.layers[l]; var data = layer.data || []; this.layers[layer.name]= new Kinetic.Layer({ name:layer.name, data:data, visible:layer.visible, listening:false }); if(data.length > 0){ this.layers[layer.name].beforeDraw(function(){ this.children.sort(function(a,b){ return a.attrs.zIndex-b.attrs.zIndex; }) }); } this.stage.add( this.layers[layer.name]); } } Map.prototype.createTilesets = function(){ for(var t = 0,tl = this.data.tilesets.length;t<tl;t++){ var set = this.data.tilesets[t]; if(Kinetic.Assets[set.name]){ var id = set.firstgid; for(var y = 0,yl=(set.imageheight/set.tileheight);y<yl;y++){ for(var x = 0,xl=(set.imagewidth/set.tilewidth);x<xl;x++){ var offset = set.tileoffset || { x:0, y:0 } this.tilesets[id] ={ img:Kinetic.Assets[set.name], x:(x*set.tilewidth), y:(y*set.tileheight), width:set.tilewidth, height:set.tileheight, offset:{ x:-offset.x, y:-offset.y } }; id++; } } } } } Map.prototype.createMap = function(){ if(this.data.orientation === "isometric"){ var mw = this.data.width, mh = this.data.height, tw = this.data.tilewidth, th = this.data.tileheight; this.map = new Kinetic.Isometric(tw, th, mw, mh); } }