I've created a Tiled map for a game I'm making in Phaser and despite following a tutorial, I can't seem to get it to load. I'm making the game in javascript using webstorm. The naming of everything seems ok and I'm getting no error pop ups but it's loading only a black background instead of the map.
var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create, update: update });
function preload() {
game.load.spritesheet('player', 'res/player_strip8.png', 80 , 190);
game.load.spritesheet('player-right', 'res/player_right.png');
game.load.spritesheet('player-left', 'res/player_left.png');
game.load.tilemap('map', 'res/Game_map.json', null, Phaser.Tilemap.TILED_JSON);
game.load.image('tiles', 'res/back-ground.png');}
var map;
var tileset;
var layer;
var player;
var facing = 'left';
function create() {
map = game.add.tilemap('map');
//game.stage.backgroundColor = '#00FFFF';
game.physics.startSystem(Phaser.Physics.ARCADE);
players = game.add.group();
players.enableBody = true;
createPlayer("");
map.addTilesetImage('Back-ground', 'tiles');
groundLayer = map.createLayer('GroundLayer');
Cursors = game.input.keyboard.createCursorKeys();
}
function update() {
playerUpdate();
}
function createPlayer(x,y){
var player = players.create(0,0,'player-right');
player.body.bounce.y = 0.5;
player.body.gravity.y = 300;
player.body.collideWorldBounds = true;
}
function playerUpdate(){
game.physics.arcade.collide(players, players);
players.forEach(function (p) {
p.body.velocity.x = 0;
if(Cursors.left.isDown){
//players.create('player-left');
//players.animation('left')
p.body.velocity.x = -150;
//player = players.create(0,0,'player-left');
} else if (Cursors.right.isDown){
//players.create('player-right');
//players.animation('right')
p.body.velocity.x = 150
// player = players.create(0,0,'player-right');
}
if (Cursors.up.isDown && p.body.touching.down ){
p.body.velocity.y = -350
}
})
}
function createPlatform() {
}
Related
Basic rundown:
I am developing the game via JS with the aid of [howlerjs.com] for audio and [phaser.io] for the graphics and physics. The game is hosted at [ygdqe.co.nf]. The code I currently have is [main.js], [index.html], [phaser.js] and [howler.js] and they can all be found in the root of the domain. My main problem is when loading the [index.html] - which has links to all the mentioned js - it just shows a blank page.
Just to mention, I currently do not have a laptop so I have loaded all the code in chrome on IOS.
Links:
[phaser.js]:http://ygdqe.co.nf/phaser.js
[main.js]:http://ygdqe.co.nf/main.js
[howlerjs.com]:https://github.com/goldfire/howler.js
[phaser.io]:https://phaser.io
[ygdqe.co.nf]:http://ygdqe.co.nf
[howler.js]:http://ygdqe.co.nf/howler.js
[index.html]:http://ygdqe.co.nf/index.html
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'KABOOMSSS', { preload: preload, create: create, update: update });
function preload() {
game.stage.backgroundColor = '#85b5e1';
game.load.crossOrigin = 'anonymous';
game.load.image('player', 'phaser-dude.png');
game.load.image('platform', 'platform.png');
}
var player;
var platforms;
var cursors;
var jumpButton;
var xtime;
function create() {
var xtime = 0;
player = game.add.sprite(100, 200, 'player');
game.physics.arcade.enable(player);
player.body.collideWorldBounds = true;
player.body.gravity.y = 500;
platforms = game.add.physicsGroup();
platforms.create(500, 150, 'platform');
platforms.create(-200, 300, 'platform');
platforms.create(400, 450, 'platform');
platforms.setAll('body.immovable', true);
cursors = game.input.keyboard.createCursorKeys();
jumpButton = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
game.input.onTap.add(onTap, this);
var sound = new Howl({
src: ['http://soundimage.org/wp-content/uploads/2016/11/Automation.mp3']
});
function onTap () {
if (xtime == 0) {
} else if (xtime != 0) {
sound.play;
}
var xtime = (xtime + 1);
}
function update () {
game.physics.arcade.collide(player, platforms);
player.body.velocity.x = 0;
if (cursors.left.isDown)
{
player.body.velocity.x = -250;
}
else if (cursors.right.isDown)
{
player.body.velocity.x = 250;
}
if (jumpButton.isDown)
{
player.body.velocity.y = -400;
}
}
function render () {
}
I have a game set up like this:
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', {preload: preload, create: create, update: update});
var platforms;
var aGroup;
function preload() {
game.load.image('platform', 'img/platform.png');
game.load.image('a', 'img/a.png');
}
function create() {
game.physics.startSystem(Phaser.Physics.ARCADE);
platforms = game.add.group();
platforms.enableBody = true;
var platform = platforms.create(100, 100, 'platform');
aGroup = game.add.group();
aGroup.enableBody = true;
platforms.forEach(function(item) {
item.body.immovable = true;
aGroup.create(item.x, item.y - 32, 'a');
}, this);
aGroup.forEach(function(a) {
a.body.velocity.x = 100;
}
}
function update() {
game.physics.arcade.collide(aGroup, platforms);
aGroup.forEach(function(a) {
if(a.body.blocked.right) {
a.body.velocity.x = -100;
}
else if(a.body.blocked.left) {
a.body.velocity.x = 100;
}, this);
}
}
Currently I can check if a is colliding with the world boundaries and if it does it changes direction. Right now when a reaches the end of the platform it just falls down. I want a to change direction when it reaches the end of the platform.
How can I do it?
I've been working on a Phaser game for a project at university. All of this is relatively new stuff to me, so I'm learning on the fly. I've managed to create a simple tilemap using Tiled, and got it to import to Phaser sucessfully. However, I can't make the player collide with the 'platform' layer, and I've tried just about everything I can find online.
I've cut down my game code to just what's needed for you to (hopefully) point out my error, but it all runs without errors usually. I can also upload any JSON or Image files that might be needed.
var SuddenGame = SuddenGame || {};
var char;
var map;
// GAMEPLAY STATE //
SuddenGame.playState = function() {};
SuddenGame.playState.prototype = {
init: function() {
this.game.renderer.renderSession.roundPixels = true;
},
create: function() {
//Setup FPS Counter
this.game.time.advancedTiming = true;
//Stop game from pausing if a player tabs out
this.stage.disableVisibilityChange = true;
//Import and play background music
music = this.game.add.audio('menumusic');
music.play('', 0, 1, true);
//Create Dotted Background
this.background = this.game.add.tileSprite(0,
this.game.height - this.game.cache.getImage('background').height,
this.game.width,
this.game.cache.getImage('background').height,
'background'
);
this.dots = this.game.add.tileSprite(0,
this.game.height - this.game.cache.getImage('dots').height,
this.game.width,
this.game.cache.getImage('dots').height,
'dots'
);
//Enable Physics Engine
this.game.physics.startSystem(Phaser.Physics.ARCADE);
//Add level one tilemap
map = this.game.add.tilemap('levelone');
map.addTilesetImage('scifi_platformTiles_32x32', 'scifi_platformTiles_32x32');
backgroundTiles = map.createLayer('backgroundLayer');
Objective = map.createLayer('Objective');
Platform = map.createLayer('Platform');
this.game.add.existing(Platform);
this.physics.arcade.enable(Platform);
map.setCollisionBetween(1, 1000, true, 'Platform');
Platform.resizeWorld();
Platform.debug = true;
this.char = this.add.sprite(50, 470, 'hero');
this.physics.arcade.enable(this.char);
this.char.body.gravity.y = 1300;
this.char.body.collideWorldBounds = true;
this.char.scale.setTo(2, 2);
//Create Player Animations
var idle = this.char.animations.add('idle', [0]);
var walk = this.char.animations.add('walk', [0, 1, 2, 1]);
this.game.camera.follow(this.char);
},
update: function() {
this.game.physics.arcade.collide(char, Platform);
this.physics.arcade.TILE_BIAS = 40;
if (this.game.input.keyboard.isDown(Phaser.Keyboard.LEFT) && !this.char.body.touching.left) {
this.char.body.velocity.x = -150;
this.char.animations.play('backwalk', 10, true);
} else if (this.game.input.keyboard.isDown(Phaser.Keyboard.RIGHT) && !this.char.body.touching.right) {
this.char.body.velocity.x = 150;
this.char.animations.play('walk', 10, true);
} else if (this.game.input.keyboard.isDown(Phaser.Keyboard.DOWN)) {
this.char.animations.play('die', 10, true);
} else {
this.char.body.velocity.x = 0;
this.char.animations.play('idle', 7, true);
}
if (this.game.input.keyboard.isDown(Phaser.Keyboard.SPACEBAR) && this.game.time.now > jumpTimer) {
{
this.char.animations.play('jump', 10);
this.char.body.velocity.y = -1000;
jumpTimer = this.game.time.now + 750;
}
}
//if (this.cursors.up.isDown && !this.char.body.touching.down ) {
if (this.game.input.keyboard.isDown(Phaser.Keyboard.SPACEBAR) && this.game.input.keyboard.isDown(Phaser.Keyboard.LEFT) && this.char.body.touching.left && this.game.time.now > jumpTimer) {
this.char.body.velocity.y = -500;
jumpTimer = this.game.time.now + 1;
}
if (this.game.input.keyboard.isDown(Phaser.Keyboard.SPACEBAR) && this.game.input.keyboard.isDown(Phaser.Keyboard.RIGHT) && this.char.body.touching.right) {
this.char.body.velocity.y = -500;
this.char.body.velocity.x = -2500;
//jumpTimer = this.game.time.now + 1;
}
//More update code here
},
render: function() {
this.game.debug.text(this.game.time.fps || '--', 2, 14, "#00ff00");
}
}
Apologies if I've missed an extremely obvious mistake, I'm pretty sleep deprived right now!
Sorry if this is the wrong place to put this, I haven't had much luck anywhere else unfortunately.
In Phaser I have made a tilemap and a player sprite, this all works perfectly using P2 physics. I have a door way in my tilemap which when I enter I want a different script to run, changing the current tilemap to a different one and moving the player's position accordingly.
I already have a basic if statement that checks if the player's position is within the range of the door and console logs, that works fine.
Code:
var game = new Phaser.Game(560, 560, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update, render: render });
function preload() {
game.load.tilemap('tilemap', 'assets/tilemaps/test.json', null, Phaser.Tilemap.TILED_JSON);
game.load.image('tiles', 'assets/tilemaps/tileset.png');
game.load.image('player', 'assets/images/player.png');
}
var player;
var cursors;
var map;
var layer;
function create() {
map = game.add.tilemap('tilemap');
map.addTilesetImage('basic', 'tiles');
layer = map.createLayer('Background');
layer2 = map.createLayer('Walls');
layer.resizeWorld();
game.physics.startSystem(Phaser.Physics.P2JS);
game.physics.p2.setBoundsToWorld(true, true, true, true, false);
map.setCollision(1, true, "Walls");
game.physics.p2.convertTilemap(map, "Walls");
player = game.add.sprite(game.world.centerX, game.world.centerY, 'player');
game.physics.p2.enable(player);
player.body.fixedRotation = true;
player.body.clearShapes();
player.body.addRectangle(20, 0, 0, 0);
cursors = game.input.keyboard.createCursorKeys();
game.camera.follow(player);
//player.body.debug = true;
}
function update() {
player.body.setZeroVelocity();
if (cursors.up.isDown)
{
player.body.moveUp(300)
}
else if (cursors.down.isDown)
{
player.body.moveDown(300);
}
if (cursors.left.isDown)
{
player.body.velocity.x = -300;
}
else if (cursors.right.isDown)
{
player.body.moveRight(300);
}
if (player.x > 248 && player.x < 311 && player.y < 25)
{
console.log("Door opened");
}
}
function render() {
game.debug.cameraInfo(game.camera, 32, 32);
game.debug.spriteCoords(player, 32, 500);
}
I am developing a small JavaScript game with Phaser and I have a sprite that changes its size at certain points. It does this with the sprite.body.setSize method. However, it looks like the sprite stops colliding with objects that it should be colliding with when it is changing size. I understand why it does this, since the sprite's boundaries are in a state of flux during a change of size, but I'm afraid my user can take advantage of this problem and move through walls. I'm not sure how to get the sprite to be responsive to collisions while it's in the process of changing size. Is there a way to prevent this?
Edit at Supamiu's request:
Here is a quick example of what I'm trying to do in my game. Also, here is the source code for that example.
// Global constants
var GAME_WIDTH = 800;
var GAME_HEIGHT = 600;
var TEXT_X_POS = 150;
var TEXT_Y_POS = 50;
var PHASER_DUDE_WIDTH = 27;
var PHASER_DUDE_HEIGHT = 40;
var MASTER_WIDTH = 57;
var MASTER_HEIGHT = 77;
var SPRITE_X_POS = 200;
var SPRITE_Y_POS = 400;
var SPRITE_GRAVITY = 300;
var LEFT_VELOCITY = -300;
var RIGHT_VELOCITY = 300;
var JUMP_VELOCITY = -300;
var STOPPED = 0;
var WALL_X_POS = 500;
var WALL_Y_POS = 300;
// Global variables
var sprite;
var wall;
var cursors;
var game = new Phaser.Game(GAME_WIDTH, GAME_HEIGHT, Phaser.AUTO, "game", {preload: preload, create: create, update: update});
function preload () {
game.load.image("master", "sprites/master.png");
game.load.image("phaser dude", "sprites/phaser_dude.png");
game.load.image("wall", "sprites/wall.png");
}
function create () {
game.add.text(TEXT_X_POS, TEXT_Y_POS, "Use the cursor keys to jump and move", {fontSize: "16px", fill: "white"});
sprite = game.add.sprite(SPRITE_X_POS, SPRITE_Y_POS, "master");
game.physics.arcade.enable(sprite);
sprite.body.collideWorldBounds = true;
sprite.body.gravity.y = SPRITE_GRAVITY;
wall = game.add.sprite(WALL_X_POS, WALL_Y_POS, "wall");
game.physics.arcade.enable(wall);
wall.body.immovable = true;
cursors = game.input.keyboard.createCursorKeys();
}
function update () {
game.physics.arcade.collide(sprite, wall);
sprite.body.velocity.x = STOPPED;
cursors.up.onDown.add(jump);
if (cursors.left.isDown) {
sprite.body.velocity.x = LEFT_VELOCITY
}
if (cursors.right.isDown) {
sprite.body.velocity.x = RIGHT_VELOCITY;
}
if (sprite.isJumping && sprite.body.onFloor()) {
sprite.isJumping = false;
sprite.loadTexture("master");
sprite.body.setSize(MASTER_WIDTH, MASTER_HEIGHT);
}
}
function jump () {
sprite.isJumping = true;
sprite.body.velocity.y = JUMP_VELOCITY;
sprite.loadTexture("phaser dude");
sprite.body.setSize(PHASER_DUDE_WIDTH, PHASER_DUDE_HEIGHT);
}
You can see that if you push on the left side of the wall as the sprite changes size (and texture), it can move through the wall.
if you don't want users to usebug this, make them go back to the start of the wall if they are trying to go through it.
like this:
U is the user
|| is a wall
||
U ||
||
||
The start
||
|U|
||
||
Oh, U is going through a wall !
||
U ||
||
||
U goes to the start of the wall.
or you can make the user unable to move while you change his size
EDIT:
there is two more solutions, set the walls with bounds system with a 0 value for bouncing:
function create () {
game.add.text(TEXT_X_POS, TEXT_Y_POS, "Use the cursor keys to jump and move", {fontSize: "16px", fill: "white"});
sprite = game.add.sprite(SPRITE_X_POS, SPRITE_Y_POS, "master");
game.physics.arcade.enable(sprite);
sprite.body.collideWorldBounds = true;
sprite.body.gravity.y = SPRITE_GRAVITY;
wall = game.add.sprite(WALL_X_POS, WALL_Y_POS, "wall");
game.physics.arcade.enable(wall);
wall.body.immovable = true;
//here is what i added
wall.body.collideWorldBounds = true;
wall.body.bounce.set(0);
cursors = game.input.keyboard.createCursorKeys();
}
or make the sprite body immovble while you change his size:
function update () {
game.physics.arcade.collide(sprite, wall);
sprite.body.velocity.x = STOPPED;
cursors.up.onDown.add(jump);
if (cursors.left.isDown) {
sprite.body.velocity.x = LEFT_VELOCITY
}
if (cursors.right.isDown) {
sprite.body.velocity.x = RIGHT_VELOCITY;
}
if (sprite.isJumping && sprite.body.onFloor()) {
sprite.isJumping = false;
sprite.loadTexture("master");
//Here is what i added
sprite.body.velocity.x = STOPPED;
sprite.body.setSize(MASTER_WIDTH, MASTER_HEIGHT);
}
}