Hi,
I am learning phaser and I have an issue with rotation of camera.
When I refresh the page I get this:
Then I rotate the camera (and player) and I get this:
The problem is that suddenly a grid appeared on the map. If I rotate the player (and camera) back, the grid disappears.
Moreover, the map is rendered as if the camera was not rotated at all as can be seen by black areas at the bottom and right (left and top are borders of the map, so those being black is ok). The map exists - I can go down with the player just fine, the issue is just the rendering. I basically copied code from Phaser - Examples - Rotate Camera, so I have no idea what I have done wrong.
Could someone help me whats going on?
Thank you.
P.S.
Here is my code:
var config = {
type: Phaser.AUTO,
parent: "seeking_water_game",
width: 800,
height: 600,
physics: {
default: 'arcade',
arcade: {
}
},
scene: {
preload: preload,
create: create,
update: update
}
};
var game = new Phaser.Game(config);
let cursor;
let robot;
let camera;
const speed = 120
const rotation = 0.03
let actualSpeed = 0;
function preload ()
{
this.load.setBaseURL(baseURL);
this.load.spritesheet('robot', 'assets/robot.png',{frameWidth: 64, frameHeight: 64, startFrame:0, endFrame:3});
this.load.spritesheet('bucket', 'assets/bucket.png',{frameWidth: 32, frameHeight: 32, startFrame:0, endFrame:1});
this.load.spritesheet('terrain', 'assets/terrain.png',{frameWidth: 256, frameHeight: 256, startFrame:0, endFrame:0});
this.load.tilemapTiledJSON("map", "assets/map.json")
}
function create ()
{
const map = this.make.tilemap({key:"map"})
const tileset = map.addTilesetImage("terrain", "terrain")
const bgLayer = map.createLayer("BG", tileset, 0,0)
bgLayer.setDepth(1)
const stuffLayer = map.createLayer("Stuff", tileset, 0,0)
stuffLayer.setDepth(3)
stuffLayer.setCollisionByProperty({collides: true})
robot = this.physics.add.sprite(400,300,'robot');
robot.setDepth(2)
this.physics.add.collider(robot, stuffLayer);
const robotAnim = this.anims.create({
key: 'go',
frames: this.anims.generateFrameNumbers('robot', { start: 0, end: 3 }),
frameRate: 5,
repeat: -1
});
robot.play('go');
camera = this.cameras.main;
cursor = this.input.keyboard.createCursorKeys();
camera.startFollow(robot)
// camera.setBounds(0,0, map.widthInPixels, map.heightInPixels);
console.log("finished creation")
}
function update(time, delta){
if (cursor.left.isDown){
robot.rotation -= rotation
camera.rotation+=rotation
}
if (cursor.right.isDown){
robot.rotation += rotation
camera.rotation-=rotation
}
if (cursor.down.isDown){
actualSpeed = 0
}
if (cursor.up.isDown){
actualSpeed = speed
}
this.physics.velocityFromAngle(robot.angle-90, actualSpeed, robot.body.velocity)
}