Game Designer
20.png

27

 
 

XXVII

XXVII (27) is a single-player, isometric, puzzle adventure prototype with modern 2.5d pixel art graphics. Players must solve environmental puzzles by teleporting between world layers. Each world layer is located on a separate vertical plane creating an additional depth in the classic isometric 2D game format.

Independently designed and developed a 2D pixel art puzzler that challenges conventions for making 2d art by incorporating a 3rd dimension.

  • Engine: Unity

  • Team/Role: Made independently

  • Duration: 2 months

  • Released: itch.io

 

Highlights

For a broader context and expanded list of my contributions to the project, refer to the Development Notes section at the bottom, presented in a blog-like format.

 

Objective

Creating a 2D puzzle game where players have fun exploring perceivably huge spaces.

Challenges

  1. Creating a sense of depth and scale in a 2D game.

  2. Creating puzzles that are difficult enough to provide a challenge but not detract from exploration.

  3. Guiding players through large open non-linear spaces while encouraging them to solve increasingly challenging puzzles.

 

Problem 1

How to create a 2D-looking game with pixel-perfect visuals, 3D shadows from objects, and normal map shadows on the pixel art as a solo non-technical artist.

Solution

Instead of worrying about fancy shaders, I just placed 3D objects and made them invisible shadow casters. Then I placed planes with pixel art on surfaces facing the camera and stretched the world to make the art pixel-perfect when viewed from a 60-degree angle with an orthographic camera. Finally, instead of sprites, I used PBR materials and made hand-painted Normal maps for pixel art to make it have “regular “ shadows.

 

Orthographic 3D

Based on this excellent talk, the camera solution was reverse-engineered from the tech developed by Amplitude for Dungeon Of The Endless. This solution involves scaling the entire world by x2 on Y-axis and x1.154701 on the Z-axis for a 60-degree camera to make each pixel of the pixel art occupy exactly 1 pixel on the screen when placed on horizontal and vertical surfaces. I have an experiment on this page where the camera can rotate around a pixel-perfect, fully 3D world to preserve the pixel-perfect visuals.

 

3D textures

The 3d texturing techniques and shading were reverse-engineered from solutions developed by Anton Kudin on Megasphere for normal mapped pixel art and Developers of Enter the Gungeon and Dungeon Of The Endless for mapping pixel art in 3d space to get realistic shadows.

Example of the shadow casters

Overexaggerated example of pixel art without shadows or normal maps.

Overexaggerated example of pixel art with shadows or normal maps.

 

Problem 2

How to make puzzle mechanics make players feel small in a 2d world.

Solutions

Allow players to move up and down 2D layers as if they are exploring each slice of a 3D world while making them see the layers below and realize that the flat world they know has more to offer.

At first, pads allowed players to move up and down, but that made navigation too confusing, so a rule was introduced that each pad only moves a player up or down one layer. This also allowed us to keep interactions with pads to a single key, making the inputs more elegant.

Players struggled with navigation speed in a bigger world, so the teleportation pad system was reused for horizontal navigation.

Later an additional piece of contextual hud was added that shows all the layers and indicates which layer the players are on, as during some of the playtests when there were more than 4 layers, players forgot where they were after a while.

Problem 3

How to guide players linearly through a set of non-linear puzzles to a common objective in a subconscious way.

Solution

Using breadcrumbs that lead the player’s eye to the start and end of each puzzle while all of them congregate at the final exit that trails back to the start/end of each puzzle that is required for an entrance to open using shared color and shape language

Note the game can still be improved by changing the positive color for confirming a solved puzzle from green to blue for better accessibility.

 
 

Additional Notes

 

Overview

The motivation behind XXVII was to create a unique game that combined 2D pixel art with a 3rd dimension. It was the first project I worked on independently, which required me to learn to code and develop a 3D game using lighting and visual effects while maintaining the 2D pixel art style.

The goal was also to expand knowledge of Unity and make the game as efficient and polished as possible. This involved extensive research, trial and error, and problem-solving, resulting in valuable skills that continue to be used daily.

The ability to overcome challenges was instrumental in subsequent projects after the release of XXVII.

INSPIRATIONS AND REFERENCES

  • The Witness inspired the puzzle design and the world structure of XXVII. It was done expressly by having diverse, engaging, and challenging environmental puzzles, dynamic environmental storytelling, a simple story told secondary to the gameplay, and a condensed open world with no explicit navigational aid.

  • Dwarf Fortress inspired the layered nature of the world in XXVII by having z - layers that are visible if not blocked from the line of sight. Additionally, Enter the Gungeon and Dungeon of The Endless inspired the use of 3D geometry with pixel art mapped onto it to make the most of Unity's 3D Features.

  • Flamberge, Below, Jotun, Hyperlight Drifter, and Titan Souls inspired the modern pixel art style of the game and the open, exploration-focused gameplay. These games use vivid colors and gradients to emulate detail and depth and to reduce noise. Additionally, they foreshadow future levels through beautiful vistas.

 
 

DEVELOPMENT PROCESS

The project started as an interactive visual novel and was remade into a puzzle adventure game using Unity.

 

DESIGN NOTES

When sketching, different lines indicated routes for all layers below and above the ground layer. This allowed iterating the entire puzzle at once. Conversely, using transparent paper or Photoshop layers only slowed the design process and made it difficult to manage. The user stories were made to simulate the player’s thinking process and ideal case scenarios. Large portions of the level were blocked out in Photoshop using tile sheets before importing them into the engine. This allowed me to bugfix the tilesets before going through the process of importing and cutting them up in Unity.