This tutorial is in response to this thread, I recorded a video but I stopped half-way the editing process because I had other priorities but I thought I could show some captures of my graph to help anybody wanting to have actors using sprites and different angles, just like in Doom or Duke Nukem 3D.
The end result is “something” like this:
And I say “something” because as I’ll show, I made some changes to what I had back when I recorded that to make all the angle calculations only on the XY plane ignoring the Z coordinates.
For this method I created a project using the First Person template and imported the Third Person template using the Add New button and Add Feature or Content Pack. I did this to use the mannequin to make some character sprites.
If you already have sprites you don’t need to do this, just use either the FP or TP template and use the existing character class.
I copied the character to a new folder and renamed it to BP_Character.
But before doing anything inside the character create 2 Enums, one is for the 8 Angles and the other one is for States, which will be very useful to have a pseudo Animation State Machine using Switch and Select Nodes.
Here is ECharacterState:
And this is EFlipbookAngle:
You also need to make Flipbooks out of the sprites.
Now it’s time to open BP_Character and do the thing.
Remove the Skeletal Mesh, add a Flipbook Component and insert the Flipbook for the Front Angle, like this:
Having that Flipbook helps a lot to correct the scale.
Now add 3 Variables, 2 Arrays of the Paper Flipbook type and 1 of the ECharacterState type:
If you want it all clean and tidy you could create a Struct and put everything inside, but being a short simple tutorial this is enough.
Put your Flipbooks in the Arrays, I followed an anticlockwise order like in Doom:
Let’s make the Character make use of all these resources and change to the proper Angle and Flipbook when needed.
Create a new function called CalculateFlipbookAngle, open it and add a Local Variable of the EFlipbookAngle type:
Now copy the Inputs and Output of the picture:
For the function I’ll show you all the nodes in different images, just copy it and I’ll explain how it works later:
Basically it’s vector math, you need 2 vectors, one is made from the location of the actor and where is looking forward and the second one is formed by the direction existing between this actor and the player.
When you calculate the arccosine of the dot product of the normalization of these vectors you’ll get an angle which will tell if the player is on the front or front-left, back, etc after being compared with different angles.
And once you know the angle, the function outputs it and in this case I set it to rotate the Flipbook Component to make it face the player. Depending on the design of your game you may not need this.
Let’s continue, create another function called GetAngleFlipbookFromArray and open it. This is pretty much self-explanatory, copy the image:
What it does is take a Flipbook from an Array Index depending on the angle and outputs it.
And now we can use these 2 functions on the Event Graph:
Every Tick it calculates where is the player, depending on the actual State it Selects the appropriate Flipbook Array and it sets the Flipbook Component with the necessary individual Flipbook.
And that’s it!
You can see that I made it change the state whenever I hit the character with my projectile. It’s a simple way to showcase how you can scale this up to a more complex Animation State Machine. Just add more states to the Enum, more Flipbooks and with this and intelligently putting SetCharacterState nodes it will just work.
I hope it was helpful, I’ll post an update when I finish the video I mentioned at the beginning.