Show/Hide Mobile Menu

Aero Blocks (Unity version)

03.05.2022

This is a prototype of a mobile app for children that allows them to build stuff with virtual blocks in augmented reality. You tap on a detected horizontal or vertical plane to place a ground plane and on that you can place blocks. New blocks can be placed by tapping on the face of an existing block. You can select from 4 different block types and 5 different colours. Blocks can be rotated or deleted with swipe gestures. The whole model can be scaled, rotated or moved with two finger gestures. You can build models that are taller than yourself by moving the model below the ground plane.

Technologies Used
Unity, Maya

Placing Blocks

When you tap on a detected AR plane a ground plane mesh is created procedurally that is the extents of the AR plane. When you tap on this ground plane I work out which cell the raycast intersects and place a block. When you tap on a block I work out which face of the block the raycast intersects and use that to figure out where the new block should go. Blocks are assigned a material depending on what the current colour is.

Gestures

The app makes use of Unity's new input system but currently it doesn't support gesture recognition so I had to implement it myself. I detect swipe gestures in 4 directions and two finger gestures like pinch/stretch and rotate. I also detect two fingers moving together to complete the 3 transformations (scale, rotate, translate). For move I have to translate from screen space to world space by raycasting to an infinite plane that the ground plane is on.

User Interface

I wanted to take up as little screen real estate as possible for the user interface which means that the buttons need to be on the shorter side of the screen regardless of the orientation of the device. The default behaviour of Unity UI is the place the UI widgets in the same relative position. In landscape orientation the buttons by default would be on the longer side. So I wrote some code that re-lays out the UI widgets to the desired layout when the orientation changes.

Aero Blocks UI Layout

Undo System

Every time the user creates, deletes, rotates or changes the colour of a block I record a pair of operations and place them on the undo stack. The first operation is the undo operation and the second is the redo operation. When the user presses the undo button I carry out the undo operation at the top of the stack, remove it and place it on the redo stack. When they press the redo button I do the opposite. The redo stack is cleared when the user carries out a new action.