Dev Report #2 Crumbling RuinsThe objective:
For an intro sequence of the game that foreshadows the theme, we want the player to encounter big, stone-built letters spelling out KINGDOM that crumble as the player passes, leaving only inrecognizable ruins. There are many options for realizing this, such as frame-by-frame animation or using the physics engine. These kinds of problems that ask for a hybrid of engine This post attempts to explain the problems and method that we ended up using, with many pictures of course!1) Proof of Concept
Before investing a lot of work into anything elaborate, we tried the most naive method to see if we're headed in the right direction. The movie below shows the letters animating independently, sliding out of view or toppling, covered up by simple particles.
This is obviously very crude, but it does show that even basic particles can cover up a cheap animation. Also, the letters themselves need a lot of work.2) The Dead End
The animation above is nice but we want the letters to actually crumble
. My first thought went to somehow slicing the letters dynamically, in real-time
. Subdividing the collider polygons would be doable, but I would have to somehow subdivide the sprites and map the texture correctly to the fragments. Unfortunately this is a bit of magic that is abstracted away under the SpriteRenderer. I would need the original texture coords (the pink polygon) to compute the sliced coords (the green line).
After some searching I found the Sprite Slicer
plugin. I also found the source code online somewhere, and had a look at the method that Sprite Slicer uses to create new objects that map to parts of a sprite. Through there I found that it is possible to get the mapping of a sprite in the atlas, but:
Sprite.textureRect: Get the rectangle this sprite uses on its texture. Raises an exception if this sprite is tightly packed in an atlas.
And we definitely do (and need to) pack our sprites tightly into the atlas! So it seems there is no way to recover the coordinates of the sprite on the atlas. Dead end.EDIT:
It seems I overlooked Sprite.triangles
. Was this property exposed before Unity 5? It's great though! That would allow dynamic slicing of packed sprites.3) Work is Unavoidable
Okay. If the dynamic code-driven route is unavailable, it's time to do some actual work: let's make each fragment a sprite of its own. Then we'll figure out how to animate them later. The first problem I encountered was this. Even if I can draw
the cracks, it still is a PITA to extract fragments into separate images or layers. And I would have to repeate that process every time I changed a single pixel.Cracks drawn in pink over the title
So! I dug up my old Python and Numpy and I wrote a script
that would split the sprite automatically based on Connected Components
. I like this because it still feels like I'm avoiding actual labor!
Each sprite is saved on a transparent background that is the size of the original sprite, this makes aligning them all inside of Unity easy!4) Physics
When simply dumping all the sprites into Unity and adding a PolygonCollider2D, Unity adds colliders that are roughly the shape of the sprite. However, this will not do at all since those colliders will overlap, causing the fragments to 'explode' as soon as physics simulation starts.
So I wrote a little script that draws Gizmo lines for all
colliders in a group even while editing
one of them, so that I can precisely align the polygons.
Finally, I don't want all the fragments to crumble simultaneously, so I added an Animation that controls the "isKinematic" property of each fragment. This was kind of a hassle to do right since it's not a real animation. The physics simulation has to run for the pieces to move, so it is impossible to preview in the editor and it is impossible to rewind. The Result
And there you go: crumbling letters. It took manual cutting and sequencing, but with a little help from the physics engine. It needs particles and more grime and vines and whatnot, but I'm very pleased with the results, we might use the same technique for other destroyed buildings too!