Welcome to Planet XR, where you can transform everyday spaces into immersive, game-based experiences, exploring both real and virtual worlds. Students will first design their own fantasy worlds and characters, then bring them to life by translating them into 3D models, ready to be experienced in both AR ( and maybe VR) through CoSpaces. Students will learn illustration, storytelling, digital design, 3D modeling, and block coding, as well as explore the exciting possibilities of XR technologies. 

Focus Skills/Subjects/Technologies: 

Design
Storytelling
Game Design
Interactions Design
Coding

AR Software
VR Software

AR Worldcraft I 2 Full Weeks

Introduction to Studio

[~2 hrs]

Day1 Morning
  • Studio Prompt [0.5 h] 

  • Intro Activity: Gamified Wearables [1.5h] 

  • Platform: Document Intro Activity  [0.5h]

Technologies Testing

[~2h]

Day 1 Afternoon 
  • Quick testing of Cospaces & AR 
Context Investigation

[60 min]

Day 2 Morning
  • Game Precedent 

Brainstorming
[~3 hrs]
Day 2 Morning
  • Brainstorming [1.5h] game types, components, mechanics. 
  • developing games from differnet elements. frankensteining game together.  

Day 2 Afternoon

  • Concept Thesis [45min] - concept development through storyboarding ideas from the last activity 
Skill Lab
[~3 hrs]
Day 3 Morning
  • World Building [90min]
  • Character Design with Pixel Art [90min]
Skill Lab
[1h]
Day 3 Afternoon
  • Building Narratives 
Digital Prototyping
[1h]
Day 3 Afternoon
  • Cospaces Dive : Designing the environment
Digital Prototyping&
Skill Lab: Tinkercad & more
[3 h]

Day 4 Morning

  • Cospaces Dive : Designing the environment [1hr]
  • Modeling 3D Assets (Design one asset) [2hrs]
Feedback (Day 4 afternoon)

[2hrs ]

Day 4 Afternoon

  • Mid-review & Feedback Synthesis

Digital Prototyping

[3hrs ]

Day 5 Morning

  • CoSpace: Finalize Environment Design and Built [1hr]

  • Continued 3D Model Making [2hrs]

High-Fidelity Prototyping

 [~17hrs ]


Day 5 Afternoon until Day 7 Afternoon

  • CoSpace: Buidling & Coding your Game  [11hrs]
  • Sound Design  [2hrs]
  • Game Testing & Finalize [5hrs]
Final Presentation Prep

[~8hrs]

Day 8 Morning until Day 9 Afternoon

  • Demo Game+  Refinements 

  • Presentation Prep (Slides)  [3hrs]

Final Presentation

[2hrs]

Day 10
  • Presentation of slide deck and prototypes

Basketball angry birds hat

Benja Lee

Basketball angry birds hat

AR Worldcraft I 2 Full Weeks

Introduction to Studio

[~2 hrs]

Day1 Morning
  • Studio Prompt [0.5 h] 

  • Intro Activity: Gamified Wearables [1.5h] 

  • Platform: Document Intro Activity  [0.5h]

Technologies Testing

[~2h]

Day 1 Afternoon 
  • Quick testing of Cospaces & AR  [1h]
  • Start with Game Precedent Research
Context Investigation

[90 min]

Day 2 Morning
  • Continue Game Precedent 

Brainstorming
[~3 hrs]
Day 2 Morning
  • Brainstorming [90min]

Day 2 Afternoon

  • Concept Thesis [45min]
  • Documentation [45min]
Skill Lab
[~3 hrs]
Day 3 Morning
  • World Building [90min
  • Character Design with Pixel Art [90min]
Skill Lab
[1h]
Day 3 Afternoon
  • Building Narratives 
Digital Prototyping
[1h]
Day 3 Afternoon
  • Cospaces Dive : Designing the environment
Digital Prototyping&
Skill Lab: Tinkercad & more
[3 h]

Day 4 Morning

  • Cospaces Dive : Designing the environment [1hr]
  • Modeling 3D Assets (Design one asset) [2hrs]
Feedback (Day 4 afternoon)

[2hrs ]

Day 4 Afternoon

  • Mid-review & Feedback Synthesis

Digital Prototyping

[3hrs ]

Day 5 Morning

  • CoSpace: Finalize Environment Design and Built [1hr]

  • Continued 3D Model Making [2hrs]

High-Fidelity Prototyping

 [~17hrs ]


Day 5 Afternoon until Day 7 Afternoon

  • CoSpace: Buidling & Coding your Game  [11hrs]
  • Sound Design  [2hrs]
  • Game Testing & Finalize [5hrs]
Final Presentation Prep

[~8hrs]

Day 8 Morning until Day 9 Afternoon

  • Demo Game+  Refinements 

  • Presentation Prep (Slides)  [3hrs]

Final Presentation

[2hrs]

Day 10
  • Presentation of slide deck and prototypes

Minecraft 3D model Export

Mike Chaiban

Create 3D using Goxel

Dina Chehab

3D model

Using

Goxel

You'll use the magic of voxels to transform your sketches into 3D model using Goxel designs.

Download here: https://goxel.xyz/download/

Instructions:

  1.  

     Introduction to Goxel Basics

    • Download and Open Goxel: Download Goxel for your operating system and open it. You’ll see a blank canvas with a toolbar on the left and a color palette at the bottom.
    • Navigation:
      • Rotate Camera: Click and hold the right mouse button and move the mouse.
      • Zoom In/Out: Scroll the mouse wheel.
      • Pan: Click and hold the middle mouse button.
    • Tools Overview:
      • Brush Tool: Add voxels to your model.
      • Eraser Tool: Remove voxels.
      • Move Tool: Move selected voxels.
    • Try Out: Start by selecting a color from the palette and clicking on the canvas to place voxels.
    • 2. Building Simple 3D Models

    • Adding Shapes: With the Brush tool, click on the canvas to start creating a shape. Hold down Shift to quickly add multiple voxels in a line.
    • Basic Shapes: Experiment by creating simple forms like cubes or stacks. Adjust the brush size using the toolbar to place larger or smaller voxels.
    • Stacking: Layer voxel blocks to create 3D shapes. For instance, start with a base layer and build upward to make a pyramid or cube.
    • Undo: If you make a mistake, use Ctrl + Z to undo your last action.
    • 3. Using Layers in Goxel

    • Open Layers Panel: On the right, you’ll see a layer section. Click “+” to add a new layer.
    • Organize Your Model: For example, create one layer for the body and another for the head if designing a character.
    • Moving Between Layers: Click on the layers to switch between them. Each layer can be shown, hidden, or merged, which is useful for organizing complex models.
    • Editing Layers: Select a layer and use the tools as usual. Only the selected layer will be affected.
    • 4. Advanced Shading and Lighting

    • Color Selection: Select subtle variations of your main color for shading. For example, if your model is blue, pick slightly lighter and darker shades of blue.
    • Manual Shading: Apply these colors to areas that would naturally be in shadow or light, such as darker colors on the underside and lighter ones on the top.
    • Lighting: In Goxel’s settings (gear icon), adjust lighting settings to see how different angles affect shadows on your model.
    • 5. Exporting Models for Game Engines

    • Export Options: Go to File > Export. Choose a format depending on your needs:
      • .OBJ: Common format for most 3D applications.
      • .VOX: For voxel-based engines.
      • .PNG: For simple 2D images of your model.
    • Adjust Scaling: Game engines like Unity may require scaling adjustments. You may want to test different scale settings when importing.
    • Check for Issues: Ensure your model has no floating or unconnected voxels.
    • 6. Designing Characters with Goxel

    • Plan the Character: Begin with a sketch or rough mental image of your character.
    • Build Body Parts on Separate Layers: Use layers for different parts (head, body, arms) so you can easily modify each.
    • Details: Use the smallest brush setting for finer details like eyes, mouths, or accessories.
    • Symmetry Mode: In the toolbar, toggle the symmetry option if your character is symmetrical, which will mirror changes on the other side automatically.
    • 7. Tips and Tricks for Optimizing Voxel Art

    • Keep Voxel Count Low: Too many voxels can slow down your model. Simplify shapes where possible.
    • Avoid Overlapping Layers: Place parts close but avoid overlap unless necessary for structure.
    • Optimize Colors: Use a limited palette to create a cohesive look and to make your model easier to render.

CoSpace: Build Your World

Dina Chehab

CoSpaces

Prompt

It's time to design our games using CoSpaces! 

Instructions 

  1. Open CoSpaces and enter to the project created by your teacher
  2. Explore CoSpaces' features—you can create multiple scenes, environments, and mechanisms.
  3. Start building your game world in CoSpaces.
      • Start by looking over your storyboard and game plot & Identify the key scenes or environments that are central to your game.
      • Prioritize the most important scene or location to begin building. For example, where does the player start? What should they experience first?
      • Build one scene or environment at a time to keep things organized.
      • First: Focus on the layout and environment (e.g., terrain, buildings, obstacles).
      • Position and scale any static 3D models in the scene. Remember, these models won’t move but can be essential elements like buildings, trees, or decorative objects (you will build these yourself in 3d using another software later on!).
      • Position your characters in the world. Think about where the player will encounter them and how they fit into the environment.
  4. Play through the scene to ensure that everything is working as intended (Make sure models are properly placed and scaled, and interactions are functioning smoothly).

Deliverables

  • Filled assets list
  • A first draft of your game in CoSpaces. You can view it in AR/VR through the CoSpaces mobile app. Simply sign in to access your game!

Materials:

  • CoSpaces account ( your teacher will support you)
  • Laptops
  • All your previous sketches 
  • Tutorials (available in the tutorial tab within the folder)

Cardboard 101: Cutting, Shaping, and Joining

Kate James

PROTYPING

Cardboard 101

Final Presentation

Joselyn McDonald

Final Presentations

Prompt

End of Studio Presentations celebrate our successes as designers! These presentations are the story of our project - from early sketches and inspiration, through prototypes and more developed ideas, presentations highlight the pieces of the process that led each of us to our latest design.

Instructions

In this assignment, you will compile all your work to present to your class. Presentations should take 5 minutes or less in order to make sure everyone has a chance to present. Typically, you will receive 2 minutes of feedback following your presentation.

Your presentation should be created in a slideshow format and include the following:

Slide 1: Title

  • Project Title
  • Team Members’ Names
  • Evocative Image that highlights the kind of experience you want your game to provide (this can set the tone for your presentation).

Slide 2: Game Type / Theme / Concept

  • Game Type (e.g., adventure, puzzle, RPG, etc.).
  • Theme (e.g., mystery, sci-fi, fantasy).
  • Thesis Statement: A 1-2 sentence statement summarizing the core idea or purpose or story of your game.

Slide 3: World Sketch + Moodboard

  • World Sketch: Show an early sketch of your game's world and environment.
  • Moodboard: Present images, color palettes, textures, and inspirations that influenced the look and feel of your game world.

Slide 4: Character Design

  • Character Sketches: Show  your character design + 3D model screenshots
  • Character Role: Explain each character's role within the game and how they interact with the world.

Slide 5: Narrative + Storyboard

  • Narrative Summary: Provide a brief overview of your game's story.
  • Storyboard: Share a few storyboard frames that outline key moments or cutscenes in the game.

Slide 6: Game Mechanics

  • Core Mechanics: Explain the main gameplay mechanics (e.g., how players interact with the game, character movement, object interaction, etc.).
  • Interactive Features: Describe any unique features you've implemented, such as interactive objects, character dialogues, or puzzles.
  • Block-Based Coding: Provide a snapshot of key coding sequences or mechanics you programmed.

Slide 7: Final Design

  • Gameplay Screenshots or Demo Video: Show key moments from your game.

Slide 8: Thank You

  • End the presentation with a thank you slide, acknowledging your team, teacher, and any collaborators.

Deliverables

In the 'Responses' tab, Create your presentation in the Nufolio slide editor. Alternatively, you can use Google Slides, and then post the Sharable Link in a post; however, you must set your share settings to "Anyone with the Link" can "View" (see image below)