Possible ways to Jigsaw Puzzle effect on puzzle pieces

Anything about development not directly related to libgdx, e.g. OpenGL, Android APIs etc.

Possible ways to Jigsaw Puzzle effect on puzzle pieces

Postby arnzzz » Fri Dec 14, 2018 4:53 pm

Hey

Im messing around with a Jigsaw Puzzle generator, I have it working to a point where it takes an image, seperates all the individual puzzle pieces using pixmaps, and saves them to individual textures like the one below. Ignore the hard right angle joint edges, i will replace those soon with bezier curves to look like traditional puzzle joints.

Image

it works well, but ive reached a point where i want it to look good, because the puzzle pieces dont have that "Jigsaw Puzzle Piece" look. i.e. shading around the joints that give a pseudo 3d look.

Image

as things stand, the individual pieces i cut out and save are very "flat" for want of a better descriptor. when placed together they create a seemless image, which doesnt look very Jigsawy lol.

This HAS TO BE DONE in code, its a puzzle generator, so no premade puzzles/pieces.

Any ideas about how i could do this?

Im sure a talented shader programmer could do this, but me, im definatley not a shader programmer but im willing to try :)

I found this example on Shadertoy, maybe i could use some of the code...

https://www.shadertoy.com/view/XdGBDW
arnzzz
 
Posts: 99
Joined: Tue Aug 26, 2014 11:01 am

Re: Possible ways to Jigsaw Puzzle effect on puzzle pieces

Postby evilentity » Fri Dec 14, 2018 5:12 pm

I did something like this before. I think ive made 4 pieces in inkskape, each as a single path. Used the paths to make polygon definitions that could be used to draw the pieces with polygon batch. The edge was simple black border for the same path. Too slow to draw each frame, rendered to texture and used.

Image
Looking for a freelancer? PM me!
evilentity
 
Posts: 4618
Joined: Wed Aug 24, 2011 11:37 am

Re: Possible ways to Jigsaw Puzzle effect on puzzle pieces

Postby arnzzz » Fri Dec 14, 2018 6:33 pm

That would probably be something I could do as a last resort, it would still look a bit flat for my liking.

Real world puzzles are printed on cardboard then pressed onto a die under large amounts of pressure, this leaves a slight rolled edge on each puzzle piece, these rolled edges reflect light from certain angles and this is what id like to do, thats why i assume it would have to be a shader job.

I have the polygon paths thats are used to represent each shape of each piece already saved from the generation stage, Im wondering if i can use the individual line segments of the polygon, use the normal vector of those segments and somehow add shading to the pieces inside some shader code depending on those normal values.

thanks for the input, ill put your idea on the stack of options :)
arnzzz
 
Posts: 99
Joined: Tue Aug 26, 2014 11:01 am

Re: Possible ways to Jigsaw Puzzle effect on puzzle pieces

Postby arnzzz » Sat Dec 15, 2018 9:04 am

I found a nice Bevel script for Imagemagick that does a really nice job, now i just have to get Imagemagick integrated into my project using JMagick. The tiles below have been ran through the Bevel Script on command line outside of the project.

again, ignore the angled puzzle joint shapes, they are soon to be replaced with unique Bezier Curve joints.

Image

has anyone used JMagick with LibGDX before?
arnzzz
 
Posts: 99
Joined: Tue Aug 26, 2014 11:01 am

Re: Possible ways to Jigsaw Puzzle effect on puzzle pieces

Postby evilentity » Sat Dec 15, 2018 10:07 am

Now thats an overkill if ive seen one. Make a blank one, overlap image on top of it...
Looking for a freelancer? PM me!
evilentity
 
Posts: 4618
Joined: Wed Aug 24, 2011 11:37 am

Re: Possible ways to Jigsaw Puzzle effect on puzzle pieces

Postby arnzzz » Sat Dec 15, 2018 11:31 am

how would i do that when every puzzle piece will have unique joints in the final application. what you see here are just 4 place holder joints rotated randomly and mirrored on the edge they touch, that wont be the way it works in final app. (i just havent implemented the more elaborate joint algo)

I want every run, even over the same image to generate completely different puzzle pieces, so making generic overlays wont work in this instance.

Id ultimately like the puzzle joints to potentially be crazy shapes, so i would never be able to pre-make overlays for them.

I could make premade puzzles but the whole idea was for users to get a different experience each time they run the app, even over the same image.

my idea above, using imagemagick, doesnt seem as simple as i had hoped. It seems JMagick relies on users having ImageMagick installed, not sure if thats a workable idea either now lol.
arnzzz
 
Posts: 99
Joined: Tue Aug 26, 2014 11:01 am

Re: Possible ways to Jigsaw Puzzle effect on puzzle pieces

Postby Magnesus » Sat Dec 15, 2018 11:50 am

Shader is the way to go. But could be slow on mobile.

Or if you want to have it pre-rendered just add the shading while you cut the pieces. Some kind of convolution filter that uses alpha channel should do the job nicely.
Magnesus
 
Posts: 1654
Joined: Sun Sep 25, 2011 3:50 pm

Re: Possible ways to Jigsaw Puzzle effect on puzzle pieces

Postby arnzzz » Thu Dec 27, 2018 9:19 pm

Magnesus wrote:Shader is the way to go. But could be slow on mobile.

Or if you want to have it pre-rendered just add the shading while you cut the pieces. Some kind of convolution filter that uses alpha channel should do the job nicely.


This is a good idea, I was thinking through something like this but couldnt put a name to it to search for examples. Knowing its called a Convolution Filter will help a lot, thanks :)
arnzzz
 
Posts: 99
Joined: Tue Aug 26, 2014 11:01 am


Return to General Development

Who is online

Users browsing this forum: No registered users and 1 guest