Phaser Images not Preloading - javascript

If anyone has used Phaser, perhaps you can help me with my code. I am trying to create a Flappy Bird clone, and so far it is working pretty well. However, whenever I open the game the first time, the sprites of the pipes don't seem to show up. I've preloaded both the bird and the pipe sprites, and only the bird sprite loads on the first attempt. As soon as the game restarts (when the bird dies), the pipes load normally. I am using WAMP to host a local server.
Here is my code:
var game = new Phaser.Game(400, 490, Phaser.AUTO, 'game_div');
var main_state = {
preload: function() {
this.game.stage.backgroundColor = '#66CCFF';
this.game.load.image('pipe', 'assets/pipe.png');
this.game.load.image('bird', 'assets/bird.png');
this.pipes = game.add.group();
this.pipes.createMultiple(20, 'pipe');
},
add_one_pipe: function(x, y) {
var pipe = this.pipes.getFirstDead();
pipe.reset(x, y);
pipe.body.velocity.x = -200
pipe.outOfBoundsKill = true;
},
add_row_of_pipes: function() {
var hole = Math.floor(Math.random()*5) + 1;
for (var i = 0; i < 8; i++) {
if (i != hole && i != hole + 1) {
this.add_one_pipe(400, i * 60 + 10);
}
}
this.score += 1;
this.label_score.content = this.score;
},
create: function() {
this.bird = this.game.add.sprite(100, 245, 'bird');
this.bird.body.gravity.y = 1000;
var space_key = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
space_key.onDown.add(this.jump, this);
this.timer = this.game.time.events.loop(1500, this.add_row_of_pipes, this);
this.score = 0;
var style = { font: "30px Arial", fill: "#ffffff" };
this.label_score = this.game.add.text(20, 20, "0", style);
},
update: function() {
if (this.bird.inWorld == false) {
this.restart_game();
}
this.game.physics.overlap(this.bird, this.pipes, this.restart_game, null, this);
},
jump: function() {
this.bird.body.velocity.y = -350;
},
restart_game: function() {
this.game.time.events.remove(this.timer);
this.game.state.start('main');
},
};
// Add and start the 'main' state to start the game
game.state.add('main', main_state);
game.state.start('main');

As in the tutorial, try to put the creation of the group in the create function:
create: function() {
this.bird = this.game.add.sprite(100, 245, 'bird');
this.bird.body.gravity.y = 1000;
var space_key = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
space_key.onDown.add(this.jump, this);
this.pipes = game.add.group();
this.pipes.createMultiple(20, 'pipe');
this.timer = this.game.time.events.loop(1500, this.add_row_of_pipes, this);
this.score = 0;
var style = { font: "30px Arial", fill: "#ffffff" };
this.label_score = this.game.add.text(20, 20, "0", style);
},

Related

sprite won't collide with 2 different arrays, only one

I am currently making a small platformer game, where the player jumps up infinitely, much like the android game "Abduction". I have managed to create platforms in random locations on a timed interval and adding it to an array. However i can only get the player sprite to collide with 1 of the platform arrays, which is this.walls array that i have made so i have a set starting place for the player. Does anyone know what the issue might be.
Ugly code alert by the way, i am quite new at this.
I have checked update: function to see if i had forgot to add some stuff there. ive spellchecked the code and all sorts of things but i am at a completel loss.
var playState = {
preload: function () {
},
create: function () {
game.add.image (0, 0,'bg');
game.physics.startSystem(Phaser.Physics.ARCADE);
game.renderer.renderSession.roundPixels = true;
this.cursor = game.input.keyboard.createCursorKeys();
game.input.keyboard.addKeyCapture(
[Phaser.Keyboard.UP, Phaser.Keyboard.DOWN, Phaser.Keyboard.LEFT, Phaser.Keyboard.RIGHT]);
this.wasd = {
up: game.input.keyboard.addKey(Phaser.Keyboard.W), left: game.input.keyboard.addKey(Phaser.Keyboard.A), right: game.input.keyboard.addKey(Phaser.Keyboard.D)
};
this.player = game.add.sprite(game.width/2, game.height/1.2, 'player');
this.player.anchor.setTo(0.5, 0.5);
game.physics.arcade.enable(this.player);
this.player.body.gravity.y = 800;
this.scoreLabel = game.add.text(30, 30, 'score: 0',
{ font: '18px Arial', fill: '#ffffff' });
game.global.score = 0;
game.time.events.loop(1000, this.updateScore);
game.time.events.loop(4000, this.addPlatform);
this.createWorld();
},
update: function () {
game.physics.arcade.collide(this.player, this.walls);
game.physics.arcade.collide(this.player, this.platforms);
if (!this.player.inWorld) {
this.playerDie();
}
this.movePlayer();
},
updateScore: function(){
this.score +=1;
game.global.score +=1;
//fix this at some point
},
createWorld: function() {
this.walls = [];
this.walls.push(game.add.sprite(170, 750, 'platform', 0));
this.walls.push(game.add.sprite(70, 650, 'platform', 0));
this.walls.push(game.add.sprite(320, 550, 'platform', 0));
this.walls.push(game.add.sprite(200, 450, 'platform', 0));
this.walls.push(game.add.sprite(10, 550, 'platform', 0));
this.walls.push(game.add.sprite(70, 350, 'platform', 0));
this.walls.push(game.add.sprite(310, 300, 'platform', 0));
this.walls.push(game.add.sprite(230, 200, 'platform', 0));
this.walls.push(game.add.sprite(100, 100, 'platform', 0));
this.walls.push(game.add.sprite(270, 0, 'platform', 0));
for (var x=0; x< this.walls.length; x++) {
game.physics.arcade.enable(this.walls[x]);
this.walls[x].enableBody = true;
this.walls[x].body.immovable = true;
this.walls[x].body.velocity.y = 20;
}
},
addPlatform: function() {
this.platforms = [];
this.platforms.push(game.add.sprite(game.rnd.integerInRange(0, 350),-20,'platform',0));
for (var x=0; x< this.platforms.length; x++) {
game.physics.arcade.enable(this.platforms[x]);
this.platforms[x].enableBody = true;
this.platforms[x].body.immovable = true;
this.platforms[x].body.velocity.y = 20;
}
},
movePlayer: function() {
if (this.cursor.left.isDown || this.wasd.left.isDown) {
this.player.body.velocity.x = -250;
}
else if (this.cursor.right.isDown || this.wasd.right.isDown) {
this.player.body.velocity.x = 250;
}
else {
this.player.body.velocity.x = 0;
}
if ((this.cursor.up.isDown || this.wasd.up.isDown)
&& this.player.body.touching.down){
this.player.body.velocity.y = -450;
}
},
playerDie: function() {
this.player.kill();
//this.deadSound.play();
//this.emitter.x = this.player.x;
//this.emitter.y = this.player.y;
//this.emitter.start(true, 800, null, 15);
game.time.events.add(1000, this.startMenu, this);
game.camera.shake(0.02, 300);
},
startMenu: function() {
game.state.start('menu');
},
};
this.walls is so i have a starting ground of set platforms and this.platforms is the randomly generated platforms.
I want to be able to actually jump on those platforms and not just
fall through, which i do at the moment
Your platform is an array of sprites, so you have to parse through each sprite inside your array.
Or, you can make a "Group" object, instead of plain array. You can make a Group of each plaform, then do collision with this Group and player.

How to prevent objects to jump off platforms?

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?

Phaser Tiled tilemap layers not colliding with player

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!

How to properly obfuscate javascript code with javascript2img?

I tried obfuscating JS code using javascript2img. It gave me the obfuscated code. They state, "Copy this code and paste it into your js or HTML file. That's all!". But I keep getting this error.
"Uncaught SyntaxError: Unexpected identifier game.js:1"
Un-obfuscated the code works just fine.
Example: The following doesnt work obfuscated but does without obfuscation.
var game = new Phaser.Game(400, 490, Phaser.AUTO, "gameDiv");
var mainState = {
preload: function() {
if(!game.device.desktop) {
game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
game.scale.setMinMax(game.width/2, game.height/2, game.width, game.height);
}
game.scale.pageAlignHorizontally = true;
game.scale.pageAlignVertically = true;
game.stage.backgroundColor = '#71c5cf';
game.load.image('bird', 'assets/bird.png');
game.load.image('pipe', 'assets/pipe.png');
// Load the jump sound
// game.load.audio('jump', 'assets/jump.wav');
},
create: function() {
game.physics.startSystem(Phaser.Physics.ARCADE);
this.pipes = game.add.group();
this.timer = game.time.events.loop(1500, this.addRowOfPipes, this);
this.bird = game.add.sprite(100, 245, 'bird');
game.physics.arcade.enable(this.bird);
this.bird.body.gravity.y = 1000;
// New anchor position
this.bird.anchor.setTo(-0.2, 0.5);
var spaceKey = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
spaceKey.onDown.add(this.jump, this);
game.input.onDown.add(this.jump, this);
this.score = 0;
this.labelScore = game.add.text(20, 20, "0", { font: "30px Arial", fill: "#ffffff" });
// Add the jump sound
this.jumpSound = game.add.audio('jump');
this.jumpSound.volume = 0.2;
},
update: function() {
if (this.bird.y < 0 || this.bird.y > game.world.height)
this.restartGame();
game.physics.arcade.overlap(this.bird, this.pipes, this.hitPipe, null, this);
// Slowly rotate the bird downward, up to a certain point.
if (this.bird.angle < 20)
this.bird.angle += 1;
},
jump: function() {
// If the bird is dead, he can't jump
if (this.bird.alive == false)
return;
this.bird.body.velocity.y = -350;
// Jump animation
game.add.tween(this.bird).to({angle: -20}, 100).start();
// Play sound
// this.jumpSound.play();
},
hitPipe: function() {
// If the bird has already hit a pipe, we have nothing to do
if (this.bird.alive == false)
return;
// Set the alive property of the bird to false
this.bird.alive = false;
// Prevent new pipes from appearing
game.time.events.remove(this.timer);
// Go through all the pipes, and stop their movement
this.pipes.forEach(function(p){
p.body.velocity.x = 0;
}, this);
},
restartGame: function() {
game.state.start('main');
},
addOnePipe: function(x, y) {
var pipe = game.add.sprite(x, y, 'pipe');
this.pipes.add(pipe);
game.physics.arcade.enable(pipe);
pipe.body.velocity.x = -200;
pipe.checkWorldBounds = true;
pipe.outOfBoundsKill = true;
},
addRowOfPipes: function() {
var hole = Math.floor(Math.random()*5)+1;
for (var i = 0; i < 8; i++)
if (i != hole && i != hole +1)
this.addOnePipe(400, i*60+10);
this.score += 1;
this.labelScore.text = this.score;
},
};
game.state.add('main', mainState);
game.state.start('main');

Phaser array not defined in update method

So I'm using the Phaser framework to create a space invaders game but I have a problem with and array of game objects. The array enemies is normal and I can do console.log(enemies.length) fine inside the create method but it says that enemies is not defined when I run it.
var game = new Phaser.Game(800, 600);
var bgTile;
var speed = 200;
var dropCnt = 100;
var box = function(options) {
var bmd = game.add.bitmapData(options.length, options.width);
bmd.ctx.beginPath();
bmd.ctx.rect(0, 0, options.length, options.width);
bmd.ctx.fillStyle = options.color;
bmd.ctx.fill();
return bmd;
};
var mainState = {
preload: function(){
//var music;
//game.load.audio('sound1',['track01.mp3','track01.ogg']); // need to make this spce music
game.load.image('bgTile', 'bgtile.jpg');
},
create: function(){
lives = 3;
//music = game.add.audio('sound1');
//music.loopFull(1);
this.cursor = game.input.keyboard.createCursorKeys();
game.physics.startSystem(Phaser.Physics.ARCADE);
game.world.enableBody = true;
BGTile = starfield = game.add.tileSprite(0, 0, 800, 600, 'bgTile');
game.physics.startSystem(Phaser.Physics.ARCADE);
this.player = game.add.sprite(384, 550, box({
length: 32,
width: 32,
color: '#FFFFFF'
}));
this.enemy = game.add.group();
this.enemy.enableBody = true;
var enemies= [];
for(var i = 0; i < 8; i++){
for(var j = 0; j < 8; j++){
enemies.push(this.enemy.create(i*75+100,j*30+20, box({
length: 32,
width: 16,
color: '#FF0000'
})));
}
}
var bullets= [];
this.bullet = game.add.group();
this.bullet.enableBody = true;
this.player.body.immovable = true;
this.enemy.body.immovable = true;
},
update: function(){
console.log(enemies.length);
starfield.tilePosition.y += 2;
this.player.body.velocity.y = 0;
this.player.body.velocity.x = 0;
if (this.cursor.left.isDown) {
this.player.body.velocity.x -= speed;
} else if (this.cursor.right.isDown) {
this.player.body.velocity.x += speed;
}
dropCnt--;
if(dropCnt === 0){
dropCnt = 100;
for(var i = 0; i < enemies.length;i++){
this.enemies.body.x -= 8;
console.log("test");
}
}
}
};
game.state.add('main', mainState);
game.state.start('main');
Here DEMO
enemies array is defined inside mainState.create() so therefore it's not accessible to another function inside object mainState
In order to access you have to define enemies array as object member
var mainState = {
enemies:[],
....
...
}
So now to access enemies you have to do
mainState.enemies.push(....)
mainState.enemies.pop()

Categories