wassname/phaser
1
0
Fork 0
mirror of https://github.com/wassname/phaser.git synced 2026-09-12 12:40:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

Revamping the examples area.

Browse Source
This commit is contained in:
photonstorm
2013-10-22 03:58:20 +01:00
parent 82df8c9f54
commit 07724e5001
380 changed files with 8619 additions and 10707 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/tilemaps/Sci-Fly.js
+109
View File
@@ -0,0 +1,109 @@
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });
function preload() {
game.load.tilemap('level3', 'assets/maps/cybernoid.json', null, Phaser.Tilemap.TILED_JSON);
game.load.tileset('tiles', 'assets/maps/cybernoid.png', 16, 16);
game.load.image('phaser', 'assets/sprites/phaser-ship.png');
game.load.image('diamond', 'assets/sprites/chunk.png');
}
var map;
var tileset;
var layer;
var cursors;
var overlap;
var sprite;
var emitter;
function create() {
game.stage.backgroundColor = '#3d3d3d';
// A Tilemap object just holds the data needed to describe the map (i.e. the json exported from Tiled, or the CSV exported from elsewhere).
// You can add your own data or manipulate the data (swap tiles around, etc) but in order to display it you need to create a TilemapLayer.
map = game.add.tilemap('level3');
// A Tileset is a single image containing a strip of tiles. Each tile is broken down into its own Phaser.Tile object on import.
// You can set properties on the Tile objects, such as collision, n-way movement and meta data.
// A Tilemap uses a Tileset to render. The indexes in the map corresponding to the Tileset indexes.
// This way multiple levels can share the same single Tileset without requiring one each.
tileset = game.add.tileset('tiles');
// Basically this sets EVERY SINGLE tile to fully collide on all faces
tileset.setCollisionRange(0, tileset.total - 1, true, true, true, true);
// And this turns off collision on the only tile we don't want collision on :)
tileset.setCollision(6, false, false, false, false);
tileset.setCollision(31, false, false, false, false);
tileset.setCollision(34, false, false, false, false);
tileset.setCollision(35, false, false, false, false);
tileset.setCollision(46, false, false, false, false);
// A TilemapLayer consists of an x,y coordinate (position), a width and height, a Tileset and a Tilemap which it uses for map data.
// The x/y coordinates are in World space and you can place the tilemap layer anywhere in the world.
// The width/height is the rendered size of the layer in pixels, not the size of the map data itself.
layer = game.add.tilemapLayer(0, 0, 800, 600, tileset, map, 0);
layer.resizeWorld();
sprite = game.add.sprite(450, 80, 'phaser');
sprite.anchor.setTo(0.5, 0.5);
game.camera.follow(sprite);
game.camera.deadzone = new Phaser.Rectangle(160, 160, layer.renderWidth-320, layer.renderHeight-320);
cursors = game.input.keyboard.createCursorKeys();
emitter = game.add.emitter(0, 0, 200);
emitter.makeParticles('diamond');
emitter.minRotation = 0;
emitter.maxRotation = 0;
emitter.gravity = 5;
emitter.bounce.setTo(0.5, 0.5);
game.input.onDown.add(particleBurst, this);
}
function particleBurst() {
emitter.x = game.input.worldX;
emitter.y = game.input.worldY;
emitter.start(true, 4000, null, 10);
}
function update() {
game.physics.collide(sprite, layer);
game.physics.collide(emitter, layer);
sprite.body.velocity.x = 0;
sprite.body.velocity.y = 0;
if (cursors.up.isDown)
{
sprite.body.velocity.y = -150;
}
else if (cursors.down.isDown)
{
sprite.body.velocity.y = 150;
}
if (cursors.left.isDown)
{
sprite.body.velocity.x = -150;
sprite.scale.x = -1;
}
else if (cursors.right.isDown)
{
sprite.body.velocity.x = 150;
sprite.scale.x = 1;
}
}
examples/tilemaps/Sci-Fly.php
-122
View File
@@ -1,122 +0,0 @@
<?php
$title = "Full-screen Tilemap Fly Around";
require('../head.php');
?>
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });
// var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create, update: update, render: render });
function preload() {
game.load.tilemap('level3', 'assets/maps/cybernoid.json', null, Phaser.Tilemap.TILED_JSON);
game.load.tileset('tiles', 'assets/maps/cybernoid.png', 16, 16);
game.load.image('phaser', 'assets/sprites/phaser-ship.png');
game.load.image('diamond', 'assets/sprites/chunk.png');
}
var map;
var tileset;
var layer;
var cursors;
var overlap;
var sprite;
var emitter;
function create() {
game.stage.backgroundColor = '#3d3d3d';
// A Tilemap object just holds the data needed to describe the map (i.e. the json exported from Tiled, or the CSV exported from elsewhere).
// You can add your own data or manipulate the data (swap tiles around, etc) but in order to display it you need to create a TilemapLayer.
map = game.add.tilemap('level3');
// A Tileset is a single image containing a strip of tiles. Each tile is broken down into its own Phaser.Tile object on import.
// You can set properties on the Tile objects, such as collision, n-way movement and meta data.
// A Tilemap uses a Tileset to render. The indexes in the map corresponding to the Tileset indexes.
// This way multiple levels can share the same single Tileset without requiring one each.
tileset = game.add.tileset('tiles');
// Basically this sets EVERY SINGLE tile to fully collide on all faces
tileset.setCollisionRange(0, tileset.total - 1, true, true, true, true);
// And this turns off collision on the only tile we don't want collision on :)
tileset.setCollision(6, false, false, false, false);
tileset.setCollision(31, false, false, false, false);
tileset.setCollision(34, false, false, false, false);
tileset.setCollision(35, false, false, false, false);
tileset.setCollision(46, false, false, false, false);
// A TilemapLayer consists of an x,y coordinate (position), a width and height, a Tileset and a Tilemap which it uses for map data.
// The x/y coordinates are in World space and you can place the tilemap layer anywhere in the world.
// The width/height is the rendered size of the layer in pixels, not the size of the map data itself.
layer = game.add.tilemapLayer(0, 0, 800, 600, tileset, map, 0);
layer.resizeWorld();
sprite = game.add.sprite(450, 80, 'phaser');
sprite.anchor.setTo(0.5, 0.5);
game.camera.follow(sprite);
game.camera.deadzone = new Phaser.Rectangle(160, 160, layer.renderWidth-320, layer.renderHeight-320);
cursors = game.input.keyboard.createCursorKeys();
emitter = game.add.emitter(0, 0, 200);
emitter.makeParticles('diamond');
emitter.minRotation = 0;
emitter.maxRotation = 0;
emitter.gravity = 5;
emitter.bounce.setTo(0.5, 0.5);
game.input.onDown.add(particleBurst, this);
}
function particleBurst() {
emitter.x = game.input.worldX;
emitter.y = game.input.worldY;
emitter.start(true, 4000, null, 10);
}
function update() {
game.physics.collide(sprite, layer);
game.physics.collide(emitter, layer);
sprite.body.velocity.x = 0;
sprite.body.velocity.y = 0;
if (cursors.up.isDown)
{
sprite.body.velocity.y = -150;
}
else if (cursors.down.isDown)
{
sprite.body.velocity.y = 150;
}
if (cursors.left.isDown)
{
sprite.body.velocity.x = -150;
sprite.scale.x = -1;
}
else if (cursors.right.isDown)
{
sprite.body.velocity.x = 150;
sprite.scale.x = 1;
}
}
</script>
<?php
require('../foot.php');
?>
examples/tilemaps/fill tiles.js
+76
View File
@@ -0,0 +1,76 @@
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { 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);
game.load.image('car', 'assets/sprites/car90.png');
}
var map;
var tileset;
var layer;
var cursors;
var sprite;
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();
sprite = game.add.sprite(450, 80, 'car');
sprite.anchor.setTo(0.5, 0.5);
game.camera.follow(sprite);
cursors = game.input.keyboard.createCursorKeys();
game.input.onDown.add(fillTiles, this);
}
function fillTiles() {
map.fill(31, layer.getTileX(sprite.x), layer.getTileY(sprite.y), 6, 6);
}
function update() {
game.physics.collide(sprite, layer);
sprite.body.velocity.x = 0;
sprite.body.velocity.y = 0;
sprite.body.angularVelocity = 0;
if (cursors.left.isDown)
{
sprite.body.angularVelocity = -200;
}
else if (cursors.right.isDown)
{
sprite.body.angularVelocity = 200;
}
if (cursors.up.isDown)
{
sprite.body.velocity.copyFrom(game.physics.velocityFromAngle(sprite.angle, 300));
}
}
function render() {
game.debug.renderText('Click to fill tiles', 32, 32, 'rgb(0,0,0)');
game.debug.renderText('Tile X: ' + layer.getTileX(sprite.x), 32, 48, 'rgb(0,0,0)');
game.debug.renderText('Tile Y: ' + layer.getTileY(sprite.y), 32, 64, 'rgb(0,0,0)');
}
examples/tilemaps/fill tiles.php
-88
View File
@@ -1,88 +0,0 @@
<?php
$title = "Filling a region of a tilemap";
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);
game.load.image('car', 'assets/sprites/car90.png');
}
var map;
var tileset;
var layer;
var cursors;
var sprite;
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();
sprite = game.add.sprite(450, 80, 'car');
sprite.anchor.setTo(0.5, 0.5);
game.camera.follow(sprite);
cursors = game.input.keyboard.createCursorKeys();
game.input.onDown.add(fillTiles, this);
}
function fillTiles() {
map.fill(31, layer.getTileX(sprite.x), layer.getTileY(sprite.y), 6, 6);
}
function update() {
game.physics.collide(sprite, layer);
sprite.body.velocity.x = 0;
sprite.body.velocity.y = 0;
sprite.body.angularVelocity = 0;
if (cursors.left.isDown)
{
sprite.body.angularVelocity = -200;
}
else if (cursors.right.isDown)
{
sprite.body.angularVelocity = 200;
}
if (cursors.up.isDown)
{
sprite.body.velocity.copyFrom(game.physics.velocityFromAngle(sprite.angle, 300));
}
}
function render() {
game.debug.renderText('Click to fill tiles', 32, 32, 'rgb(0,0,0)');
game.debug.renderText('Tile X: ' + layer.getTileX(sprite.x), 32, 48, 'rgb(0,0,0)');
game.debug.renderText('Tile Y: ' + layer.getTileY(sprite.y), 32, 64, 'rgb(0,0,0)');
}
</script>
<?php
require('../foot.php');
?>
examples/tilemaps/mapcollide.js
+76
View File
@@ -0,0 +1,76 @@
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
function preload() {
game.load.tilemap('mario', 'assets/maps/mario1.png', 'assets/maps/mario1.json', null, Phaser.Tilemap.JSON);
game.load.image('player', 'assets/sprites/phaser-dude.png');
}
var map;
var p;
var cursors;
function create() {
game.stage.backgroundColor = '#787878';
map = game.add.tilemap(0, 0, 'mario');
// floor
map.setCollisionRange(80, 97, true, true, true, true);
// one-ways
map.setCollisionRange(15, 17, true, true, false, true);
p = game.add.sprite(32, 32, 'player');
p.body.gravity.y = 10;
p.body.bounce.y = 0.4;
p.body.collideWorldBounds = true;
game.world.setBounds(0, 0, map.width, 600);
game.camera.follow(p);
cursors = game.input.keyboard.createCursorKeys();
}
function update() {
map.collide(p);
p.body.velocity.x = 0;
if (cursors.up.isDown)
{
if (p.body.touching.down)
{
p.body.velocity.y = -400;
}
}
else if (cursors.down.isDown)
{
// game.camera.y += 4;
}
if (cursors.left.isDown)
{
p.body.velocity.x = -150;
}
else if (cursors.right.isDown)
{
p.body.velocity.x = 150;
}
}
function render() {
game.debug.renderCameraInfo(game.camera, 32, 32);
// game.debug.renderSpriteCorners(p);
game.debug.renderSpriteCollision(p, 32, 320);
}
examples/tilemaps/mapcollide.php
-89
View File
@@ -1,89 +0,0 @@
<?php
$title = "Tilemap Collision";
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('mario', 'assets/maps/mario1.png', 'assets/maps/mario1.json', null, Phaser.Tilemap.JSON);
game.load.image('player', 'assets/sprites/phaser-dude.png');
}
var map;
var p;
var cursors;
function create() {
game.stage.backgroundColor = '#787878';
map = game.add.tilemap(0, 0, 'mario');
// floor
map.setCollisionRange(80, 97, true, true, true, true);
// one-ways
map.setCollisionRange(15, 17, true, true, false, true);
p = game.add.sprite(32, 32, 'player');
p.body.gravity.y = 10;
p.body.bounce.y = 0.4;
p.body.collideWorldBounds = true;
game.world.setBounds(0, 0, map.width, 600);
game.camera.follow(p);
cursors = game.input.keyboard.createCursorKeys();
}
function update() {
map.collide(p);
p.body.velocity.x = 0;
if (cursors.up.isDown)
{
if (p.body.touching.down)
{
p.body.velocity.y = -400;
}
}
else if (cursors.down.isDown)
{
// game.camera.y += 4;
}
if (cursors.left.isDown)
{
p.body.velocity.x = -150;
}
else if (cursors.right.isDown)
{
p.body.velocity.x = 150;
}
}
function render() {
game.debug.renderCameraInfo(game.camera, 32, 32);
// game.debug.renderSpriteCorners(p);
game.debug.renderSpriteCollision(p, 32, 320);
}
</script>
<?php
require('../foot.php');
?>
examples/tilemaps/mario.js
+41
View File
@@ -0,0 +1,41 @@
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update, render: render });
function preload() {
game.load.tilemap('mario', 'assets/maps/mario1.png', 'assets/maps/mario1.json', null, Phaser.Tilemap.JSON);
}
function create() {
game.stage.backgroundColor = '#787878';
game.add.tilemap(0, 0, 'mario');
}
function update() {
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() {
}
examples/tilemaps/mario.php
-56
View File
@@ -1,56 +0,0 @@
<?php
$title = "Test Title";
require('../head.php');
?>
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update, render: render });
function preload() {
game.load.tilemap('mario', 'assets/maps/mario1.png', 'assets/maps/mario1.json', null, Phaser.Tilemap.JSON);
}
function create() {
game.stage.backgroundColor = '#787878';
game.add.tilemap(0, 0, 'mario');
}
function update() {
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>
<?php
require('../foot.php');
?>
examples/tilemaps/mariotogether.js
+26
View File
@@ -0,0 +1,26 @@
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create });
function preload() {
game.load.tilemap('nes', 'assets/maps/mario1.png', 'assets/maps/mario1.json', null, Phaser.Tilemap.JSON);
game.load.tilemap('snes', 'assets/maps/smb_tiles.png', 'assets/maps/smb_level1.json', null, Phaser.Tilemap.JSON);
}
function create() {
game.stage.backgroundColor = '#5c94fc';
game.add.tilemap(0, 0, 'nes');
game.add.tilemap(0, 168, 'snes');
game.add.tween(game.camera).to( { x: 5120-800 }, 30000, Phaser.Easing.Linear.None, true, 0, 1000, true);
game.input.onDown.add(goFull, this);
}
function goFull() {
game.stage.scale.startFullScreen();
}
examples/tilemaps/mariotogether.php
-41
View File
@@ -1,41 +0,0 @@
<?php
$title = "Test Title";
require('../head.php');
?>
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create });
function preload() {
game.load.tilemap('nes', 'assets/maps/mario1.png', 'assets/maps/mario1.json', null, Phaser.Tilemap.JSON);
game.load.tilemap('snes', 'assets/maps/smb_tiles.png', 'assets/maps/smb_level1.json', null, Phaser.Tilemap.JSON);
}
function create() {
game.stage.backgroundColor = '#5c94fc';
game.add.tilemap(0, 0, 'nes');
game.add.tilemap(0, 168, 'snes');
game.add.tween(game.camera).to( { x: 5120-800 }, 30000, Phaser.Easing.Linear.None, true, 0, 1000, true);
game.input.onDown.add(goFull, this);
}
function goFull() {
game.stage.scale.startFullScreen();
}
</script>
<?php
require('../foot.php');
?>
examples/tilemaps/paint tiles.js
+61
View File
@@ -0,0 +1,61 @@
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { 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)');
}
examples/tilemaps/paint tiles.php
-73
View File
@@ -1,73 +0,0 @@
<?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');
?>
examples/tilemaps/randomise tiles.js
+81
View File
@@ -0,0 +1,81 @@
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { 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);
game.load.image('car', 'assets/sprites/car90.png');
}
var map;
var tileset;
var layer;
var cursors;
var sprite;
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();
sprite = game.add.sprite(450, 80, 'car');
sprite.anchor.setTo(0.5, 0.5);
game.camera.follow(sprite);
cursors = game.input.keyboard.createCursorKeys();
game.input.onDown.add(randomiseTiles, this);
}
function randomiseTiles() {
// This will replace every instance of tile 31 (cactus plant) with tile 46 (the sign post).
// It does this across the whole layer of the map unless a region is specified.
// You can also pass in x, y, width, height values to control the area in which the replace happens
map.shuffle(layer.getTileX(sprite.x), layer.getTileY(sprite.y), 6, 6);
}
function update() {
game.physics.collide(sprite, layer);
sprite.body.velocity.x = 0;
sprite.body.velocity.y = 0;
sprite.body.angularVelocity = 0;
if (cursors.left.isDown)
{
sprite.body.angularVelocity = -200;
}
else if (cursors.right.isDown)
{
sprite.body.angularVelocity = 200;
}
if (cursors.up.isDown)
{
sprite.body.velocity.copyFrom(game.physics.velocityFromAngle(sprite.angle, 300));
}
}
function render() {
game.debug.renderText('Click to randomise tiles', 32, 32, 'rgb(0,0,0)');
game.debug.renderText('Tile X: ' + layer.getTileX(sprite.x), 32, 48, 'rgb(0,0,0)');
game.debug.renderText('Tile Y: ' + layer.getTileY(sprite.y), 32, 64, 'rgb(0,0,0)');
}
examples/tilemaps/randomise tiles.php
-93
View File
@@ -1,93 +0,0 @@
<?php
$title = "Set tiles in an area to be random";
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);
game.load.image('car', 'assets/sprites/car90.png');
}
var map;
var tileset;
var layer;
var cursors;
var sprite;
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();
sprite = game.add.sprite(450, 80, 'car');
sprite.anchor.setTo(0.5, 0.5);
game.camera.follow(sprite);
cursors = game.input.keyboard.createCursorKeys();
game.input.onDown.add(randomiseTiles, this);
}
function randomiseTiles() {
// This will replace every instance of tile 31 (cactus plant) with tile 46 (the sign post).
// It does this across the whole layer of the map unless a region is specified.
// You can also pass in x, y, width, height values to control the area in which the replace happens
map.shuffle(layer.getTileX(sprite.x), layer.getTileY(sprite.y), 6, 6);
}
function update() {
game.physics.collide(sprite, layer);
sprite.body.velocity.x = 0;
sprite.body.velocity.y = 0;
sprite.body.angularVelocity = 0;
if (cursors.left.isDown)
{
sprite.body.angularVelocity = -200;
}
else if (cursors.right.isDown)
{
sprite.body.angularVelocity = 200;
}
if (cursors.up.isDown)
{
sprite.body.velocity.copyFrom(game.physics.velocityFromAngle(sprite.angle, 300));
}
}
function render() {
game.debug.renderText('Click to randomise tiles', 32, 32, 'rgb(0,0,0)');
game.debug.renderText('Tile X: ' + layer.getTileX(sprite.x), 32, 48, 'rgb(0,0,0)');
game.debug.renderText('Tile Y: ' + layer.getTileY(sprite.y), 32, 64, 'rgb(0,0,0)');
}
</script>
<?php
require('../foot.php');
?>
examples/tilemaps/replace tiles.js
+81
View File
@@ -0,0 +1,81 @@
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { 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);
game.load.image('car', 'assets/sprites/car90.png');
}
var map;
var tileset;
var layer;
var cursors;
var sprite;
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();
sprite = game.add.sprite(450, 80, 'car');
sprite.anchor.setTo(0.5, 0.5);
game.camera.follow(sprite);
cursors = game.input.keyboard.createCursorKeys();
game.input.onDown.addOnce(replaceTiles, this);
}
function replaceTiles() {
// This will replace every instance of tile 31 (cactus plant) with tile 46 (the sign post).
// It does this across the whole layer of the map unless a region is specified.
// You can also pass in x, y, width, height values to control the area in which the replace happens
map.replace(31, 46);
}
function update() {
game.physics.collide(sprite, layer);
sprite.body.velocity.x = 0;
sprite.body.velocity.y = 0;
sprite.body.angularVelocity = 0;
if (cursors.left.isDown)
{
sprite.body.angularVelocity = -200;
}
else if (cursors.right.isDown)
{
sprite.body.angularVelocity = 200;
}
if (cursors.up.isDown)
{
sprite.body.velocity.copyFrom(game.physics.velocityFromAngle(sprite.angle, 300));
}
}
function render() {
game.debug.renderText('Click to replace tiles', 32, 32, 'rgb(0,0,0)');
game.debug.renderText('Tile X: ' + layer.getTileX(sprite.x), 32, 48, 'rgb(0,0,0)');
game.debug.renderText('Tile Y: ' + layer.getTileY(sprite.y), 32, 64, 'rgb(0,0,0)');
}
examples/tilemaps/replace tiles.php
-93
View File
@@ -1,93 +0,0 @@
<?php
$title = "Replacing one kind of tile with another";
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);
game.load.image('car', 'assets/sprites/car90.png');
}
var map;
var tileset;
var layer;
var cursors;
var sprite;
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();
sprite = game.add.sprite(450, 80, 'car');
sprite.anchor.setTo(0.5, 0.5);
game.camera.follow(sprite);
cursors = game.input.keyboard.createCursorKeys();
game.input.onDown.addOnce(replaceTiles, this);
}
function replaceTiles() {
// This will replace every instance of tile 31 (cactus plant) with tile 46 (the sign post).
// It does this across the whole layer of the map unless a region is specified.
// You can also pass in x, y, width, height values to control the area in which the replace happens
map.replace(31, 46);
}
function update() {
game.physics.collide(sprite, layer);
sprite.body.velocity.x = 0;
sprite.body.velocity.y = 0;
sprite.body.angularVelocity = 0;
if (cursors.left.isDown)
{
sprite.body.angularVelocity = -200;
}
else if (cursors.right.isDown)
{
sprite.body.angularVelocity = 200;
}
if (cursors.up.isDown)
{
sprite.body.velocity.copyFrom(game.physics.velocityFromAngle(sprite.angle, 300));
}
}
function render() {
game.debug.renderText('Click to replace tiles', 32, 32, 'rgb(0,0,0)');
game.debug.renderText('Tile X: ' + layer.getTileX(sprite.x), 32, 48, 'rgb(0,0,0)');
game.debug.renderText('Tile Y: ' + layer.getTileY(sprite.y), 32, 64, 'rgb(0,0,0)');
}
</script>
<?php
require('../foot.php');
?>
examples/tilemaps/supermario.js
+43
View File
@@ -0,0 +1,43 @@
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update, render: render });
function preload() {
game.load.tilemap('background', 'assets/maps/smb_bg.png', 'assets/maps/smb_bg.json', null, Phaser.Tilemap.JSON);
game.load.tilemap('level1', 'assets/maps/smb_tiles.png', 'assets/maps/smb_level1.json', null, Phaser.Tilemap.JSON);
}
function create() {
game.stage.backgroundColor = '#787878';
game.add.tilemap(0, 0, 'background');
game.add.tilemap(0, 0, 'level1');
}
function update() {
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() {
}
examples/tilemaps/supermario.php
-58
View File
@@ -1,58 +0,0 @@
<?php
$title = "Test Title";
require('../head.php');
?>
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update, render: render });
function preload() {
game.load.tilemap('background', 'assets/maps/smb_bg.png', 'assets/maps/smb_bg.json', null, Phaser.Tilemap.JSON);
game.load.tilemap('level1', 'assets/maps/smb_tiles.png', 'assets/maps/smb_level1.json', null, Phaser.Tilemap.JSON);
}
function create() {
game.stage.backgroundColor = '#787878';
game.add.tilemap(0, 0, 'background');
game.add.tilemap(0, 0, 'level1');
}
function update() {
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>
<?php
require('../foot.php');
?>
examples/tilemaps/supermario2.js
+58
View File
@@ -0,0 +1,58 @@
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });
function preload() {
game.load.tilemap('background', 'assets/maps/smb_bg.png', 'assets/maps/smb_bg.json', null, Phaser.Tilemap.JSON);
game.load.tilemap('level1', 'assets/maps/smb_tiles.png', 'assets/maps/smb_level1.json', null, Phaser.Tilemap.JSON);
game.load.spritesheet('balls', 'assets/sprites/balls.png', 17, 17);
}
var balls;
var map;
function create() {
game.stage.backgroundColor = '#787878';
game.add.tilemap(0, 0, 'background');
map = game.add.tilemap(0, 0, 'level1');
map.setCollisionByIndex([9,10,11,14,15,16,18,19,22,23,24,32,37,38], true, true, true, true);
balls = game.add.emitter(300, 50, 500);
balls.bounce = 0.5;
balls.makeParticles('balls', [0,1,2,3,4,5], 500, 1);
balls.minParticleSpeed.setTo(-150, 150);
balls.maxParticleSpeed.setTo(100, 100);
balls.gravity = 8;
balls.start(false, 5000, 50);
game.add.tween(balls).to({ x: 4000 }, 7500, Phaser.Easing.Sinusoidal.InOut, true, 0, 1000, true);
}
function update() {
game.physics.collide(balls, map);
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;
}
}
examples/tilemaps/supermario2.php
-73
View File
@@ -1,73 +0,0 @@
<?php
$title = "Test Title";
require('../head.php');
?>
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });
function preload() {
game.load.tilemap('background', 'assets/maps/smb_bg.png', 'assets/maps/smb_bg.json', null, Phaser.Tilemap.JSON);
game.load.tilemap('level1', 'assets/maps/smb_tiles.png', 'assets/maps/smb_level1.json', null, Phaser.Tilemap.JSON);
game.load.spritesheet('balls', 'assets/sprites/balls.png', 17, 17);
}
var balls;
var map;
function create() {
game.stage.backgroundColor = '#787878';
game.add.tilemap(0, 0, 'background');
map = game.add.tilemap(0, 0, 'level1');
map.setCollisionByIndex([9,10,11,14,15,16,18,19,22,23,24,32,37,38], true, true, true, true);
balls = game.add.emitter(300, 50, 500);
balls.bounce = 0.5;
balls.makeParticles('balls', [0,1,2,3,4,5], 500, 1);
balls.minParticleSpeed.setTo(-150, 150);
balls.maxParticleSpeed.setTo(100, 100);
balls.gravity = 8;
balls.start(false, 5000, 50);
game.add.tween(balls).to({ x: 4000 }, 7500, Phaser.Easing.Sinusoidal.InOut, true, 0, 1000, true);
}
function update() {
game.physics.collide(balls, map);
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;
}
}
</script>
<?php
require('../foot.php');
?>
examples/tilemaps/swap tiles.js
+81
View File
@@ -0,0 +1,81 @@
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { 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);
game.load.image('car', 'assets/sprites/car90.png');
}
var map;
var tileset;
var layer;
var cursors;
var sprite;
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();
sprite = game.add.sprite(450, 80, 'car');
sprite.anchor.setTo(0.5, 0.5);
game.camera.follow(sprite);
cursors = game.input.keyboard.createCursorKeys();
game.input.onDown.addOnce(swapTiles, this);
}
function swapTiles() {
// This will swap every instance of tile 30 (empty ground) with tile 31 (the cactus plant), it also does the opposite,
// so tile 31 (cactus plants) will become empty ground (tile 30). It does this across the whole layer of the map.
// You can also pass in x, y, width, height values to control the area in which the swap happens
map.swap(30, 31);
}
function update() {
game.physics.collide(sprite, layer);
sprite.body.velocity.x = 0;
sprite.body.velocity.y = 0;
sprite.body.angularVelocity = 0;
if (cursors.left.isDown)
{
sprite.body.angularVelocity = -200;
}
else if (cursors.right.isDown)
{
sprite.body.angularVelocity = 200;
}
if (cursors.up.isDown)
{
sprite.body.velocity.copyFrom(game.physics.velocityFromAngle(sprite.angle, 300));
}
}
function render() {
game.debug.renderText('Click to swap tiles', 32, 32, 'rgb(0,0,0)');
game.debug.renderText('Tile X: ' + layer.getTileX(sprite.x), 32, 48, 'rgb(0,0,0)');
game.debug.renderText('Tile Y: ' + layer.getTileY(sprite.y), 32, 64, 'rgb(0,0,0)');
}
examples/tilemaps/swap tiles.php
-93
View File
@@ -1,93 +0,0 @@
<?php
$title = "Swapping the places of two tiles across the map";
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);
game.load.image('car', 'assets/sprites/car90.png');
}
var map;
var tileset;
var layer;
var cursors;
var sprite;
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();
sprite = game.add.sprite(450, 80, 'car');
sprite.anchor.setTo(0.5, 0.5);
game.camera.follow(sprite);
cursors = game.input.keyboard.createCursorKeys();
game.input.onDown.addOnce(swapTiles, this);
}
function swapTiles() {
// This will swap every instance of tile 30 (empty ground) with tile 31 (the cactus plant), it also does the opposite,
// so tile 31 (cactus plants) will become empty ground (tile 30). It does this across the whole layer of the map.
// You can also pass in x, y, width, height values to control the area in which the swap happens
map.swap(30, 31);
}
function update() {
game.physics.collide(sprite, layer);
sprite.body.velocity.x = 0;
sprite.body.velocity.y = 0;
sprite.body.angularVelocity = 0;
if (cursors.left.isDown)
{
sprite.body.angularVelocity = -200;
}
else if (cursors.right.isDown)
{
sprite.body.angularVelocity = 200;
}
if (cursors.up.isDown)
{
sprite.body.velocity.copyFrom(game.physics.velocityFromAngle(sprite.angle, 300));
}
}
function render() {
game.debug.renderText('Click to swap tiles', 32, 32, 'rgb(0,0,0)');
game.debug.renderText('Tile X: ' + layer.getTileX(sprite.x), 32, 48, 'rgb(0,0,0)');
game.debug.renderText('Tile Y: ' + layer.getTileY(sprite.y), 32, 64, 'rgb(0,0,0)');
}
</script>
<?php
require('../foot.php');
?>
examples/tilemaps/wip1.js
+158
View File
@@ -0,0 +1,158 @@
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
function preload() {
game.load.tilemap('level3', 'assets/maps/cybernoid.json', null, Phaser.Tilemap.TILED_JSON);
game.load.tileset('tiles', 'assets/maps/cybernoid.png', 16, 16);
}
var map;
var tileset;
var layer;
var cursors;
var sprite2;
var overlap;
function create() {
game.stage.backgroundColor = '#3d3d3d';
// A Tilemap object just holds the data needed to describe the map (i.e. the json exported from Tiled, or the CSV exported from elsewhere).
// You can add your own data or manipulate the data (swap tiles around, etc) but in order to display it you need to create a TilemapLayer.
map = new Phaser.Tilemap(game, 'level3');
// A Tileset is a single image containing a strip of tiles. Each tile is broken down into its own Phaser.Tile object on import.
// You can set properties on the Tile objects, such as collision, n-way movement and meta data.
// A Tilemap uses a Tileset to render. The indexes in the map corresponding to the Tileset indexes.
// This way multiple levels can share the same single Tileset without requiring one each.
tileset = game.cache.getTileset('tiles');
// Basically this sets EVERY SINGLE tile to fully collide on all faces
tileset.setCollisionRange(0, tileset.total - 1, true, true, true, true);
// And this turns off collision on the only tile we don't want collision on :)
tileset.setCollision(6, false, false, false, false);
// A TilemapLayer consists of an x,y coordinate (position), a width and height, a Tileset and a Tilemap which it uses for map data.
// The x/y coordinates are in World space and you can place the tilemap layer anywhere in the world.
// The width/height is the rendered size of the layer in pixels, not the size of the map data itself.
// This one gives tileset as a string, the other an object
// layer = new Phaser.TilemapLayer(game, 0, 0, 640, 400, 'tiles', map, 0);
layer = new Phaser.TilemapLayer(game, 0, 0, 640, 400, tileset, map, 0);
// To set tiles for collision you need to modify the Tileset, which is a property of the layer
// Task now
//
// 1) Get tiles that will collide with sprites new position (hullX and hullY)
// 2) Separate x/y
// Collision is based on the layer.x/y value
// layer.sprite.anchor.setTo(0.5, 0.5);
game.world.add(layer.sprite);
// This is a bit nuts, ought to find a way to automate it, but it looks cool :)
map.debugMap = [ '#000000',
'#e40058', '#e40058', '#e40058', '#80d010', '#bcbcbc', '#e40058', '#000000', '#0070ec', '#bcbcbc', '#bcbcbc', '#bcbcbc',
'#bcbcbc', '#bcbcbc', '#e40058', '#e40058', '#0070ec', '#0070ec', '#80d010', '#80d010', '#80d010', '#bcbcbc', '#bcbcbc',
'#bcbcbc', '#80d010', '#80d010', '#80d010', '#0070ec', '#0070ec', '#80d010', '#80d010', '#80d010', '#80d010', '#0070ec',
'#0070ec', '#24188c', '#24188c', '#80d010', '#80d010', '#80d010', '#bcbcbc', '#80d010', '#80d010', '#80d010', '#e40058',
'#e40058', '#bcbcbc', '#e40058', '#bcbcbc', '#e40058', '#bcbcbc', '#80d010', '#bcbcbc', '#80d010', '#000000', '#80d010',
'#80d010', '#80d010', '#bcbcbc', '#e40058', '#80d010', '#80d010', '#e40058', '#e40058', '#bcbcbc', '#bcbcbc', '#bcbcbc',
'#0070ec', '#0070ec', '#bcbcbc', '#bcbcbc', '#0070ec', '#0070ec', '#bcbcbc', '#bcbcbc', '#bcbcbc', '#bcbcbc', '#bcbcbc',
'#bcbcbc', '#bcbcbc'
];
// map.dump();
// layer.sprite.scale.setTo(2, 2);
// Works a treat :)
// game.add.sprite(320, 0, layer.texture, layer.frame);
// game.add.sprite(0, 200, layer.texture, layer.frame);
// game.add.sprite(320, 200, layer.texture, layer.frame);
// game.world.setBounds(0, 0, 2000, 2000);
// game.camera.x = 400;
cursors = game.input.keyboard.createCursorKeys();
}
function update() {
// layer.sprite.angle += 0.5;
if (cursors.up.isDown)
{
layer.y -= 4;
}
else if (cursors.down.isDown)
{
layer.y += 4;
}
if (cursors.left.isDown)
{
layer.x -= 4;
}
else if (cursors.right.isDown)
{
layer.x += 4;
}
// getTiles: function (x, y, width, height, collides, layer) {
overlap = layer.getTiles(layer.x, layer.y, 128, 128);
}
function render() {
layer.render();
game.context.save();
game.context.setTransform(1, 0, 0, 1, 0, 0);
game.context.fillStyle = 'rgba(255, 0, 0, 0.5)';
if (overlap.length > 1)
{
var x = 0;
var y = 0;
for (var i = 1; i < overlap.length; i++)
{
game.context.drawImage(
overlap[i].tile.tileset.image,
overlap[i].tile.x,
overlap[i].tile.y,
overlap[i].tile.width,
overlap[i].tile.height,
0 + (x * overlap[i].tile.width),
420 + (y * overlap[i].tile.height),
overlap[i].tile.width,
overlap[i].tile.height
);
if (overlap[i].tile.collideNone == false)
{
game.context.fillRect(0 + (x * overlap[i].tile.width), 420 + (y * overlap[i].tile.height), overlap[i].tile.width, overlap[i].tile.height);
}
x++;
if (x == overlap[0].tw)
{
x = 0;
y++;
}
}
}
game.context.restore();
}
examples/tilemaps/wip1.php
-171
View File
@@ -1,171 +0,0 @@
<?php
$title = "Tilemap Layer WIP #1";
require('../head.php');
?>
<script type="text/javascript">
// var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create });
var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create, update: update, render: render });
function preload() {
game.load.tilemap('level3', 'assets/maps/cybernoid.json', null, Phaser.Tilemap.TILED_JSON);
game.load.tileset('tiles', 'assets/maps/cybernoid.png', 16, 16);
}
var map;
var tileset;
var layer;
var cursors;
var sprite2;
var overlap;
function create() {
game.stage.backgroundColor = '#3d3d3d';
// A Tilemap object just holds the data needed to describe the map (i.e. the json exported from Tiled, or the CSV exported from elsewhere).
// You can add your own data or manipulate the data (swap tiles around, etc) but in order to display it you need to create a TilemapLayer.
map = new Phaser.Tilemap(game, 'level3');
// A Tileset is a single image containing a strip of tiles. Each tile is broken down into its own Phaser.Tile object on import.
// You can set properties on the Tile objects, such as collision, n-way movement and meta data.
// A Tilemap uses a Tileset to render. The indexes in the map corresponding to the Tileset indexes.
// This way multiple levels can share the same single Tileset without requiring one each.
tileset = game.cache.getTileset('tiles');
// Basically this sets EVERY SINGLE tile to fully collide on all faces
tileset.setCollisionRange(0, tileset.total - 1, true, true, true, true);
// And this turns off collision on the only tile we don't want collision on :)
tileset.setCollision(6, false, false, false, false);
// A TilemapLayer consists of an x,y coordinate (position), a width and height, a Tileset and a Tilemap which it uses for map data.
// The x/y coordinates are in World space and you can place the tilemap layer anywhere in the world.
// The width/height is the rendered size of the layer in pixels, not the size of the map data itself.
// This one gives tileset as a string, the other an object
// layer = new Phaser.TilemapLayer(game, 0, 0, 640, 400, 'tiles', map, 0);
layer = new Phaser.TilemapLayer(game, 0, 0, 640, 400, tileset, map, 0);
// To set tiles for collision you need to modify the Tileset, which is a property of the layer
// Task now
//
// 1) Get tiles that will collide with sprites new position (hullX and hullY)
// 2) Separate x/y
// Collision is based on the layer.x/y value
// layer.sprite.anchor.setTo(0.5, 0.5);
game.world.add(layer.sprite);
// This is a bit nuts, ought to find a way to automate it, but it looks cool :)
map.debugMap = [ '#000000',
'#e40058', '#e40058', '#e40058', '#80d010', '#bcbcbc', '#e40058', '#000000', '#0070ec', '#bcbcbc', '#bcbcbc', '#bcbcbc',
'#bcbcbc', '#bcbcbc', '#e40058', '#e40058', '#0070ec', '#0070ec', '#80d010', '#80d010', '#80d010', '#bcbcbc', '#bcbcbc',
'#bcbcbc', '#80d010', '#80d010', '#80d010', '#0070ec', '#0070ec', '#80d010', '#80d010', '#80d010', '#80d010', '#0070ec',
'#0070ec', '#24188c', '#24188c', '#80d010', '#80d010', '#80d010', '#bcbcbc', '#80d010', '#80d010', '#80d010', '#e40058',
'#e40058', '#bcbcbc', '#e40058', '#bcbcbc', '#e40058', '#bcbcbc', '#80d010', '#bcbcbc', '#80d010', '#000000', '#80d010',
'#80d010', '#80d010', '#bcbcbc', '#e40058', '#80d010', '#80d010', '#e40058', '#e40058', '#bcbcbc', '#bcbcbc', '#bcbcbc',
'#0070ec', '#0070ec', '#bcbcbc', '#bcbcbc', '#0070ec', '#0070ec', '#bcbcbc', '#bcbcbc', '#bcbcbc', '#bcbcbc', '#bcbcbc',
'#bcbcbc', '#bcbcbc'
];
// map.dump();
// layer.sprite.scale.setTo(2, 2);
// Works a treat :)
// game.add.sprite(320, 0, layer.texture, layer.frame);
// game.add.sprite(0, 200, layer.texture, layer.frame);
// game.add.sprite(320, 200, layer.texture, layer.frame);
// game.world.setBounds(0, 0, 2000, 2000);
// game.camera.x = 400;
cursors = game.input.keyboard.createCursorKeys();
}
function update() {
// layer.sprite.angle += 0.5;
if (cursors.up.isDown)
{
layer.y -= 4;
}
else if (cursors.down.isDown)
{
layer.y += 4;
}
if (cursors.left.isDown)
{
layer.x -= 4;
}
else if (cursors.right.isDown)
{
layer.x += 4;
}
// getTiles: function (x, y, width, height, collides, layer) {
overlap = layer.getTiles(layer.x, layer.y, 128, 128);
}
function render() {
layer.render();
game.context.save();
game.context.setTransform(1, 0, 0, 1, 0, 0);
game.context.fillStyle = 'rgba(255, 0, 0, 0.5)';
if (overlap.length > 1)
{
var x = 0;
var y = 0;
for (var i = 1; i < overlap.length; i++)
{
game.context.drawImage(
overlap[i].tile.tileset.image,
overlap[i].tile.x,
overlap[i].tile.y,
overlap[i].tile.width,
overlap[i].tile.height,
0 + (x * overlap[i].tile.width),
420 + (y * overlap[i].tile.height),
overlap[i].tile.width,
overlap[i].tile.height
);
if (overlap[i].tile.collideNone == false)
{
game.context.fillRect(0 + (x * overlap[i].tile.width), 420 + (y * overlap[i].tile.height), overlap[i].tile.width, overlap[i].tile.height);
}
x++;
if (x == overlap[0].tw)
{
x = 0;
y++;
}
}
}
game.context.restore();
}
</script>
<?php
require('../foot.php');
?>
examples/tilemaps/wip2.js
+189
View File
@@ -0,0 +1,189 @@
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
function preload() {
game.load.tilemap('level3', 'assets/maps/cybernoid.json', null, Phaser.Tilemap.TILED_JSON);
game.load.tileset('tiles', 'assets/maps/cybernoid.png', 16, 16);
// game.load.image('phaser', 'assets/sprites/phaser-dude.png');
game.load.image('phaser', 'assets/sprites/space-baddie.png');
}
var map;
var tileset;
var layer;
var cursors;
var overlap;
var sprite;
function create() {
game.stage.backgroundColor = '#3d3d3d';
// A Tilemap object just holds the data needed to describe the map (i.e. the json exported from Tiled, or the CSV exported from elsewhere).
// You can add your own data or manipulate the data (swap tiles around, etc) but in order to display it you need to create a TilemapLayer.
map = new Phaser.Tilemap(game, 'level3');
// A Tileset is a single image containing a strip of tiles. Each tile is broken down into its own Phaser.Tile object on import.
// You can set properties on the Tile objects, such as collision, n-way movement and meta data.
// A Tilemap uses a Tileset to render. The indexes in the map corresponding to the Tileset indexes.
// This way multiple levels can share the same single Tileset without requiring one each.
tileset = game.cache.getTileset('tiles');
// Basically this sets EVERY SINGLE tile to fully collide on all faces
tileset.setCollisionRange(0, tileset.total - 1, true, true, true, true);
// And this turns off collision on the only tile we don't want collision on :)
tileset.setCollision(6, false, false, false, false);
tileset.setCollision(34, false, false, false, false);
tileset.setCollision(35, false, false, false, false);
// A TilemapLayer consists of an x,y coordinate (position), a width and height, a Tileset and a Tilemap which it uses for map data.
// The x/y coordinates are in World space and you can place the tilemap layer anywhere in the world.
// The width/height is the rendered size of the layer in pixels, not the size of the map data itself.
// This one gives tileset as a string, the other an object
// layer = new Phaser.TilemapLayer(game, 0, 0, 640, 400, 'tiles', map, 0);
layer = new Phaser.TilemapLayer(game, 0, 0, 800, 400, tileset, map, 0);
// To set tiles for collision you need to modify the Tileset, which is a property of the layer
// Task now
//
// 1) Get tiles that will collide with sprites new position (hullX and hullY)
// 2) Separate x/y
// Collision is based on the layer.x/y value
// layer.sprite.anchor.setTo(0.5, 0.5);
game.world.add(layer.sprite);
// This is a bit nuts, ought to find a way to automate it, but it looks cool :)
map.debugMap = [ '#000000',
'#e40058', '#e40058', '#e40058', '#80d010', '#bcbcbc', '#e40058', '#000000', '#0070ec', '#bcbcbc', '#bcbcbc', '#bcbcbc',
'#bcbcbc', '#bcbcbc', '#e40058', '#e40058', '#0070ec', '#0070ec', '#80d010', '#80d010', '#80d010', '#bcbcbc', '#bcbcbc',
'#bcbcbc', '#80d010', '#80d010', '#80d010', '#0070ec', '#0070ec', '#80d010', '#80d010', '#80d010', '#80d010', '#0070ec',
'#0070ec', '#24188c', '#24188c', '#80d010', '#80d010', '#80d010', '#bcbcbc', '#80d010', '#80d010', '#80d010', '#e40058',
'#e40058', '#bcbcbc', '#e40058', '#bcbcbc', '#e40058', '#bcbcbc', '#80d010', '#bcbcbc', '#80d010', '#000000', '#80d010',
'#80d010', '#80d010', '#bcbcbc', '#e40058', '#80d010', '#80d010', '#e40058', '#e40058', '#bcbcbc', '#bcbcbc', '#bcbcbc',
'#0070ec', '#0070ec', '#bcbcbc', '#bcbcbc', '#0070ec', '#0070ec', '#bcbcbc', '#bcbcbc', '#bcbcbc', '#bcbcbc', '#bcbcbc',
'#bcbcbc', '#bcbcbc'
];
// map.dump();
// layer.sprite.scale.setTo(2, 2);
// Works a treat :)
// game.add.sprite(320, 0, layer.texture, layer.frame);
// game.add.sprite(0, 200, layer.texture, layer.frame);
// game.add.sprite(320, 200, layer.texture, layer.frame);
// game.world.setBounds(0, 0, 2000, 2000);
// game.camera.x = 400;
sprite = game.add.sprite(200, 80, 'phaser');
cursors = game.input.keyboard.createCursorKeys();
}
function update() {
sprite.body.velocity.setTo(0, 0);
// layer.sprite.angle += 0.5;
if (cursors.up.isDown)
{
sprite.body.velocity.y = -100;
// layer.y -= 4;
}
else if (cursors.down.isDown)
{
sprite.body.velocity.y = 100;
// layer.y += 4;
}
if (cursors.left.isDown)
{
sprite.body.velocity.x = -100;
// layer.x -= 4;
}
else if (cursors.right.isDown)
{
sprite.body.velocity.x = 100;
// layer.x += 4;
}
// getTiles: function (x, y, width, height, collides, layer) {
overlap = layer.getTiles(sprite.body.x, sprite.body.y, sprite.body.width, sprite.body.height, true);
if (overlap.length > 1)
{
// console.log('%c ', 'background: #000000')
for (var i = 1; i < overlap.length; i++)
{
game.physics.separateTile(sprite.body, overlap[i]);
}
}
}
function render() {
layer.render();
game.debug.renderSpriteInfo(sprite, 32, 450);
// game.debug.renderCameraInfo(game.camera, 32, 32);
/*
game.context.save();
game.context.setTransform(1, 0, 0, 1, 0, 0);
game.context.fillStyle = 'rgba(255, 0, 0, 0.5)';
if (overlap.length > 1)
{
var x = 0;
var y = 0;
for (var i = 1; i < overlap.length; i++)
{
game.context.drawImage(
overlap[i].tile.tileset.image,
overlap[i].tile.x,
overlap[i].tile.y,
overlap[i].tile.width,
overlap[i].tile.height,
0 + (x * overlap[i].tile.width),
420 + (y * overlap[i].tile.height),
overlap[i].tile.width,
overlap[i].tile.height
);
if (overlap[i].tile.collideNone == false)
{
game.context.fillRect(0 + (x * overlap[i].tile.width), 420 + (y * overlap[i].tile.height), overlap[i].tile.width, overlap[i].tile.height);
}
x++;
if (x == overlap[0].tw)
{
x = 0;
y++;
}
}
}
game.context.restore();
*/
// game.debug.renderRectangle(sprite.body.hullX);
}
examples/tilemaps/wip2.php
-202
View File
@@ -1,202 +0,0 @@
<?php
$title = "Tilemap Layer WIP #1";
require('../head.php');
?>
<script type="text/javascript">
// var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create });
var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create, update: update, render: render });
function preload() {
game.load.tilemap('level3', 'assets/maps/cybernoid.json', null, Phaser.Tilemap.TILED_JSON);
game.load.tileset('tiles', 'assets/maps/cybernoid.png', 16, 16);
// game.load.image('phaser', 'assets/sprites/phaser-dude.png');
game.load.image('phaser', 'assets/sprites/space-baddie.png');
}
var map;
var tileset;
var layer;
var cursors;
var overlap;
var sprite;
function create() {
game.stage.backgroundColor = '#3d3d3d';
// A Tilemap object just holds the data needed to describe the map (i.e. the json exported from Tiled, or the CSV exported from elsewhere).
// You can add your own data or manipulate the data (swap tiles around, etc) but in order to display it you need to create a TilemapLayer.
map = new Phaser.Tilemap(game, 'level3');
// A Tileset is a single image containing a strip of tiles. Each tile is broken down into its own Phaser.Tile object on import.
// You can set properties on the Tile objects, such as collision, n-way movement and meta data.
// A Tilemap uses a Tileset to render. The indexes in the map corresponding to the Tileset indexes.
// This way multiple levels can share the same single Tileset without requiring one each.
tileset = game.cache.getTileset('tiles');
// Basically this sets EVERY SINGLE tile to fully collide on all faces
tileset.setCollisionRange(0, tileset.total - 1, true, true, true, true);
// And this turns off collision on the only tile we don't want collision on :)
tileset.setCollision(6, false, false, false, false);
tileset.setCollision(34, false, false, false, false);
tileset.setCollision(35, false, false, false, false);
// A TilemapLayer consists of an x,y coordinate (position), a width and height, a Tileset and a Tilemap which it uses for map data.
// The x/y coordinates are in World space and you can place the tilemap layer anywhere in the world.
// The width/height is the rendered size of the layer in pixels, not the size of the map data itself.
// This one gives tileset as a string, the other an object
// layer = new Phaser.TilemapLayer(game, 0, 0, 640, 400, 'tiles', map, 0);
layer = new Phaser.TilemapLayer(game, 0, 0, 800, 400, tileset, map, 0);
// To set tiles for collision you need to modify the Tileset, which is a property of the layer
// Task now
//
// 1) Get tiles that will collide with sprites new position (hullX and hullY)
// 2) Separate x/y
// Collision is based on the layer.x/y value
// layer.sprite.anchor.setTo(0.5, 0.5);
game.world.add(layer.sprite);
// This is a bit nuts, ought to find a way to automate it, but it looks cool :)
map.debugMap = [ '#000000',
'#e40058', '#e40058', '#e40058', '#80d010', '#bcbcbc', '#e40058', '#000000', '#0070ec', '#bcbcbc', '#bcbcbc', '#bcbcbc',
'#bcbcbc', '#bcbcbc', '#e40058', '#e40058', '#0070ec', '#0070ec', '#80d010', '#80d010', '#80d010', '#bcbcbc', '#bcbcbc',
'#bcbcbc', '#80d010', '#80d010', '#80d010', '#0070ec', '#0070ec', '#80d010', '#80d010', '#80d010', '#80d010', '#0070ec',
'#0070ec', '#24188c', '#24188c', '#80d010', '#80d010', '#80d010', '#bcbcbc', '#80d010', '#80d010', '#80d010', '#e40058',
'#e40058', '#bcbcbc', '#e40058', '#bcbcbc', '#e40058', '#bcbcbc', '#80d010', '#bcbcbc', '#80d010', '#000000', '#80d010',
'#80d010', '#80d010', '#bcbcbc', '#e40058', '#80d010', '#80d010', '#e40058', '#e40058', '#bcbcbc', '#bcbcbc', '#bcbcbc',
'#0070ec', '#0070ec', '#bcbcbc', '#bcbcbc', '#0070ec', '#0070ec', '#bcbcbc', '#bcbcbc', '#bcbcbc', '#bcbcbc', '#bcbcbc',
'#bcbcbc', '#bcbcbc'
];
// map.dump();
// layer.sprite.scale.setTo(2, 2);
// Works a treat :)
// game.add.sprite(320, 0, layer.texture, layer.frame);
// game.add.sprite(0, 200, layer.texture, layer.frame);
// game.add.sprite(320, 200, layer.texture, layer.frame);
// game.world.setBounds(0, 0, 2000, 2000);
// game.camera.x = 400;
sprite = game.add.sprite(200, 80, 'phaser');
cursors = game.input.keyboard.createCursorKeys();
}
function update() {
sprite.body.velocity.setTo(0, 0);
// layer.sprite.angle += 0.5;
if (cursors.up.isDown)
{
sprite.body.velocity.y = -100;
// layer.y -= 4;
}
else if (cursors.down.isDown)
{
sprite.body.velocity.y = 100;
// layer.y += 4;
}
if (cursors.left.isDown)
{
sprite.body.velocity.x = -100;
// layer.x -= 4;
}
else if (cursors.right.isDown)
{
sprite.body.velocity.x = 100;
// layer.x += 4;
}
// getTiles: function (x, y, width, height, collides, layer) {
overlap = layer.getTiles(sprite.body.x, sprite.body.y, sprite.body.width, sprite.body.height, true);
if (overlap.length > 1)
{
// console.log('%c ', 'background: #000000')
for (var i = 1; i < overlap.length; i++)
{
game.physics.separateTile(sprite.body, overlap[i]);
}
}
}
function render() {
layer.render();
game.debug.renderSpriteInfo(sprite, 32, 450);
// game.debug.renderCameraInfo(game.camera, 32, 32);
/*
game.context.save();
game.context.setTransform(1, 0, 0, 1, 0, 0);
game.context.fillStyle = 'rgba(255, 0, 0, 0.5)';
if (overlap.length > 1)
{
var x = 0;
var y = 0;
for (var i = 1; i < overlap.length; i++)
{
game.context.drawImage(
overlap[i].tile.tileset.image,
overlap[i].tile.x,
overlap[i].tile.y,
overlap[i].tile.width,
overlap[i].tile.height,
0 + (x * overlap[i].tile.width),
420 + (y * overlap[i].tile.height),
overlap[i].tile.width,
overlap[i].tile.height
);
if (overlap[i].tile.collideNone == false)
{
game.context.fillRect(0 + (x * overlap[i].tile.width), 420 + (y * overlap[i].tile.height), overlap[i].tile.width, overlap[i].tile.height);
}
x++;
if (x == overlap[0].tw)
{
x = 0;
y++;
}
}
}
game.context.restore();
*/
// game.debug.renderRectangle(sprite.body.hullX);
}
</script>
<?php
require('../foot.php');
?>
examples/tilemaps/wip3.js
+188
View File
@@ -0,0 +1,188 @@
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
function preload() {
game.load.tilemap('level3', 'assets/maps/cybernoid.json', null, Phaser.Tilemap.TILED_JSON);
game.load.tileset('tiles', 'assets/maps/cybernoid.png', 16, 16);
// game.load.image('phaser', 'assets/sprites/phaser-dude.png');
game.load.image('phaser', 'assets/sprites/space-baddie.png');
}
var map;
var tileset;
var layer;
var cursors;
var overlap;
var sprite;
function create() {
game.stage.backgroundColor = '#3d3d3d';
// A Tilemap object just holds the data needed to describe the map (i.e. the json exported from Tiled, or the CSV exported from elsewhere).
// You can add your own data or manipulate the data (swap tiles around, etc) but in order to display it you need to create a TilemapLayer.
map = new Phaser.Tilemap(game, 'level3');
// A Tileset is a single image containing a strip of tiles. Each tile is broken down into its own Phaser.Tile object on import.
// You can set properties on the Tile objects, such as collision, n-way movement and meta data.
// A Tilemap uses a Tileset to render. The indexes in the map corresponding to the Tileset indexes.
// This way multiple levels can share the same single Tileset without requiring one each.
tileset = game.cache.getTileset('tiles');
// Basically this sets EVERY SINGLE tile to fully collide on all faces
tileset.setCollisionRange(0, tileset.total - 1, true, true, true, true);
// And this turns off collision on the only tile we don't want collision on :)
tileset.setCollision(6, false, false, false, false);
tileset.setCollision(34, false, false, false, false);
tileset.setCollision(35, false, false, false, false);
// A TilemapLayer consists of an x,y coordinate (position), a width and height, a Tileset and a Tilemap which it uses for map data.
// The x/y coordinates are in World space and you can place the tilemap layer anywhere in the world.
// The width/height is the rendered size of the layer in pixels, not the size of the map data itself.
// This one gives tileset as a string, the other an object
// layer = new Phaser.TilemapLayer(game, 0, 0, 800, 400, tileset, map, 0);
layer = new Phaser.TilemapLayer(game, 0, 0, 400, 200, tileset, map, 0);
layer.sprite.scale.setTo(2, 2);
// layer.sprite.anchor.setTo(0.5, 0.5);
game.world.add(layer.sprite);
// This is a bit nuts, ought to find a way to automate it, but it looks cool :)
map.debugMap = [ '#000000',
'#e40058', '#e40058', '#e40058', '#80d010', '#bcbcbc', '#e40058', '#000000', '#0070ec', '#bcbcbc', '#bcbcbc', '#bcbcbc',
'#bcbcbc', '#bcbcbc', '#e40058', '#e40058', '#0070ec', '#0070ec', '#80d010', '#80d010', '#80d010', '#bcbcbc', '#bcbcbc',
'#bcbcbc', '#80d010', '#80d010', '#80d010', '#0070ec', '#0070ec', '#80d010', '#80d010', '#80d010', '#80d010', '#0070ec',
'#0070ec', '#24188c', '#24188c', '#80d010', '#80d010', '#80d010', '#bcbcbc', '#80d010', '#80d010', '#80d010', '#e40058',
'#e40058', '#bcbcbc', '#e40058', '#bcbcbc', '#e40058', '#bcbcbc', '#80d010', '#bcbcbc', '#80d010', '#000000', '#80d010',
'#80d010', '#80d010', '#bcbcbc', '#e40058', '#80d010', '#80d010', '#e40058', '#e40058', '#bcbcbc', '#bcbcbc', '#bcbcbc',
'#0070ec', '#0070ec', '#bcbcbc', '#bcbcbc', '#0070ec', '#0070ec', '#bcbcbc', '#bcbcbc', '#bcbcbc', '#bcbcbc', '#bcbcbc',
'#bcbcbc', '#bcbcbc'
];
// map.dump();
// layer.sprite.scale.setTo(2, 2);
// Works a treat :)
// game.add.sprite(320, 0, layer.texture, layer.frame);
// game.add.sprite(0, 200, layer.texture, layer.frame);
// game.add.sprite(320, 200, layer.texture, layer.frame);
// game.world.setBounds(0, 0, 2000, 2000);
// game.camera.x = 400;
sprite = game.add.sprite(200, 80, 'phaser');
// sprite.x = 140;
// sprite.y = 40;
//sprite.scale.setTo(2, 2);
cursors = game.input.keyboard.createCursorKeys();
}
function update() {
sprite.body.velocity.setTo(0, 0);
// layer.sprite.angle += 0.5;
if (cursors.up.isDown)
{
sprite.body.velocity.y = -100;
// layer.y -= 4;
}
else if (cursors.down.isDown)
{
sprite.body.velocity.y = 100;
// layer.y += 4;
}
if (cursors.left.isDown)
{
sprite.body.velocity.x = -100;
// layer.x -= 4;
}
else if (cursors.right.isDown)
{
sprite.body.velocity.x = 100;
// layer.x += 4;
}
// getTiles: function (x, y, width, height, collides, layer) {
overlap = layer.getTiles(sprite.body.x, sprite.body.y, sprite.body.width, sprite.body.height, true);
if (overlap.length > 1)
{
// console.log('%c ', 'background: #000000')
for (var i = 1; i < overlap.length; i++)
{
game.physics.separateTile(sprite.body, overlap[i]);
}
}
}
function render() {
layer.render();
game.debug.renderSpriteBody(sprite);
game.debug.renderSpriteInfo(sprite, 32, 450);
// game.debug.renderCameraInfo(game.camera, 32, 32);
/*
game.context.save();
game.context.setTransform(1, 0, 0, 1, 0, 0);
game.context.fillStyle = 'rgba(255, 0, 0, 0.5)';
if (overlap.length > 1)
{
var x = 0;
var y = 0;
for (var i = 1; i < overlap.length; i++)
{
game.context.drawImage(
overlap[i].tile.tileset.image,
overlap[i].tile.x,
overlap[i].tile.y,
overlap[i].tile.width,
overlap[i].tile.height,
0 + (x * overlap[i].tile.width),
420 + (y * overlap[i].tile.height),
overlap[i].tile.width,
overlap[i].tile.height
);
if (overlap[i].tile.collideNone == false)
{
game.context.fillRect(0 + (x * overlap[i].tile.width), 420 + (y * overlap[i].tile.height), overlap[i].tile.width, overlap[i].tile.height);
}
x++;
if (x == overlap[0].tw)
{
x = 0;
y++;
}
}
}
game.context.restore();
*/
// game.debug.renderRectangle(sprite.body.hullX);
}
examples/tilemaps/wip3.php
-201
View File
@@ -1,201 +0,0 @@
<?php
$title = "Tilemap Layer WIP #1";
require('../head.php');
?>
<script type="text/javascript">
// var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create });
var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create, update: update, render: render });
function preload() {
game.load.tilemap('level3', 'assets/maps/cybernoid.json', null, Phaser.Tilemap.TILED_JSON);
game.load.tileset('tiles', 'assets/maps/cybernoid.png', 16, 16);
// game.load.image('phaser', 'assets/sprites/phaser-dude.png');
game.load.image('phaser', 'assets/sprites/space-baddie.png');
}
var map;
var tileset;
var layer;
var cursors;
var overlap;
var sprite;
function create() {
game.stage.backgroundColor = '#3d3d3d';
// A Tilemap object just holds the data needed to describe the map (i.e. the json exported from Tiled, or the CSV exported from elsewhere).
// You can add your own data or manipulate the data (swap tiles around, etc) but in order to display it you need to create a TilemapLayer.
map = new Phaser.Tilemap(game, 'level3');
// A Tileset is a single image containing a strip of tiles. Each tile is broken down into its own Phaser.Tile object on import.
// You can set properties on the Tile objects, such as collision, n-way movement and meta data.
// A Tilemap uses a Tileset to render. The indexes in the map corresponding to the Tileset indexes.
// This way multiple levels can share the same single Tileset without requiring one each.
tileset = game.cache.getTileset('tiles');
// Basically this sets EVERY SINGLE tile to fully collide on all faces
tileset.setCollisionRange(0, tileset.total - 1, true, true, true, true);
// And this turns off collision on the only tile we don't want collision on :)
tileset.setCollision(6, false, false, false, false);
tileset.setCollision(34, false, false, false, false);
tileset.setCollision(35, false, false, false, false);
// A TilemapLayer consists of an x,y coordinate (position), a width and height, a Tileset and a Tilemap which it uses for map data.
// The x/y coordinates are in World space and you can place the tilemap layer anywhere in the world.
// The width/height is the rendered size of the layer in pixels, not the size of the map data itself.
// This one gives tileset as a string, the other an object
// layer = new Phaser.TilemapLayer(game, 0, 0, 800, 400, tileset, map, 0);
layer = new Phaser.TilemapLayer(game, 0, 0, 400, 200, tileset, map, 0);
layer.sprite.scale.setTo(2, 2);
// layer.sprite.anchor.setTo(0.5, 0.5);
game.world.add(layer.sprite);
// This is a bit nuts, ought to find a way to automate it, but it looks cool :)
map.debugMap = [ '#000000',
'#e40058', '#e40058', '#e40058', '#80d010', '#bcbcbc', '#e40058', '#000000', '#0070ec', '#bcbcbc', '#bcbcbc', '#bcbcbc',
'#bcbcbc', '#bcbcbc', '#e40058', '#e40058', '#0070ec', '#0070ec', '#80d010', '#80d010', '#80d010', '#bcbcbc', '#bcbcbc',
'#bcbcbc', '#80d010', '#80d010', '#80d010', '#0070ec', '#0070ec', '#80d010', '#80d010', '#80d010', '#80d010', '#0070ec',
'#0070ec', '#24188c', '#24188c', '#80d010', '#80d010', '#80d010', '#bcbcbc', '#80d010', '#80d010', '#80d010', '#e40058',
'#e40058', '#bcbcbc', '#e40058', '#bcbcbc', '#e40058', '#bcbcbc', '#80d010', '#bcbcbc', '#80d010', '#000000', '#80d010',
'#80d010', '#80d010', '#bcbcbc', '#e40058', '#80d010', '#80d010', '#e40058', '#e40058', '#bcbcbc', '#bcbcbc', '#bcbcbc',
'#0070ec', '#0070ec', '#bcbcbc', '#bcbcbc', '#0070ec', '#0070ec', '#bcbcbc', '#bcbcbc', '#bcbcbc', '#bcbcbc', '#bcbcbc',
'#bcbcbc', '#bcbcbc'
];
// map.dump();
// layer.sprite.scale.setTo(2, 2);
// Works a treat :)
// game.add.sprite(320, 0, layer.texture, layer.frame);
// game.add.sprite(0, 200, layer.texture, layer.frame);
// game.add.sprite(320, 200, layer.texture, layer.frame);
// game.world.setBounds(0, 0, 2000, 2000);
// game.camera.x = 400;
sprite = game.add.sprite(200, 80, 'phaser');
// sprite.x = 140;
// sprite.y = 40;
//sprite.scale.setTo(2, 2);
cursors = game.input.keyboard.createCursorKeys();
}
function update() {
sprite.body.velocity.setTo(0, 0);
// layer.sprite.angle += 0.5;
if (cursors.up.isDown)
{
sprite.body.velocity.y = -100;
// layer.y -= 4;
}
else if (cursors.down.isDown)
{
sprite.body.velocity.y = 100;
// layer.y += 4;
}
if (cursors.left.isDown)
{
sprite.body.velocity.x = -100;
// layer.x -= 4;
}
else if (cursors.right.isDown)
{
sprite.body.velocity.x = 100;
// layer.x += 4;
}
// getTiles: function (x, y, width, height, collides, layer) {
overlap = layer.getTiles(sprite.body.x, sprite.body.y, sprite.body.width, sprite.body.height, true);
if (overlap.length > 1)
{
// console.log('%c ', 'background: #000000')
for (var i = 1; i < overlap.length; i++)
{
game.physics.separateTile(sprite.body, overlap[i]);
}
}
}
function render() {
layer.render();
game.debug.renderSpriteBody(sprite);
game.debug.renderSpriteInfo(sprite, 32, 450);
// game.debug.renderCameraInfo(game.camera, 32, 32);
/*
game.context.save();
game.context.setTransform(1, 0, 0, 1, 0, 0);
game.context.fillStyle = 'rgba(255, 0, 0, 0.5)';
if (overlap.length > 1)
{
var x = 0;
var y = 0;
for (var i = 1; i < overlap.length; i++)
{
game.context.drawImage(
overlap[i].tile.tileset.image,
overlap[i].tile.x,
overlap[i].tile.y,
overlap[i].tile.width,
overlap[i].tile.height,
0 + (x * overlap[i].tile.width),
420 + (y * overlap[i].tile.height),
overlap[i].tile.width,
overlap[i].tile.height
);
if (overlap[i].tile.collideNone == false)
{
game.context.fillRect(0 + (x * overlap[i].tile.width), 420 + (y * overlap[i].tile.height), overlap[i].tile.width, overlap[i].tile.height);
}
x++;
if (x == overlap[0].tw)
{
x = 0;
y++;
}
}
}
game.context.restore();
*/
// game.debug.renderRectangle(sprite.body.hullX);
}
</script>
<?php
require('../foot.php');
?>
examples/tilemaps/wip4.js
+197
View File
@@ -0,0 +1,197 @@
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
function preload() {
game.load.tilemap('level3', 'assets/maps/cybernoid.json', null, Phaser.Tilemap.TILED_JSON);
game.load.tileset('tiles', 'assets/maps/cybernoid.png', 16, 16);
game.load.image('phaser', 'assets/sprites/phaser-ship.png');
}
var map;
var tileset;
var layer;
var cursors;
var overlap;
var sprite;
function create() {
game.stage.backgroundColor = '#3d3d3d';
// A Tilemap object just holds the data needed to describe the map (i.e. the json exported from Tiled, or the CSV exported from elsewhere).
// You can add your own data or manipulate the data (swap tiles around, etc) but in order to display it you need to create a TilemapLayer.
map = new Phaser.Tilemap(game, 'level3');
// A Tileset is a single image containing a strip of tiles. Each tile is broken down into its own Phaser.Tile object on import.
// You can set properties on the Tile objects, such as collision, n-way movement and meta data.
// A Tilemap uses a Tileset to render. The indexes in the map corresponding to the Tileset indexes.
// This way multiple levels can share the same single Tileset without requiring one each.
tileset = game.cache.getTileset('tiles');
// Basically this sets EVERY SINGLE tile to fully collide on all faces
tileset.setCollisionRange(0, tileset.total - 1, true, true, true, true);
// And this turns off collision on the only tile we don't want collision on :)
tileset.setCollision(6, false, false, false, false);
tileset.setCollision(31, false, false, false, false);
tileset.setCollision(34, false, false, false, false);
tileset.setCollision(35, false, false, false, false);
tileset.setCollision(46, false, false, false, false);
// A TilemapLayer consists of an x,y coordinate (position), a width and height, a Tileset and a Tilemap which it uses for map data.
// The x/y coordinates are in World space and you can place the tilemap layer anywhere in the world.
// The width/height is the rendered size of the layer in pixels, not the size of the map data itself.
// This one gives tileset as a string, the other an object
layer = new Phaser.TilemapLayer(game, 0, 0, 800, 600, tileset, map, 0);
// layer = new Phaser.TilemapLayer(game, 0, 0, 400, 200, tileset, map, 0);
// layer.sprite.scale.setTo(2, 2);
// layer.sprite.anchor.setTo(0.5, 0.5);
layer.resizeWorld();
game.world.add(layer.sprite);
// This is a bit nuts, ought to find a way to automate it, but it looks cool :)
map.debugMap = [ '#000000',
'#e40058', '#e40058', '#e40058', '#80d010', '#bcbcbc', '#e40058', '#000000', '#0070ec', '#bcbcbc', '#bcbcbc', '#bcbcbc',
'#bcbcbc', '#bcbcbc', '#e40058', '#e40058', '#0070ec', '#0070ec', '#80d010', '#80d010', '#80d010', '#bcbcbc', '#bcbcbc',
'#bcbcbc', '#80d010', '#80d010', '#80d010', '#0070ec', '#0070ec', '#80d010', '#80d010', '#80d010', '#80d010', '#0070ec',
'#0070ec', '#24188c', '#24188c', '#80d010', '#80d010', '#80d010', '#bcbcbc', '#80d010', '#80d010', '#80d010', '#e40058',
'#e40058', '#bcbcbc', '#e40058', '#bcbcbc', '#e40058', '#bcbcbc', '#80d010', '#bcbcbc', '#80d010', '#000000', '#80d010',
'#80d010', '#80d010', '#bcbcbc', '#e40058', '#80d010', '#80d010', '#e40058', '#e40058', '#bcbcbc', '#bcbcbc', '#bcbcbc',
'#0070ec', '#0070ec', '#bcbcbc', '#bcbcbc', '#0070ec', '#0070ec', '#bcbcbc', '#bcbcbc', '#bcbcbc', '#bcbcbc', '#bcbcbc',
'#bcbcbc', '#bcbcbc'
];
// map.dump();
// layer.sprite.scale.setTo(2, 2);
// Works a treat :)
// game.add.sprite(320, 0, layer.texture, layer.frame);
// game.add.sprite(0, 200, layer.texture, layer.frame);
// game.add.sprite(320, 200, layer.texture, layer.frame);
// game.world.setBounds(0, 0, 2000, 2000);
// game.camera.x = 400;
sprite = game.add.sprite(450, 80, 'phaser');
sprite.anchor.setTo(0.5, 0.5);
// sprite.x = 140;
// sprite.y = 40;
//sprite.scale.setTo(2, 2);
// sprite.body.gravity.y = 100;
// sprite.body.bounce.x = 0.5;
// sprite.body.bounce.y = 0.2;
game.camera.follow(sprite);
game.camera.deadzone = new Phaser.Rectangle(160, 160, layer.renderWidth-320, layer.renderHeight-320);
cursors = game.input.keyboard.createCursorKeys();
}
function update() {
layer.update();
// getTiles: function (x, y, width, height, collides, layer) {
overlap = layer.getTiles(sprite.body.x, sprite.body.y, sprite.body.width, sprite.body.height, true);
if (overlap.length > 1)
{
for (var i = 1; i < overlap.length; i++)
{
game.physics.separateTile(sprite.body, overlap[i]);
}
}
sprite.body.velocity.x = 0;
sprite.body.velocity.y = 0;
if (cursors.up.isDown)
{
sprite.body.velocity.y = -150;
}
else if (cursors.down.isDown)
{
sprite.body.velocity.y = 150;
}
if (cursors.left.isDown)
{
sprite.body.velocity.x = -150;
sprite.scale.x = -1;
}
else if (cursors.right.isDown)
{
sprite.body.velocity.x = 150;
sprite.scale.x = 1;
}
}
function render() {
layer.render();
// game.debug.renderSpriteBody(sprite);
// game.debug.renderSpriteInfo(sprite, 32, 450);
// game.debug.renderCameraInfo(game.camera, 32, 32);
/*
game.context.save();
game.context.setTransform(1, 0, 0, 1, 0, 0);
game.context.fillStyle = 'rgba(255, 0, 0, 0.5)';
if (overlap.length > 1)
{
var x = 0;
var y = 0;
for (var i = 1; i < overlap.length; i++)
{
game.context.drawImage(
overlap[i].tile.tileset.image,
overlap[i].tile.x,
overlap[i].tile.y,
overlap[i].tile.width,
overlap[i].tile.height,
0 + (x * overlap[i].tile.width),
420 + (y * overlap[i].tile.height),
overlap[i].tile.width,
overlap[i].tile.height
);
if (overlap[i].tile.collideNone == false)
{
game.context.fillRect(0 + (x * overlap[i].tile.width), 420 + (y * overlap[i].tile.height), overlap[i].tile.width, overlap[i].tile.height);
}
x++;
if (x == overlap[0].tw)
{
x = 0;
y++;
}
}
}
game.context.restore();
*/
// game.debug.renderRectangle(game.camera.deadzone, 'rgba(0,200,0,0.5)');
}
examples/tilemaps/wip4.php
-210
View File
@@ -1,210 +0,0 @@
<?php
$title = "Tilemap Layer WIP #1";
require('../head.php');
?>
<script type="text/javascript">
// var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create });
var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create, update: update, render: render });
function preload() {
game.load.tilemap('level3', 'assets/maps/cybernoid.json', null, Phaser.Tilemap.TILED_JSON);
game.load.tileset('tiles', 'assets/maps/cybernoid.png', 16, 16);
game.load.image('phaser', 'assets/sprites/phaser-ship.png');
}
var map;
var tileset;
var layer;
var cursors;
var overlap;
var sprite;
function create() {
game.stage.backgroundColor = '#3d3d3d';
// A Tilemap object just holds the data needed to describe the map (i.e. the json exported from Tiled, or the CSV exported from elsewhere).
// You can add your own data or manipulate the data (swap tiles around, etc) but in order to display it you need to create a TilemapLayer.
map = new Phaser.Tilemap(game, 'level3');
// A Tileset is a single image containing a strip of tiles. Each tile is broken down into its own Phaser.Tile object on import.
// You can set properties on the Tile objects, such as collision, n-way movement and meta data.
// A Tilemap uses a Tileset to render. The indexes in the map corresponding to the Tileset indexes.
// This way multiple levels can share the same single Tileset without requiring one each.
tileset = game.cache.getTileset('tiles');
// Basically this sets EVERY SINGLE tile to fully collide on all faces
tileset.setCollisionRange(0, tileset.total - 1, true, true, true, true);
// And this turns off collision on the only tile we don't want collision on :)
tileset.setCollision(6, false, false, false, false);
tileset.setCollision(31, false, false, false, false);
tileset.setCollision(34, false, false, false, false);
tileset.setCollision(35, false, false, false, false);
tileset.setCollision(46, false, false, false, false);
// A TilemapLayer consists of an x,y coordinate (position), a width and height, a Tileset and a Tilemap which it uses for map data.
// The x/y coordinates are in World space and you can place the tilemap layer anywhere in the world.
// The width/height is the rendered size of the layer in pixels, not the size of the map data itself.
// This one gives tileset as a string, the other an object
layer = new Phaser.TilemapLayer(game, 0, 0, 800, 600, tileset, map, 0);
// layer = new Phaser.TilemapLayer(game, 0, 0, 400, 200, tileset, map, 0);
// layer.sprite.scale.setTo(2, 2);
// layer.sprite.anchor.setTo(0.5, 0.5);
layer.resizeWorld();
game.world.add(layer.sprite);
// This is a bit nuts, ought to find a way to automate it, but it looks cool :)
map.debugMap = [ '#000000',
'#e40058', '#e40058', '#e40058', '#80d010', '#bcbcbc', '#e40058', '#000000', '#0070ec', '#bcbcbc', '#bcbcbc', '#bcbcbc',
'#bcbcbc', '#bcbcbc', '#e40058', '#e40058', '#0070ec', '#0070ec', '#80d010', '#80d010', '#80d010', '#bcbcbc', '#bcbcbc',
'#bcbcbc', '#80d010', '#80d010', '#80d010', '#0070ec', '#0070ec', '#80d010', '#80d010', '#80d010', '#80d010', '#0070ec',
'#0070ec', '#24188c', '#24188c', '#80d010', '#80d010', '#80d010', '#bcbcbc', '#80d010', '#80d010', '#80d010', '#e40058',
'#e40058', '#bcbcbc', '#e40058', '#bcbcbc', '#e40058', '#bcbcbc', '#80d010', '#bcbcbc', '#80d010', '#000000', '#80d010',
'#80d010', '#80d010', '#bcbcbc', '#e40058', '#80d010', '#80d010', '#e40058', '#e40058', '#bcbcbc', '#bcbcbc', '#bcbcbc',
'#0070ec', '#0070ec', '#bcbcbc', '#bcbcbc', '#0070ec', '#0070ec', '#bcbcbc', '#bcbcbc', '#bcbcbc', '#bcbcbc', '#bcbcbc',
'#bcbcbc', '#bcbcbc'
];
// map.dump();
// layer.sprite.scale.setTo(2, 2);
// Works a treat :)
// game.add.sprite(320, 0, layer.texture, layer.frame);
// game.add.sprite(0, 200, layer.texture, layer.frame);
// game.add.sprite(320, 200, layer.texture, layer.frame);
// game.world.setBounds(0, 0, 2000, 2000);
// game.camera.x = 400;
sprite = game.add.sprite(450, 80, 'phaser');
sprite.anchor.setTo(0.5, 0.5);
// sprite.x = 140;
// sprite.y = 40;
//sprite.scale.setTo(2, 2);
// sprite.body.gravity.y = 100;
// sprite.body.bounce.x = 0.5;
// sprite.body.bounce.y = 0.2;
game.camera.follow(sprite);
game.camera.deadzone = new Phaser.Rectangle(160, 160, layer.renderWidth-320, layer.renderHeight-320);
cursors = game.input.keyboard.createCursorKeys();
}
function update() {
layer.update();
// getTiles: function (x, y, width, height, collides, layer) {
overlap = layer.getTiles(sprite.body.x, sprite.body.y, sprite.body.width, sprite.body.height, true);
if (overlap.length > 1)
{
for (var i = 1; i < overlap.length; i++)
{
game.physics.separateTile(sprite.body, overlap[i]);
}
}
sprite.body.velocity.x = 0;
sprite.body.velocity.y = 0;
if (cursors.up.isDown)
{
sprite.body.velocity.y = -150;
}
else if (cursors.down.isDown)
{
sprite.body.velocity.y = 150;
}
if (cursors.left.isDown)
{
sprite.body.velocity.x = -150;
sprite.scale.x = -1;
}
else if (cursors.right.isDown)
{
sprite.body.velocity.x = 150;
sprite.scale.x = 1;
}
}
function render() {
layer.render();
// game.debug.renderSpriteBody(sprite);
// game.debug.renderSpriteInfo(sprite, 32, 450);
// game.debug.renderCameraInfo(game.camera, 32, 32);
/*
game.context.save();
game.context.setTransform(1, 0, 0, 1, 0, 0);
game.context.fillStyle = 'rgba(255, 0, 0, 0.5)';
if (overlap.length > 1)
{
var x = 0;
var y = 0;
for (var i = 1; i < overlap.length; i++)
{
game.context.drawImage(
overlap[i].tile.tileset.image,
overlap[i].tile.x,
overlap[i].tile.y,
overlap[i].tile.width,
overlap[i].tile.height,
0 + (x * overlap[i].tile.width),
420 + (y * overlap[i].tile.height),
overlap[i].tile.width,
overlap[i].tile.height
);
if (overlap[i].tile.collideNone == false)
{
game.context.fillRect(0 + (x * overlap[i].tile.width), 420 + (y * overlap[i].tile.height), overlap[i].tile.width, overlap[i].tile.height);
}
x++;
if (x == overlap[0].tw)
{
x = 0;
y++;
}
}
}
game.context.restore();
*/
// game.debug.renderRectangle(game.camera.deadzone, 'rgba(0,200,0,0.5)');
}
</script>
<?php
require('../foot.php');
?>