Hi, last week i had a lot of troubles creating a 2D Character in 3D World, in style of Ragnarok Online or Boomer Shooter. So after everything working, I decided post here how I achieve this and show the results.
These 2 Gifs are the desired result, a character that changes sprites according to the direction he is facing and is also accompanied by the camera angle.
Tutorial:
-
Get your sprites, import them into Engine, edit the pivot and create the animations in Paper Flipbook.
-
Get and install the PaperZD plugin, it is a more specialized free tool for dealing with 2D sprites and creating their animations.
PaperZD in Code Plugins - UE Marketplace -
Create the material for your textures, this step is optional but was necessary in my project as I would like the character to always be “facing” the camera.
The part that doesn’t appear in the print is the same configuration of the default material for sprites that exists within the engine.
Within the files that I imported only have the sprites pointing to the left, I needed to reflect from left to right and I didn’t want to use any image editing software. So I created another identical material and changed the parameter to where the character is facing.
If you have any further questions about this step, here is the tutorial I used for this:
If you are going to use the material in this tutorial, you must add them to the “Paper Flipbook” individually (or using Property Matrix).
- Create your “PaperZDCharacter”, configure the animations and pivot of your sprites using “Flipbooks”.
Configure which Flipbooks will belong to each animation using “PaperZDAnimations”.
Finally you need to create the animation blueprint: “PaperZDAnimationsBP”.
Here is the tutorial I used to complete this step:
- Setting the parameters to create the Ragnarok Online/Boomer Shooter style:
Characters rotating according to the camera and position they are looking at.
This is the most important part of the tutorial and what motivated me to do it.
5.1 Inside “PaperZDCharacter” I created an arrow pointing forward and a square below the hitbox for testing purposes.
The SpringArm that contains the camera is rotated only on the Y axis. I also left “Use Pawn Control Rotation”, “Inherit Yaw” and “Orient Rotation to Movement” enabled.
Do not select any materials for the “Sprite” within this blueprint, or you will lose the materials you chose within the Flipbooks previously.
5.2 After configuring the multidirectional animation in “PaperZDAnimations”, it’s time to configure the blueprint in “PaperZDAnimationsBP”.
Within the animation blueprint it is necessary to define the direction of the sprite that will be presented.
I made a connection that leads to my character’s Blueprint and there it has the direction variable.
5.3 Now is the time to configure the direction that will have within the character. The formula is the subtraction of atan2 from the camera and the character’s hitbox. The value needed to feed the 2D variable is the sine and cosine of the subtraction.
I added a sum of 90 degrees to the capsule component’s atan2 result, which means where the character is pointed, to correct its final rotation.
FINAL RESULT:
Hope this helps.