Tutorial Fighter (updated 9/15/10)

Post your own tutorials, guides and demos.

Post » Wed Jun 09, 2010 3:43 am

[color=#FF0000:1rm2d8f6][size=200:1rm2d8f6]TUTORIAL FIGHTER![/size:1rm2d8f6][/color:1rm2d8f6]

[size=150:1rm2d8f6]INTRO[/size:1rm2d8f6]
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! :)

[list=1:1rm2d8f6]
[*:1rm2d8f6]PART 1: CONTROLLING THE PLAYER
Covers player control and attacks.[/*:m:1rm2d8f6]
[*:1rm2d8f6]PART 2: HITTING THINGS
Adding in hit boxes, enemy hit reacts, hit pause, hit effects etc.[/*:m:1rm2d8f6]
[*:1rm2d8f6]PART 3: MORE PLAYER MOVEMENT
Adding more actions for the player: running, running attacks, blocking, dodges[/*:m:1rm2d8f6]
[*:1rm2d8f6]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.[/*:m:1rm2d8f6][/list:o:1rm2d8f6]

Enjoy!
-Lou
B
77
S
49
G
25
Posts: 346
Reputation: 17,409

Post » Wed Jun 09, 2010 3:44 am

[size=150:bxqq299y]PART 1: CONTROLLING THE PLAYER[/size:bxqq299y]
Download tutorial file

Player Variables:
[list=1:bxqq299y][*:bxqq299y]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.[/*:m:bxqq299y]
[*:bxqq299y]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.[/*:m:bxqq299y]
[*:bxqq299y]buffer: Buffer is used for buffering attacks. Read the buffer section for more info.[/*:m:bxqq299y]
[*:bxqq299y]attackTimer: The attackTimer variable is the time you have to perform a combo. Read the buffer section for more info.[/*:m:bxqq299y][/list:o:bxqq299y]

Layouts and Event Sheets
[list=1:bxqq299y]
[*:bxqq299y]characters: This layout will store the graphics for the characters.[/*:m:bxqq299y]
[*:bxqq299y]scene: This layout is the level where the game takes place.[/*:m:bxqq299y]
[*:bxqq299y]player: This event sheet is where all of the player's controls and systems are handled.[/*:m:bxqq299y][/list:o:bxqq299y]

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:

[code:bxqq299y]
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 timedelta. You can only go into the next attack while the attackTimer is greater than 0.

The Player Mask (AKA Collision Box)
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.

Update 7/2/10
[list=1:bxqq299y]
[*:bxqq299y]moved hotspot of collision box down to base of sprite and realigned the player graphics[/*:m:bxqq299y]
[*:bxqq299y]changed player mask collision to bounding box instead of per pixel...just to optimize a bit.[/*:m:bxqq299y]
[*:bxqq299y]changed debug comments to blue so that debug code can be easily found and deleted when the game is done (just better organization).[/*:m:bxqq299y]
[*:bxqq299y]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. [/*:m:bxqq299y]
[*:bxqq299y]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.[/*:m:bxqq299y]
[*:bxqq299y]in the "player" event sheet at line 5, deleted "not falling" and "not jumping conditions" because they were redundant[/*:m:bxqq299y][/list:o:bxqq299y]
B
77
S
49
G
25
Posts: 346
Reputation: 17,409

Post » Wed Jun 09, 2010 4:00 am

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
B
4
S
1
G
2
Posts: 61
Reputation: 997

Post » Wed Jun 09, 2010 4:24 am

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.
B
9
S
3
G
3
Posts: 366
Reputation: 2,301

Post » Wed Jun 09, 2010 12:20 pm

This is awesome :D
ill definitely follow this and try to make something myself -

Keep up the good work :D
B
3
S
1
G
3
Posts: 4
Reputation: 1,033

Post » Wed Jun 09, 2010 12:24 pm

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
B
4
S
1
G
2
Posts: 61
Reputation: 997

Post » Wed Jun 09, 2010 1:20 pm

[quote="abhilash2863":gp9tgo3m]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.[/quote:gp9tgo3m]

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.
B
77
S
49
G
25
Posts: 346
Reputation: 17,409

Post » Sat Jun 12, 2010 7:51 am

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!
My Games on google play

ImageImage
B
30
S
6
G
4
Posts: 97
Reputation: 3,008

Post » Sat Jun 12, 2010 4:25 pm

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.
B
2
S
2
G
3
Posts: 105
Reputation: 1,510

Post » Mon Jun 14, 2010 12:26 pm

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
B
15
S
2
G
3
Posts: 50
Reputation: 1,863

Next

Return to Your tutorials & example files

Who is online

Users browsing this forum: No registered users and 1 guest