- Part 1: Ink for Web
- Part 2: Story API
- Part 3: Getting and Setting Variables
- Part 4: Calling Ink Functions
- Part 5: Building an Interface
Building an Interface
In the previous part, the function EvaluateFunction() was used to call Ink functions directly, having Ink check and then change values. This was seen as a better alternative than changing values directly via the variablesState properties.
Back in the first part, the main.js file generated by the Ink for Web functionality showed a way of using Ink in a browser, using the same APIs as the examples developed from using the inkjs NPM module.
Pulling functionality and code examples from main.js from Ink for Web, its function usage can be copied and used to create a simple interface
Using a combination of canContinue, Continue() and currentChoices, the current text can be returned and the choices shown to the user. However, in using the EvaluateFunction() function, this can be improved.
Instead of showing choices, HTML buttons could be used to drive the story. These could call the internal Ink functions and change values.
Changing the interface means also changing the Ink code. If the HTML interface is going to drive the experience, there is little need for the choices to be in the Ink code.
In the new code, the other choices have been removed to create a simple looping structure where “Keep going” is the first, non-removed choice. Using HTML buttons, the previous Ink choices could be used to drive the code via calls to EvaluateFunction(), making a HTML interface to the Ink interface functions.
This requires re-writing the main.js code to support this new interface where, instead of using currentChoices, the same choice is used over and over again whenever a BUTTON is clicked.