This is a tiny repo that demonstrates a way to integrate Ink stories into Phaser. Feel free to clone it & use it as a template or use this code as a base for your own thing. You can see this demo up and running here.
In order to use an ink story in phaser, you need to do a few things:
- Write your story in ink.
- Export it as a json file.
- Snag the latest version of inkjs (this demo uses 1.6.0).
- Set up your phaser project however your normally would & include the ink.js file somewhere.
- Write a few functions that handle how you display the text & choices in your game. This demo has 3 functions for this:
- continueStory() - Displays the next part of the story & calls createChoices().
- createChoices() - Creates a button for each choice.
- choiceClick() - Runs when you select a choice & continues the story.
Most of the code in those functions will change depending on how you want to lay out your game, but the basics are there.
This demo was created with help from a lot of different places, and if you're looking to go farther with his here are some places to look:
- ink - The actual ink scripting language. If you want to have fancier things than just plain choices, this is where you learn how to do it.
- inkjs - The reason any of this is possible.
- VampiroInkPhaser - An entire game that integrates ink & phaser. This demo makes use of a few very, very simplified versions of some functions from this game.
- And of course, Phaser.