Click Adventure Toolkit for Blender (Alpha)

Click Adventure Toolkit is a Blender add-on that lets you easily create pre-rendered first-person puzzle adventure games and export them to HTML/JavaScript, ready to play in your browser or upload to a web game site like itch.io, all while staying within Blender. Set up cameras in your scene for screen locations, and use the add-on to set up clickable hotspots to move between them, or to add interactivity to the game world.

Check out a demo here (uses "Architectural Visualization" by Marek Moravec, which can be downloaded here). "Rumble Hall" in screenshot by @curiousquail.

Getting started

1. Download and install Blender
2. Download, install, and enable the add-on
   1. The add-on uses the existing render settings. Make sure your output format is compatible with browsers, like JPEG or PNG, and your resolution is set to something comfortable for a browser window (for example, 1920×1080 would only work when full-screen or zoomed out).
3. In the "Object Properties" of a camera object, use the "Hotspots" section to add clickable areas to the camera view
   1. Select other scene objects to automatically set the hotspot bounds.
4. Use the "go to" hotspot action to move to other cameras within the scene
5. Use the "change state" hotspot action to change aspects of the game world
6. Set conditions on a hotspot to determine when the hotspot should be active, depending on the state of the game world
7. Export to web with File → Export Adventure
   1. Select an empty directory. The add-on will automatically create an index.html and a folder with renders for all cameras in the scene.

Limitations and known issues in the Alpha/Tool Jam version

• The "animation" hotspot action is unimplemented.
• State changes are only visible from the camera(s) where they are changed.
• Only objects can have state changes/conditions, not arbitrary data blocks. That means only things like location/rotation/scale, and visibility.

Extra tips

• For a "retro" image style, export as PNG, then use an external program to reduce the color depth. For example, with Actions in Photoshop, or mogrify -dither FloydSteinberg -colors 64 *.png with ImageMagick.
• Blender supports more than the two included renderers. For example, if you want to use a real '90s raytracer, install POV-Ray and enable it in add-ons.
• To publish to itch.io, create a zip containing everything in your export folder, then create a project on itch.io with "Kind of project" set to "HTML."

"Blender" is a registered trademark of the Blender Foundation. This project is not associated with nor endorsed by the Blender Foundation.