Isometric Animations Not Playing

[nodes777]

I’m unable to get my animations to play. I’m using Phaser 3, with Sebashwa’s Isometric Plugin and React/Redux. Redux helps create sprites but I expect the issue to be within the game context.

I’m adding a flower sprite to my game and when that happens, I want to play the entire sprite sheet strip so that it looks like it spins, once. The below code adds the flower to the game, but does not play the animation.

import { determineFlowerShape } from "../determinants/determineFlowerShape";
import { determineStem } from "../determinants/determineStem.js";
import { getHexColor } from "../determinants/determineColor";
export function add3dFlower(currFlower, currFlowerId, game) {
	// console.log(currFlower);
	const phenotype = currFlower.phenotype;
// determine position
const posX = currFlower.position.x;
const posY = currFlower.position.y;
const tileIndex = currFlower.tileIndex;
let flowerShape = determineFlowerShape(phenotype);
console.log(flowerShape);

// set position and shape
let newFlowerSprite = game.add.isoSprite(
	posX, // x
	posY, // y
	2, // z
	flowerShape
);

// Enable the physics body on this
game.isoPhysics.world.enable(newFlowerSprite);

// add stem
newFlowerSprite.stem = game.add.isoSprite(
	newFlowerSprite._isoPosition.x,
	newFlowerSprite._isoPosition.y,
	1,
	"straightStem3d" // stem Shape
);

// set color
newFlowerSprite.setTint(getHexColor(phenotype.color));
console.log(newFlowerSprite);

// create id
newFlowerSprite.id = currFlowerId;
// keep on top of stem
newFlowerSprite.depth = 1;

//add flower reference for the tile
game.isoTiles.children.entries[tileIndex].flowerSprite = newFlowerSprite;

// Animation
newFlowerSprite.anims.load(`${flowerShape}Spin`);
console.log("newFlowerSprite animation properties:");
console.log(newFlowerSprite.anims);
newFlowerSprite.anims.play(`${flowerShape}Spin`);

// add the flower to the array of onscreen flowers for bee to fly to
game.flowersOnScreen.push(newFlowerSprite);
}

I have four different flower shapes, so I created an animation for each:

export const createAnims = game => {
//console.log(game.anims.generateFrameNumbers("triangleFlower"));

const defaultSpinConfig = {
	key: "defaultFlowerSpin",
	frames: game.anims.generateFrameNumbers("defaultFlower"),
	frameRate: 6,
	yoyo: false,
	repeat: 0,
	showOnStart: true
};

const triangleSpinConfig = {
	key: "triangleFlowerSpin",
	frames: game.anims.generateFrameNumbers("triangleFlower"),
	frameRate: 6,
	yoyo: false,
	repeat: 0,
	showOnStart: true
};

const roundSpinConfig = {
	key: "roundFlowerSpin",
	frames: game.anims.generateFrameNumbers("roundFlower"),
	frameRate: 6,
	yoyo: false,
	repeat: 0,
	showOnStart: true
};

const squareSpinConfig = {
	key: "squareFlowerSpin",
	frames: game.anims.generateFrameNumbers("squareFlower"),
	frameRate: 6,
	yoyo: false,
	repeat: 0,
	showOnStart: true
};

const defaultFlowerSpinAnim = game.anims.create(defaultSpinConfig);
const triangleFlowerSpinAnim = game.anims.create(triangleSpinConfig);
const roundFlowerSpinAnim = game.anims.create(roundSpinConfig);
const squareFlowerSpinAnim = game.anims.create(squareSpinConfig);
console.log("Animation: ");
console.log(defaultFlowerSpinAnim);
}

I followed the “dude” tutorial on the Phaser main site, and used the Data Animation example as my template. I’ve also followed along with the Cat Small tutorial

I have three leads on the issue. First, I’m using the isoSprite class, from thePhaser 3 Isometric Plugin, but it extends the Sprite class so I would assume the animation methods would just fallback to the usual sprite class.

My second idea of where the problem might be is that I’m attaching another sprite as the child of the flower sprite. The stem is a property of the newFlowerSprite. I would expect that the flower play it’s animation on top of the stem anyway though.

Lastly, it might be possible that I’m just creating, loading, or playing the animations incorrectly, however, logging the newFlowerSprite.anims shows the correct animation name with the right number of frames.

Any direction would be greatly appreciated. Thank you!

Repo: https://github.com/nodes777/flower-game-phaser3
npm install then npm start

Sprite sheets look like this (They’re white on a white background though…)