mirror of
https://github.com/wassname/phaser.git
synced 2026-10-29 13:21:16 +08:00
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).
This commit is contained in:
Richard Davey committed
1 parent
89b00db103
commit
3d22d0e169
8 files changed
+180
-23
No files matched your search
@@ -0,0 +1,39 @@
|
||||
{ "height":13,
|
||||
"layers":[
|
||||
{
|
||||
"data":[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 3, 4, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 3, 3, 4, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 3, 4, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 3, 3, 4, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 3, 4, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 3, 3, 4, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 3, 4, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 3, 3, 4, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 5, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 3, 4, 1, 1, 1, 1, 1, 1, 1, 1, 6, 7, 8, 1, 1, 1, 1, 1, 2, 3, 3, 3, 4, 1, 1, 1, 1, 6, 7, 7, 8, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 3, 4, 1, 1, 1, 1, 1, 1, 1, 1, 6, 7, 8, 1, 1, 1, 1, 1, 2, 3, 3, 3, 4, 1, 1, 1, 1, 6, 7, 7, 8, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 3, 4, 1, 1, 1, 1, 1, 1, 1, 1, 6, 7, 8, 1, 1, 1, 1, 1, 2, 3, 3, 3, 4, 1, 1, 1, 1, 6, 7, 7, 8, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 3, 4, 1, 1, 1, 1, 1, 1, 1, 1, 6, 7, 8, 1, 1, 1, 1, 1, 2, 3, 3, 3, 4, 1, 1, 1, 1, 6, 7, 7, 8, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 9, 10, 1, 2, 3, 4, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 6, 7, 8, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 6, 7, 7, 7, 8, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 6, 7, 8, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 6, 7, 7, 7, 8, 1, 11, 12, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 6, 7, 8, 1, 1, 13, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 6, 7, 7, 7, 8, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 6, 7, 8, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 6, 7, 7, 7, 8, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 14, 1, 6, 7, 8, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 15, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 16, 17, 18, 16, 16, 16, 16, 16, 1, 1, 1, 16, 16, 16, 15, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 15, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 16, 16, 16, 1, 1, 1, 1, 16, 15, 15, 16, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 19, 19, 1, 1, 1, 1, 1, 1, 1, 1, 20, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 21, 22, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 19, 19, 19, 1, 1, 1, 1, 1, 1, 1, 1, 20, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 23, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 24, 25, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 26, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 19, 19, 19, 19, 1, 1, 1, 1, 1, 1, 1, 1, 20, 1, 1, 1, 1, 1, 27, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 13, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 28, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 13, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 29, 1, 1, 1, 1, 1, 1, 30, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, Line truncated
|
||||
"height":13,
|
||||
"name":"ShoeBox Tile Grab",
|
||||
"opacity":1,
|
||||
"type":"tilelayer",
|
||||
"visible":true,
|
||||
"width":211,
|
||||
"x":0,
|
||||
"y":0
|
||||
}],
|
||||
"orientation":"orthogonal",
|
||||
"properties":
|
||||
{
|
||||
|
||||
},
|
||||
"tileheight":16,
|
||||
"tilesets":[
|
||||
{
|
||||
"firstgid":1,
|
||||
"image":"..\/..\/..\/..\/..\/..\/Art\/Artwork for game inspirations\/Super Mario Level Maps\/NES\/mario-1-1_bank.png",
|
||||
"imageheight":144,
|
||||
"imagewidth":176,
|
||||
"margin":0,
|
||||
"name":"mario-1-1_bank.png",
|
||||
"properties":
|
||||
{
|
||||
|
||||
},
|
||||
"spacing":0,
|
||||
"tileheight":16,
|
||||
"tilewidth":16
|
||||
}],
|
||||
"tilewidth":16,
|
||||
"version":1,
|
||||
"width":211
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
@@ -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>
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
+9
-2
@@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@@ -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();
|
||||
|
||||
|
||||
@@ -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 () {
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in new issue
Block a user