Hello, I'm Harumasa Matsushita, an indie game developer. Recently, I released a new puzzle game "Legend of Occult Puzzle (LOOP)" that can be played instantly in a browser. This game is a fast-paced combo x occult battle puzzle where you flip tiles on the board to create chains. In this article, I'd like to share some technical insights on how I implemented the "visual impact" that is the core of this game.
- Creating an isometric space without "perspective" The charm of quarter view is that it can balance the alignment and visibility of a 2D puzzle while being 3D. To achieve this in Three.js, I used an OrthographicCamera (orthogonal projection camera) instead of the usual PerspectiveCamera.
Key points of implementation
By removing the perspective (perspective), the tiles in the front and back are drawn in the same size, creating an accurate sense of operation as a puzzle.
Intuitive "tile selection" with Raycaster
To manipulate objects in 3D space with a mouse or tap, we need to convert the 2D coordinates on the screen to 3D space coordinates. This is where THREE.Raycaster comes into play.Mathematical approach to realize "tatami flipping (flip)"
The biggest visual impact of this game is the "effect of tiles flipping in a lump". This is achieved by temporarily grouping multiple selected tiles into one group (THREE.Group).
Steps
- Extract the tiles within the swipe range.
- Calculate the central coordinates of the range.
- Place a new THREE.Group in the center and move the tiles to its child elements.
- Rotate the THREE.Group itself 180 degrees around the X or Z axis.