From Touch Events to a New Frame. ARTris — Part #3

This article is part #3 of a series of articles on ARTris. A multiplayer real-time 3D AR Tetris game built with ARKit, Node.js, and Firebase. If you’re new to this series, we recommend you begin with the introduction. Fork the iOS Client and the Game Engine repos to start experimenting.

Today we walk you through the steps that happen from a swipe-gesture to a new client state.

player making a swipe gesture

To support movement and rotation of the falling blocks, we split the screen into two views. The left view handles rotation, while the right view handles movement gestures — push, pull, left, right. These gestures are pushed to Firebase as a child of rotate or move under the player-id node.

the keys in square brackets are uniquely generated using Firebase iOS SDK

The game engine expects player actions to be with respect to the game-coordinate system. To ensure players can freely move around the Tetris grid, we should map player actions from their point-of-view coordinate system to the game’s coordinate system.

For example, if you move around the grid by 180 degrees and swipe right, the block should move to your current right. But we cannot push right to Firebase because right interpreted in the game coordinate system would move the block to your current left.

This is confusing, we feel you! It’s like putting on an earring while looking into a mirror.

To solve this problem, we use the player’s rotation around the y-axis (euler angle) since the beginning of the game to map actions from the point-of-view coordinates to the game coordinate system. In the case of our previous example, we interpret the right action to mean left.

finding player orientation using the euler angle

To make sure all the players see the same game state, we decided to keep the iOS client stateless and use Firebase as the only source of truth. The game engine does all the math. At every tick, it calculates the positions of the Tetris blocks and pushes the updated state to Firebase. The new state triggers a chain of observers to remove the old blocks and draw the new game state.

Next

Tomorrow we start talking about the backend and our game engine.
Refactoring the Game Engine