tilemaps/tileset from bitmapdata
// var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { create: create });
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update });
var bmd;
var map;
var layer;
var marker;
var currentTile = 0;
var cursors;
var player;
var facing = 'left';
var jumpTimer = 0;
var jumpButton;
function preload() {
game.load.spritesheet('dude', 'assets/games/starstruck/dude.png', 32, 48);
}
function create() {
game.stage.backgroundColor = '#2d2d2d';
// Creates a blank tilemap
map = game.add.tilemap();
// This is our tileset - it's just a BitmapData filled with a selection of randomly colored tiles
// but you could generate anything here
bmd = game.make.bitmapData(32 * 25, 32 * 2);
var colors = Phaser.Color.HSVColorWheel();
var i = 0;
for (var y = 0; y < 2; y++)
{
for (var x = 0; x < 25; x++)
{
bmd.rect(x * 32, y * 32, 32, 32, colors[i].rgba);
i += 6;
}
}
// Add a Tileset image to the map
map.addTilesetImage('tiles', bmd);
// Creates a new blank layer and sets the map dimensions.
// In this case the map is 40x30 tiles in size and the tiles are 32x32 pixels in size.
layer = map.create('level1', 40, 30, 32, 32);
// Populate some tiles for our player to start on
map.putTile(30, 2, 10, layer);
map.putTile(30, 3, 10, layer);
map.putTile(30, 4, 10, layer);
map.setCollisionByExclusion([0]);
// Create our tile selector at the top of the screen
createTileSelector();
player = game.add.sprite(64, 100, 'dude');
game.physics.arcade.enable(player);
game.physics.arcade.gravity.y = 350;
player.body.bounce.y = 0.1;
player.body.collideWorldBounds = true;
player.body.setSize(20, 32, 5, 16);
player.animations.add('left', [0, 1, 2, 3], 10, true);
player.animations.add('turn', [4], 20, true);
player.animations.add('right', [5, 6, 7, 8], 10, true);
cursors = game.input.keyboard.createCursorKeys();
jumpButton = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
game.input.addMoveCallback(updateMarker, this);
}
function update() {
game.physics.arcade.collide(player, layer);
player.body.velocity.x = 0;
if (cursors.left.isDown)
{
player.body.velocity.x = -150;
if (facing != 'left')
{
player.animations.play('left');
facing = 'left';
}
}
else if (cursors.right.isDown)
{
player.body.velocity.x = 150;
if (facing != 'right')
{
player.animations.play('right');
facing = 'right';
}
}
else
{
if (facing != 'idle')
{
player.animations.stop();
if (facing == 'left')
{
player.frame = 0;
}
else
{
player.frame = 5;
}
facing = 'idle';
}
}
if (jumpButton.isDown && player.body.onFloor() && game.time.now > jumpTimer)
{
player.body.velocity.y = -250;
jumpTimer = game.time.now + 750;
}
}
function pickTile(sprite, pointer) {
var x = game.math.snapToFloor(pointer.x, 32, 0);
var y = game.math.snapToFloor(pointer.y, 32, 0);
currentTileMarker.x = x;
currentTileMarker.y = y;
x /= 32;
y /= 32;
currentTile = x + (y * 25);
}
function updateMarker() {
marker.x = layer.getTileX(game.input.activePointer.worldX) * 32;
marker.y = layer.getTileY(game.input.activePointer.worldY) * 32;
if (game.input.mousePointer.isDown && marker.y > 32)
{
map.putTile(currentTile, layer.getTileX(marker.x), layer.getTileY(marker.y), layer);
}
}
function createTileSelector() {
// Our tile selection window
var tileSelector = game.add.group();
var tileSelectorBackground = game.make.graphics();
tileSelectorBackground.beginFill(0x000000, 0.8);
tileSelectorBackground.drawRect(0, 0, 800, 66);
tileSelectorBackground.endFill();
tileSelector.add(tileSelectorBackground);
var tileStrip = tileSelector.create(1, 1, bmd);
tileStrip.inputEnabled = true;
tileStrip.events.onInputDown.add(pickTile, this);
// Our painting marker
marker = game.add.graphics();
marker.lineStyle(2, 0x000000, 1);
marker.drawRect(0, 0, 32, 32);
// Our current tile marker
currentTileMarker = game.add.graphics();
currentTileMarker.lineStyle(1, 0xffffff, 1);
currentTileMarker.drawRect(0, 0, 32, 32);
tileSelector.add(currentTileMarker);
}