Tutorial Fighter (updated 9/15/10)

TUTORIAL FIGHTER!

<img src="http://www.louisferina.com/games/TutorialFighter/TutFighter.jpg">

INTRO

Tutorial Fighter will be a series of tutorials aimed at moderate to intermediate level Construct users showing how to make an action game. I'm expecting each part of the tutorial to be continuously evolving. I will explain what I think is necessary, but if there are questions or I missed something, I'll make sure to add them into the main post or into the comments of the cap file. If you have any suggestions on how to make these tutorials any better, let me know. Help me help you!

I am not a programmer and I don't claim this as the definitive way to make an action game in Construct. If anyone has any suggestions for better coding, I am open to them. I am also not a game designer. If I've incorrectly explained any concepts or someone can define them more clearly, feel free to correct me and I'll update my post.

Also, please excuse my crappy graphics, I plan to polish them as I go. OK, enough disclaimers, here we go!

• PART 1: CONTROLLING THE PLAYER Covers player control and attacks.
• PART 2: HITTING THINGS Adding in hit boxes, enemy hit reacts, hit pause, hit effects etc.
• PART 3: MORE PLAYER MOVEMENT Adding more actions for the player: running, running attacks, blocking, dodges
• PART 4: SPECIAL MOVES inkBot created a nice example of how to do special moves based on discussions on page 3. I haven't gotten to implementing a special move system yet, but check it out if you're interested.

Enjoy!

-Lou

PART 1: CONTROLLING THE PLAYER

Download tutorial file

Player Variables:

• dir: The dir variable can only be -1 (for facing left) or 1 (for facing right). I use it mostly for math equations, multiplying by dir to get a positive or negative value.
• state1 and state2: The state variables tell you what the player is doing at any time. It makes things like organization and bug checking much easier. I normally use two state variables one for the base set of movement: standing, running, jumping, falling, getting hit, etc. The second state variable is used for whats playing on top of the base, usually attack type of actions. If state1=0 (idle) and state2=1(melee1 attack), you know exactly what the player is doing and you can check those easily in conditions. I use numbers so that I can check conditions easier than words. For instance, "if state2>0" -> do stuff. You just have to remember to track states for everything the player does. If you press left or right then state1=2(walking). It's essential to keep good notes or comments so you don't lose track of states.
• buffer: Buffer is used for buffering attacks. Read the buffer section for more info.
• attackTimer: The attackTimer variable is the time you have to perform a combo. Read the buffer section for more info.

Layouts and Event Sheets

• characters: This layout will store the graphics for the characters.
• scene: This layout is the level where the game takes place.
• player: This event sheet is where all of the player's controls and systems are handled.

Buffering Attacks

Buffering basically means storing button presses. It goes a long way in making a game feel responsive. A good example of buffering is God of War. When you press attack Kratos does his first move. Pressing attack again at an early part of his animation will buffer the next move and he'll execute it when his first attack ends. Without a buffer system in the same scenario, most people would be frustrated if they pushed attack and then nothing happened because they didn't press it at the exact right time. In a good control system, this doesn't only apply to attack chains, you can buffer a jump after a roll for example. Some games allow you to buffer whole attack strings (I think Soul Caliber does this?) so if you press attack 4x you'll get the 4 hits in the chain, but I think most games only buffer one move.

In Tutorial Fighter, when you press attack, you're just setting the variable buffer=1. When buffer=1 that means an attack is queued up and it will play when possible. Here's some pseudo code to show whats happening on a basic level:

Press "A"
  set buffer=1

if buffer=1
  if no attack is playing
      play attack 1
      set buffer=0
  if attack 1 is playing
      play attack 2
      set buffer=0
  if attack 2 is playing
      play attack 3
      set buffer=0
[/code:bxqq299y]

The attackTimer comes into play with buffering.  When you press attack, the attackTimer is set to a certain time, then counts down to 0 using [url=http://sourceforge.net/apps/mediawiki/construct/index.php?title=Time_Delta]timedelta[/url].  You can only go into the next attack while the attackTimer is greater than 0.

[b]The Player Mask (AKA Collision Box)[/b]
Construct has a built in mask system however I use a hidden collision box sprite so that I can have control of it.  If the player ducks or dodges I need to scale the collision box.  The hot spot for the mask also needs to be at the base so it scales downward.  I'm not aware of a way to change or scale the built in collision mask.  

[b]Update 7/2/10[/b]
[ul]
[li]moved hotspot of collision box down to base of sprite and realigned the player graphics[/li]
[li]changed player mask collision to bounding box instead of per pixel...just to optimize a bit.[/li]
[li]changed debug comments to blue so that debug code can be easily found and deleted when the game is done (just better organization).[/li]
[li]changed the Attack Timer Countdown condition in the "player" event sheet at line 4. The comment I wrote was correct, however the condition code was wrong.  It still worked but for the wrong reason.  [/li]
[li]in the "player" event sheet under "Animation Control" section, changed jumping and falling code to use the state variable.  I also needed to create a state for "falling" around line 16.[/li]
[li]in the "player" event sheet at line 5, deleted "not falling" and "not jumping conditions" because they were redundant[/li][/ul]

Thx much again Lou, gonna sit down tomorrow with a cup o joe and study this... This is some serious value added to the community...

cheers!

~t

very helpful! You can add a link to it in the wiki.

PS can you also upload the png files of the character used in the tutorial file?? i want to use them as reference sprites when i am trying to make walking animations.

This is awesome

i?ll definitely follow this and try to make something myself -

Keep up the good work

abhilash2863,

• open up the characters layout
• select the lil dude and go to the animation tab
• right click any angle and click "launch explorer"

It will export each individual frame for ya.

~t

PS can you also upload the png files of the character used in the tutorial file?? i want to use them as reference sprites when i am trying to make walking animations.

Thats a good idea, I'll put up all of the graphics files later on today. In the meantime you can do what lildragn said.

hi UberLou,

Just reading Retro Gamer mag this morning and wondered how a fighter game could be made in construct...will be watching with interest!

Very nice. Posted to madewithconstruct.tumblr.com - let me know if there is anything else from your body of work that you would like me to post.

Amazing tutorial, very smooth and responsive feeling. Reminds me a little of a game I used to play called little fighters. I am excited to see the rest of these.

PART 4: ?

*cough* hadoukens and various special attacks

Thanks, will read this soon.

But I just want to point out one thing I learned from the wonderfull book Teh Art of Game Design:

UberLou: You are a game designer!

Because you make a game. Ist just that easy. Everyone who thinks about a game or even makes one is a game designer.

WOW Great start! All I can say is can't wait for more.

Make sure you link this in the Wiki, I think this may be VERY popular when finished

Glad to see people are enjoying and understanding the tutorial. I was worried it wasn't clear enough.

Very nice. Posted to madewithconstruct.tumblr.com

Thanks GMG! You said in your post that there were some design decisions that weren't too clear for you. Anything specific that I can address?

PART 4: ?

*cough* hadoukens and various special attacks

Hah, I initially wrote special moves for Part 4 but then took it off because it would be really tough

UberLou: You are a game designer!

Because you make a game. Ist just that easy. Everyone who thinks about a game or even makes one is a game designer.

Hah, I guess thats true. Maybe I'll revise my sentence to say "I'm an unproven game designer."

UberLou,

the main thing that I noticed was that you are still using a hidden collision box object for the player, rather than the built in masks. I was under the impression that colliders like this were no longer necessary.

I thought you might have a reason for doing it that way, which is why I said i'll wait and see how it develops. I thought perhaps you planned to have multiple collision areas for attack and damage (i.e. fist collider does damage on collision with enemy body collider, enemy foot does damage on collision with player body collider).

anyway, I found it to be a really well organised and commented project, and I'm looking forward to part 2.

the main thing that I noticed was that you are still using a hidden collision box object for the player, rather than the built in masks.

Oh good catch, I'll write that into my main post. I use a hidden collision box so that I can have control of it. If the player ducks or dodges I need to scale down the collision box. Also the hotspot for the mask needs to be at the base (which I forgot to do) so it scales downward. I'm not aware of a way to change or scale the built in collision mask but I haven't put much time into that feature.