Storyboard Starter Basics

Draw Text with the Storyboard

The storyboard allows for state logic to be written into specific classes and eliminates the need to override the hamonengine.core.engine class. Creating a frame is as simple as overriding the hamonengine.events.frame class and responds to many of the same events.

See Starter Demo for setting up a basic screen (canvas) in HTML.

NOTES:

• A frame is like a page in a book, where each page can be flipped to the next or previous.
• Frames are built on an n-ary tree, allowing for them to be nested and creating a hierarchy. Although caution should be taken as this n-ary tree is not as efficient at traversing deep descendant nodes.
• Navigation between frames can be accomplished by using the go methods on the passed storyboard object.
• Frames support an onFrameStarting & onFrameStopping event allowing for control when switching to and from a frame.
• Every event contains a reference to the storyboard that is calling the frame.

Handling Events with the Storyboard

Starting the Engine.

Starting the engine simply requires the snippet of code below. The class starterFrame is derived from hamonengine.events.frame.

To use the storyboard, a new storyboard object needs to be included in instantiation and the frames that will be used within the story. In this case, the preloadAllFrames is set to true the storyboard will wait until onloadResources completes on all frames.

The engine should call the load method first to load all resources, bindings, or perform any other pre-starting logic. Since the load method will return a promise, the logic can await before caling the start method.

(async function() {
    //AllowFramesToComplete is enabled by default so that a frame must complete its action before the storyboard will switch to it.
    //PreloadAllFrames is enabled to load all resources before the engine can proceed.
    //The starterFrame is used an entrypoint to the demo and to hold global resources.
    (await new hamonengine.core.engine({
        storyboard: new hamonengine.events.storyboard({
            preloadAllFrames: true, frames: [
                new starterFrame()
            ]
        })
    }).load()).start();
})();