Phaser 2 Camera Movement with Follow

The Camera is the way in which all games are rendered in Phaser. They provide a view into your game world, and can be positioned, rotated, zoomed and scrolled accordingly.
A Camera consists of two elements: The viewport and the scroll values.
The viewport is the physical position and size of the Camera within your game. Cameras, by default, are created the same size as your game, but their position and size can be set to anything. This means if you wanted to create a camera that was 320x200 in size, positioned in the bottom-right corner of your game, you’d adjust the viewport to do that (using methods like setViewport and setSize).

image
// Preload function

var game;
var gameOptions = {

// width of the game, in pixels
gameWidth: 640,

// height of the game, in pixels
gameHeight: 480,

// background color
bgColor: 0x444444,

// 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

}

window.onload = function() {
game = new Phaser.Game(gameOptions.gameWidth, gameOptions.gameHeight);
game.state.add(“PreloadGame”, preloadGame);
game.state.add(“PlayGame”, playGame);
game.state.start(“PreloadGame”);
}
var preloadGame = function(game){}
preloadGame.prototype = {
preload: function(){
game.stage.backgroundColor = gameOptions.bgColor;
game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
game.scale.pageAlignHorizontally = true;
game.scale.pageAlignVertically = true;
game.stage.disableVisibilityChange = true;
<
// loading level tilemap
game.load.tilemap(“level”, ‘level.json’, null, Phaser.Tilemap.TILED_JSON);
game.load.image(“tile”, “tile.png”);
game.load.image(“hero”, “hero.png”);
},
create: function(){
game.state.start(“PlayGame”);
}
} <

Setting up the Camera
Get camera
Each scene has one or more cameras.
Main Camera
var camera = scene.cameras.main;
Add new camera
var camera = scene.cameras.add();
// var camera = scene.cameras.add(x, y, width, height);
Add existed camera
scene.cameras.addExisting(camera);

//Camera movement and follow player code

var playGame = function(game){}

playGame.prototype = {

create: function(){

    // starting ARCADE physics

    game.physics.startSystem(Phaser.Physics.ARCADE);

    // creatin of "level" tilemap

    this.map = game.add.tilemap("level");

    // adding tiles (actually one tile) to tilemap

    this.map.addTilesetImage("tileset01", "tile");

    // tile 1 (the black tile) has the collision enabled

    this.map.setCollision(1);

    // which layer should we render? That's right, "layer01"

    this.layer = this.map.createLayer("layer01");

    // adding the hero sprite

    this.hero = game.add.sprite(300, 376, "hero");

    // setting hero anchor point

    this.hero.anchor.set(0.5);

    // enabling ARCADE physics for the  hero

    game.physics.enable(this.hero, Phaser.Physics.ARCADE);

    // setting hero gravity

    this.hero.body.gravity.y = gameOptions.playerGravity;

    // 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

    game.input.onDown.add(this.handleJump, this);

    // set workd bounds to allow camera to follow the player

    game.world.setBounds(0, 0, 1920, 1440);

    // making the camera follow the player

    game.camera.follow(this.hero, Phaser.Camera.FOLLOW_PLATFORMER, 0.1, 0.1);

}, <

Camera follow function

  • Camera can be set to follow a player by using follow function.
  • This is done using Phaser.Camera.FOLLOW_PLATFORMER.
  • The camera view bounds is also given as an input.
5 Likes

That’s Phaser 2.

Correct. Topic has been edited. Thanks!

3 Likes

Just what i was looking for, thanks!

2 Likes

this was helpful,ty

The code is mostly from https://www.emanueleferonato.com/2017/07/08/the-basics-behind-jumping-on-enemies-feature-explained-with-phaser-and-arcade-physics/.