Animation, Game design

Type

Independent project

Team

Time

2020 Fall

An experimental puzzle game built by ThreeJS, aiming to explore the capability of WebXR API.

Block Puzzle Game

Z L T

Project Background

Designing a game which can be played online is the best way to practice interaction design skills—not only experience how to design the scenes in design software, but also learn how to transfer the art pieces to real functional parts. According to class purpose of learning Javascript, instead of building a classic HTML game like endless running, I choose to create a 3D game which can run in VR. Inspired by famous Teris, working on WebXR to make the shadow-matching placement block game in web and VR version is a challenge.

Challenge & Outcome

ThreeJS is totally a new framework to me, I have no background about 3D modeling, let along coding and rendering 3D elements. Meanwhile, ThreeJS only provides trigger and squeeze events. Other controllers events I have to refer to W3 XRInputSource. However, I almost figured out how the 3D Objects work here and understand how to get other input sources in the Oculus Quest test environment at the end.

Play the game

Sorry about the typo! I was too excited to check the language when I completed the game and directly recorded the video... 😅

Game Mechanism

Player needs to use the appropriate block to make shapes that can be matched to the given ones on the wall. There’s neither any punishments if you can’t make it till the end, nor any rewards if you complete levels. Only thing you need to do is to focus on the jobs at hand, trying to challenge your talents and aftertaste your childhood with endless imagnations. Once the game is completed, please enjoy the world you created.

For the first ideation, I created the sample scenes in Tiltbrush, which could fully express the design in VR.

Game Control

Mouse drag to change camera perspective angle.

thumbstick on the left controllers to move around in VR

Move

Mouse click to select blocks and place them on the floor

trigger in VR to select blocks and place them on the floor

Select + Place

Shift + click to delete the one you want to remove from the floor.

trigger + squeeze in VR to delete the one you want to remove from the floor *when there’s one block selected

Delete

Left and right arrow keys to rotate the selected block along its own given axis

thumbsticks on the right controller in VR to rotate the selected block along its own given axis

Rotate

Design Touchpoints

Space consideration

As a 3D webGL game, space is important. Players could have different and amazing experience when they are having fun in a real-like space. The effect on web should be familiar with the one in VR experience. So I choose Perspective Camera, giving the rights for players to explore around on the desktop.

In VR world, Teleport is a good choice to reduce dizziness, but it is not fit in block game. Because players needs to adjust their position they feel good to understand the puzzle. So I apply thumbstick to let them move in the new world (on the ground with some boundaries)

Control feedbacks

Physical feedback is the last thing we would give up in our real world. In the digital VR world, except audio feedback, visual effects are also an efficient way to make up physical feedbacks.

I provide several visual effect to let player they are on the right way.

Select blocks to place.
Wrong color to say it is not right
Flashing shadows to tell this is the new level.
Final animation to provide a sense of accomplishment.

VR-friendly UI

Reading instruction on web is easy for most of people, but in the VR world it is hard for designers and developers to set the right size. So I place the words on the left controller, players can read it as reading watch.

Development

Create blocks

Have an array in the loop to read the "1" can draw the block. Then re-center the position by its bounding box in order to have the right WorldPosition for later use.

Change shadows

I don’t let the computer read the centers of each cube every time, so I recreate shadow pieces which can be remove and add based on the rotation of block.

Check collision

Instead of using physical engine like ConnonJS, I choose a classical way to detect collision--using a method from bounding box to check whether box1interssetcs box2. Here, in order to avoid detecting touching cases, I set the scale to 0.9.

Refection

2020 is the year of VR again. As an UX designer, of course I don't want to lose the chance to have a try in this wild field. Previously, all my design work are done by Sketch. Without the introduction from WebXR Youtube channel, I can't switch my mind from 2D to 3D. So there are two main purposes of this project. One is practicing the most popular coding language to pick up the knowledge I learned in my undergrade, another one is learning the basic input methods for VR, and experiencing the pros and cons of the current design guidelines, as well as understanding the difficulty of making a workable VR design. My personal feeling about VR user experience is that simple controller inputs are limited the immersive experience. Different from the traditional video game experience, more freedom and feedbacks should be provided to support the immersive environment, because it is no longer a trip just facing to the screens.

Starting from this project, I will explore more human inputs in XR in the future.