When I was 11, the school IT technicians introduced me to Macromedia Flash. i was blown away, and immediately taught myself how to make loads of little Flash games – which eventually got my school email account banned after I started distributing them a little too enthusiastically! I ended up learning how to build a point-and-click game in Flash from tutorials online.
Recently, playing around with Articulate Storyline again for work brought back those memories, so I decided to try making a small prototype of the point and click games. It also gave me a fun excuse to properly explore how far I could push the Storyline JavaScript API.
How it works
The game works by treating the world as a collection of objects. All the movable world elements are stored in an array, while invisible hotspots around the edges of the map are stored in a separate array of hitboxes. An update() loop runs continuously, and when movement is active, a function loops through all world objects and moves them along the x and y axis using a speed value multiplied by directional variables.
The direction values are either -1, 0, or 1, so movement is calculated using logic like “x += speed * moveXDirection” – and the same principle applies to vertical movement with the Y axis.
Rather than moving the character directly, the character stays largely fixed while the world moves around them. A hidden hotspot underneath the character acts as the character’s hitbox. Collision detection checks the character’s position, width, and height against the world hitboxes. When a collision is detected, movement stops and a small pushback is applied to stop the player getting stuck in walls or objects.
The character has numerous animated GIFs, and the opacity of these depend on movement direction. The game switches between the opacity states based on the moveXDirection and moveYDirection values, allowing the character to face and walk in different directions.
I did originally use a character with numerous states. However, I found this flickered in and out whenever it changed direction, so I was forced to have all the GIFs constantly loaded and to just change the opacity of them. Not the ideal way forward, but an unfortunate necessity due to Storyline.
The same hitbox logic is also used for interactions. For example, when the player moves near the chest, a looting button appears, which then triggers an animation. The inventory system is built using Storyline variables, with each inventory slot having different object states. For the prototype, only the first slot is fully set up, and the inventory sits on its own Storyline layer.
One of the trickiest parts was figuring out how to make the world appear in the correct position when the player returned back down the stairs. To solve this, I created a tiny 1px by 1px invisible spawn marker where I wanted the player to appear. Returning from the upper floor sets a variable, and when the lower floor loads, the script checks that variable and moves the entire world based on the distance between the character and that spawn marker. To make this work smoothly in Storyline, I also had to delay the positioning slightly so the world had a few frames to finish loading before being moved.
Accessibility
This was very much a fun technical experiment rather than a production-ready learning experience. It is definitely not accessible in its current form, and I doubt this approach would be suitable for most real eLearning projects without a lot more thought around keyboard control, screen reader support, focus management, and alternative interactions.
Final thoughts
This was a really fun project and a great way to explore the limits of the Storyline API. There were definitely moments where standard JavaScript using event listeners would probably have worked more smoothly, but in Storyline’s defence, it was not exactly designed for building games like this.
I would have loved to add more features, such as a marker showing where the player is moving, an attack animation, breakable objects, or even an enemy to fight. he game also works really smoothly in Storyline’s preview, but it isn’t quite as smooth on the web. Sadly, the prototype had already consumed quite a bit of my free time so I had to stop in its current state, but it was a nostalgic experiment and a really fun reminder of the Flash games I used to make as a kid.