diff --git a/examples/assets/pics/archmage_in_your_face.png b/examples/assets/pics/archmage_in_your_face.png new file mode 100644 index 00000000..c9bfa77e Binary files /dev/null and b/examples/assets/pics/archmage_in_your_face.png differ diff --git a/examples/assets/pics/barbarian_loading.png b/examples/assets/pics/barbarian_loading.png new file mode 100644 index 00000000..3acf858e Binary files /dev/null and b/examples/assets/pics/barbarian_loading.png differ diff --git a/examples/assets/pics/contra1.png b/examples/assets/pics/contra1.png new file mode 100644 index 00000000..7c2708e5 Binary files /dev/null and b/examples/assets/pics/contra1.png differ diff --git a/examples/assets/pics/contra2.png b/examples/assets/pics/contra2.png new file mode 100644 index 00000000..a00d44db Binary files /dev/null and b/examples/assets/pics/contra2.png differ diff --git a/examples/assets/pics/contra3.png b/examples/assets/pics/contra3.png new file mode 100644 index 00000000..5e2976ab Binary files /dev/null and b/examples/assets/pics/contra3.png differ diff --git a/examples/assets/pics/cougar_ihsf.png b/examples/assets/pics/cougar_ihsf.png new file mode 100644 index 00000000..312077c1 Binary files /dev/null and b/examples/assets/pics/cougar_ihsf.png differ diff --git a/examples/assets/sprites/boom32wh12.png b/examples/assets/sprites/boom32wh12.png new file mode 100644 index 00000000..685d85aa Binary files /dev/null and b/examples/assets/sprites/boom32wh12.png differ diff --git a/examples/assets/sprites/cards80x112.png b/examples/assets/sprites/cards80x112.png new file mode 100644 index 00000000..7f2d4903 Binary files /dev/null and b/examples/assets/sprites/cards80x112.png differ diff --git a/examples/assets/sprites/diamonds32x5.png b/examples/assets/sprites/diamonds32x5.png new file mode 100644 index 00000000..c18bfa41 Binary files /dev/null and b/examples/assets/sprites/diamonds32x5.png differ diff --git a/examples/assets/sprites/fruitnveg32wh37.png b/examples/assets/sprites/fruitnveg32wh37.png new file mode 100644 index 00000000..5d371cbf Binary files /dev/null and b/examples/assets/sprites/fruitnveg32wh37.png differ diff --git a/examples/js.php b/examples/js.php index c60f0eb0..f2ac05b6 100644 --- a/examples/js.php +++ b/examples/js.php @@ -105,4 +105,5 @@ + diff --git a/examples/tilemap.php b/examples/tilemap.php index 1b4f9600..e09ec8c4 100644 --- a/examples/tilemap.php +++ b/examples/tilemap.php @@ -26,6 +26,14 @@ } + var canvas; + var context; + var baseTexture; + var texture; + var s; + var r; + var t; + function create() { // game, key, mapData, format, resizeWorld, tileWidth, tileHeight @@ -33,12 +41,17 @@ // This creates the tilemap using the csv and tile sheet we loaded. // We tell it use to CSV format parser. The 16x16 are the tile sizes. // The 4th parameter (true) tells the game world to resize itself based on the map dimensions or not. - var t = new Phaser.Tilemap(game, 'csvtiles', 'csvtest', Phaser.Tilemap.FORMAT_CSV, true, 16, 16); + + t = new Phaser.Tilemap(game, 'csvtiles', 'csvtest', Phaser.Tilemap.FORMAT_CSV, true, 16, 16); + + r = new Phaser.TilemapRenderer(game); } function update() { + r.render(t); + if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) { game.camera.x -= 4; diff --git a/src/pixi/display/Sprite.js b/src/pixi/display/Sprite.js index e539060e..4041d43c 100644 --- a/src/pixi/display/Sprite.js +++ b/src/pixi/display/Sprite.js @@ -152,7 +152,7 @@ PIXI.Sprite.prototype.setTexture = function(texture) PIXI.Sprite.prototype.onTextureUpdate = function(event) { //this.texture.removeEventListener( 'update', this.onTextureUpdateBind ); -console.log('pot'); + // so if _width is 0 then width was not set.. if(this._width)this.scale.x = this._width / this.texture.frame.width; if(this._height)this.scale.y = this._height / this.texture.frame.height; diff --git a/src/tilemap/Tile.js b/src/tilemap/Tile.js index a13cde8e..94795789 100644 --- a/src/tilemap/Tile.js +++ b/src/tilemap/Tile.js @@ -21,6 +21,12 @@ Phaser.Tile = function (game, tilemap, index, width, height) { */ this.mass = 1.0; + /** + * Indicating this Tile doesn't collide at all. + * @type {bool} + */ + this.collideNone = true; + /** * Indicating collide with any object on the left. * @type {bool} @@ -62,7 +68,6 @@ Phaser.Tile = function (game, tilemap, index, width, height) { this.index = index; this.width = width; this.height = height; - this.allowCollisions = Phaser.Types.NONE; }; @@ -82,44 +87,25 @@ Phaser.Tile.prototype = { * @param separateX {bool} Enable seprate at x-axis. * @param separateY {bool} Enable seprate at y-axis. */ - setCollision: function (collision, resetCollisions, separateX, separateY) { + setCollision: function (left, right, up, down, reset, separateX, separateY) { - if (resetCollisions) + if (reset) { this.resetCollision(); } this.separateX = separateX; this.separateY = separateY; - this.allowCollisions = collision; - if (collision & Phaser.Types.ANY) - { - this.collideLeft = true; - this.collideRight = true; - this.collideUp = true; - this.collideDown = true; - return; - } + this.collideNone = true; + this.collideLeft = left; + this.collideRight = right; + this.collideUp = up; + this.collideDown = down; - if (collision & Phaser.Types.LEFT || collision & Phaser.Types.WALL) + if (left || right || up || down) { - this.collideLeft = true; - } - - if (collision & Phaser.Types.RIGHT || collision & Phaser.Types.WALL) - { - this.collideRight = true; - } - - if (collision & Phaser.Types.UP || collision & Phaser.Types.CEILING) - { - this.collideUp = true; - } - - if (collision & Phaser.Types.DOWN || collision & Phaser.Types.CEILING) - { - this.collideDown = true; + this.collideNone = false; } }, @@ -129,7 +115,7 @@ Phaser.Tile.prototype = { */ resetCollision: function () { - this.allowCollisions = Phaser.Types.NONE; + this.collideNone = true; this.collideLeft = false; this.collideRight = false; this.collideUp = false; @@ -144,7 +130,8 @@ Phaser.Tile.prototype = { **/ toString: function () { - return "[{Tile (index=" + this.index + " collisions=" + this.allowCollisions + " width=" + this.width + " height=" + this.height + ")}]"; + // return "[{Tile (index=" + this.index + " collisions=" + this.allowCollisions + " width=" + this.width + " height=" + this.height + ")}]"; + return ''; } diff --git a/src/tilemap/Tilemap.js b/src/tilemap/Tilemap.js index 9af1e386..a70b7128 100644 --- a/src/tilemap/Tilemap.js +++ b/src/tilemap/Tilemap.js @@ -46,9 +46,6 @@ Phaser.Tilemap = function (game, key, mapData, format, resizeWorld, tileWidth, t this.exists = true; this.visible = true; - // this.texture = new Phaser.Display.Texture(this); - // this.transform = new Phaser.Components.TransformManager(this); - this.tiles = []; this.layers = []; this.mapFormat = format; diff --git a/src/tilemap/TilemapLayer.js b/src/tilemap/TilemapLayer.js index a57a1fec..cea29098 100644 --- a/src/tilemap/TilemapLayer.js +++ b/src/tilemap/TilemapLayer.js @@ -67,27 +67,28 @@ Phaser.TilemapLayer = function (parent, id, key, mapFormat, name, tileWidth, til * @type {number} */ this.tileSpacing = 0; + this.parent = parent; this.game = parent.game; this.ID = id; this.name = name; + this.mapFormat = mapFormat; + this.tileWidth = tileWidth; this.tileHeight = tileHeight; + this.boundsInTiles = new Phaser.Rectangle(); - // this.texture = new Phaser.Display.Texture(this); - // this.transform = new Phaser.Components.TransformManager(this); - - // if (key !== null) - // { - // this.texture.loadImage(key, false); - // } else { - // this.texture.opaque = true; - // } + this.tileset = this.game.cache.getImage(key); - // Handy proxies - // this.alpha = this.texture.alpha; + this.alpha = 1; + this.canvas = Phaser.Canvas.create(this.game.width, this.game.height); + this.context = this.canvas.getContext('2d'); + this.baseTexture = new PIXI.BaseTexture(this.canvas); + this.texture = new PIXI.Texture(this.baseTexture); + this.sprite = new PIXI.Sprite(this.texture); + this.game.stage._stage.addChild(this.sprite); this.mapData = []; this._tempTileBlock = []; @@ -470,9 +471,9 @@ Phaser.TilemapLayer.prototype = { i = 1; } - for (var ty = this.tileMargin; ty < this.texture.height; ty += (this.tileHeight + this.tileSpacing)) + for (var ty = this.tileMargin; ty < this.tileset.height; ty += (this.tileHeight + this.tileSpacing)) { - for (var tx = this.tileMargin; tx < this.texture.width; tx += (this.tileWidth + this.tileSpacing)) + for (var tx = this.tileMargin; tx < this.tileset.width; tx += (this.tileWidth + this.tileSpacing)) { this.tileOffsets[i] = { x: tx, diff --git a/src/tilemap/TilemapRenderer.js b/src/tilemap/TilemapRenderer.js new file mode 100644 index 00000000..24075450 --- /dev/null +++ b/src/tilemap/TilemapRenderer.js @@ -0,0 +1,149 @@ +Phaser.TilemapRenderer = function (game) { + + this.game = game; + + // Local rendering related temp vars to help avoid gc spikes through constant var creation + this._ga = 1; + this._dx = 0; + this._dy = 0; + this._dw = 0; + this._dh = 0; + this._tx = 0; + this._ty = 0; + this._tl = 0; + this._maxX = 0; + this._maxY = 0; + this._startX = 0; + this._startY = 0; + +}; + +Phaser.TilemapRenderer.prototype = { + + /** + * Render a tilemap to a canvas. + * @param tilemap {Tilemap} The tilemap data to render. + */ + render: function (tilemap) { + + // Loop through the layers + this._tl = tilemap.layers.length; + + for (var i = 0; i < this._tl; i++) + { + if (tilemap.layers[i].visible == false || tilemap.layers[i].alpha < 0.1) + { + continue; + } + + var layer = tilemap.layers[i]; + + // Work out how many tiles we can fit into our canvas and round it up for the edges + this._maxX = this.game.math.ceil(layer.canvas.width / layer.tileWidth) + 1; + this._maxY = this.game.math.ceil(layer.canvas.height / layer.tileHeight) + 1; + + // And now work out where in the tilemap the camera actually is + // this._startX = this.game.math.floor(camera.worldView.x / layer.tileWidth); + // this._startY = this.game.math.floor(camera.worldView.y / layer.tileHeight); + this._startX = this.game.math.floor(this.game.camera.x / layer.tileWidth); + this._startY = this.game.math.floor(this.game.camera.y / layer.tileHeight); + + // Tilemap bounds check + if (this._startX < 0) + { + this._startX = 0; + } + + if (this._startY < 0) + { + this._startY = 0; + } + + if (this._maxX > layer.widthInTiles) + { + this._maxX = layer.widthInTiles; + } + + if (this._maxY > layer.heightInTiles) + { + this._maxY = layer.heightInTiles; + } + + if (this._startX + this._maxX > layer.widthInTiles) + { + this._startX = layer.widthInTiles - this._maxX; + } + + if (this._startY + this._maxY > layer.heightInTiles) + { + this._startY = layer.heightInTiles - this._maxY; + } + + // Finally get the offset to avoid the blocky movement + //this._dx = (camera.screenView.x * layer.transform.scrollFactor.x) - (camera.worldView.x * layer.transform.scrollFactor.x); + //this._dy = (camera.screenView.y * layer.transform.scrollFactor.y) - (camera.worldView.y * layer.transform.scrollFactor.y); + //this._dx = (camera.screenView.x * this.scrollFactor.x) + this.x - (camera.worldView.x * this.scrollFactor.x); + //this._dy = (camera.screenView.y * this.scrollFactor.y) + this.y - (camera.worldView.y * this.scrollFactor.y); + this._dx = 0; + this._dy = 0; + + this._dx += -(this.game.camera.x - (this._startX * layer.tileWidth)); + this._dy += -(this.game.camera.y - (this._startY * layer.tileHeight)); + + this._tx = this._dx; + this._ty = this._dy; + + // Alpha + if (layer.alpha !== 1) + { + this._ga = layer.context.globalAlpha; + layer.context.globalAlpha = layer.alpha; + } + + layer.context.clearRect(0, 0, layer.canvas.width, layer.canvas.height); + + for (var row = this._startY; row < this._startY + this._maxY; row++) + { + this._columnData = layer.mapData[row]; + + for (var tile = this._startX; tile < this._startX + this._maxX; tile++) + { + if (layer.tileOffsets[this._columnData[tile]]) + { + layer.context.drawImage( + layer.tileset, + layer.tileOffsets[this._columnData[tile]].x, + layer.tileOffsets[this._columnData[tile]].y, + layer.tileWidth, + layer.tileHeight, + this._tx, + this._ty, + layer.tileWidth, + layer.tileHeight + ); + } + + this._tx += layer.tileWidth; + + } + + this._tx = this._dx; + this._ty += layer.tileHeight; + + } + + if (this._ga > -1) + { + layer.context.globalAlpha = this._ga; + } + + // Only needed if running in WebGL, otherwise this array will never get cleared down I don't think! + PIXI.texturesToUpdate.push(layer.baseTexture); + + } + + return true; + + } + +}; \ No newline at end of file