Mirrors/phaser
2
0
Fork 0
mirror of https://github.com/photonstorm/phaser synced 2024-11-26 14:40:38 +00:00
Code Issues Projects Releases Packages Wiki Activity

Tilemap painting example and other smaller updates.

Browse source
This commit is contained in:
photonstorm 2013-10-17 21:10:00 +01:00
parent 275fa4641e
commit 7e8b79adf4
7 changed files with 256 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
README.md
View file

@ -124,6 +124,9 @@ Version 1.0.7 (in progress in the dev branch)
* Fixed Rectangle.union (thanks andron77)
* Debug.renderSpriteBody updated to use a the new Sprite.Body.screenX/Y properties.
* Added Text.destroy() and BitmapText.destroy(), also updated Group.remove to make it more bullet-proof when an element doesn't have any events.
* Added Phaser.Utils.shuffle to shuffle an array.
* Added Graphics.destroy, x, y and updated angle functions.

73
examples/tilemaps/paint tiles.php Normal file
View file

@ -0,0 +1,73 @@
<?php
$title = "Painting Tiles";
require('../head.php');
?>
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create, update: update, render: render });
function preload() {
game.load.tilemap('desert', 'assets/maps/desert.json', null, Phaser.Tilemap.TILED_JSON);
game.load.tileset('tiles', 'assets/tiles/tmw_desert_spacing.png', 32, 32, -1, 1, 1);
}
var map;
var tileset;
var layer;
var marker;
var currentTile = 0;
function create() {
map = game.add.tilemap('desert');
tileset = game.add.tileset('tiles');
layer = game.add.tilemapLayer(0, 0, 800, 600, tileset, map, 0);
layer.resizeWorld();
marker = game.add.graphics();
marker.lineStyle(2, 0x000000, 1);
marker.drawRect(0, 0, 32, 32);
}
function update() {
marker.x = layer.getTileX(game.input.activePointer.worldX) * 32;
marker.y = layer.getTileY(game.input.activePointer.worldY) * 32;
if (game.input.mousePointer.isDown)
{
if (game.input.keyboard.isDown(Phaser.Keyboard.SHIFT))
{
currentTile = map.getTile(layer.getTileX(marker.x), layer.getTileY(marker.y));
}
else
{
if (map.getTile(layer.getTileX(marker.x), layer.getTileY(marker.y)) != currentTile)
{
map.putTile(currentTile, layer.getTileX(marker.x), layer.getTileY(marker.y))
}
}
}
}
function render() {
game.debug.renderText('Left-click to paint. Shift + Left-click to select tile.', 32, 32, 'rgb(0,0,0)');
game.debug.renderText('Tile: ' + map.getTile(layer.getTileX(marker.x), layer.getTileY(marker.y)), 32, 48, 'rgb(0,0,0)');
}
</script>
<?php
require('../foot.php');
?>

2
examples/tilemaps/randomise tiles.php
View file

@ -50,7 +50,7 @@
// You can also pass in x, y, width, height values to control the area in which the replace happens
map.random(layer.getTileX(sprite.x), layer.getTileY(sprite.y), 6, 6);
map.shuffle(layer.getTileX(sprite.x), layer.getTileY(sprite.y), 6, 6);
}

49
src/gameobjects/Graphics.js
View file

@ -17,6 +17,8 @@
*/
Phaser.Graphics = function (game, x, y) {
this.game = game;
PIXI.Graphics.call(this);
/**
@ -28,18 +30,59 @@ Phaser.Graphics = function (game, x, y) {
Phaser.Graphics.prototype = Object.create(PIXI.Graphics.prototype);
Phaser.Graphics.prototype.constructor = Phaser.Graphics;
Phaser.Graphics.prototype = Phaser.Utils.extend(true, Phaser.Graphics.prototype, Phaser.Sprite.prototype);
// Add our own custom methods
/**
* Description.
*
* @method Phaser.Sprite.prototype.destroy
*/
Phaser.Graphics.prototype.destroy = function() {
this.clear();
if (this.group)
{
this.group.remove(this);
}
this.game = null;
}
Object.defineProperty(Phaser.Graphics.prototype, 'angle', {
get: function() {
return Phaser.Math.radToDeg(this.rotation);
return Phaser.Math.wrapAngle(Phaser.Math.radToDeg(this.rotation));
},
set: function(value) {
this.rotation = Phaser.Math.degToRad(value);
this.rotation = Phaser.Math.degToRad(Phaser.Math.wrapAngle(value));
}
});
Object.defineProperty(Phaser.Graphics.prototype, 'x', {
get: function() {
return this.position.x;
},
set: function(value) {
this.position.x = value;
}
});
Object.defineProperty(Phaser.Graphics.prototype, 'y', {
get: function() {
return this.position.y;
},
set: function(value) {
this.position.y = value;
}
});

138
src/tilemap/Tilemap.js
View file

@ -15,6 +15,7 @@ Phaser.Tilemap = function (game, key) {
this.key = key;
this.layers = game.cache.getTilemapData(key).layers;
this.calculateIndexes();
}
else
{
@ -62,7 +63,8 @@ Phaser.Tilemap.prototype = {
tileMargin: 0,
tileSpacing: 0,
format: Phaser.Tilemap.CSV,
data: data
data: data,
indexes: []
});
@ -70,6 +72,28 @@ Phaser.Tilemap.prototype = {
},
calculateIndexes: function () {
for (var layer = 0; layer < this.layers.length; layer++)
{
this.layers[layer].indexes = [];
for (var y = 0; y < this.layers[layer].height ; y++)
{
for (var x = 0; x < this.layers[layer].width; x++)
{
var idx = this.layers[layer].data[y][x];
if (this.layers[layer].indexes.indexOf(idx) === -1)
{
this.layers[layer].indexes.push(idx);
}
}
}
}
},
setLayer: function (layer) {
if (this.layers[layer])
@ -86,7 +110,9 @@ Phaser.Tilemap.prototype = {
* @param {number} y - Y position of this tile.
* @param {number} index - The index of this tile type in the core map data.
*/
putTile: function (x, y, index) {
putTile: function (index, x, y, layer) {
if (typeof layer === "undefined") { layer = this.currentLayer; }
if (x >= 0 && x < this.layers[this.currentLayer].width && y >= 0 && y < this.layers[this.currentLayer].height)
{
@ -97,6 +123,31 @@ Phaser.Tilemap.prototype = {
},
getTile: function (x, y, layer) {
if (typeof layer === "undefined") { layer = this.currentLayer; }
if (x >= 0 && x < this.layers[this.currentLayer].width && y >= 0 && y < this.layers[this.currentLayer].height)
{
return this.layers[this.currentLayer].data[y][x];
}
},
getTileWorldXY: function (x, y, tileWidth, tileHeight, layer) {
if (typeof layer === "undefined") { layer = this.currentLayer; }
x = this.game.math.snapToFloor(x, tileWidth) / tileWidth;
y = this.game.math.snapToFloor(y, tileHeight) / tileHeight;
if (x >= 0 && x < this.layers[this.currentLayer].width && y >= 0 && y < this.layers[this.currentLayer].height)
{
return this.layers[this.currentLayer].data[y][x];
}
},
/**
* Set a specific tile with its x and y in tiles.
* @method putTileWorldXY
@ -104,10 +155,10 @@ Phaser.Tilemap.prototype = {
* @param {number} y - Y position of this tile in world coordinates.
* @param {number} index - The index of this tile type in the core map data.
*/
putTileWorldXY: function (x, y, index) {
putTileWorldXY: function (index, x, y, tileWidth, tileHeight, layer) {
x = this.game.math.snapToFloor(x, this.tileWidth) / this.tileWidth;
y = this.game.math.snapToFloor(y, this.tileHeight) / this.tileHeight;
x = this.game.math.snapToFloor(x, tileWidth) / tileWidth;
y = this.game.math.snapToFloor(y, tileHeight) / tileHeight;
if (x >= 0 && x < this.layers[this.currentLayer].width && y >= 0 && y < this.layers[this.currentLayer].height)
{
@ -119,7 +170,7 @@ Phaser.Tilemap.prototype = {
},
// Values are in TILEs, not pixels.
getTiles: function (x, y, width, height, layer) {
copy: function (x, y, width, height, layer) {
if (typeof layer === "undefined") { layer = this.currentLayer; }
@ -170,7 +221,7 @@ Phaser.Tilemap.prototype = {
},
putTiles: function (x, y, tileblock, layer) {
paste: function (x, y, tileblock, layer) {
if (typeof x === "undefined") { x = 0; }
if (typeof y === "undefined") { y = 0; }
@ -206,7 +257,7 @@ Phaser.Tilemap.prototype = {
*/
swap: function (tileA, tileB, x, y, width, height, layer) {
this.getTiles(x, y, width, height, layer);
this.copy(x, y, width, height, layer);
if (this._results.length < 2)
{
@ -218,7 +269,7 @@ Phaser.Tilemap.prototype = {
this._results.forEach(this.swapHandler, this);
this.putTiles(x, y, this._results);
this.paste(x, y, this._results);
},
@ -247,7 +298,7 @@ Phaser.Tilemap.prototype = {
*/
forEach: function (callback, context, x, y, width, height, layer) {
this.getTiles(x, y, width, height, layer);
this.copy(x, y, width, height, layer);
if (this._results.length < 2)
{
@ -256,7 +307,7 @@ Phaser.Tilemap.prototype = {
this._results.forEach(callback, context);
this.putTiles(x, y, this._results);
this.paste(x, y, this._results);
},
@ -272,7 +323,7 @@ Phaser.Tilemap.prototype = {
*/
replace: function (tileA, tileB, x, y, width, height, layer) {
this.getTiles(x, y, width, height, layer);
this.copy(x, y, width, height, layer);
if (this._results.length < 2)
{
@ -287,13 +338,13 @@ Phaser.Tilemap.prototype = {
}
}
this.putTiles(x, y, this._results);
this.paste(x, y, this._results);
},
/**
* Randomises a set of tiles in a given area.
* @method replace
* Randomises a set of tiles in a given area. It will only randomise the tiles in that area, so if they're all the same nothing will appear to have changed!
* @method random
* @param {number} tileA - First tile index.
* @param {number} tileB - Second tile index.
* @param {number} [x] - specify a Rectangle of tiles to operate. The x position in tiles of Rectangle's left-top corner.
@ -303,19 +354,64 @@ Phaser.Tilemap.prototype = {
*/
random: function (x, y, width, height, layer) {
this.getTiles(x, y, width, height, layer);
if (typeof layer === "undefined") { layer = this.currentLayer; }
this.copy(x, y, width, height, layer);
if (this._results.length < 2)
{
return;
}
for (var i = 1; i < this._results.length; i++)
var indexes = [];
for (var t = 1; t < this._results.length; t++)
{
this._results[i].index = this.game.rnd.integerInRange(0, this.layers[layer].tileset.total);
var idx = this._results[t].index;
if (indexes.indexOf(idx) === -1)
{
indexes.push(idx);
}
}
this.putTiles(x, y, this._results);
for (var i = 1; i < this._results.length; i++)
{
this._results[i].index = this.game.rnd.pick(indexes);
}
this.paste(x, y, this._results);
},
/**
* Randomises a set of tiles in a given area. It will only randomise the tiles in that area, so if they're all the same nothing will appear to have changed!
* @method random
* @param {number} tileA - First tile index.
* @param {number} tileB - Second tile index.
* @param {number} [x] - specify a Rectangle of tiles to operate. The x position in tiles of Rectangle's left-top corner.
* @param {number} [y] - specify a Rectangle of tiles to operate. The y position in tiles of Rectangle's left-top corner.
* @param {number} [width] - specify a Rectangle of tiles to operate. The width in tiles.
* @param {number} [height] - specify a Rectangle of tiles to operate. The height in tiles.
*/
shuffle: function (x, y, width, height, layer) {
if (typeof layer === "undefined") { layer = this.currentLayer; }
this.copy(x, y, width, height, layer);
if (this._results.length < 2)
{
return;
}
var header = this._results.shift();
Phaser.Utils.shuffle(this._results);
this._results.unshift(header);
this.paste(x, y, this._results);
},
@ -330,7 +426,7 @@ Phaser.Tilemap.prototype = {
*/
fill: function (index, x, y, width, height, layer) {
this.getTiles(x, y, width, height, layer);
this.copy(x, y, width, height, layer);
if (this._results.length < 2)
{
@ -342,7 +438,7 @@ Phaser.Tilemap.prototype = {
this._results[i].index = index;
}
this.putTiles(x, y, this._results);
this.paste(x, y, this._results);
},

3
src/tilemap/TilemapParser.js
View file

@ -109,7 +109,7 @@ Phaser.TilemapParser = {
}
}
return [{ name: 'csv', width: width, height: height, alpha: 1, visible: true, tileMargin: 0, tileSpacing: 0, data: output }];
return [{ name: 'csv', width: width, height: height, alpha: 1, visible: true, indexes: [], tileMargin: 0, tileSpacing: 0, data: output }];
},
@ -142,6 +142,7 @@ Phaser.TilemapParser = {
height: json.layers[i].height,
alpha: json.layers[i].opacity,
visible: json.layers[i].visible,
indexes: [],
tileMargin: json.tilesets[0].margin,
tileSpacing: json.tilesets[0].spacing,

14
src/utils/Utils.js
View file

@ -10,6 +10,20 @@
*/
Phaser.Utils = {
shuffle: function (array) {
for (var i = array.length - 1; i > 0; i--)
{
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
},
/**
* Javascript string pad http://www.webtoolkit.info/.
* pad = the string to pad it out with (defaults to a space)<br>