How to develop a puzzle game similar as Tangram?

[QY]

Hi folks, 

I am planning to start a puzzle game apk similar as Tangram. the problem I had is that the shape of puzzle is not rectangle or square, but triangle etc, so is it possible to use canvas to implement similar thing?

I tried to use Canvas under drawing&animation, but cannot figure out how to do it. 

any idea or other suggestion?

what is Trangram:

A dissection puzzle consisting of seven flat shapes, called tans, which are put together to form shapes. The objective of the puzzle is to form a specific shape using all seven pieces, which may not overlap

thanks

QY

[SteveJG]

Here are the general instructions for using the Canvas  

• Chapter 17. Creating Animated Apps

in case you have not already found the advice.  

The Canvas cannot deal with other than rectangular or square shapes.  The solution  triangular shaped object placed in rectangular or square Sprite of triangles with a transparent background.

What can be done with a sprite is here  http://ai2.appinventor.mit.edu/reference/components/animation.html#ImageSprite    and what can be done on the Canvas is here http://ai2.appinventor.mit.edu/reference/components/animation.html#Canvas  

You can overcome the problem of incorrect shapes by layering the various triangle sprites perhaps using the Z property 

Z

How the sprite should be layered relative to other sprits, with higher-numbered layers in front of lower-numbered layers.

with higher-numbered layers in front of lower-numbered layers.

Attached is an example of a triangle png image with a transparent background .  You can create images with transparent backgrounds using an image manipulation tool like GIMP 2 (it is free).

This will allow you to move various triangles around the canvas but will not provide a method for them to snap or lock together if that is necessary.

Try some things using the sprite Z property and tell us how it works for you.

Regards,

Steve

[SteveJG]

A "Trangram" example using 4 pieces how you might begin your Tangram game.  This is 'starter' code.

When an ImageSprite is dragged, you start the drag at the top left of the image, not the center. This simple example does not correct.  Since the image triangle  is slightly lopsided 70 x 78 .. the sprites do not rotate perfectly. 

The parts necessary to build it are here:

The fifth sprite has no image.

Regards,

SteveJG   

[QY]

Hi Steve, 

Very very appreciate your quick and detailed response for this problem. I will try it tonight. I mark this question about completed for now. If I have question later, I will start new post. 

thanks again. 

QY