TetrEscape

TetrEscape Website Play TetrEscape
Google Play Store Itch.io Chrome Web Store Twitter
Facebook Twitter Linktree

TetrEscape combines room escape, block-pushing puzzles, and Tetris to create a fun, casual puzzle game. Push tetrominos around and fill rows and columns to unblock a route to the exit.

I got the idea for TetrEscape in 2015 when another game dev I knew mentioned a lot of great games came out of people combining unrelated games or genres they enjoyed, and I had been playing a lot of Tetris and a lot of escape room games. I started building a basic prototype in Flash, and then made a full version in JavaScript. I built a custom menu system and themed it with MaterialZ for convenience; then I grabbed Material Design icons and tetromino colors to go with it and had my first full demo.

An early whiteboard sketch of what would become level Z-9. A player clears a column of blocks in this version's level 9. A player clears a column of blocks in this version's level 10. A player pushes a tetromino in this version's level 14. The level select screen shows the least number of moves each level was completed in, as well as an associated star ranking. The level select screen in landscape orientation scrolls horizontally instead of vertically.

The project sat on the shelf for a while with me only coming back with an occasional new level, library update, or bug fix. In 2019, I finally pulled it off the shelf as one of two possible projects to submit to an indie funding program the following spring, making a variety of changes, additions, and improvements, and showing it off for feedback at ROC Game Dev meet-ups. I ended up submitting Two Can Play At That Game instead, but then, of course, the pandemic derailed everything, and TetrEscape went back on the shelf.

The title screen has Material Design buttons for play, instructions, and about. The level select screen shows the number of moves and blocks cleared for each level, as well as star rankings for each. A player clears a column of blocks in this version's level 10. A player clears a column of blocks in this version's level 10. A player pushes a tetromino in this version's level 15.

I spent most of late 2020 and early 2021 prioritizing other projects, including Dr. Magnethands, PortalZ, and Workshop Scramble updates. Then, in late 2021, as it seemed as though in-person indie game events might be able to safely come back, I resumed work on TetrEscape.

On the gameplay side, aside from just creating or completing various additional level ideas, I focused on identifying and filling gaps in what the tutorial-type levels taught players, as well as ways in which the game's mechanics were underutilized, and of course previously missed ways certain levels could be cheated. Beyond that, I also decided on a comprehensive graphical redesign of the game. The idea had stuck in the back of my head for a while of having the player escape Tetris-themed dungeons or ruins, and I already had experience painting custom rock textures from working on Hack, Slash & Backstab, so I started creating new custom graphics for the game's various menus and in-game assets. I liked the theming of everything being square-based except for the circular player reaching a circular goal.

For the goal, I initially tried a spinning spiral staircase out, but it never looked quite right because it necessarily had to have stairs half the size of the player sprite. After a few attempts, I scrapped it in favor of a magical exit portal, and after some brainstorming, I landed on the final “rippling” design. The base idea of the player as a spherical robot was easy to come up with, though some ideas (such as having the spherical body roll when it moved or having the robots hands have fingers) got cut to save animation frames and time, or because they were too small to make out on the tiny body. Even so, I am happy with how xe looks in the game—especially xer eyes.

Removing the color from the title screen made it seem a bit too empty, so I decided to add some glowing purple fire to establish the sort of magical dungeon vibe from the start. I am also proud of the implementation—the purple glow itself is just a couple overlapping animated CSS shadows, and I caught small details like having the buttons that sit in the wall behind the embers move forward in front of them when focused.

Draft sketches of the player robot with notes about the spherical body, the big eyes indicating which direction xe is facing (and looking cute), whether the hands should be detailed or symmetrical, and more. Draft sketches of myriad possible goal designs. Sketches of multiple iterations of a level labeled, Harder block-pushing-block level.
The title screen has the robot in the glowing TetrEscape logo, stone buttons for Play, How To Play, Options, and Credits, and purple embers rising from the bottom. The level select screen shows cyan stone buttons for levels I-1, I-2, and I-3 embedded in tetrominos. The buttons show the number of moves and blocks cleared for each level, as well as star rankings for each. A player has partially cleared level I-6. A player clears a column of blocks in level O-6. A player has partially cleared level I-9.

I also polished up the UI hints for all the supported input methods. Button hints and even the How To Play screen update instantly when you interact by a different input method, and I wrote the system in a way that can easily be used in future projects.

On a touch device, the first level prompts the player to swipe up and has Material-inspired on-screen buttons to go back or reset. With keyboard input, the first level prompts the player to press the up arrow key and shows keyboard prompts to go back or reset. With a gamepad, the first level prompts the player to press d-pad up and shows generic gamepad button prompts to go back or reset. With an Xbox gamepad, the first level prompts the player to press d-pad up and shows Xbox button prompts to go back or reset.