The classic Tangrams puzzle game using stained glass tans.

Backdrops are historic Chinese art from as far back as the 17th century. I was inspired to use them because Tangrams originate in China. However, most of the artwork actually predates Tangrams puzzles, which didn't appear until the early 19th century.

Complete source code for this game is available on Github. Feel free to fork and contribute, or even make your own version of the game!


This game is an early pre-release. Feedback is welcome! Let me know what you think in the comments below.

Download

Download NowName your own price

Click download now to get access to the following files:

StainedGlassTangrams.app.zip 48 MB
StainedGlassTangrams-linux.zip 38 MB
StainedGlassTangrams-win32.zip 34 MB
StainedGlassTangrams-win64.zip 27 MB

Comments

Log in with itch.io to leave a comment.

Hi Chris, I am trying to recreate this game, but whenever I hit play, the pieces immediately fall in the -y direction out of view of the camera. How did you prevent this?

Unity's 2D physics engine has a gravity setting. The default value is set to `(0, -9.8)`. You'll want to change it to `(0,0)`.

More about that here: https://docs.unity3d.com/ScriptReference/Physics2D-gravity.html

I'm not sure if this is _exactly_ right, but you can  probably put something like this in one of your `start` functions :

```
Physics2D.gravity = Vector2.zero;
```

Thank you! Also how do would I adjust the sensitivity of the overlap detection between the pieces? When I opened the game in Unity and played, the pieces would collide and push each other when they were barely overlapping.

I'm not sure whether you can tell the physics engine to allow "overlaps". Your best bet might be to make your colliders just a little bit smaller than your sprites?

(1 edit)

Hi Chris, So I downloaded your tangram project and i love it, and i want to learn how to create games especially tangrams, however my issue is that there is no such tutorials online.
My other issue is that i have looked into the project but i dont really understand where the levels are being loaded. Is there a video that you posted that I can check out on the process?

I greatly appreciate your help

What i dont understand is how are the shapes place and how is the outline placed as well ?

The shapes are gameObjects with physics bodies and colliders attached to them. I'm using the built-in 2D physics engine in Unity. The physics components are attached to the GameObjects in the Unity GUI, and then controlled by the Piece and PieceSet behaviors.

> Is there a video that you posted that I can check out on the process?

There are lots of pretty good tutorials available directly from Unity. I'd start with videos from their 2D Game Creation series.

> My other issue is that i have looked into the project but i dont really understand where the levels are being loaded.

The levels are saved as Unity "prefabs", in the Puzzles folder. The puzzles are all referenced by the TangramsSupervisor, and then added and removed from the game scene based on user actions.

(1 edit)

Hi Chris, thank you for your help,
One question, hopefully the last, how does unity recognize that this is the right shape ? and how can i make it less sensitive to the probability that its the right one.
because right now i have to move it by the mil to get the star fade
Also how do i create a line renderers for different polygon colliders (tangrams) I see the prefab positioning but I dont know how to create a custom one.

I used Unity's physics engine for collision detection. Each of the tans/pieces has a polygon collider attached to it. When all of the vertices for the colliders of the pieces are inside the collider for the puzzle, I know that the pieces are all inside the puzzle, and the puzzle has been solved.

The pieces were drawn in a program for MacOS called AffinityDesigner. I use it to make vector graphics for most of my games.

The puzzle is drawn by the PolygonRenderer class. If you attach a PolygonRenderer to a gameobject that also has a PolygonCollider, the renderer will find the collider, and loop through the vertices on the collider to draw the shape. It uses the scripting interface for the Unity LineRenderer component to create the lines.

Amazing artwork! Love the game and thanks a ton for the source code! You just made my day! :D