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

Command Pattern to Undo Player Actions

by on

Are you looking for a clean and reusable way to implement undo for player actions? Perhaps you are making a turn-based …

15 minute read

Advanced Logging with the Strategy Pattern

by on

Have you ever tried debugging a problem with your game that only seems to happen in production? The Developer Tools …

7 minute read

State Pattern for Character Movement in Phaser 3

by on

Writing clean and well-organized code is something all game developers aspire to. We want code to be reusable and easy …

7 minute read

Memory Match in Modern Javascript with Phaser 3 - Part 6

by on

If you've got the basics of Phaser 3 in modern JavaScript down then it might be time to try making something a bit more …

8 minute read

Didn't find what you were looking for?


comments powered by Disqus