Invisible player sprite

Phaser 3
1

Hi,

I am new at Phaser and has my first problem with the player sprite.

Here is my code:

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    pixelArt: true,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: {
                y: 0
            }
        }
    },
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};
let controls;
let player;
const game = new Phaser.Game(config);


function preload() {

    // MAP
    this.load.image('tiles', 'map/galletcity/galletcity.png');
    this.load.tilemapTiledJSON('map', 'map/GameMap.json');
    this.load.spritesheet('survivor', 'characters/player.png', {
        frameWidth: 16,
        frameHeight: 16
    });
}

function create() {

    // MAP
    const map = this.make.tilemap({
        key: 'map'
    });
    const tileset = map.addTilesetImage('galletcity', 'tiles');
    const below = map.createStaticLayer('Below', tileset, 0, 0);
    const world = map.createStaticLayer('World', tileset, 0, 0);
    world.setCollisionByProperty({
        collides: true
    });
    const above = map.createStaticLayer('Above', tileset, 0, 0);

    // DEBUGGER COLLIDES
    //    const debugGraphics = this.add.graphics().setAlpha(0.75);
    //    world.renderDebug(debugGraphics, {
    //        tileColor: null, // Color of non-colliding tiles
    //        collidingTileColor: new Phaser.Display.Color(243, 134, 48, 255), // Color of colliding tiles
    //        faceColor: new Phaser.Display.Color(40, 39, 37, 255) // Color of colliding face edges
    //    });

    // PLAYER
    player = this.physics.add.sprite(400, 400, 'survivor');

    this.physics.add.collider(player, world);
    player.setCollideWorldBounds(true);

    this.anims.create({
        key: 'up',
        frames: this.anims.generateFrameNumbers('survivor', {
            start: 1,
            end: 6
        }),
        frameRate: 10,
        repeat: -1
    });

    this.anims.create({
        key: 'right',
        frames: this.anims.generateFrameNumbers('survivor', {
            start: 1,
            end: 6
        }),
        frameRate: 10,
        repeat: -1
    });

    this.anims.create({
        key: 'down',
        frames: this.anims.generateFrameNumbers('survivor', {
            start: 1,
            end: 6
        }),
        frameRate: 10,
        repeat: -1
    });

    this.anims.create({
        key: 'left',
        frames: this.anims.generateFrameNumbers('survivor', {
            start: 1,
            end: 6
        }),
        frameRate: 10,
        repeat: -1
    });

    this.anims.create({
        key: 'turn',
        frames: [{
            key: 'survivor',
            frame: 3
        }],
        frameRate: 20
    });

    // CAMERA
    this.cameras.main.setBounds(0, 0, map.widthInPixels, map.heightInPixels);
    const cursors = this.input.keyboard.createCursorKeys();
    const controlConfig = {
        camera: this.cameras.main,
        left: cursors.left,
        right: cursors.right,
        up: cursors.up,
        down: cursors.down,
        speed: 0.5
    };
    controls = new Phaser.Cameras.Controls.FixedKeyControl(controlConfig);


}

function update(time, delta) {

    // CAMERA
    controls.update(delta);

    // PLAYER
    player.body.setVelocity(0);
}

I read the tutorial and looked at the examples but don’t understand my problem.
Does it come from the sprite?

Thanks :wink:

2

If you use this image, the frameWidth and frameHeight are wrong.

The image has a width of 265 and a height of 558. 2 frames in width and 4 frames in height. Makes 265/2 and 558/4

It should be

this.load.spritesheet('survivor', 'characters/player.png', {
  frameWidth: 132.5,
  frameHeight: 139.5
})
1 Like
3

Thanks it works :wink:

So to have a 16*16 image, I have to crop it in photoshop?
I can’t put the size I want directly in the code?

4

You can do this.
Or you scale it in phaser with player.setScale()

1 Like
5

I have the error (setScale is not a function) in the console.

Does it work on spritesheet?

Is there a zoom function maybe?

6

It is in percent. 0.25 means the player is 4 times smaller.

preload() {
  this.load.spritesheet('survivor', 'characters/player.png', {
    frameWidth: 132.5,
    frameHeight: 139.5
  })
}

create() {
  let player = this.add.sprite(400, 400, 'survivor')
  player.setScale(0.25)
}
1 Like
7

Thanks :slight_smile:

Phaser3 lacks of documentation. When looking for setScale I found nothing.
And it’s quite hard to look into the examples.

1 Like
8

I use TypeScript and Visual Studio Code. This way I can see all the properties and methods of Phaser inside my editor. Its much easier like this.

If you want to get started with TypeScript and Phaser 3, I recommend you my starter template.

phaser3-typescript-setScale
phaser3-typescript-setScale.png1059×586 91 KB

Hope this helps :slight_smile:

1 Like
9

If you are discovering Phaser, you will find a lot of useful information on our bread and butter, the Sprite, on the Sprite API page, including setScale(x [, y]).

1 Like
10

While I agree that in its current state the API documentation site does have some missing pieces, the source code is actually very well documented and there are a ton of examples.

Specifically: Phaser 3.60 Examples has examples for manipulating an object’s transform including scaling example.

1 Like
11

Great. I will give a try to the ES6 template, and will use VS instead of Brackets for Phaser :wink:

1 Like
12

The ES6 template can’t use Intellisense compared to the TypeScript one.
Is it normal?

Since I don’t know a lot TypeScript. Can I use it like ES6 without using its advanced features?

13

Set noImplicitAny in tsconfig.json to false. This will not force you to use types.

Then it will be very similar to normal es6.

1 Like
14

To make it work with the ES6 template, maybe you have to install TypeScript globally?