Hi Guys,
I’m just getting started setting up my environment with Phaser 3, having used Phaser 2 for the past couple of years. All the examples on github are great, and seem to work fine, but the issues I’m running into relate to Spine (getting it to build when imported, and code-completion for this.load.spine, this.add.spine etc).
Right now, I’m working off of the phaser-parcel template on github. I’ve done the NPM install to get the dependencies, and I’ve updated app.js to import the SpinePlugin after I import phaser:
Then I attempt to implement it in the GameConfig object:
But when I run it with parcel, I get the following error in the browser, which points to the SpinePlugin.js file, and points out line 12, which is a require statement for a module called ‘Spine’, which doesn’t appear to exist (I’ve checked it out as best I can and don’t see what this require statement is actually referring to, can anybody shed a bit of light on this?):
I’m pretty stuck at this stage, so any help here would be greatly appreciated!
Thanks,
Richard
1 Like
I just did an ’ npm i spine’, and I’m no longer getting the above error. However, now I get the following error in the console:
Invalid Scene Plugin: SpinePlugin
PluginManager.js:362 Invalid Scene Plugin: SpinePlugin
installScenePlugin @ PluginManager.js:362
boot @ PluginManager.js:196
emit @ index.js:201
boot @ Game.js:383
DOMContentLoaded @ DOMContentLoaded.js:27
Game @ Game.js:343
newGame @ app.js:7
parcelRequire.app.js.phaser @ app.js:24
newRequire @ app.c328ef1a.js:47
(anonymous) @ app.c328ef1a.js:81
(anonymous) @ app.c328ef1a.js:120
1 Like
OK. I switched to the built js file of the Spine plugin in the dist directory, and used a ts-ignore to allow me to point to window.SpinePlugin the GameConfig file (otherwise, tslint complains that window does not contain SpinePlugin), and this seems to have gotten me past the ‘Invalid Scene Plugin’ error. But now, when I try to load a spine file with this.load.spine, I get the following error in the console:
VM74766:1 Uncaught SyntaxError: Unexpected token < in JSON at position 0
at JSON.parse ()
at JSONFile.onProcess (SpinePlugin.js:24378)
at LoaderPlugin.nextFile (LoaderPlugin.js:817)
at JSONFile.onLoad (SpinePlugin.js:2643)
It seems to be having trouble reading the JSON file (from Spine, unmodified). Any ideas?
I had a typo in the ‘this.load.spine’ statement, which showed up when I added typing info to phaser.d.ts. I know it’s not best practice to go and modify the type defs, but it’s the only way I could find to get code completion for this, so for anyone who’s looking for a way to get code completion working for load.spine and add.spine, open up phaser.d.ts, and go to line 46044, wheere the spritesheet loader is defined, and insert the following lines after it:
/**
* @param key the key to use for this file
* @param json the path to the json file for spine animation
* @param atlas the pat to the atlas for the spine animation
* */
spine(key: string, json: string, atlas: string): Phaser.Loader.LoaderPlugin;
This should give you code completion for the loader. You can follow the same process to add code completion for the GameObjectFactory etc.
I’ve reached the point where this.load.spine doesn’t throw any errors in the console. However, nothing appears on the screen.
I console.logged this.sys.displayList, and I can see that it is not beeing added to the display list at all. When I try to use this.add.existing() or this.sys.displayList.add(), I get the following error:
SpineWebGLPlugin.js:30799 Uncaught TypeError: Failed to execute ‘getUniformLocation’ on ‘WebGLRenderingContext’: parameter 1 is not of type ‘WebGLProgram’.
at Shader.window.SpinePlugin.Shader.getUniformLocation (SpineWebGLPlugin.js:30799)
at Shader.window.SpinePlugin.Shader.setUniform4x4f (SpineWebGLPlugin.js:30799)
at SceneRenderer.window.SpinePlugin.SceneRenderer.enableRenderer (SpineWebGLPlugin.js:30799)
at SceneRenderer.window.SpinePlugin.SceneRenderer.begin (SpineWebGLPlugin.js:30799)
at SpineGameObjectWebGLRenderer [as renderWebGL] (SpineWebGLPlugin.js:30799)
at WebGLRenderer.render (SpineWebGLPlugin.js:30799)
at CameraManager.render (SpineWebGLPlugin.js:30799)
at Systems.render (SpineWebGLPlugin.js:30799)
at SceneManager.render (SpineWebGLPlugin.js:30799)
at Game.step (SpineWebGLPlugin.js:30799)
Again, any help with this would be appreciated, at this stage i’m completely stumped as to what is going wrong. I tried switching to the Canvas renderer to see if it was related to WebGL, but I get this error with the Canvas renderer, and still nothing shows:
Uncaught TypeError: Cannot read property ‘dispose’ of undefined
at SpinePlugin.shutdown (SpinePlugin.js:7476)
at EventEmitter.emit (index.js:203)
at Systems.shutdown (Systems.js:727)
at SceneManager.stop (SceneManager.js:1215)
at SceneManager.processQueue (SceneManager.js:291)
at SceneManager.update (SceneManager.js:552)
at Game.step (Game.js:475)
at TimeStep.step (TimeStep.js:576)
at step (RequestAnimationFrame.js:105)
I’ve run into your initial problem before and I think I also tried to npm install spine but I don’t think or know if that is the right module being used by the source so I just imported the distribution version of SpinePlugin instead.
import 'phaser/plugins/spine/dist/SpinePlugin'
I then accessed it from window.SpinePlugin when loading the plugin.
I don’t remember if I tried to import any exports via import * as SpinePlugin from ... so that might still work like you have it.
1 Like
