this.load.spineBinary is not a function

0xdoni

I do get this error when i try to spine my assets:

console.log(this.load);
this.load.spineBinary('enemy-skel', '/mini-apps/tip-shot/spine/enemy.skel');
   this.load.spineAtlas(
      'enemy-atlas',
      '/mini-apps/tip-shot/spine/enemy.atlas',
    );

and indeed when i log this.load there are no spineBinary or spineAtlas

I'm using nextjs 14 and i do have following config:

import * as Phaser from 'phaser';
import { Game } from 'phaser';

// import * as spine from '@esotericsoftware/spine-phaser';
import 'phaser/plugins/spine/dist/SpinePlugin';

console.log(window.SpinePlugin);
    this.game = new Game({
      type: Phaser.WEBGL,
      canvas: getCanvas(),
      width: GAME_WIDTH, // smart phone vertical
      height: GAME_HEIGHT,
      backgroundColor: MyColor.blackStr,
      physics: {
        default: 'matter',
        matter: {
          debug: true, // TODO (johnedvard) remove debug if production
          gravity: { x: 0, y: 0 },
          autoUpdate: false,
        },
      },
      input: {
        gamepad: true,
      },
      plugins: {
        scene: [
          { key: 'SpinePlugin', plugin: window.SpinePlugin, mapping: 'spine' },
          {
            key: 'MatterGravityFixPlugin',
            plugin: MatterGravityFixPlugin,
            mapping: 'matterGravityFix',
            start: true,
          },
          {
            key: 'MatterFixedStepPlugin',
            plugin: MatterFixedStepPlugin,
            start: true,
          },
        ],
      },
      scale: {
        mode: Phaser.Scale.HEIGHT_CONTROLS_WIDTH,
        autoCenter: Phaser.Scale.CENTER_BOTH,
      },
    });

then i load the game like so

'use client';

import { useEffect } from 'react';

export default function GameCanvas() {
  useEffect(() => {
    if (!window) {
      return;
    }

    const init = async () => {
      const MyGame = (
        await import('@/lib/utils/mini-apps/tip-shot/objects/Game')
      ).MyGame;
      new MyGame();
      postMessage({ payload: 'removeLoading' }, '*');
    };

    init();
  }, []);

  return (
    <div className="h-full p-0 m-0 overflow-hidden bg-[#131313]">
      <canvas id="my-game"></canvas>
    </div>
  );
}

but then facing this issue: this.load.spineBinary is not a function any idea why this functionality is missing from load object and what to do to be able to load the assets

Spinebot

The error this.load.spineBinary is not a function indicates that the Spine plugin is not correctly integrated or loaded in your Phaser project. Here are a few steps to troubleshoot and resolve this issue:

Ensure Correct Plugin Import and Configuration:
Make sure you are importing and configuring the Spine plugin correctly. The plugin should be included in the Phaser game configuration.
Check Plugin Mapping:
Verify that the plugin is correctly mapped in the Phaser configuration. The SpinePlugin should be mapped to spine.
Verify Plugin Availability:
Ensure that the Spine plugin is available and correctly loaded before you attempt to use it.

Here is an example of how to correctly configure and use the Spine plugin in Phaser:

import * as Phaser from 'phaser';
import { Game } from 'phaser';
import 'phaser/plugins/spine/dist/SpinePlugin';

console.log(window.SpinePlugin);

this.game = new Game({
  type: Phaser.WEBGL,
  canvas: getCanvas(),
  width: GAME_WIDTH,
  height: GAME_HEIGHT,
  backgroundColor: MyColor.blackStr,
  physics: {
    default: 'matter',
    matter: {
      debug: true,
      gravity: { x: 0, y: 0 },
      autoUpdate: false,
    },
  },
  input: {
    gamepad: true,
  },
  plugins: {
    scene: [
      { key: 'SpinePlugin', plugin: window.SpinePlugin, mapping: 'spine' },
      {
        key: 'MatterGravityFixPlugin',
        plugin: MatterGravityFixPlugin,
        mapping: 'matterGravityFix',
        start: true,
      },
      {
        key: 'MatterFixedStepPlugin',
        plugin: MatterFixedStepPlugin,
        start: true,
      },
    ],
  },
  scale: {
    mode: Phaser.Scale.HEIGHT_CONTROLS_WIDTH,
    autoCenter: Phaser.Scale.CENTER_BOTH,
  },
});

// Loading assets
this.load.setPath('/mini-apps/tip-shot/spine/');
this.load.spine('enemy', 'enemy.skel', 'enemy.atlas');

Loading Assets:
Use the this.load.spine method to load both the skeleton and atlas files together. This method is part of the Spine plugin and should be available if the plugin is correctly integrated.
Check for Errors:
Open the browser's developer console and check for any errors or warnings that might indicate issues with loading the plugin or assets.

If the issue persists, ensure that the Spine plugin is correctly installed and that there are no version mismatches between Phaser and the Spine plugin.