Geek Culture
Published in

Geek Culture

Daily Progress — Implementing Sword Arc FX.

We want to add a bit of flair to our sword swing and we’ve been given a really cool arc fx called Sword_Three_Particle. We start by slicing it in 512x512 squares.

We first move the first frame into the Player object and rename it to Sword_Arc

Remember to set the sprite layer order to 50, same as player.

As before, create a new animation, we’ll save it under Sprite/Effects/Animation as Sword_Arc_anim. drag all the frames in, set the samples to 30, and hit play. Unity needs a few seconds to organize things, but soon we have a nice animation arc!

To make it look really cool, we can tilt it at an arc so change the rotations to(66, 48,-80). Also adjust it to where you think it would look appropriate.

It moves a little too fast, let’s move all frames from frame 2 on and move them up to around 5 seconds.

Alright! We have an awesome looking swing! Now let’s set it up in the Animator before we code it, first let’s turn off Loop Time since we only want this animation to play once.

Next, we’ll create an empty state that will be our idle state which we’ll transition to the arc and back. going to sword arc will have no exit time and 0 transition, but sword arc to idle will have an exit time and around .35 transition time.

so let’s hit the trigger.

Looking good, now to program it in: First we create a holder, and assign it.

We can’t normally get the Animator using GetComponentInChildren because it will grab the first one which will be the player. We want to get the second child, which using Array rules, will be 1. once we have the first child (Child 0 being the player sprite), we’ll get the animator component from that.

Next we just set the trigger, easy!

Let’s run the game and click on the mouse button:

As I suspected, the animation is running twice. This is the same issue from yesterday, so we’ll resolve it the same way. We’ll create a behaviour for the SwordArc, I named it SwordArc_Behaviour. Then on the OnStateExit, we use ResetTrigger for SwordArc, and all should work perfectly.

Great! The animation is now playing only once! The player seems to swing the sword a little too slow though, so we’ll fix the animation:

First we’ll go into the Players Attack animation and delete all the keyframes.

Under the original Reg_Swing animation, we grab frames 6–23, ignoring frame 9, and drag them into the timeline.

and that results in:

A *much* snappier swing! Everything looks awesome together! Some final adjustments to the arc can be made though. Here are the numbers:

Position: 1.01, -0.09, -0.25
Rotation: 66, 58, -80

There’s also an issue of the first frame of the arc being constantly on and following the player. We can easily fix that by moving that frame up, inserting a new frame, and then clicking the record button and turning off the sprite renderer on that new first frame, and turning it back on on the next. Click the record button again when you’re done.

Next will be the issue of when the player flips sides, Normally, we’d need to programattically flip the Sword Arc as well. I’m going to do something a little different which may change later, but for now I think this will solve the problem by flipping the players transform instead of using the .flipX function for just the sprite. This will essentially flip the entire player object including the arc:

So here’s the new FlipCharacter function:

We first create a boolean called _facingRight, it will probably come in handy later, but then we check our horizontalInput if it’s less than 0 (moving left, but we’re facing right or if we’re moving right and facing left, then our current _facingRight boolean becomes its opposite, and we rotate the object along the y axis 180 degrees, essentially flipping the player and all its children including the arc as well as any future spawn points like if there were to be a crossbow or pistol that shoots bullets. You no longer have to worry about changing spawn points because of the direction being faced!

Check it out:

Works perfectly and we didn’t have to program two objects at once! I’d like to thank Nik Hwang for this method, go check out his Youtube channel!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store