Problem with rendering when rotating camera

Phaser 3
1

Hi,

I am learning phaser and I have an issue with rotation of camera.

When I refresh the page I get this:

before
before1004×788 5.93 KB

Then I rotate the camera (and player) and I get this:
after
after1006×777 101 KB

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)
}
2

See tile-extruder.

Increase that layer’s cullPaddingX and cullPaddingY (in tile units).

1 Like
3

Thank you very much, it solved both problems