iiYO Community

I'm new to WebStory, but I love its potential. I have a story that I would like to diverge at a path. One path asks multiple choice questions (easy enough to implement), but the other would have a "physical" challenge, which is an HTML5 Canvas game I've written.

I would love to incorporate the game directly in the story, but don't see any easy way of doing that. Alternatively, I would like to know how to send them the reader to the game and then bring them back to a specific point in the story line. (One spot if they are successful and another spot if they fail.)

The (very rough and incomplete) story is at http://spiritarmor.com/spirittech. The red path is where I want to place the game level. The first game level is at http://spiritarmor.com/demo.

Any great ideas?

Hi billosborne, welcome to the forums!

That game of yours sure looks impressive. Awesome graphics.

For integrating your canvas game with WSE, you could try the following:

1. Implement a function that starts your canvas game and add that function to

Code:

WSE.functions

.
2. Call that function from within your web story using

Code:

<fn name="myFunction">

.
3. Stop the web story with

Code:

<break />

.
4. Using the interpreter instance you get passed to your myFunction function continue the web story by calling

Code:

interpreter.next();

. You can also assign some in-game variables in this step by putting them into

Code:

interpreter.runVars

, e.g. to get the user's score from the canvas game into your web story.

You might also find the functions

Code:

stageclick_disable

and

Code:

stageclick_enable

helpful. Also, you can disable the key triggers to prevent the user from continuing the web story on accident.

Hope that does the trick! Good luck.

billosborne

Guest