Note: my code is already running and rendering the sprite
just one click to play with
I'm learning a phaser3 loader example
here is the code I wrote
class BootScene extends Phaser.Scene {
constructor() {
super();
}
preload() {
this.load.path = 'https://raw.githubusercontent.com/liyi93319/phaser3_rpg/main/part1/assets/';
this.load.atlas('player', 'knight_atlas.png', 'knight_atlas.json');
}
create() {
var player = this.add.sprite(80, 100, 'player', 0);
player.setScale(.5);
}
}
var config = {
width: 400,
height: 300,
pixelArt: true,
physics: {
default: 'arcade',
arcade: {
gravity: { y: 0 },
}
},
backgroundColor: 0x000000,
scene: [BootScene]
}
var game = new Phaser.Game(config);<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>Everything works fine so far.
However, changing the create() as follows
create() {
var player = this.add.sprite(80, 100, 'player', 5);
player.setScale(.5);
}
doesn't load the frame as expected and throws a warning
Texture.frame missing: 5
I compared the 'knight_atlas.json' file with the one from the official example. I don't see the difference.
I also checked the doc but didn't find a solution.
What am I missing?
If you want to use the third parameter you would have to use the string (or Texture Object), in this case the filename from the atlas should work. Here the is relevant documentation
class BootScene extends Phaser.Scene {
constructor() {
super();
}
preload() {
this.load.path = 'https://raw.githubusercontent.com/liyi93319/phaser3_rpg/main/part1/assets/';
this.load.atlas('player', 'knight_atlas.png', 'knight_atlas.json');
}
create() {
var player = this.add.sprite(80, 100, 'player', 'Attack (3).png');
player.setScale(.5);
var player2 = this.add.sprite(240, 100, 'player', 'Idle10');
player2.setScale(.5);
}
}
var config = {
width: 400,
height: 300,
pixelArt: true,
physics: {
default: 'arcade',
arcade: {
gravity: { y: 0 },
}
},
backgroundColor: 0x000000,
scene: [BootScene]
}
var game = new Phaser.Game(config);<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>