Hi there!!!
I need to know (i searched in google but i don’t understand nothing, and i need some help) in how i can start a new level when the player collect all the stars (in the paser 3 tutorial), i want to collect all the stars and then start a new level.
How can i do it? I don’t see any examples in phaser…
Thank you!
The new level can be a new scene, or just the same scene but with new elements.
For example: the follow algorithm can be used to create a new level
-check if the player collected all stars
-if do, then:
-do something like finnish the levelk (do fade in the camera for example)
-unload the old elements
-now, before the new level, read some config that holds the new positions of new stars and platforms
-set the position and show the new elements
Note that, you must predefine the config of the new level, or maybe do something random.
The new config for the new level, should be save for reading when the player finish the current level.
For example: if the player is in the level 3 and finish it, so you can read and set the new elements from the config number 4 (currentLevel + 1).
This is just a general rule, nothing so good but works.
Thanks! but, how do i made it but with javascript? that’s the problem, i don’t know how to implement that to the game…
Man, I’m a little tired but in a appropriate hour I come to here give you a full example.
Take a look at
Here the code of example:
import 'phaser';
//array of configuration, also you should load from a file
export const levelsConfig = [
//level one
{
levelID:1,
//array of stars positions
stars: [
{x: 84, y: 200},//position of star 0
{x: 54, y: 300},//position of star 1
{x: 44, y: 250},//position of star 2
{x: 94, y: 400},//position of star 3
],
//array of platform positions
platforms: [
{x: 100, y: 200},//position of platform 0
{x: 200, y: 250},//position of platform 1
{x: 200, y: 400},//position of platform 2
]
},
//level two
{
levelID:2,
//array of stars positions
stars: [
{x: 194, y: 250},
{x: 294, y: 250},
{x: 294, y: 250},
{x: 394, y: 250},
],
//array of platform positions
platforms: [
{x: 10, y: 100},
{x: 20, y: 200},
{x: 300, y: 300},
]
},
];
export class LevelScene extends Phaser.Scene {
constructor ( config )
{
super(config);
//var that controls which level to load
this.currentLevel = 0;
//set the data to null
this.data = null;
}
preload ( )
{
//load the sprites here
this.load.image('star', 'assets/Images/star.png');
this.load.image('platform', 'assets/Images/platform.png');
}
/*
you must firstly, load the first configuration (levelsCOnfig[0]), is the firt level.
After this, you should check if all stars were collected.
If do, so you should restart the scene with the next level config (levelsConfig[0])
*/
create ( )
{
//now here we check if has some data previously passed to the scene
if (this.data.currentLevel)
{
//if has, so change the data
this.currentLevel = this.data.currentLevel;
//check if the currentLevel is the last
if (this.currentLevel >= levelsConfig.length)
{
//is the final of the game, not has any level
console.error('LevelScene::not has any new level');
//previne create sprites
return;
}
}
this.stars = [];
//first create all stars
for (let starPos of levelsConfig[this.currentLevel].stars)
this.stars.push(this.add.sprite(starPos.x, starPos.y, 'star'));
this.platforms = [];
//after create all platforms from currentLevel
for (let platformPos of levelsConfig[this.currentLevel].platforms)
this.platforms.push(this.add.sprite(platformPos.x, platformPos.y, 'platform'));
//predefine that no one stars was colleted
//if this var is true, so it's to change of level
this.collectedAll = false;
}
update ( )
{
//check here if the player collected all stars
//...your code to check goes here
//this.collectedAll is your variable that you MUST set to true when the stars were ALL collected
if (this.collectedAll){
//destroy all sprites
for (let star of this.stars)
star.destroy();
//destroy all sprites
for (let platform of this.platforms)
platform.destroy();
//restart the scene with the next config (currentLevel + 1)
this.scene.restart({currentLevel: this.currentLevel + 1});
}
}
}
It looks like the @yannick example.
hi! thank you very muc, however i don’t understand…
my game have the following code:
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);
function preload ()
{
// 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.image('sky','assets/sky.jpg');
this.load.image('ground', 'assets/platform.png');
this.load.image('star', 'assets/star.png');
// this is the preload resources for our game theme
this.load.audio('theme', [
'assets/music/music.mp3'
]);
this.load.spritesheet('dude',
'assets/dude.png',
{ frameWidth: 32, frameHeight: 48 }
);
}
var platforms;
var music;
var player;
var star;
var score = 0;
var scoreText;
function create ()
{
music = this.sound.add('theme');
player = this.physics.add.sprite(100, 450, 'dude').setDepth(2);
cursors = this.input.keyboard.createCursorKeys();
scoreText = this.add.text(16, 16, 'Estrellitas: 0', { fontSize: '32px', fill: '#000' }).setDepth(2);
player.setBounce(0.2);
player.setCollideWorldBounds(true);
stars = this.physics.add.group({
key: 'star',
repeat: 11,
setXY: { x: 12, y: 0, stepX: 70 }
});
stars.children.iterate(function (child) {
child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8)).setDepth(2);
});
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
});
player.body.setGravityY(300)
// 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');
//this command basically tells the game to play the music.
music.play();
platforms = this.physics.add.staticGroup();
// 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.
this.physics.add.collider(player, platforms);
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('Score: ' + score);
}
platforms.create(500, 900, 'ground').setScale(2).refreshBody();
platforms.create(999, 500, 'ground');
platforms.create(100, 600, 'ground');
platforms.create(800, 999, 'ground');
}
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(-330);
}
}
</script>
</body>
</html>
how can i adapt your code to my game and make another level??
thanks! however it doesn’t work… i just get a blank screen shilw i try to run it, also if i put some parts on my code, it just does not work…It gives me erros like ‘stars is already in use’… can you please explain me but for my code? i’m using phaser 3.19… thanks!