Roojack : How We Implement TUNIC Tilt Grass

Vincentius Madya
GrimPros
Published in
4 min readNov 24, 2017

TUNIC is one of the most anticipated Indie Games today (At least until we wrote this story). The game is about a tiny fox surrounded by 3D Isometric cute world. We saw TUNIC for the first time on 2016 or earlier (At that time, it was named Secret Legend). We were stunned by how Andrew Shouldice tilt the grass when the tiny fox walks around them.

Cutting grasses are not implemented

It was really cute, and we know we’re gonna implement it on Roojack. Of course we ask Andrew if we can implement it into our game, and he responded positively. It’s a green light from him, so yeah, this is how we did it;

Maple walking through grasses

We build this game called Roojack using Unity Engine. We want to build a game with a cute character in a cute world. So, we think that implementing tilt grass from TUNIC might be a great idea. But the implementation might be pain in the “grass” (At least for us).

Because we’re using Unity, the first step that we did was, find a way if Unity can handle that for us (Knowing that TUNIC was built in Unity as well). So, we started to experiment with Physics Joints from Unity. We tried two Spring Joints and this is what it looks like.

Too realistic and not what we’re expect

Yes, we know it’s not going to happen. So, we decided that we’re gonna write a script to do it by our self. How we did it? Math! Trigonometry (We know someday we’ll gonna use this thing). We’re not gonna focus on how the math is done on each step, but we’re gonna talk about the idea on how we do it instead.

So, what are we gonna need to make this happen? We only need positions for both our character and our grass.

Grass and Maple position from the top

From these two positions, we’ll tell the grass to do a rotation (Tilt), so it’ll rotate if we step on that grass.

At first, we’re gonna use grass local position to separate the ground into 4 quadrants where the grass itself will become the center.

Divide grass local transform into 4 quadrants

Then, we’ll use +X axis from the grass local transform to calculate an angle from our character to the grass into +X axis.

Calculate theta. We’ll use it to rotate our grass

After that, we can implement grass rotation for both X and Z axis based on the angle that we get from previous calculation.

Rotate grass on X and Z axis depend on theta.

We’re using 45 degree for base angle. That means, if the character is exactly at +Z axis, then we’ll rotate our grass 45 degree towards -Z axis, the same rule applied to X axis too.

Now, we have to handle each case based on where our character are located on the quadrant that we defined before. You can look on the picture below that grass will rotate on the opposite of the quadrant where our character is located.

Maple’s position will determine the rotation of the grass

We divided the area into 4 quadrants because, we want to maintain the angle between character and grass to at most 90 degree. For example, if we’re at quadrant number 2, the angle will be at least 90 degree. We can transform the angle by decreased it by 90 degree while maintaining that we’re at quadrant number 2. The same thing happened for 3rd and 4th quadrant.

Finally we get the grass rotate when we move towards it. But, it looks weird. No mater how far our character into the grass, it’ll rotate the grass by the same angle.

Now we have to gradually increase or decrease the angle that we applied to the grass, based on how close our character is to the grass. And don’t forget to handle if the character jump in the middle of the grasses 😉.

And that’s how we implement TUNIC tilt grass into Roojack.

Maple jumping in the middle of the grasses

Roojack will be released on Steam hopefully in early 2018

Wishlist us : http://store.steampowered.com/app/728720/Roojack/

Facebook : https://www.facebook.com/GrimPros/

Website : https://grimpros.com/

--

--

Vincentius Madya
GrimPros

2014 ACM ICPC World Finalist 🏅, Software Engineer @ Amazon 💻, Roojack Developer 🎮