Mirrors/phaser
2
0
Fork 0
mirror of https://github.com/photonstorm/phaser synced 2024-09-20 14:31:55 +00:00
Code Issues Projects Releases Packages Wiki Activity

Fixed a bug in the tilemap rendering so the tile offsets were wrong. Now renders perfectly :) Also fixed issue that would cause the World to resize smaller than the game size (not allowed for rendering reasons).

Browse source
This commit is contained in:
Richard Davey 2013-09-12 02:18:23 +01:00
parent 89b00db103
commit 3d22d0e169
8 changed files with 180 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
examples/assets/maps/mario1.json Normal file
View file

File diff suppressed because one or more lines are too long

BIN
examples/assets/maps/mario1.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.1 KiB

78
examples/mario.php Normal file
View file

@ -0,0 +1,78 @@
<!DOCTYPE HTML>
<html>
<head>
<title>phaser.js - a new beginning</title>
<?php
require('js.php');
?>
</head>
<body>
<script type="text/javascript">
(function () {
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update, render: render });
function preload() {
// First we load our map data (a csv file)
game.load.text('marioMap', 'assets/maps/mario1.json');
// Then we load the actual tile sheet image
game.load.image('marioTiles', 'assets/maps/mario1.png');
}
var r;
var t;
function create() {
game.stage.backgroundColor = '#787878';
// game, key, mapData, format, resizeWorld, tileWidth, tileHeight
// 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.
t = new Phaser.Tilemap(game, 'marioTiles', 'marioMap', Phaser.Tilemap.FORMAT_TILED_JSON);
// SHould be added to the World and rendered automatically :)
r = new Phaser.TilemapRenderer(game);
}
function update() {
r.render(t);
if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT))
{
game.camera.x -= 8;
}
else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT))
{
game.camera.x += 8;
}
if (game.input.keyboard.isDown(Phaser.Keyboard.UP))
{
game.camera.y -= 8;
}
else if (game.input.keyboard.isDown(Phaser.Keyboard.DOWN))
{
game.camera.y += 8;
}
}
function render() {
}
})();
</script>
</body>
</html>

9
examples/tilemap.php
View file

@ -44,6 +44,7 @@
t = new Phaser.Tilemap(game, 'csvtiles', 'csvtest', Phaser.Tilemap.FORMAT_CSV, true, 16, 16);
// SHould be added to the World and rendered automatically :)
r = new Phaser.TilemapRenderer(game);
}
@ -54,20 +55,20 @@
if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT))
{
game.camera.x -= 4;
game.camera.x -= 8;
}
else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT))
{
game.camera.x += 4;
game.camera.x += 8;
}
if (game.input.keyboard.isDown(Phaser.Keyboard.UP))
{
game.camera.y -= 4;
game.camera.y -= 8;
}
else if (game.input.keyboard.isDown(Phaser.Keyboard.DOWN))
{
game.camera.y += 4;
game.camera.y += 8;
}
}

11
src/core/World.js
View file

@ -97,8 +97,15 @@ Phaser.World.prototype = {
*/
setSize: function (width, height) {
this.bounds.width = width;
this.bounds.height = height;
if (width >= this.game.width)
{
this.bounds.width = width;
}
if (height >= this.game.height)
{
this.bounds.height = height;
}
}

2
src/tilemap/Tilemap.js
View file

@ -100,6 +100,7 @@ Phaser.Tilemap.prototype = {
}
layer.updateBounds();
layer.createCanvas();
var tileQuantity = layer.parseTileOffsets();
@ -159,6 +160,7 @@ Phaser.Tilemap.prototype = {
}
layer.updateBounds();
layer.createCanvas();
var tileQuantity = layer.parseTileOffsets();

51
src/tilemap/TilemapLayer.js
View file

@ -82,13 +82,23 @@ Phaser.TilemapLayer = function (parent, id, key, mapFormat, name, tileWidth, til
this.tileset = this.game.cache.getImage(key);
// Sprite property surely?
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.canvas = null;
this.context = null;
this.baseTexture = null;
this.texture = null;
this.sprite = null;
// 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 = [];
@ -443,6 +453,32 @@ Phaser.TilemapLayer.prototype = {
this.heightInTiles++;
this.heightInPixels += this.tileHeight;
},
createCanvas: function () {
var width = this.game.width;
var height = this.game.height;
if (this.widthInPixels < width)
{
width = this.widthInPixels;
}
if (this.heightInPixels < height)
{
height = this.heightInPixels;
}
this.canvas = Phaser.Canvas.create(width, 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);
},
/**
@ -456,6 +492,9 @@ Phaser.TilemapLayer.prototype = {
/**
* Parse tile offsets from map data.
* Basically this creates a large array of objects that contain the x/y coordinates to grab each tile from
* for the entire map. Yes we could calculate this at run-time by using the tile index and some math, but we're
* trading a quite small bit of memory here to not have to process that in our main render loop.
* @return {number} length of tileOffsets array.
*/
parseTileOffsets: function () {

13
src/tilemap/TilemapRenderer.js
View file

@ -43,8 +43,6 @@ Phaser.TilemapRenderer.prototype = {
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);
@ -80,15 +78,8 @@ Phaser.TilemapRenderer.prototype = {
}
// 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._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;