Translations

Know another language? Translate this tutorial!

Making a Sword Character

Favourite 86 favourites
Tutorial written by KiyoshiOriginally published on 26th, December 2011 - 4 revisions

Example Capx: Example
Obs: Adapted from my Little Knight game. Feel free to use the code as you wish, but please don't steal the assets :D

Step 1

Create all animations for your character. Walk, Jump... As you want. Then remove it's hands. Making it like this:
You'll separate the char's animations making two sprites: Character and Hands, each with the same animations and with the same names. The hands will have only one additional animation from Character: Attack. It's like this because the hands attack action must be detached from Character so that the Character can walk and attack, being idle and attack, jump and attack and so on.

Step 2

Add an image point called, ex.: SwordGrip for all hands animation frames.
Like so:
Name it the same for all frames.

And on the sword , just place the origin more or less on the handle point like this:

Add an image point on it as well, to mark where to put the collisor sprite. I'll explain about it soon.

Add as much as you want. Here i've added just one.

Step 3

The events :) . First add an attribute for character named ex.: 'Attacking' and another 'Direction'. And for the Sword: 'InitialAngle' and 'CurrentMovement'. Then add on Chararacter's events add:

Every Tick -> Hands: Set Position to Character
[SubEvent] Character: Not Attacking -> Hands: Set animation to
Character.AnimationName (from beginning)

Then for better organization add a group called ex. Movement

In it add an input event to make it change direction like:

Keyboard Left Pressed - > Character: Set Mirrored
----------------------------Character: Set 'Direction' to -1
----------------------------Hands: Set Mirrored

Keyboard Right Pressed - > Character: Set Not Mirrored
---------------------------Character: Set 'Direction to' 1
---------------------------Hands: Set Not Mirrored

This is just one way to do it. Make it however you want. Just set the hands mirrored when the character is and vice-versa.

Here too set your character animations depending on it's state. I'll not explain it here since it's out scope.

Now add a group ex. 'Attack'. On it add an input event to trigger the attack here i'll use mouse:

Mouse: On Left Clicked -> Character: Set Attacking to True
--------------------------Hands: Set Animation to Attack
--------------------------Hands: Set Animation speed to 50 (as wanted)
--------------------------Sword: Set 'InitialAngle' to Self.Angle
--------------------------Sword: Set 'CurrentMovement' to 1

Sword 'CurrentMovement' represents the movement type the sword will perform when the Chracter is attacking like a down slash, up slash, thrust etc. Here i'll use just one movement type. Change the 'CurrentMovement' as wanted an example is every click add one to 'CurrentMovement' so that on every click the sword moves differently.

Now add another event below this:

Character: Is 'Attacking'
Hands: On animation 'Attack' ended->Character: Set 'Attacking' to False
-----------------------------------Sword: Set Angle to 0
-----------------------------------Sword: Set 'CurrentMovement' to 0

Now, add another group to Character : 'WeaponPositioning'. On it add:

Every Tick - > Sword: Set Position to Hands (ImagePoint: 'SwordGrip')
[SubEvent] Character: Is Mirrored - > Sword: Set Mirrored
[SubEvent] Character: Is Not Mirrored - > Sword: Set not Mirrored

Step 4

Create dummy a dummy sprite to serve as collisor for the sword i'll call it 'SwordCollisor'.

On Sword events:

Every tick - > SwordCollisor: Set Position to Sword (imagepoint: 'CollisorPoint')

If you want more collisor's add more image points on Sword like CollisorPoint1 , CollisorPoint2 etc. And on 'SwordCollisor' add an attribute 'Point'. Then on top of Every Tick event add:

On Start of Layout: SwordCollisor: Set 'Point' to 1
--------------------Create SwordCollisor
--------------------SwordCollisor: Set 'Point' to 2
--------------------(repeat as needed).

Change [Every Thick] to this:

Every Thick
[SubEvent] Foreach SwordCollisor-> SwordCollisor: Set Position to
-----------------------------------Sword on ImagePoint
-----------------------------------'CollisorPoint' & SwordCollisor.Point

Handle the collisions between the SwordCollisors and the monsters as needed.

Now for the sword movements. In this example they are controlled based on the Hands current frame number.

Add a group: MovementStyles or SlashStyles. On it:

Sword: 'CurrentMovement' is 1 - >
[SubEvent] Hands: Animation Frame is 1 -> Sword: Set Angle to
------------------------------------------Self.InitialAngle -
------------------------------------------Character.Direction
------------------------------------------* 20 degrees.
[SubEvent] Hands: Animation Frame is 2 -> Sword: Set Angle to
------------------------------------------Self.InitialAngle -
------------------------------------------Character.Direction
------------------------------------------* 45 degrees.
[SubEvent] Hands: Animation Frame is 3 -> Sword: Set Angle to
--------------------------------------------Self.InitialAngle -
--------------------------------------------Character.Direction
--------------------------------------------* 5 degrees.

And so on. Change just the angle value, 20, 45, 5 as wanted.
You can change the animation speed as well for faster movement. Unfortunatelly right now you can't change the the current frame speed.

That's it. Be creative and change the sword angle and animation speed to crazy values and experiment.

Unlock your full gamedev potential

Upgrade to the Personal Edition of Construct 2, it has way more features and won't holding back from making money and using your full creativity like the free edition does. It's a one off payment and all Construct 2 editor updates are free for life!

View deals

Plus, it's got a lot of additional features that will help you save time and make more impressive games!

Congratulations on finishing this tutorial!

Did you learn a lot from it? Share it now with your friends!

Comments

5
Kiyoshi 13.5k rep

Please let me know of any typos / questions about the tuto !

Monday, December 26, 2011 at 8:20:18 PM
2
studiogami 3,950 rep

Great tutorial!

Monday, January 02, 2012 at 6:09:33 AM
2
roidayan 4,077 rep

thanks for the tutorial

Thursday, January 05, 2012 at 5:09:11 PM
2
valdarko 6,357 rep

nice and simple

Monday, January 09, 2012 at 8:18:50 AM
2
iamdarthtrevor 2,377 rep

Nice tutorial

Wednesday, February 22, 2012 at 8:32:57 PM
3
blackvikinggames 4,934 rep

let's sword fight !

Monday, March 19, 2012 at 1:51:14 AM
1
MarshIsland 2,660 rep

How do I add an attribute?

Sunday, April 15, 2012 at 5:20:27 PM
3
Kiyoshi 13.5k rep

Click on your object , on left panel click on Edit Variables. I refer to variables as Attributes.

Sunday, April 15, 2012 at 5:56:19 PM
1
EdwinLyrum 2,423 rep

Wait... how seperate hands from body ?

Wednesday, April 25, 2012 at 12:44:32 AM
1
Kiyoshi 13.5k rep

By making the hands a different Sprite :)

Thursday, April 26, 2012 at 10:28:47 PM
2
Equinox80 4,809 rep

This is what I made with it! :D

dl.dropbox.com/u/73299017/pixRPG/index.html

I don't think you can use the FB Connect though as it is closed. I am changing the graphics and that don't worry, I am just getting a base working.

Controls are as Follows:

Left Click = Melee
Right Click = Fireball
I = Inventory

It's actively changing however.
PS: What program are you using? I use Paint, Paint.NET, AND Photoshop and for the love of me I can't seem to pixel art with it (meaning I can't select a straight square brush around 9x9 pixels).

Monday, April 30, 2012 at 2:15:09 AM
2
Kiyoshi 13.5k rep

Comment by Equinox80

This is what I made with it! :D
dl.dropbox.com/u/73299017/pixRPG/index.html

I don't think you can use the FB Connect though as it is closed. I am changing the graphics and that don't worry, I am just getting a base working.

Controls are as Follows:

Left Click = Melee
Right Click = Fireball
I = Inventory

It's actively changing however.
PS: What program are you using? I use Paint, Paint.NET, AND Photoshop and for the love of me I can't seem to pixel art with it (meaning I can't select a straight square brush around 9x9 pixels).
For that char i used Graphics Gale ! Very nice program for spriting. Hope you do a great game !

Monday, April 30, 2012 at 5:44:25 PM
1
Equinox80 4,809 rep

Thank you very much, I'll check it out :)

Tuesday, May 01, 2012 at 2:52:33 PM
1
Equinox80 4,809 rep

I can't figure out how to get the pen "brush" to 4x4px size.

Tuesday, May 01, 2012 at 3:07:29 PM
2
Kiyoshi 13.5k rep

Yeah that sucks. I don't remember exactly how i did it but : Go to C:\Users\[Username]\AppData\Local\Humanbalance\GraphicsGaleFree and create a folder named "pen". Then put this file in there: http://dl.dropbox.com/u/2472278/4x4squarepen.bmp
Hope it works !

Wednesday, May 02, 2012 at 12:35:08 AM

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.