Making-of: Puzzle game

[m1ga]

Idea

Starting a little side project: a puzzle game. Inspired by a normal game:

where you have a grid and black "fixed" blocks and multiple colored blocks you have to place all inside the game grid. The black blocks are placed at the beginning and you have to find a way to place all other elements inside the game grid.

Current status:

Started with the move/place logic, a basic field setup with empty and blocked fields and a one size game block:

simplescreenrecorder-2022-12-30_15.17.58.mp4

you can drag game objects and you will see a "shadow" border where the block will be placed when you let go of it. If you move over a black block it won't update the shadow (it will be the last valid position).

After releasing the touch it will update the game field (simple array with 0:empty, 1: fixed, 2: game block).

Next todos

Make variable game blocks (e.g. two by one) and adjust the placement logic.

Technical details

• Ti 12.1.0 (master branch, so I can test stuff with it already 😉 )
• Android first
• currently plain Ti but thinking of using ti.gl, ti.animation or so for some animations

Tutorials

Since it was requested on Twitter I'll write some tutorials about this project:
https://fromzerotoapp.com/mobile-puzzle-game-using-titanium-sdk/

[m1ga]

Multi height blocks:

simplescreenrecorder-2022-12-30_22.44.25.mp4

can create them with createBlock(1,2) and so on

and the shadow and check works already. That was one of the biggest part I wanted to have in...turned out to be not that difficult 😄

[m1ga]

Multi block movement:

simplescreenrecorder-2022-12-31_12.51.44.mp4

[m1ga]

Even more blocks and you can rotate the blocks now:

simplescreenrecorder-2023-01-01_20.28.01.mp4

[m1ga]

some UI updates and first full solve 😄

Unbenannt.mp4

no game states yet, so the app doesn't know that you are done

[m1ga]

Fixed some bugs, added a real "reset/start" and a simple game state:

Unbenannt.mp4

[m1ga]

Level selection

Levels are simple JSON files:

and some other colors

simplescreenrecorder-2023-01-02_16.49.47.mp4

[m1ga]

• internal optimizations:
  • using widgets for the blocks instead of inline classic code -> cleaner code
  • only check the fields if there was a grid movement - not for every pixel -> faster
• center field -> work with a grid offset to compensate it
• scale block a bit smaller when you touch/move it
• show active block color in the menu

simplescreenrecorder-2023-01-02_21.26.31.mp4

[m1ga]

• added basic start menu before the game screen
• changing how the field stores blocks
• basic resume function (no rotation yet)

simplescreenrecorder-2023-01-03_14.56.53.mp4

[m1ga]

• first iOS version
• fixed game states

ios.mov

[m1ga]

• dark mode
• new rotation mechanic: hover field at the bottom

simplescreenrecorder-2023-01-05_23.19.22.mp4