In this tutorial we’ll set up schematics to animate the start and end of our battles.

This tutorial is the start of the sub-series for animating battles.

We’ll set up 4 schematics, one for the battle start (spawning/placing the combatants) and 3 for the different possible battle outcomes – victory, escape and defeat.

Battle Message UI Box #

First, we’ll set up a new UI box to display battle start/end messages. We’ll also add a new UI layer above the screen fader, to have it displayed while fading the screen.

UI Box Prefab #

We’ll create a new prefab from scratch, no scrolling. This time, the box should only display a centered text, no box image, etc.

Use the scene hierarchy context menu to create a basic setup: Makinom > UI Box > UI Box (no title this time)

Rect Transform #

I’m anchoring the box to the top center and have it go accross the whole width of the screen at a height of 100.

Image #

Remove the Image component from the UI Box game object, as we don’t want a background image in the box.

TextMeshPro – Text (UI) #

The text component is located on the UI Box > Text child object.

Increase the Font Size (e.g. I’m using 50) and use the Center alignment.

The finished result should look something like this:

Create a prefab out of the UI Box game object, e.g. name it UI Box Battle Message.

Don’t forget to remove the Canvas in case you created the UI box in one of your game scenes.

New UI Layer #

Open the Makinom editor and navigate to UI > UI Layers, we’ll create a new UI layer.

The layer is added at the end of the list, i.e. it’ll be placed above all others, including the Screen Fader layer which has the Screen Fader setting enabled.

UI Box Setup #

Navigate to UI > UI Boxes, we’ll add a new UI box for our battle message.

Base Settings #

Unity UI #

Override Default Settings > Schematics #

I’m also using the move from left and move to right schematics from the UI animations schematics to animate this UI box.

Game State #

We’ll also set up a new game state that we’ll use to have control over when to show the battle HUDs.

Navigate to Game > Game States and add a new game state.

That’s it for the UI setup – don’t forget to save your changes by clicking on Save Settings at the bottom of the editor.

Battle Start Schematic #

Now, we’ll set up the schematic animating our battle start. We’ll use the Battle Intro Zoom camera position to create a zoom-in effect, display a Fight! message and fade the screen. While the screen is faded out, we’ll spawn and place our combatants.

Navigate to Schematics.

Settings #

Actors #

We’ll add 2 actors, one for the battle arena (to use it as camera target) and one to have all combatants that are in battle available (for having dead combatants play their Death animation).

Store Music #

Add Node > Audio > Music > Store Music

We store the currently playing music to be able to resume playing it after the battle (i.e. in a battle end schematic).

The default setup of the node should usually already be what you need. Please note that this depends on which music channel your music is playing.

Change Music #

Add Node > Audio > Music > Change Music

Now we change the music to our battle music.

Play Sound (Channel) #

Add Node > Audio > Audio > Play Sound (Channel)

This node plays a sound on a sound channel instead of a game object in the scene.

Show Dialogue #

Add Node > UI > Dialogue > Show Dialogue

We’ll display the battle message as an Auto Close dialogue.

Change Camera Position #

Add Node > Game Object > Camera > Change Camera Position

Now we’ll zoom in.

Wait #

Add Node > Base > Wait

We’ll wait for a part of the zoom in before fading the screen.

Fade Screen #

Add Node > Animation > Fade > Fade Screen

We’ll fade out the screen to hide our combatant spawning and placement.

Place At Spots #

Add Node > Battle > Spawn > Place At Spots

This’ll place the already spawned combatants (e.g. the player) at their battle spots.

Spawn Battle Combatants #

Add Node > Battle > Spawn > Spawn Battle Combatants

This’ll spawn all combatants participating in battle at their battle spots.

Stop Camera Position Fade #

Add Node > Game Object > Camera > Stop Camera Position Fade

Stop the camera fading in case it’s still ongoing.

No further settings.

Initial Camera Position #

Add Node > Game Object > Camera > Initial Camera Position

Reset the camera to the initial position (mainly for the field of view).

Block Camera Control #

Add Node > Input > Block Camera Control

We’ll unblock the camera control to be able to set the battle arena as the target of the camera.

Camera Control Target #

Add Node > Game Object > Camera > Camera Control Target

This’ll change the target for the camera control – this is only available for the built-in camera controls or custom controls extending from the BaseCameraControl class.

Death Animation #

Add Node > Animation > Combatant > Death Animation

This node plays the animation type set up for death animations (in Base/Control > Animation Types > General Settings) on all dead combatants.

This is used to e.g. have a dead player member show as dead (animated).

Change Game State #

Add Node > Game > Game > Change Game State

We’ll activate our game states to show the equipment and battle HUDs (which we’ll set up later).

Fade Screen #

Add Node > Animation > Fade > Fade Screen

Copy the previous Fade Screen node, time to fade in the screen again.

And that’s it for the schematic. Click on Save Schematic to save it, e.g. as BattleStart.

Victory Schematic #

This battle end schematic is used when the player won the battle. We’ll play the victory music, collect our loot and continue on.

Settings #

Change Music #

Add Node > Audio > Music > Change Music

Play the victory music.

Show Dialogue #

Add Node > UI > Dialogue > Show Dialogue

Show the victory message.

Wait #

Add Node > Base > Wait

Wait a second.

Collect Battle Gains #

Add Node > Battle > Gains > Collect Battle Gains

This node is used to collect experience and loot from a battle – we’ll also display the loot dialogue.

Wait #

Add Node > Base > Wait

Wait a short time before fading out the screen.

Change Music #

Add Node > Audio > Music > Change Music

Now we’ll fade back to the stored music (we stored it in the battle start schematic).

Fade Screen #

Add Node > Animation > Fade > Fade Screen

We’ll fade out the screen to hide removing all combatants except the player, also switching off the game states to hide equipment and HUDs.

Destroy Battle Combatants #

Add Node > Battle > Spawn > Destroy Battle Combatants

This node is used to destroy combatants participating in battle.

We’ll use it to remove all combatants except for the player.

Change Game State #

Add Node > Game > Game > Change Game State

We’ll inactivate our game states to hide the equipment and battle HUDs (which we’ll set up later).

Fade Screen #

Add Node > Animation > Fade > Fade Screen

Copy the previous Fade Screen node, time to fade in the screen again.

And that’s it for the schematic. Click on Save Schematic to save it, e.g. as BattleEndVictory.

Escape Schematic #

This battle end schematic is used when the player escaped the battle. We’ll not collect the loot and continue on.

Since this schematic is very similar to the victory one, we’ll just adjust some things and use Save Schematic As to save it as a new schematic.

Change Music (1st) #

Remove the 1st Change Music node (playing the Victory Theme).

Show Dialogue #

Adjust the time and text.

Collect Battle Gains #

Remove this node.

Wait (2nd) #

Remove the 2nd Wait node (waiting 0.5 seconds).

Clear Battle Gains #

Add Node > Battle > Gains > Clear Battle Gains

This node is used to remove battle gains without collecting them.

Add it after the 1st Wait node (i.e. instead of the Collect Battle Gains node).

The default setup is enough, i.e. clearing loot, experience and normal SV.

The rest of the setup can remain the same, i.e. changing music to stored, fading out the screen, etc.

And that’s it for the schematic. Click on Save Schematic As … to save it, e.g. as BattleEndEscape.

Defeat Schematic #

This battle end schematic is used when the player was defeated in battle. We’ll call game over.

We’ll once again adjust the current schematic (escape) and use Save Schematic As to save it as a new schematic.

Show Dialogue #

Adjust the time and text.

Wait #

We’ll wait a bit longer.

Change Music #

Remove all nodes after the Change Music node – you can quickly remove a node and all it’s following nodes using the context menu: Remove Node Chain

Game Over #

Add Node > Game > Game > Game Over

This node will call game over according to the Game Over Settings (see below).

No further settings.

And that’s it for the schematic. Click on Save Schematic As … to save it, e.g. as BattleEndDefeat.

Game Over Settings #

Navigate to Game > Game Settings, we’ll take a look at the Game Over Settings.

You can learn more about game over in this documentation.

ORK Game Settings > Game Over Settings #

Save Changes #

And that’s it for the battle start/end schematics!

Don’t forget to save your changes by clicking on Save Settings at the bottom of the editor.

Next, we’ll set up schematics for animating camera changes and the use of abilities and items.