Hello there, i think this is my last question, i just want to know why this happends when i’m trying to start the new scene:
Basically, i can play the game, and the other scene is enabled too (rare…), also, i’m able to start the new one (the blue) in the game. Any idea about this? thx.
Could you please share a link to your game or give us some source code?
Thanks
This the code from the html file:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<!-- Here we can see how we change the title of phaser, we changed it to 'Guillermo García-->
<!-- this is a comment for HTML format-->
<title>Guillermo García</title>
<script src="phaser.js"></script>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body>
<script type="text/javascript">
// this is a comment for javascript.
// here we can see how we create the variable 'config', this variable will keep some configurations that are will be used by our game, such as for example, the physics, the width and height of our game, etc.
var config = {
type: Phaser.AUTO,
width: 1200,
height: 900,
physics: {
// for example, this part 'arcade' will be the definition of what type of physics we want for our game, (in this case our character will fall after a jump)
default: 'arcade',
arcade: {
gravity: { y: 300 },
debug: false
}
},
scene: {
preload: preload,
create: create,
update: update
}
};
var game = new Phaser.Game(config);
//var game.scene.add('escena', escena, true, { x: 400, y: 300 });
function preload ()
{
var progress = this.add.graphics();
this.load.on('progress', function (value) {
progress.clear();
progress.fillStyle(0x0000ff, 1);
progress.fillRect(0, 270, 800 * value, 60);
});
this.load.on('complete', function () {
progress.destroy();
});
// with this functions, we prepare 'sky' (the background) and 'ground' (the platforms). We put this two phrases into the function preload, that's because we want to let our game load this assets whe we start the game, this is the two first things who will load our game.
this.load.sceneFile('SceneA', 'SceneA.js');
this.load.image('sky','assets/sky.jpg');
this.load.image('ground', 'assets/platform.png');
this.load.image('lava', 'assets/lava.png');
// this is the preload resources for our game theme
this.load.audio('theme', [
'assets/music/music.mp3'
]);
this.load.audio('tema', [
'assets/music/tema.mp3'
]);
this.load.audio('com', [
'assets/music/com.mp3'
]);
this.load.spritesheet('dude',
'assets/dude.png',
{ frameWidth: 32, frameHeight: 48 }
);
this.load.image('star', 'assets/star.png');
this.load.image('coin', 'assets/coin.png');
//this.load.image('moneda', 'assets/moneda.png');
}
var platforms;
var score = 0;
var scoreText;
var puntaje;
var player;
var lava;
// this is a variable about the music that will be using for our game
var music = this.sound.add('theme');
var tema = this.sound.add('tema');
var com = this.sound.add('com');
//var coin;
function create ()
{
scoreText = this.add.text(100, 21, 'Estrellitas: 0', { fontSize: '32px', fill: '#000' }).setDepth(2);
cursors = this.input.keyboard.createCursorKeys();
player = this.physics.add.sprite(100, 450, 'dude').setDepth(2);
player.body.setGravityY(300)
player.setBounce(0.2);
player.setCollideWorldBounds(true);
this.cameras.main.startFollow(player);
this.cameras.main.setBounds(0, 0, 720 * 2, 176);
this.anims.create({
key: 'left',
frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
frameRate: 10,
repeat: -1
});
this.anims.create({
key: 'turn',
frames: [ { key: 'dude', frame: 4 } ],
frameRate: 20
});
this.anims.create({
key: 'right',
frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
frameRate: 10,
repeat: -1
});
// with this command, we make a background, 'sky' is called by this, and we can change our width and height if we edit the following values (the numbers below)
this.add.image(400, 300, 'sky');
//this is the same variable that we used above, but in the create section, so we can create the music.
var music = this.sound.add('theme');
var tema = this.sound.add('tema');
var com = this.sound.add('com');
//this command basically tells the game to play the music.
music.play();
platforms = this.physics.add.staticGroup();
lava = this.physics.add.staticGroup();
this.physics.add.collider(player, lava, hitlava);
this.physics.add.collider(player, platforms);
// with this, we create some platforms, as i said above, instead of 'sky' we call to 'ground' to get the assets and let the game load the plaftorms corretcly.
// but in this case, we can't modify the heigth and width, we can only modify the coordinates of the platforms.
//platforms.create(500, 900, 'ground').setScale(5).refreshBody();
lava.create(500,900, 'lava').setScale(5).refreshBody();
function hitlava (player, lava) {
gameOver= true;
player.body.enableBody(false);
console.log("Call gameOver Scene here! Don't pause the physics");
}
platforms.create(999, 500, 'ground');
platforms.create(500, 500, 'ground');
platforms.create(100, 600, 'ground');
platforms.create(800, 999, 'ground');
stars = this.physics.add.group({
key: 'star',
repeat: 4,
setXY: { x: 12, y: 0, stepX: 70 }
});
stars.children.iterate(function (child) {
child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));
});
this.physics.add.collider(stars, platforms);
this.physics.add.overlap(player, stars, collectStar, null, this);
function collectStar (player, star)
{
star.disableBody(true, true);
score += 10;
scoreText.setText('Estrellitas: ' + score);
if (stars.countActive(true) === 0)
{
player.setTint(0xff0000);
this.physics.pause();
gameOver = true;
music.stop();
tema.play();
//this.scene.stop();
this.scene.run("SceneA");
};
}
coin = this.physics.add.group({
key: 'coin',
repeat: 3,
setXY: { x: 12, y: 0, stepX: 70 }
});
coin.children.iterate(function (child) {
child.setBounceY(Phaser.Math.FloatBetween(0.1, 0.3));
});
this.physics.add.collider(coin, platforms);
this.physics.add.overlap(player, coin, collectcoin, null, this);
function collectcoin (player, coin)
{
coin.disableBody(true, true);
score += 100;
scoreText.setText('Estrellitas: ' + score);
}
}
function update ()
{
if (cursors.left.isDown)
{
player.setVelocityX(-160);
player.anims.play('left', true);
}
else if (cursors.right.isDown)
{
player.setVelocityX(160);
player.anims.play('right', true);
}
else
{
player.setVelocityX(0);
player.anims.play('turn');
}
if (cursors.up.isDown && player.body.touching.down)
{
player.setVelocityY(-440);
}
}
</script>
</body>
</html>
And this one is from the scene file:
class SceneA extends Phaser.Scene {
constructor()
{
super({ key: 'SceneA'});
console.log('SimpleScene#constructor')
}
preload() {
this.load.image('skay','assets/skay.png');
}
create() {
this.add.image(400, 300, 'skay');
}
update() {
console.log('SimpleScene#update')
}
}
var config = {
type: Phaser.AUTO,
width: 1200,
height: 600,
backgroundColor: '#2d2d2d',
parent: 'phaser-example',
scene: [SceneA]
};
var game = new Phaser.Game(config);