Phaser and Spine

veme

SpineGameObject TS map seems to not be fully compatible with Phaser, cause it's missing few fields, or I got something messed up with the setup... Working with:

"@esotericsoftware/spine-phaser": "^4.2.75",
"phaser": "^3.88.2"

In Phaser config, I've got Spine configuration set up:

plugins: {
    scene: [
        { key: "spine.SpinePlugin", plugin: SpinePlugin, mapping: "spine" }
    ]
}

When I create spine object and want to set the scale based on its size and window's height I got error that Property 'height' does not exist on type 'SpineGameObject' even tho, it is there (checked via console.log(test)). Seems like ts didn't map it properly?

const test = this.add.spine(
    0,
    0,
    "spine-data",
    "spine-atlas"
);
test.setScale((this.game.config.height as number) / test.height);

Workaround is to set test variable as any (const test = this.add.spine(...) as any) and it's working fine, but using it destroys the idea of typescript

Davide

veme

That should work 😱 Thanks for reporting this!

I'll look into that.
I've opened an issue on our GitHub tracker.

Spinebot

The issue you're encountering is related to TypeScript's type definitions not fully matching the runtime properties of SpineGameObject. The SpineGameObject in the spine-phaser runtime may have properties like height that are not explicitly defined in the TypeScript type definitions. This can happen if the type definitions are not fully up-to-date with the runtime or if certain properties are dynamically added at runtime.

To address this, you can extend the TypeScript definitions to include the missing properties. However, using any as a workaround, as you've done, is a quick solution to bypass TypeScript's type checking. If you want to maintain type safety, you could create a custom type definition that extends SpineGameObject to include the height property.

Here's a simple example of how you might extend the type:

interface ExtendedSpineGameObject extends Phaser.GameObjects.GameObject {
    height: number;
    // Add other properties as needed
}

const test = this.add.spine(0, 0, "spine-data", "spine-atlas") as ExtendedSpineGameObject;
test.setScale((this.game.config.height as number) / test.height);

This way, you can keep the benefits of TypeScript's type checking while ensuring that your code reflects the actual properties available at runtime.

Davide

It was just a copy and paste problem. Fixed in 4.2.76!
Thanks again for reporting it 🙂