CODEWITHSUNDEEP
typescriptphaser-frameworkcapacitor
Seyong Cho
Seyong Cho

Reputation: 1097

Phaser 3 spritesheet not displaying on iOS - Shows black rectangle instead

I have a project built with phaser 3, and strangely it doesn't show the spritesheet (it appears as black rectangle instead). It only happens in mobile (running on simulator and running on mobile safari). On my mac, it displays properly (both chrome and safari).

Code:

In boot-scene.ts:

this.load.spritesheet('character-walk', 'assets/walk.png',
    { frameWidth: 547, frameHeight: 481 },
);

In game-scene.ts:

this.player = this.add.sprite(100, 600, 'character-walk')

Screenshot: enter image description here

Any help is greatly appreciated.

Upvotes: 2

Views: 1615

Answers (3)

humbolight
humbolight

Reputation: 690

type: Phaser.CANVAS is not a solution if the project requires WebGL acceleration. I am finding that this happens when the sprite is over a certain number of pixels in any one direction. For instance, I have a 3000px x 6000px sprite sheet image exhibiting this behavior but when it is cut to 3000px x 3000px it loads as expected on iOS.

Upvotes: 3

Seyong Cho
Seyong Cho

Reputation: 1097

setting type: Phaser.CANVAS in gameConfig fixed this issue. It seems type:Phaser.AUTO makes it not render sprites on iOS.

Upvotes: 1

sçuçu
sçuçu

Reputation: 3070

It may not be downloaded properly. Where do you serve this spritesheet from? Does this server allows requests from the origin you make the request from (i.e. your app's origin)?

If not, you may need to allow CORS in your server.

Upvotes: 2

Related Questions