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