Won't display single frame anim

Phaser 3
1

I’m building an rpg that’s loading in chunks. Everything is working well except I am trying to display a chest sprite with no anim. The path is correct, the keyword is correct. I have verified this by using a multi frame anim and it works.

This DOES NOT work:
frames: [{ key: ‘destructs’, frame: 77 }]

But this DOES work:
frames: anims.generateFrameNumbers(‘destructs’, { frames: [78, 77] }),
frameRate: 8,
repeat: 0

Seems like both should work. The single frame anim works for other sprites, like my player. Any ideas as to where I might have gone wrong?

Edit: Here is my Chest class:

import { createTreasureAnims } from '../Anims/treasureAnims.js';

export default class Chest extends Phaser.Physics.Arcade.Sprite {
  constructor(scene, x, y) {
    super(scene, x, y, 'destructs', 77);
    this.scene = scene;
    scene.physics.add.existing(this);
    this.play('chestclosed', true);
    this.moves = false;
    this.sound = this.scene.sound.add('coinSFX');
    this.sound.setVolume(0.4);
    this.setSize(20, 20, true);
  }
  openChest(player, chest) {}
}

export function placeChests(scene, map) {
  let chests = scene.physics.add.group();
  chests.addMultiple(
    map.createFromObjects('Chests', {
      name: 'chestSprite',
      classType: Chest
    })
  );

  let chestID = 0;
  chests.children.each(function (chest) {
    const worth = Phaser.Math.Between(1, 10);
    chest.chest_id = chestID;
    chestID++;
  }, this);

  scene.physics.add.overlap(scene.halo, chests, scene.openChest, null, this);
  return chests;
}

Phaser.GameObjects.GameObjectFactory.register('chest', function (x, y) {
  const chest = new Chest(this.scene, x, y);
  this.displayList.add(chest);
  this.updateList.add(chest);
  return chest;
});
2

What do you see instead of frame 77 of texture ‘destructs’ (I assume)?

To narrow this down you can test

this.add.sprite(0, 0, 'destructs').play('chestclosed');

then

this.add.chest(0, 0).play('chestclosed');

Actually, from your existing code, try moving

this.play('chestclosed', true);

out of the constructor somehow. That may have to happen after createFromObjects().

3

I see the green box with a diagonal. The first two lines of code you gave worked. I am adding the sprites to a group from a tiled map, so I am not sure how to move the this.play out.

scene.chests = placeChests(scene, map);
export function placeChests(scene, map){
  let chests = scene.physics.add.group();
  chests.addMultiple(map.createFromObjects(
    'Chests', {
        name: "chestSprite",
        classType: Chest
      }
  ));
    
  let chestID = 0;
  chests.children.each(function(chest) {
      const worth = Phaser.Math.Between(1, 10);
      chest.chest_id = chestID;
      //chest.worth = worth;
      chestID++;
    }, this);
    
  scene.physics.add.overlap(scene.halo, chests, scene.openChest, null, this);
  return chests;
}
4

How can I make all chests in the group play ‘closedchest’?

5

Remove this and then change

chests.addMultiple(
  map.createFromObjects('Chests', {
    name: 'chestSprite',
    classType: Chest
  })
);
chests.playAnimation('chestclosed');
6

Awesome! Solved! Thank you very much. Can you briefly tell me what happened so I can learn from my mistake? Thank you again.

7

I think this is because createFromObjects() calls setTexture() (for the key value it receives, undefined in your case), and this happens after Chest’s constructor is called, so the “missing” texture is loaded after the “destructs” texture. And because it’s a single-frame animation, there are no further frames to play.