Talking about Yeah Bunny game, Game development, HTML5, Javascript and Phaser.
Adrian Zarzycki‘s new game Yeah Bunny 2 has been released both on Google Play and Apple App Store and it’s the sequel of the awesome game which inspired my Yeah Bunny tutorial series.
In the first post of the series you saw how the main character can perform a whole lot of things: runs automatically, changes direction each time hits an obstacle, can perform jump, double jump and wall jump as well as slide down the walls.
Everything with a camera automatically following you through a level generated with Tiled.
In second step I added a “stop” tile which is very useful in these kind of games: since the player runs on his own, this is the only way you have to stop it.
Now I am adding the “trampoline” tile: a tile which will throw you in the air if you land on it, useful to reach high places.
Have a look at the game:
Click or tap to jump, double jump or wall jump. Step on the red tile to stop. Walk on the yellow tile and nothing happens, land on the yellow tile to use it as a trampoline.
I have the complete source code commented for you to enjoy:
let game;
let gameOptions = {
// player gravity
playerGravity: 900,
// player friction when on wall
playerGrip: 100,
// player horizontal speed
playerSpeed: 200,
// player jump force
playerJump: 400,
// player double jump force
playerDoubleJump: 300,
// trampoline tile impulse
trampolineImpulse: 500
}
// constants to make some variable numbers more readable
const STOP_TILE = 2;
const TRAMPOLINE_TILE = 3;
window.onload = function() {
let gameConfig = {
type: Phaser.CANVAS,
width: 640,
height: 480,
backgroundColor: 0x444444,
physics: {
default: "arcade",
arcade: {
gravity: {
y: 0
}
}
},
scene: [preloadGame, playGame]
}
game = new Phaser.Game(gameConfig);
}
class preloadGame extends Phaser.Scene{
constructor(){
super("PreloadGame");
}
preload(){
this.load.tilemapTiledJSON("level", "level.json");
this.load.image("tile", "tile.png");
this.load.image("hero", "hero.png");
}
create(){
this.scene.start("PlayGame");
}
}
class playGame extends Phaser.Scene{
constructor(){
super("PlayGame");
}
create(){
// creation of "level" tilemap
this.map = this.make.tilemap({
key: "level"
});
// adding tiles to tilemap
let tile = this.map.addTilesetImage("tileset01", "tile");
// which layers should we render? That's right, "layer01"
this.layer = this.map.createStaticLayer("layer01", tile);
// which tiles will collide? Tiles from 1 to 3
this.layer.setCollisionBetween(1, 3);
// adding the hero sprite and enabling ARCADE physics for the hero
this.hero = this.physics.add.sprite(260, 376, "hero");
// setting hero horizontal speed
this.hero.body.velocity.x = gameOptions.playerSpeed;
// the hero can jump
this.canJump = true;
// the hern cannot double jump
this.canDoubleJump = false;
// the hero is not on the wall
this.onWall = false;
// waiting for player input
this.input.on("pointerdown", this.handleJump, this);
// set workd bounds to allow camera to follow the player
this.cameras.main.setBounds(0, 0, 1920, 1440);
// making the camera follow the player
this.cameras.main.startFollow(this.hero);
}
handleJump(){
// the hero can jump when:
// canJump is true AND the hero is on the ground (blocked.down)
// OR
// the hero is on the wall
if((this.canJump && this.hero.body.blocked.down) || this.onWall){
// applying jump force
this.hero.body.velocity.y = -gameOptions.playerJump;
// is the hero on a wall?
if(this.onWall){
// change the horizontal velocity too. This way the hero will jump off the wall
this.setPlayerXVelocity(true);
}
// hero can't jump anymore
this.canJump = false;
// hero is not on the wall anymore
this.onWall = false;
// the hero can now double jump
this.canDoubleJump = true;
}
else{
// cam the hero make the doubple jump?
if(this.canDoubleJump){
// the hero can't double jump anymore
this.canDoubleJump = false;
// applying double jump force
this.hero.body.velocity.y = -gameOptions.playerDoubleJump;
}
}
}
update(){
console.log(this.hero.body.velocity.y)
// set some default gravity values. Look at the function for more information
this.setDefaultValues();
// handling collision between the hero and the tiles
this.physics.world.collide(this.hero, this.layer, function(hero, layer){
// should the player stop?
let shouldStop = false;
// some temporary variables to determine if the player is blocked only once
let blockedDown = hero.body.blocked.down;
let blockedLeft = hero.body.blocked.left
let blockedRight = hero.body.blocked.right;
// if the hero hits something, no double jump is allowed
this.canDoubleJump = false;
// hero on the ground
if(blockedDown){
// hero can jump
this.canJump = true;
// if we are on tile 2 (stop tile)...
if(layer.index == STOP_TILE){
// player should stop
shouldStop = true;
}
// if we are on a trampoline and previous player velocity was greater than zero
if(layer.index == TRAMPOLINE_TILE && this.previousYVelocity > 0){
// trampoline jump!
hero.body.velocity.y = -gameOptions.trampolineImpulse;
// hero can double jump
this.canDoubleJump = true
}
}
// hero on the ground and touching a wall on the right
if(blockedRight){
// horizontal flipping hero sprite
hero.flipX = true;
}
// hero on the ground and touching a wall on the right
if(blockedLeft){
// default orientation of hero sprite
hero.flipX = false;
}
// hero NOT on the ground and touching a wall
if((blockedRight || blockedLeft) && !blockedDown){
// hero on a wall
hero.scene.onWall = true;
// remove gravity
hero.body.gravity.y = 0;
// setting new y velocity
hero.body.velocity.y = gameOptions.playerGrip;
}
// adjusting hero speed according to the direction it's moving
this.setPlayerXVelocity(!this.onWall || blockedDown, shouldStop);
}, null, this);
// saving current vertical velocity
this.previousYVelocity = this.hero.body.velocity.y;
}
// default values to be set at the beginning of each update cycle,
// which may be changed according to what happens into "collide" callback function
// (if called)
setDefaultValues(){
this.hero.body.gravity.y = gameOptions.playerGravity;
this.onWall = false;
this.setPlayerXVelocity(true);
}
// sets player velocity according to the direction it's facing, unless "defaultDirection"
// is false, in this case multiplies the velocity by -1
// if stopIt is true, just stop the player
setPlayerXVelocity(defaultDirection, stopIt){
if(stopIt){
this.hero.body.velocity.x = 0;
}
else{
this.hero.body.velocity.x = gameOptions.playerSpeed * (this.hero.flipX ? -1 : 1) * (defaultDirection ? 1 : -1);
}
}
}
Thanks to Phaser and Arcade physics we will be able to create any kind of special tile for our platform game. Which one do you want to see next time? Give me feedback and download the source code.
Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.