A commentary on the jumping animation in Giraffe and Annika

Updated overall motion of Annika
Until now, the jumping mechanism used an Animation BP of a 3rd-person template.
I referenced Rayman's animation to create Annika's. Which resulted in this...

It looks kind of stiff... Like she's doing the Hige dance...
I need to fix this!

Jumping motion production and implementation in Animation BP
First, I recreated the jump root motion with 3ds Max.
This new jump motion was first created by CG animator/DJ Anno!
We changed her pose so her right hand swings in front to create more movement.


This is the profile view. I made the animation sequence assuming she'd land on a horizontal plane in 32 frames.
However, in the following terrain, her movements will be insufficient if I incorporate it into the game as is.

After 32 frames, movement stops...

In the Animation BP's 3rd-person template, the jumping motion is implemented in three phases: right after the jump, during the jump, and landing the jump. The movements have a light and airy feel to it, but was the reason why the animation becomes stiff.

Extend it 5 times here

Therefore, I tried to increase the 27th frame 5 times within the 32 frames, extending the motion to 70 frames. It makes the movements a little slower in the second half, but it doesn't stop abruptly anymore.

In addition, I added a bouncing motion, bringing it to 150 frames in total.
Now, the animation sequence won't stop unless Annika falls from a very high place.

The Animation BP looks like this now, very simple!
The motion during jumping and landing are now divided into two parts.
We removed the latter 3 frames in the second half of the original jumping animation.

Replacing the jumping motion with a stepping motion

Also, I altered how her hands wave and feet move when she jumps.
We added two more animation sequences to the initial one.
The center sequence will occur when she jumps on the spot.

The L and R jumping motions determine which foot she jumps from.

After blending the motions together, they alternate depending on the foot that's used to jump with.
The center motion plays when movement speed is near a value of 0.

During consecutive jumps, the jumping motion alternates between left and right.
Strictly speaking, the foot position won't match, but comfort was the priority.
Also, after seeing it play out in game, I decided to increase the motion speed by 1.5 times as her movements were too slow.

Changing the voice and facial expression during big jumps
When a jump is performed with Dash, it's important to check the landing spot.
If there is nothing present, I decided to play a shouting voice clip to express the feeling of a big jump.

Trace down a line to check if there's gound surface below the landing spot

Because the facial expression can only be seen with a forward-facing camera, it isn't noticeable in game, but I'm still glad I implemented it.

Annika's movements have been completely updated! Even the way she walks looks more youthful and feminine!🐱 Reactions after she views objects have been added too. These animations were created by CG animator DJ Anno!😀　 #GiraffeandAnnika #screenshotsaturday #ue4

That's all for the jumping tricks in Giraffe and Annika! There's not much difficulty in the technical aspect of it, but making an Animation BP that breathes life into the game is fun!

1

SHIMO @nekomimizukin7 delivered the 3D model of a mysterious statue that appears in game! I've been working on implementing it since yesterday. It's one of the things that will help uncover the mystery surrounding the game. #GiraffeandAnnika

I used RealityCapture to download it. It's a subscription-based software, so it's a little expensive, but I think it's worth it because it produces good results. After installing the software, I polished it with ZBrush, remapped the UVs with 3ds Max, and added textures with BSP.

2

Let's resize textures to an aspect ratio of 4 pixels

I had to fix the comic scenes beacuse their textures were neither scaled to 4 pixels nor compressed. I wondered if UE4 would automatically make adjustments to enhance them even if they weren't set to a ratio of 4, but that wasn't that case 😅 Since there were so many, I created a batch-processing script that automatically resized them in Photoshop.

I'm in the middle of fixing the comic scenes' textures since they weren't scaled to 4 pixels or compressed...
I started to wonder if UE4 would automatically make adjustments to enhance them even if they weren't set to a ratio of 4, but that wasn't that case 😅 Since there are so many, I created a batch-processing script that automatically resized them in Photoshop.

A Photoshop script that resizes textures to a ratio of 4... I searched for one but couldn't find any, so I tried to write one myself. It seems like it's working fine... It was my first time writing one in Photoshop, and I think it can be automated in other ways if I can perfect it.

Here's the code...

preferences.rulerUnits = Units.PIXELS;
var doc = app.activeDocument;
doc.resizeCanvas(Math.ceil(doc.width/4) * 4, Math.ceil(doc.height/4) * 4,
AnchorPosition.MIDDLECENTER);

Copy the code above to Text Editor, make it a .jsx extension, and then you can use it in Photoshop. If you want to change the base point, rewrite MIDDLECENTER with the following.

TOPLEFT, TOPCENTER, TOPRIGHT, MIDDLELEFT, MIDDLECENTER, MIDDLERIGHT, BOTTOMLEFT, BOTTOMCENTER, BOTTOMRIGHT

3

I used Agisoft PhotoScan to process an image of the cat statue into 3D data for implementation. I tried it once last year, but it didn't go well, so I decided to give it another shot... The original image was created by @nekomimizukin7. #GiraffeandAnnika

4

We implemented a function that automatically forces lines in confined margins (i.e. word wrap) when using a typewriter-effect animation

It has been decided that Giraffe and Annika will be exhibited in UNTIES booth at PAXWEST, so a demo will be localized to showcase it. Originally, we expected the game would be localized, so implementation was already underway for the comic scenes, UI, and the rest. It went relatively smooth, but there was still one problem left.

When letters appeared at the right margin, we made line breaks by using a widget word wrap function.
The issue at the time was that the letter being wrapped would vanish for a split second, and make the typewriter animation look unnatural.

...I attached a video because it's difficult to convey it in words.

The 'n' in 'nap' on the first line disappears when the line is broken.
Actually, even in Japanese, this issue occured...
What bothers me more is how it reacts in English because multiple characters can vanish more frequently.
To work around it, I generated the text with automatic line breaks in advance before it shows up on screen.

Text implementation BP with automatic line breaks.

First, set an empty text box to its minimum width.

Then separate each word with a space and store it in the Parse Into Array node.

After that, gradually add letters in the text box, word by word.
Check the text box width to see if the number exceeds the limit...

Delete the word that overflows, insert a line break, and add that word to continue.
Perform these steps until completion to generate a string with line breaks.

Once the automatic line breaks are made, replay the typewriter animation.
The speed can be adjusted in English and Japanese.
This animation was created with respect to this blog by mk.

Here's the result...
Now it appears neatly!

If a language like Japanese is being used that lacks space-delimiter strings, line breaks will not be inserted, and so it overflows.
Like this...

In order to avoid this, store each character in the array. After reaching the protruding value, delete the character and start a new line.
Here is the completed BP.

The blue portion highlights the process for Japanese.
This did the trick!

I referenced Annin's blog and Twitter to utilize this method!
Whenever there are new posts related to UI-related implementation, I always check it out! Thank you for sharing!

5

I'm in the middle of making a relief in Substance Painter... It's very useful! Extremely useful! I was able to create the texture in no time! It's the best and most useful software that I've learned about recently! #GiraffeandAnnika

The design pattern was made in Photoshop. This one was drawn by SHIMO @nekomimizukin7! It's quite difficult drawing with Substance, so I decided to proceed by splitting up the work. The design has a simple shape, so all we have to do is some 3D modeling in SB that will take about 3 hours. Without SB, it might take an entire day.

Annika's materials were replaced using SB. We got all of them from Substance Source! All you need to do is subscribe. There are so many clothing materials that even browsing is fun! Substance Source is very helpful because it's hard to make such high quality materials on my own! #GiraffeandAnnika

6

I tried using the Ship Hull Paint Chipped material from Substance Source. The rust along the welded parts is very realistic! But it ended up crashing the software several times because its file size is so massive...😅 I can get most of the materials I want off Substance Source, so I've never made it from scratch on SD... Hopefully I can learn how...

7