Combine 2D characters with 3D environments to create a 2.5D visual style.

2.5D has become a popular visual style in the last years – games like Octopath Traveler, Triangle Strategy or Live A Live are examples for this visual style. In short, your player/group, enemies or NPCs are 2D sprites in a 3D world.

In this tutorial, we’ll use the assets from the 2D RPG Quickstart tutorials in the 3D RPG Quickstart project to replace a 3D combatant with a 2D combatant. We’ll only cover the setup to keep the movement and rotation correctly facing the camera – the remaining setup (attack animations, etc.) is the same as in the 2D RPG Quickstart tutorials.

Download and Import 2D Tutorial Assets #

You can download the assets from the 2D RPG Quickstart tutorials here:

Download 2D Tutorial Assets Pack

Import the asset pack into your existing 3D RPG Quickstart (or any other 3D project you want to use), but only import the Tutorial Assets folder and it’s content, not the Scenes folder (we don’t need the 2D scenes).

Click in Import – this will take a bit to complete the import for all assets.

2D Prefab Adjustments #

We’ll start our setup with changing the prefab used by our 2D combatants. The 2D RPG Quickstart setup uses a base prefab that handles the setup, with different variants for the combatants (using sprite/animation setup for the combatants).

All we need to do is change this base prefab, CombatantBase, which you can find in Assets/Tutorial Assets/Prefabs/Combatants/. Open the CombatantBase prefab for editing (e.g. via double-click on it).

Currenlty, it looks like this:

It uses 2D collider and rigidbody components – we need to change that and also use a component to keep the sprite facing the camera.

Change to 3D Physics #

With the root CombatantBase game object selected, remove the Box Collider 2D and Rigidbody 2D components in the inspector. You can do this by right/context-click on the component and selecting Remove Component in the context menu.

Add Character Controller #

Add a Character Controller component using the component menu and change the following settings.

Adjusting Child Objects #

The collider (from the character controller) looks off right now – because we also need to adjust the position of the child objects.

We use this setup to prevent the combatant from spawning halfway in the ground. The root position (local X=0, Y=0, Z=0) should be at the feet of the combatant, as this is the part that’ll be placed at spawn points or battle spots.

Select the CombatantBase > Mount child object and change the Transform component’s position.

Select the CombatantBase > Sprite child object and change the Transform component’s position.

Facing Camera #

With the CombatantBase > Sprite child object selected, we only need to add a Face Camera (2D, UI) component to it. This component makes sure the game object will keep facing the camera, so our sprite will remain visible.

Use the component menu to add the Face Camera component to the Sprite child object.

And we’re done with adjusting the prefab – the completed prefab now looks like this (when having the root CombatantBase game object selected).

Save the changes and exit editing the prefab.

2D Animation Setup #

Now, it’s time to set up the animations for the 2D combatants. The setup is the same as in the 2D RPG Quickstart tutorials, but with small adjustments to compensate for the 3D rotations.

Open the Makinom editor and navigate to Base/Control > Animations and add a new animation setup.

The 2D combatant prefabs use Mecanim for their animations, so we need to set up Mecanim animations (instead of the legacy animation system used by the 3D RPG Quickstart combatants).

Mecanim Settings #

We’ll forward the horizontal speed and the rotation (i.e. the direction) to the animator controller. Since we’re in a 3D environment, we need to use the Y-axis rotation instead. We also need some further adjustments to match the 2D directions of the Mecanim animator controller.

The Rotation Offset and Negate Rotation settings are needed that way to compensate for the 2D direction setup coming from the 2D tutorial assets. The Y-axis rotation of 3D games and Z-axis rotation of 2D games don’t match, so we need to adjust for it with an offset and rotating in the other direction.

Your own game’s animator controller setup might already be set up correctly to use 3D rotations, so you might need different values or not use them at all.

The rest o the animation setup matches the 2D RPG Quickstart’s animation setup. I’ll skip over it, as the main focus is to get the 2D combatant facing correctly in a 3D world.

Since the 2D animations are set up differently, you’ll also need to use the 2D RPG Quickstart’s schematics for animating battle actions instead of the 3D RPG Quickstart schematics. E.g. attack or use animations are just a sprite change, so they are started and stopped in the schematic instead of just played as it’s done with the 3D RPG Quickstart’s animations.

2D Combatants #

Next, we’ll change the Fighter combatant to use the 2D setup – you can either create a copy of the 3D fighter and adjust the copy, or just change the existing fighter. When using a copy, don’t forget to also update your start game schematic to join the correct fighter to your player group. I’ll update the existing combatant.

Navigate to Combatants > Combatants and select the Fighter combatant.

Base Settings > Prefab Settings #

We’ll change the used prefab – you can find the different 2D combatant prefabs in Assets/Tutorial Assets/NinjaAdventure/Actor/Characters/ in the different sub-folders. I’ll use the BlueSamurai prefab.

Animations & Movement > Animation System #

We’ll override the default animation system and use Mecanim instead.

Animations & Movement > Animations #

We’ll replace the default animations and only use the 2D Mecanim animation setup we just created.

Save Changes #

And that’s it – click on Save Settings to save the changes.

Testing #

Hit play and test your new 2.5D style.

Great – we spawn correctly with the feet on the ground (not stuck in the ground), moving around and rotating the camera keeps the correct rotations of the sprite.

As said above, the remaining 2D animations (attack, use, etc.) still need to be set up and new schematics to animate battle actions need to be created – but all of that is covered by the 2D RPG Quickstart tutorials.