'Phaser 3: Graphics are black on mobile
For some reason when I open my game on mobile (tried Chrome, Brave, and Brave on Private tab) the graphic of one specific sprite sheet appears as only black. I am not sure what could possibly cause this issue.
This is how I create my sprite:
character.sprite = this.add.sprite(400, 400, "chara", "idle_0");
All my other sprites, which I created the same way work just fine and this one used to work fine until today.
There are two major changes I can think of which I did since the graphics last worked: -the Spritesheet has gotten significantly bigger (added some large animations) -I added some transition tweens the following way:
function init_trans(scene) {
trans.maskGfx = scene.add.graphics()
.fillCircleShape(trans.maskShape)
.generateTexture('mask');
scene.mask = scene.add.image(0, 0, 'mask')
.setPosition(
gameState.gameWidth / 2,
gameState.gameHeight / 2,
);
scene.cameras.main.setMask(new Phaser.Display.Masks.BitmapMask(scene, scene.mask));
let propertyConfig = {
ease: 'Quint.easeOut',
from: trans.max_scale,
start: trans.max_scale,
to: trans.min_scale,
};
trans.out = scene.tweens.add({
duration: 1000,
scaleX: propertyConfig,
scaleY: propertyConfig,
targets: scene.mask,
paused: true,
});
propertyConfig = {
ease: 'Quart.easeOut',
from: trans.min_scale,
start: trans.min_scale,
to: trans.max_scale,
};
trans.in = scene.tweens.add({
duration: 1000,
scaleX: propertyConfig,
scaleY: propertyConfig,
targets: scene.mask,
paused: true,
});
}
If anyone knows what could cause this issue, help is greatly appreciated, especially since I have a hard time debugging things on mobile.
Update & possible fix:
Upon further investigation the issue seems to have been the spritesheet. I split it into two and that fixed the issue. However if anyone has a more educated explenation on why that was and maybe even an alternative solution, I welcome them.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
