How to achieve this sprite/mesh tile splitting like in Peggle?

Question

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

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

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:

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!

Answer 1

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.