Hi guys,
First time poster here, I am making a flying plane game with a scrolling background (1920x1080), there is also a banner at the top with some stats. I want to be able to have it in my game as a (800x600) and then have a camera that follows the position of the plane in relation with the screen.
When I use game.camera.follow(plane); it doesn't work and traps the screen in the top left of the screen.
Here is some code for context:
var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create, update: update, render: render });
function preload() {
///Load assets
game.load.image('sky', 'assets/backplate2.png');
game.load.image('plane', 'assets/plane.png');
game.load.image('banner', 'assets/screenbanner.png');
}
var backgrounda = 0.1;
var backgroundv = 2;
var width;
var height;
var energy = 0;
var scoreText;
function create() {
sky = game.add.tileSprite(0, 0, 1920, 1200, 'sky');
banner = game.add.sprite(0, 0, 'banner');
player = game.add.sprite(500, 500, 'plane');
scoreText = game.add.text(16, 16, 'Energy: 0 J', { fontSize: '32px', fill: '#229'});
game.physics.startSystem(Phaser.Physics.arcade);
game.physics.arcade.setBounds(0, 70, 1920, 960);
game.physics.arcade.enable(player);
game.camera.follow(player);
banner.scale.setTo(0.42, 0.42);
player.scale.setTo(0.1, 0.1);
player.body.gravity.y = 400;
player.body.collideWorldBounds = true;
cursors = game.input.keyboard.createCursorKeys();
}
function update() {
sky.tilePosition.x -= Math.min(backgroundv + backgrounda, 100);
player.body.velocity.x = 0;
if (cursors.left.isDown)
{
player.body.velocity.x = -150;
player.animations.play('left');
}
else if (cursors.right.isDown)
{
player.body.velocity.x = 150;
player.animations.play('right');
}
else
{
player.animations.stop();
player.frame = 4;
}
if (cursors.up.isDown)
{
player.body.velocity.y = -300;
backgroundv = (backgroundv + backgrounda);
player.body.rotation = (Math.max(-20, player.body.rotation-1));
energy += 2;
Math.round(energy);
scoreText.text = 'Energy: ' + energy + ' J';
}
else if (cursors.down.isDown)
{
backgroundv = backgroundv - (backgrounda/2);
backgroundv = Math.max(backgroundv, 0) - (backgrounda/2);
player.body.rotation = (Math.min(0, player.body.rotation+1));
}
//else {
//backgroundv = backgroundv - backgrounda;
//backgroundv = (Math.max(backgroundv, 0) - backgrounda);
//}
}
function render() {
game.debug.cameraInfo(game.camera, 32, 32);
game.debug.spriteCoords(player, 32, 500);
}