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).

// 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);
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(){
} <

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

//Camera movement and follow player code

var playGame = function(game){}

playGame.prototype = {

create: function(){

    // starting ARCADE physics


    // creatin of "level" tilemap = game.add.tilemap("level");

    // adding tiles (actually one tile) to tilemap"tileset01", "tile");

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

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

    this.layer ="layer01");

    // adding the hero sprite

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

    // setting hero anchor point


    // 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, 0, 1920, 1440);

    // making the camera follow the player, 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.

That’s Phaser 2.

Correct. Topic has been edited. Thanks!


Just what i was looking for, thanks!

1 Like

this was helpful,ty

The code is mostly from