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.
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.
