UGTK / Toolkit / Gameplay Systems / Tangram System Completed

Tangram System

Summary

The Tangram System is a drag-and-drop tangram puzzle: multi-cell pieces (Mn_TangramElement, made of Mn_TangramPart children) snap onto a grid of Mn_TangramTile. The grid validates tile combinations by identifier, locks correctly placed pieces, and fires an event when all required tiles are occupied.

Content

• Modules Dependencies
• Setup
• How To Use
• Testing Scene
• Technical Info

Modules Dependencies

• Utility Systems / Copy Paste System: Mn_TangramElement.identifier and S_TilesCombination.identifier use the [CopyPaste] attribute.

Carried inside the prefabs. These modules are not referenced by the assembly definition - the components are simply already attached to the prefabs this module ships. Remove one of them from the project and the prefab keeps its layout and loses that behaviour, with nothing in the console to say so.

Setup

1. Open TangramScene - note it sits at the root of the module, not under Debug/.
2. Place TangramGrid, which holds Mn_TangramGrid and defines the board the pieces snap to.
3. Add the pieces from Prefabs/TangramElements/: TangramElement_1x1, _2x1, _3x2 and _L. Each is a Mn_TangramElement built out of TangramPart cells.
4. TangramTile is a single cell of the board; S_TilesCombination describes which cells a piece occupies, which is what the grid compares against when deciding whether a drop is valid.
5. RotateOnClick gives a piece its rotation, and Mn_MoveToAveragePosition re-centres a piece on the cells it covers so it lands aligned rather than where the finger was.

The snap tolerance is the whole feel of the puzzle. Too tight and correct placements bounce off, which players read as the game being broken rather than themselves being imprecise; too loose and the figure solves itself. Set it with the inspector's TryToSnap() on a piece you positioned by hand, so the answer is a number rather than an impression.

How To Use

1. Build the board from the provided prefabs: TangramGrid (with Mn_TangramGrid) holding child TangramTiles, and the TangramElement_* piece prefabs (each an Mn_TangramElement with Mn_TangramPart children).
2. On the grid, fill tilesCombinations with S_TilesCombination entries: the list of Mn_TangramTiles that make up a solution plus the identifier of the piece that must occupy them.
3. Give each Mn_TangramElement a matching identifier; drag pieces so their parts collide with tiles (parts call AddTile / RemoveTile), then call TryToSnap() to snap onto free tiles and ReleaseTiles() to detach.
4. Every frame Mn_TangramGrid checks each combination; when all its tiles hold the same element with the matching identifier it locks them and invokes that element's onPositionedCorrectlyEvent.
5. Subscribe to onAllTilesOccupied on the grid to detect puzzle completion; per-piece feedback is available via onSnapEvent / onTakeEvent.

Testing Scene

Open TangramScene, which sits in the root of the module - this is the one system whose test scene is not under Debug/.

What to do, in order:

1. Drag a piece onto its slot and let it snap.
2. Release one just outside the tolerance.
3. Place a piece by hand in the Scene view, then press TryToSnap() from the inspector.
4. Complete the whole figure.

Step 3 answers precisely the question dragging only hints at: would it have snapped from here? A tolerance set slightly too tight makes the puzzle feel broken rather than difficult, and that is a judgement worth making with a number rather than a feeling.

The recording is step 1 three times over: pick a piece out of the tray on the right, drag it near its slot, let go, and it lands on the grid. The green block covers three columns by two rows, the red one a single row, and each keeps the shape it had in the tray - which is the point of the tolerance in step 2, since a piece that snaps from too far away places itself for the player.

Technical Info

• Mn_TangramGrid: collects tiles, tracks occupied tiles, validates S_TilesCombinations, locks solved pieces and raises onAllTilesOccupied.
• Mn_TangramElement: a draggable piece; manages the tiles it overlaps, performs TryToSnap / ReleaseTiles, brings itself to front and exposes snap/take/positioned events.
• Mn_TangramTile: a single grid cell (occupied / permanently locked state, assigned element).
• Mn_TangramPart: a single cell of a piece, reporting the tile it overlaps.
• Mn_MoveToAveragePosition: aligns a snapped piece onto its target tiles.
• S_TilesCombination: serializable solution (tile list + identifier).
• RotateOnClick / FrontUi: piece rotation input and bring-to-front UI helper.

• Back to the toolkit index

© 2026 Marcello De Bonis. All rights reserved

More in Gameplay Systems.

all 18 →

Platform 2D Framework

Ready-to-use 2D platformer framework: player with stats and events, moving platforms, coins, checkpoints, enemies with vision cones, and status power-ups.

Completed

Dynamic Track Audio System

Multi-track music system that blends and switches layers based on gameplay states.

Completed

QR Multiplayer System

Local multiplayer helper that generates and reads QR codes to connect player devices.

Completed

Achievement System

System for defining, tracking and rewarding player achievements and progression goals.

Completed