Making character composed of multiple parts

Favourite 127 favourites
Tutorial written by TELLES0808Originally published on 24th, July 2012 - 8 revisions


Here you'll learn the basic of composing character with multiple parts, improving your job and making source files smaller.

This smart solution is not new, old games from PSX, Arcades, NES, SNES, SEGA, ATARI, and much other gaming systems used this strategy to reduce the source size of their games.

Now, it's your time to learn and practice.

Alignment Points

The first thing you'll need to be introduced is the alignment points.

They are 9 basic points, going from Upper/Left to Bottom/Right.

The mostly common align point is the middle point, and it's standard on C2 for new sprites.

Alignment points
On platform games you should use the Bottom/Middle point, and will need make your sprites rationally before importing it to C2.

Main character poses

Let's start practice, and to help you, here's a small strip of a character.

Standing Pose
Walking Pose
To achieve a character sprite like this, you can draw the animation as a GIF, it's a good way to achieve a smoothly animation, and after the job, simple import it to C2.

The first tip, when doing the GIF, is make the image size bigger than the sprite size inside it, 2 times bigger is sufficient.

The second tip, make your character in layers, use one for the pants, one for the hair, one for the equipment, etc.

*This is very important, if you don't align it right, the game will enunciate this misalignment when in motion.

The last tip, and not less important, after the animation done, make it aligned to the Bottom point.

Now, export all the frames of your animation for individual PNG files.

If you like to maintain your source file small, you can compact these PNG's to 8bits, 16bits or maintain the original quality and size (32bits of colors).

Secondary poses

Following that philosophy, you may want add some tools for your character, and this can be done doing the same animations, drawing the tools on separated layers, exporting them on new PNGs.

After finishing the attack poses, the main character will use these sprites:
Sword Pose
And the layer where you'll place the sword:
Notice, the sword frame width is larger than the character frame width.

This is important later, to check collision with another objects.

Importing to C2

After finishing the template of your sprites, import them to C2

Importing Stripes

- Set the origin point to the Bottom

- Set the same collision box for all animations

Alignment Point

- Create the platform to your Player object.

On a new object, import the sword frames, and make two different animation, the first is the Standing animation, where you'll place the invisible frame, the second animation is the sword in action.

- Set the origin point to the Bottom

- Set the same collision box for all animations

- Create the Pin behavior to your sword object.

- Set this object coordinates to another object (Player - Origin)

- Set this object to Pin to the Player (follow this sequence).

After working on your code (I pretend to improve this tutorial with screenshots and step by step for this code), you'll need to know these steps to show the sword at the same time of your "player sword" animation:

- Pressing the action Key, example "Space Bar", play the player sword animation, play the sword animation;

*Check if the player is not using this animation for the standing and walking poses, so, the player will play the sword animation without trouble.

- After finish of these animations, play respectively "standing" poses for player and sword.

Download the Sample CAPX

Think out of the box, for sure you'll like!

More samples

Advanced codes can be added, you can check if the sword, when playing the "sword" pose, is touching a family, and if yes, make it damage the object, and much other things.

Have a good day, and I hope you enjoined it.

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!


felixsg 9,424 rep

I like this wait more tutorials like this in the future

Tuesday, July 24, 2012 at 6:38:03 PM
zsangerous 12.9k rep

can you put a .capx to compare our results with yours ^^ also it would be nice to see if we did it wrong so we can ask you later

Wednesday, July 25, 2012 at 1:53:59 PM
TELLES0808 23.1k rep

Comment by zsangerous

can you put a .capx to compare our results with yours ^^ also it would be nice to see if we did it wrong so we can ask you later
I'm waiting the next stable version to release the CAPX =]
Thank's you.

Wednesday, July 25, 2012 at 4:38:53 PM
tonycrew 9,512 rep

Nice tutorial, thanks for taking time to help us less graphical/Animation guys get some ideas that will help alot.

Friday, July 27, 2012 at 11:48:10 PM
sman118 7,820 rep

I agree with TonyCrew. This will be a huge help to those who want to swap out items and change details of our characters.

Saturday, July 28, 2012 at 3:07:13 PM
jwjb 5,034 rep

@TELLES0808, Thanks for posting this informative tutorial which I cannot wait to apply to the characters in my games.

Tuesday, July 31, 2012 at 7:37:45 AM
bosanovax 2,726 rep

Really good read, this will help me out me thinks :)

Monday, August 06, 2012 at 10:51:43 AM
zsangerous 12.9k rep

so you can upload the capx now?? i think the stable version has been released ^^

Sunday, August 26, 2012 at 8:42:23 AM
TELLES0808 23.1k rep

We still on beta r100 =\

When it come out, I'll renew the tutorial with the blank image technique, where you place a invisible mask with pin points and make your Multi Part Bosses =P

Sunday, August 26, 2012 at 2:56:55 PM
zsangerous 12.9k rep

cough cough ^^ i don't want to spam but now its the time

Monday, September 17, 2012 at 3:46:39 PM
TELLES0808 23.1k rep

you're right! today I'll update it with the CAPX around 22:00h (GMT 3)

Monday, September 17, 2012 at 3:52:11 PM
zsangerous 12.9k rep

finally ^^ now i will not ask for it in the forum :) thanks keep the good work

Monday, September 17, 2012 at 4:27:53 PM
TELLES0808 23.1k rep

Comment by zsangerous

finally ^^ now i will not ask for it in the forum :) thanks keep the good work
a href="" rel="nofollow">

Monday, September 17, 2012 at 7:14:16 PM
TELLES0808 23.1k rep
Monday, September 17, 2012 at 7:19:41 PM
zsangerous 12.9k rep

oh now i know where is the thing i did it wrong ^^ all of them has the same origin point ^^ really thanks :) liked

Wednesday, September 19, 2012 at 9:02:24 AM

Leave a comment

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