2
\$\begingroup\$

Everyone knows Peggle. Here's a simple screenshot from one of their 'shapes':

enter image description here

On the first look, it looks so simple. It's a circle made of identical tiles:

enter image description here

It's easy to make a circle like this, even programatically.

But then I realised that I can't make bigger/smaller circles with this single tile. For instance, the shape above has 17 tiles. If I want to make a circle with 9 tiles, I need to make a tile more curved, so it can close the entire shape with 9 elements.

Here's a sample of a shape which cannot be constructed using the above tile:

enter image description here

As you can see, it's probably made dynamically. Each tile has different size and it's warped differently and I don't think so that they've used 30000 types of tiles with multiple angles. They did actually, in the first version of the game coded in Lua, but there were 3-5 types of tiles. In their latest game, they've created more exotic shapes, and that would be so inefficient, especially for mobiles.

Are there any algorithms for filling an oval or circle with irregular tiles like this?

I assume I'd need to split some meshes dynamically for that, or at least sprites.

I'll be thankful for pointing me a right direction!

\$\endgroup\$
  • \$\begingroup\$ This looks like it could be a good fit for the LineRenderer, if what you need are curved rows of tiles similar to this. \$\endgroup\$ – DMGregory Nov 13 '17 at 22:59
  • \$\begingroup\$ That's actually a great idea. But what about collisions there? As I made know LineRenderers, they probably can't be divided into pieces, so they won't take colliders. From my knowledge, the even the latest version of Peggle is made in Unity, so they figured it out somehow :> \$\endgroup\$ – Jacob Nov 13 '17 at 23:37
  • \$\begingroup\$ Hmmm... I made a goofy shader once that could colour individual segments in a curve through a numeric parameter interpreted as a bitmask.... that might be a bit goofy though. ;) \$\endgroup\$ – DMGregory Nov 13 '17 at 23:40
  • \$\begingroup\$ I think this is most likely two bezier curves with the points on the curves being the tiles themselves. \$\endgroup\$ – John Hamilton Nov 14 '17 at 5:47
3
\$\begingroup\$

This can be done in general using a shape where you can get the normals at any point. It's particularly easy if the shape is a circle or an ellipse, because we can just use the parametric equation for the ellipse to give the position and normal.

One of the problems now is that to cut up the curve into segments, you should know the arc-length of each segment. This can be a bit tricky when you are dividing the curve up in "parameter space" instead of "real space" you can see it in the picture in the question, where they are squished around where the curvature is higher. This will happen when you divide up into equal angle segments and you might need to adjust for that.

So let's say we have divided our curve into segments, equal or otherwise, then we can create custom geometry from the position and normal. Choose point a to be one point and b is the next point.

We build a custom geometry as a quad using the four points

a + a_normal

a - a_normal

b - b_normal

b + b_normal

This image is showing two adjacent points on the curve and their normals. Four more points are generated from them.

Interactive example. This was made in javascript but should translate into Unity.

\$\endgroup\$
  • 1
    \$\begingroup\$ And if we look at Peggle, we can see that the pieces themselves are curved, and probably done so with more than simply 4 points (i.e. each segment is actually made up of 2 or more of the generated segments). \$\endgroup\$ – Draco18s Nov 14 '17 at 5:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.