In my work as an e-learning developer, I’ve always tried to go beyond quiz-style gamification. Working on high-quality serious games has shown me that, with Articulate Storyline, you can build real video games. With Grim Depths, I set out to bring the soul of Japanese-style Role Play Games (JRPGs) into learning—turn-based choices, strategy, storytelling, and fantasy atmosphere.
To share the process, I’ve broken the build into three chapters. Each section gives you a quick overview, along with a short video where I go deeper into the details, showing how the mechanics, design, and visuals all come together in Storyline 360.
Gameplay & Mechanics
This chapter starts with the basics. I walk through the vintage roots of Grim Depths and explore how that spirit aligns with a modern learning goal. Then I explain the turn-based core loop, the small dice roll that adds controlled variety, the visual direction, and my key inspirations, the interface choices, and the simple tactical idea that drives every decision.
Key Takeaways:
- Connect vintage JRPG design DNA to modern learning goals and visual style.
- See how turn order, party vs. boss stats, and a small dice roll create controlled variety.
- Learn how interface and feedback design make Health Points (HP), Magic Points (MP), and damage quickly readable.
- Explore decision-making design: when to attack, guard, or use items based on feedback cues.
Build & Logic
This chapter looks under the hood. I walk through how cue points and variables drive each action and how the game turns calculations into clear on-screen results.
Key Takeaways:
- Follow the trigger sequence that calculates attacks and HP updates.
- Learn how guard and boss attacks are resolved with clear, readable outcomes.
- See how items recharge HP and MP through cue points and variables.
- Explore how JavaScript adds polish (custom cursor, audio fades, character pop-ups).
Visuals & Animation
This chapter focuses on visuals and motion. I demonstrate how my illustrations are transformed into in-game assets, how I clean and prepare sprites in Photoshop, and how I create the idle loop and impactful attacks, including area attacks, with readable camera movements and sound effects.
Key Takeaways:
- Refine original illustrations with AI-assisted tools to keep the art style consistent across all assets, without needing third-party images.
- Apply Photoshop cleanup for precise cutouts, transparent backgrounds, and unified contrast and texture, then export ready-to-use PNGs
- Assemble sprites into idle loops and custom attack animations using layer-based techniques
- Stage area attacks with readable camera moves, impactful interpolations, and layered sound effects for extra punch
Try It Out
- To play Grim Depths on a desktop PC (recommended), download the zip file
- Download the file and extract it to an empty folder. Double-click Grim Depths.bat to launch. If your firewall prompts you, allow Mongoose to start—it’s a local web server that serves the game at http://localhost.
- Download the file and extract it to an empty folder. Double-click Grim Depths.bat to launch. If your firewall prompts you, allow Mongoose to start—it’s a local web server that serves the game at http://localhost.
- If you prefer the Review version (load times are long), use this link.
💬 Ask Me Anything!
I’d love to hear your feedback and answer any questions about the build. Drop your thoughts in the comments below—I’ll be checking in and responding!
Want to Share Your Build?
Do you have a project you’d love to share with the community? We’re always looking for more “How I Built This” stories. Whether it’s a game, interaction, or unique design, we’d love to feature your process. Drop a note in the comments or reach out to the community team if you’re interested!
