Week 4 – The Door to the World

This week marked a significant milestone as the team shifted from brainstorming and conceptualization to hands-on development. We set the goal and purpose for Prototype 1, which involved refining user flow, interaction mechanics, and art assets creation. With each team member contributing in their respective areas, we made progress in shaping the foundation of our project.

Prototype 1

As we move forward in development, Prototype 1 serves as a significant milestone in testing our storytelling tool. The goal is to create a sample story that demonstrates how users can build interactive narratives using our tool. This week, we structured our prototype to include two main modes for story builders: Playground Mode and Interaction Editor Mode.

Goal: Creating a Sample Story

To validate the effectiveness of our tool, we developed a sample interactive story. This story takes place in an enchanted forest, where players must navigate interactions and uncover hidden truths. The narrative unfolds through object interactions, such as touching a tree or picking up an apple, each leading to different consequences.

Playground Mode: A Hands-On Creative Space

In Playground Mode, story builders can experience programming in a more visual and exploratory way. Using a magic wand (the mouse), they can navigate the scene, interact with objects, and experiment with different commands. The workflow follows a sequential order:

  1. Initial Interaction – The builder identifies an object (e.g., a tree) in the scene.
  2. Hover Action – Moving the mouse over the object highlights it.
  3. Press Action – Pressing the mouse button selects the object.
  4. Speech Command – The builder speaks a command (e.g., “ShowDialog(‘Save the princess’)”).
  5. Release Action – Releasing the mouse completes the command input.
  6. Code Generation – The system generates a corresponding code block, temporarily saving it to the object.

Playground Mode serves as a sandbox environment where builders can freely test different interactions before finalizing them.

Interaction Editor Mode: Structuring the Story

Once interactions have been experimented with in Playground Mode, Interaction Editor Mode allows story builders to refine and finalize them. Here, they can access logic blocks to structure interactions effectively. For example:

  • {If click Tree, do []}
  • {If click Tree, do [ShowDialog(‘Save the princess’)]}

This structured approach ensures that interactions are integrated into the narrative. Interaction Editor Mode acts as the bridge between experimentation and practical implementation, allowing story builders to craft an immersive story.

Tech Interactions and Art Assets

The prototype includes fundamental tech interactions such as touch, dialog, and transition scenes to enhance the user experience.

Additionally, our artists have begun modeling key assets to support the story. The prototype features two distinct environments, from forest to castle. While the focus is on functionality rather than visual perfection at this stage, ensuring that the assets support storytelling also remains a key priority.


Production

Eva worked on the development of the first prototype, incorporating a paper prototype, an outline document, and a defined user flow. With the papaer prototype, the team are able to visualize what we think the tool should be. And it really worked! Additionally, research into UI design was conducted to ensure further design of user experience.

Paper Prototype

Programming

Yifan worked on the Interaction Editor, successfully loading and parsing JSON files into Lua scripts while implementing the frontend demo for the editor. Meanwhile, Jinyi focused on the Playground Editor, developing methods for handling all GameObjects and dialog interactions. Jinyi also contributed to the code block generation, ensuring structured construction and data storage for smooth execution.
Right now, the technical part of the tool seems to be working wonderfully!

Playground Mode with AI-generated code blocks.

Art & Design

Jia advanced the art design and asset modeling, creating an asset list to keep development organized for all the artists. Wendy contributed by modeling objects for Prototype 1, while Zhanqi drew the indoor and outdoor concept arts, starte the 3D modeling for tree branches, and painted textures for multiple models.

Key Takeaways & Next Steps

Week 4 represented a pivotal transition from ideation to execution. With Prototype 1 in place, our next steps involve refining interactions, integrating assets, and expanding the functionality of our editors. Moving forward, we aim to test and iterate based on user feedback, then expand interaction possibilities to allow more complex storytelling, and also optimize the interface to ensure a seamless and intuitive experience.

Prototype 1 lays the foundation for a tool that enables users to create, experiment, and bring their interactive narratives to life with programming. Stay tuned as we continue to refine and expand on this concept in the coming weeks!