var game; var heroSpeed = 50; var heroGravity = 400; window.onload = function() { game = new Phaser.Game(480, 320, Phaser.AUTO, ""); game.state.add("PlayGame", playGame); game.state.start("PlayGame"); } var playGame = function(game){}; playGame.prototype = { preload: function(){ game.load.spritesheet("hero", "hero.png", 20, 32); game.load.image("floor", "floor.png"); game.load.image("slope", "slope.png"); game.load.image("big", "big.png"); }, create: function(){ // the floor, an ARCADE immovable body this.floor = game.add.sprite(0, game.height - 32, "floor"); game.physics.enable(this.floor, Phaser.Physics.ARCADE); this.floor.body.immovable = true; // the big rock, an ARCADE immovable body this.big = game.add.sprite(game.width -100, game.height - 132, "big"); game.physics.enable(this.big, Phaser.Physics.ARCADE); this.big.body.immovable = true; // the slope, an ARCADE immovable body this.slope = game.add.sprite(game.width - 200, game.height - 132, "slope"); game.physics.enable(this.slope, Phaser.Physics.ARCADE); this.slope.body.immovable = true; // the hero this.hero = game.add.sprite(32, game.height / 2, "hero"); this.hero.anchor.set(0.5); this.hero.goingRight = false; this.hero.goingLeft = false; this.hero.idleFrame = 0; game.physics.enable(this.hero, Phaser.Physics.ARCADE); this.hero.body.gravity.y = heroGravity; // animations and controls, check // http://www.emanueleferonato.com/2016/05/02/understanding-html5-sprite-animation-with-phaser/ // for full information var walkRightAnimation = this.hero.animations.add("walkRight", [0, 1, 2, 3]); var walkLeftAnimation = this.hero.animations.add("walkLeft", [4, 5, 6, 7]); this.rightKeyPressed = game.input.keyboard.addKey(Phaser.Keyboard.X); this.leftKeyPressed = game.input.keyboard.addKey(Phaser.Keyboard.Z); this.rightKeyPressed.onDown.add(function(){ this.hero.goingRight = true; }, this); this.rightKeyPressed.onUp.add(function(){ this.hero.goingRight = false; }, this); this.leftKeyPressed.onDown.add(function(){ this.hero.goingLeft = true; }, this); this.leftKeyPressed.onUp.add(function(){ this.hero.goingLeft = false; }, this); }, update: function(){ // normal ARCADE collision management between the hero and the floor + the hero and the big rock game.physics.arcade.collide(this.hero, this.floor); game.physics.arcade.collide(this.hero, this.big); // with the slope we look for intersection instead if(game.physics.arcade.intersects(this.hero, this.slope)){ // this is to compare horizontal offset between the hero and the slope var dX = this.hero.x + this.hero.width / 2 - this.slope.x; // we manually modify y property of the hero, no need to use trigonometry as it's a 45 degrees angle this.hero.y = this.slope.y + this.slope.height - this.hero.height / 2 - dX // and we set gravity to zero this.hero.body.gravity.y = 0; } else{ // if we aren't on the slope, set the gravity to its default value this.hero.body.gravity.y = heroGravity; } if(this.hero.goingRight && !this.hero.goingLeft){ this.hero.animations.play("walkRight", 10, true); this.hero.body.velocity.x = heroSpeed this.hero.idleFrame = 0; } else{ if(!this.hero.goingRight && this.hero.goingLeft){ this.hero.animations.play("walkLeft", 10, true); this.hero.body.velocity.x = -heroSpeed; this.hero.idleFrame = 4; } else{ this.hero.frame = this.hero.idleFrame; this.hero.body.velocity.x = 0; } } } }And here is the project source code to download.
My take on handling slopes with Phaser and ARCADE physics
Read all posts about "Jet Set Willy" game
When you need an easy and fast physics engine your games, ARCADE physics is the best choice. It can handle movements and collisions like the ones you can see in games like Radical, Planet Revenge, 2 Cars, Flappy Bird and more.
But when you are building platform games, it can’t handle slopes. Well, until now:
Move the character up and down the slope with Z and X keys.
This is my first take on handling slopes with Phaser and ARCADE physics, and basically you can do it by checking for intersections and playing with trigonometry and gravity.
Just a prototype at the moment, but it will improved with more features, have a look at the source code: