{"id":161,"date":"2025-02-07T20:48:28","date_gmt":"2025-02-07T20:48:28","guid":{"rendered":"https:\/\/projects.etc.cmu.edu\/hello-alice\/?p=161"},"modified":"2025-02-10T21:06:02","modified_gmt":"2025-02-10T21:06:02","slug":"week-4-the-door-to-the-world","status":"publish","type":"post","link":"https:\/\/projects.etc.cmu.edu\/hello-alice\/week-4-the-door-to-the-world\/","title":{"rendered":"Week 4 – The Door to the World"},"content":{"rendered":"\n

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<\/strong>, 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.<\/p>\n\n\n\n

Prototype 1<\/strong><\/h2>\n\n\n\n

As we move forward in development, Prototype 1<\/strong> 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<\/strong> and Interaction Editor Mode<\/strong>.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Goal: Creating a Sample Story<\/strong><\/h4>\n\n\n\n

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.<\/p>\n\n\n\n

Playground Mode: A Hands-On Creative Space<\/strong><\/h4>\n\n\n\n

In Playground Mode<\/strong>, 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:<\/p>\n\n\n\n

    \n
  1. Initial Interaction<\/strong> \u2013 The builder identifies an object (e.g., a tree) in the scene.<\/li>\n\n\n\n
  2. Hover Action<\/strong> \u2013 Moving the mouse over the object highlights it.<\/li>\n\n\n\n
  3. Press Action<\/strong> \u2013 Pressing the mouse button selects the object.<\/li>\n\n\n\n
  4. Speech Command<\/strong> \u2013 The builder speaks a command (e.g., \u201cShowDialog(\u2018Save the princess\u2019)\u201d).<\/li>\n\n\n\n
  5. Release Action<\/strong> \u2013 Releasing the mouse completes the command input.<\/li>\n\n\n\n
  6. Code Generation<\/strong> \u2013 The system generates a corresponding code block, temporarily saving it to the object.<\/li>\n<\/ol>\n\n\n\n

    Playground Mode serves as a sandbox environment<\/strong> where builders can freely test different interactions before finalizing them.<\/p>\n\n\n\n

    Interaction Editor Mode: Structuring the Story<\/strong><\/h4>\n\n\n\n

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

      \n
    • {If click Tree, do []}<\/li>\n\n\n\n
    • {If click Tree, do [ShowDialog(\u2018Save the princess\u2019)]}<\/li>\n<\/ul>\n\n\n\n

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

      Tech Interactions and Art Assets<\/strong><\/h4>\n\n\n\n

      The prototype includes fundamental tech interactions<\/strong> such as touch, dialog, and transition scenes<\/strong> to enhance the user experience.<\/p>\n\n\n\n

      Additionally, our artists have begun modeling key assets to support the story. The prototype features two distinct environments<\/strong>, 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.<\/p>\n\n\n\n

      \n\n\n\n

      Production<\/strong><\/h3>\n\n\n\n

      Eva worked on the development of the first prototype, incorporating a paper prototype, an outline document, and a defined user flow<\/strong>. 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.<\/p>\n\n\n\n

      \"\"
      Paper Prototype<\/figcaption><\/figure>\n\n\n\n

      Programming<\/strong><\/h3>\n\n\n\n

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