Skip to content

Commit 5a6ae5f

Browse files
photonstormphotonstorm
committed
Tilemap.putTile now correctly re-calculates the collision data based on the new collideIndexes array (fixes phaserjs#371)
Tilemap.putTile can now insert a tile into a null/blank area of the map (before it could only replace existing tiles)
1 parent b5df53b commit 5a6ae5f

6 files changed

Lines changed: 186 additions & 99 deletions

File tree

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -212,6 +212,8 @@ Bug Fixes:
212212
* Sound.onMarkerComplete event is now dispatched when a marker stops. See Sound.onLoop for a looping marker event (thanks registered99, fixes #500)
213213
* Events.onInputUp would be dispatched twice if the Sprite had drag enabled, now only dispatched once (thanks Overbryd, fixes #502)
214214
* You can now load in CSV Tilemaps again and they get created properly (fixes #391)
215+
* Tilemap.putTile can now insert a tile into a null/blank area of the map (before it could only replace existing tiles)
216+
* Tilemap.putTile now correctly re-calculates the collision data based on the new collideIndexes array (fixes #371)
215217

216218

217219
TO DO:

‎examples/wip/tilemap put tile update.js‎

Lines changed: 0 additions & 89 deletions
This file was deleted.

‎examples/wip/tilemap put tile.js‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
2+
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update, render: render });
3+
4+
function preload() {
5+
6+
game.load.image('ground_1x1', 'assets/tilemaps/tiles/ground_1x1.png');
7+
8+
}
9+
10+
var map;
11+
var layer;
12+
13+
var marker;
14+
var currentTile = 0;
15+
var cursors;
16+
17+
function create() {
18+
19+
game.stage.backgroundColor = '#787878';
20+
21+
// Creates a blank tilemap
22+
map = game.add.tilemap();
23+
24+
// Creates a layer and sets-up the map dimensions.
25+
// In this case the map is 30x30 tiles in size and the tiles are 32x32 pixels in size.
26+
map.create('level1', 30, 30, 32, 32);
27+
28+
// Add a Tileset image to the map
29+
map.addTilesetImage('ground_1x1');
30+
31+
// Create a layer. This is where the map is rendered to.
32+
layer = map.createLayer('level1');
33+
34+
// Resize the world
35+
layer.resizeWorld();
36+
37+
map.setCollisionBetween(0, 12);
38+
39+
layer.debug = true;
40+
41+
// Create our tile selector at the top of the screen
42+
createTileSelector();
43+
44+
game.input.setMoveCallback(updateMarker, this);
45+
46+
cursors = game.input.keyboard.createCursorKeys();
47+
48+
}
49+
50+
function pickTile(sprite, pointer) {
51+
52+
currentTile = game.math.snapToFloor(pointer.x, 32) / 32;
53+
54+
}
55+
56+
function updateMarker() {
57+
58+
marker.x = layer.getTileX(game.input.activePointer.worldX) * 32;
59+
marker.y = layer.getTileY(game.input.activePointer.worldY) * 32;
60+
61+
if (game.input.mousePointer.isDown)
62+
{
63+
map.putTile(currentTile, layer.getTileX(marker.x), layer.getTileY(marker.y))
64+
}
65+
66+
}
67+
68+
function update() {
69+
70+
if (cursors.left.isDown)
71+
{
72+
game.camera.x -= 4;
73+
}
74+
else if (cursors.right.isDown)
75+
{
76+
game.camera.x += 4;
77+
}
78+
79+
if (cursors.up.isDown)
80+
{
81+
game.camera.y -= 4;
82+
}
83+
else if (cursors.down.isDown)
84+
{
85+
game.camera.y += 4;
86+
}
87+
88+
}
89+
90+
function render() {
91+
92+
}
93+
94+
function createTileSelector() {
95+
96+
// Our tile selection window
97+
var tileSelector = game.add.group();
98+
99+
var tileSelectorBackground = game.make.graphics();
100+
tileSelectorBackground.beginFill(0x000000, 0.5);
101+
tileSelectorBackground.drawRect(0, 0, 800, 34);
102+
tileSelectorBackground.endFill();
103+
104+
tileSelector.add(tileSelectorBackground);
105+
106+
var tileStrip = tileSelector.create(1, 1, 'ground_1x1');
107+
tileStrip.inputEnabled = true;
108+
tileStrip.events.onInputDown.add(pickTile, this);
109+
110+
tileSelector.fixedToCamera = true;
111+
112+
// Our painting marker
113+
marker = game.add.graphics();
114+
marker.lineStyle(2, 0x000000, 1);
115+
marker.drawRect(0, 0, 32, 32);
116+
117+
}

‎src/tilemap/Tile.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -179,10 +179,12 @@ Phaser.Tile.prototype = {
179179

180180
if (left || right || up || down)
181181
{
182+
this.collides = true;
182183
this.collideNone = false;
183184
}
184185
else
185186
{
187+
this.collides = false;
186188
this.collideNone = true;
187189
}
188190

@@ -199,6 +201,11 @@ Phaser.Tile.prototype = {
199201
this.collideRight = false;
200202
this.collideUp = false;
201203
this.collideDown = false;
204+
this.collides = false;
205+
this.faceTop = false;
206+
this.faceBottom = false;
207+
this.faceLeft = false;
208+
this.faceRight = false;
202209

203210
},
204211

‎src/tilemap/Tilemap.js‎

Lines changed: 54 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,11 @@ Phaser.Tilemap = function (game, key, tileWidth, tileHeight, width, height) {
106106
*/
107107
this.objects = data.objects;
108108

109+
/**
110+
* @property {array} collideIndexes - An array of tile indexes that collide.
111+
*/
112+
this.collideIndexes = [];
113+
109114
/**
110115
* @property {array} collision - An array of collision data (polylines, etc).
111116
*/
@@ -763,6 +768,20 @@ Phaser.Tilemap.prototype = {
763768
if (typeof layer === 'undefined') { layer = this.currentLayer; }
764769
if (typeof recalculate === 'undefined') { recalculate = true; }
765770

771+
if (collides)
772+
{
773+
this.collideIndexes.push(index);
774+
}
775+
else
776+
{
777+
var i = this.collideIndexes.indexOf(index);
778+
779+
if (i > -1)
780+
{
781+
this.collideIndexes.splice(i, 1);
782+
}
783+
}
784+
766785
for (var y = 0; y < this.layers[layer].height ; y++)
767786
{
768787
for (var x = 0; x < this.layers[layer].width; x++)
@@ -848,6 +867,14 @@ Phaser.Tilemap.prototype = {
848867
left = this.getTileLeft(layer, x, y);
849868
right = this.getTileRight(layer, x, y);
850869

870+
if (tile.collides)
871+
{
872+
tile.faceTop = true;
873+
tile.faceBottom = true;
874+
tile.faceLeft = true;
875+
tile.faceRight = true;
876+
}
877+
851878
if (above && above.collides)
852879
{
853880
// There is a tile above this one that also collides, so the top of this tile is no longer interesting
@@ -974,6 +1001,15 @@ Phaser.Tilemap.prototype = {
9741001

9751002
},
9761003

1004+
/**
1005+
* Checks if there is a tile at the given location.
1006+
*
1007+
* @method Phaser.Tilemap#hasTile
1008+
* @param {number} x - X position to check if a tile exists at (given in tile units, not pixels)
1009+
* @param {number} y - Y position to check if a tile exists at (given in tile units, not pixels)
1010+
* @param {number|string|Phaser.TilemapLayer} layer - The layer to set as current.
1011+
* @return {boolean} True if there is a tile at the given location, otherwise false.
1012+
*/
9771013
hasTile: function (x, y, layer) {
9781014

9791015
return (this.layers[layer].data[y] !== null && this.layers[layer].data[y][x] !== null);
@@ -995,30 +1031,44 @@ Phaser.Tilemap.prototype = {
9951031

9961032
if (x >= 0 && x < this.layers[layer].width && y >= 0 && y < this.layers[layer].height)
9971033
{
1034+
var index;
1035+
9981036
if (tile instanceof Phaser.Tile)
9991037
{
1038+
index = tile.index;
1039+
10001040
if (this.hasTile(x, y, layer))
10011041
{
10021042
this.layers[layer].data[y][x].copy(tile);
10031043
}
10041044
else
10051045
{
1006-
//Phaser.Tile = function (layer, index, x, y, width, height) {
1007-
this.layers[layer].data[y][x] = new Phaser.Tile(layer, tile.index, x, y, tile.width, tile.height);
1046+
this.layers[layer].data[y][x] = new Phaser.Tile(layer, index, x, y, tile.width, tile.height);
10081047
}
10091048
}
10101049
else
10111050
{
1051+
index = tile;
1052+
10121053
if (this.hasTile(x, y, layer))
10131054
{
1014-
this.layers[layer].data[y][x].index = tile;
1055+
this.layers[layer].data[y][x].index = index;
10151056
}
10161057
else
10171058
{
1018-
this.layers[layer].data[y][x] = new Phaser.Tile(layer, tile, x, y, this.tileWidth, this.tileHeight);
1059+
this.layers[layer].data[y][x] = new Phaser.Tile(layer, index, x, y, this.tileWidth, this.tileHeight);
10191060
}
10201061
}
10211062

1063+
if (this.collideIndexes.indexOf(index) > -1)
1064+
{
1065+
this.layers[layer].data[y][x].setCollision(true, true, true, true);
1066+
}
1067+
else
1068+
{
1069+
this.layers[layer].data[y][x].resetCollision();
1070+
}
1071+
10221072
this.layers[layer].dirty = true;
10231073

10241074
this.calculateFaces(layer);

‎src/tilemap/TilemapLayer.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -837,12 +837,12 @@ Phaser.TilemapLayer.prototype.renderDebug = function () {
837837
}
838838

839839
// Collision callback
840-
if (tile && (tile.collisionCallback || tile.layer.callbacks[tile.index]))
841-
{
842-
this.context.fillStyle = this.debugCallbackColor;
843-
this.context.fillRect(this._tx, this._ty, this._cw, this._ch);
844-
this.context.fillStyle = this.debugFillColor;
845-
}
840+
// if (tile && (tile.collisionCallback || tile.layer.callbacks[tile.index]))
841+
// {
842+
// this.context.fillStyle = this.debugCallbackColor;
843+
// this.context.fillRect(this._tx, this._ty, this._cw, this._ch);
844+
// this.context.fillStyle = this.debugFillColor;
845+
// }
846846

847847
this._tx += this.map.tileWidth;
848848

0 commit comments

Comments
 (0)