How to Get Phaser Spine Plugin to Work Without NPM

Load the Phaser SpinePlugin in a back-to-the-basics environment

by on 4 minute read


Are you trying to get the Phaser Spine plugin to work but failing miserably at it?

There's a bunch of files in the Github repository but which one do you need? All of them? Just some? And WTF is a .js.map file?

Being an intrepid developer you've tried your best but all you got were errors like SpinePlugin is not a valid plugin or this.add.spine is not a function. 😭

Shoot me now. 🔫

You are not alone. Many developers learning to use Phaser run into this problem.

We will show you how to get the SpinePlugin to work in a Phaser project that does not use NPM, Yarn, or any web development tooling.

Just your html and js files plus a local webserver. If you've gotten far enough to try using the SpinePlugin then you are already running a local webserver.

Here are 5 great options if you are not running a webserver.

You can find the complete source for this example project here.

For using the SpinePlugin with NPM check out this article.

Which Spine Files Do I Need?

Using the right file is the first step that trips up almost everyone.

Nothing else you do will work if you aren't loading the right file.

You only need 1 file and that is the SpinePlugin.min.js from phaser/plugins/spine/dist.

If you downloaded Phaser as a zip from Github then find that file from the path above or get it from here.

Order of Script Tags

Now that you have the right file you need to include it in your index.html.

The order is important so be sure phaser.min.js is loaded first.

1
2
3
4
5
6
7
8
9
<html>
	<head>
		<title>My Phaser Game</title>
		<script src="phaser.min.js"></script>
		<script src="SpinePlugin.min.js"></script>
		<script src="main.js"></script>
	</head>
	<!-- ... -->
</html>

We are putting our game code in main.js but you might have something like game.js instead.

What's important is the specific order: your game code should be last.

Load SpinePlugin into Phaser

We can load the SpinePlugin by updating the config object passed to Phaser.Game().

1
2
3
4
5
6
7
8
9
const config = {
	type: Phaser.AUTO,
	// ...
	plugins: {
		scene: [
			{ key: 'SpinePlugin', plugin: window.SpinePlugin, mapping: 'spine' }
		]
	}
}

Now in your Scene's preload() method, you can load Spine animations like this:

1
2
3
4
5
function preload ()
{
	this.load.setPath('assets/spine/')
	this.load.spine('boy', 'spineboy.json', 'spineboy.atlas')
}

And then create the animation in create() like this:

1
2
3
4
5
function create ()
{
	const spineBoy = this.add.spine(400, 600, 'boy', 'idle', true)
	// use spineBoy...
}

Ugh, It Still Doesn't Work!

If you are one of the lucky people still running into errors then try using the PackFile approach instead.

Remove <script src="SpinePlugin.min.js"></script> from your index.html and then update the scene entry of your GameConfig like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
const config = {
	// ...
	scene: {
		preload: preload,
		create: create,
		pack: {
			files: [
				{ type: 'scenePlugin', key: 'SpinePlugin', url: 'SpinePlugin.min.js', sceneKey: 'spine' }
			]
		}
	}
	// also remove the `plugins` key
}

Notice we also removed the plugins entry from config.

Your project likely will have multiple Scenes including a bootstrap or preload Scene. You'll want to add the pack configuration to the first Scene that loads.

If you are subclassing Phaser.Scene then add the pack entry to the Scene SettingsConfig:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
class Bootstrap extends Phaser.Scene
{
	constructor()
	{
		super({
			key: 'bootstrap',
			pack: {
				files: [
					{ type: 'scenePlugin', key: 'SpinePlugin', url: 'SpinePlugin.min.js', sceneKey: 'spine' }
				]
			}
		})
	}
}

Next Steps

Now you can use Spine animations in your Phaser game! 🎉

The spineBoy above is a SpineGameObject that can be used like other Phaser GameObjects.

Check out the official documentation to learn how to switch animations, skins, slots, and more.

Be sure to sign up for our newsletter so you don't miss any future Phaser 3 game development tips and techniques!

Drop your email into the box below.

Don't miss any Phaser 3 game development content

Subscribers get exclusive tips & techniques not found on the blog!

Join our newsletter. It's free. We don't spam. Spamming is for jerks.

Phaser 3 Spine SpinePlugin

Want tips and techniques more suited for you?


You may also like...


Video Guides


Beginner Guides


Articles Recommended For You

Scene Transition with Fade Out in Phaser 3

by on

Are you looking for a quick way to improve Scene transitions? A hard cut from one Scene to another is appropriate at …

6 minute read

Typewriter Effect for Text and BitmapText in Phaser 3

by on

Are you making a story-driven game like an RPG or interactive novel? Having text show up one character at a time is …

6 minute read

Firebase Leaderboard with Rex Plugins in Phaser 3

by on

Are you looking to add more replayability to your game? Leaderboards are a long-standing feature of single-player games …

9 minute read

Create an Animated Health Bar in Phaser 3

by on

Using simple numbers to show health is great for prototypes. It is quick to create when you are testing gameplay. But …

6 minute read

Didn't find what you were looking for?


comments powered by Disqus