Cabbit007’s Lifebar Tutorial
If you find any problems or have any suggestions, e-mail me at
Note: This tutorial was written for MUGEN version 4.01 and above!
DISCLAIMER
The tutorial is NOT for redistribution or direct linking unless permission is given.
For everyone’s convenience, I’ve split up the lifebar file into its respective sections for quick referencing. This tutorial is written with the thought that the reader has at least read the documentation in the mugen/docs folder. If you have not read it, it is strongly suggested that you do so or you may not be able to understand all of the following information. Also, it might help if you read Section 20 first.
Sections:
- Introduction
- Tools
- The SFF file
- The DEF file
- [Files]
- [Lifebar]
- [Simul Lifebar]
- [Turns Lifebar]
- [Powerbar]
- [Face]
- [Simul Face]
- [Turns Face]
- [Name]
- [Simul Name]
- [Turns Name]
- [Time]
- [Combo]
- [Round]
- [WinIcon]
- Reference
- Questions
- Credits
Section 1. Introductions
Hi, I usually go by Cabbit007. Seeing as how there is a lack of lifebar tutorials out there, I’ve decided to write one. By reading this tutorial, I will assume that you are one of the handful of people who actually want to contribute to the MUGEN community rather than leech off others. Well good for you. I’ll try my best to show you how to make a set of decent lifebars to get you started on your way to becoming a l33t MUGEN programmer. Let’s begin.
Section 2. Tools
You will need the following things in order to make the lifebars.
· MUGEN CHARACTER MAKER(a.k.a. MCM) found at http://teleline.terra.es/personal/moi.ses
· An image editing program. Some examples would be PSP, Photoshop, Lviewpro, etc.
Section 3. The SFF file
The SFF file is where all the sprites are stored (NOTE: If you do not know what a sprite is, I strongly suggest you not read any further). The following is a list of the required sprites for a set of lifebars. The group numbers are referring to the sprite number and are what I use for my lifebars, you can use whatever group numbers you want for your own.
Group Number Description
11 The entire picture of the lifebars
12 Losing life sprites
13 Life sprites
21 Power sprites backgrounds
23 Power sprites
10 Win icons
For the beginning programmer, I’d suggest you get the sprites like this:
1 big sprite containing the lifebars and the powerbars.
2 life sprites (Same size as the place where it appears in the lifebars)
2 losing life sprites (Same size as life sprites)
2 power sprites (Same size as where it appears in the powerbars)
2 power sprites backgrounds (Same size as power sprites)
at least 1 win icon
Note: You must have the power sprites backgrounds or your powerbars will not function correctly.
Now that you have all of the sprites, make sure that the following 2 conditions are met or your sprites are not going to look right.
· Each sprite has a maximum of 256 colors (All the sprites can have a different palette as long as each does not exceed 256 colors) and must be saved as 8-bit pcx format.
· The maximum dimension of the MUGEN screen is 320x240 pixels. Adjust your sprites so that they’ll look decent in that dimension.
Start up MCM and add all the sprites in. To use MCM:
- Click add.
- Find the sprite you wish to add and select it.
- Uncheck the "Shared Palette" box and click Open.
- For Group, type in the number that the sprite belongs to (refer to the above if this is your first lifebar).
- For Image, type in the number that it is. If for the player 1, use 0. For player 2, use 1 (does not apply if you only have 1 image).
- Adjust the Axis by moving the sprite around in the window.
Repeat the procedure until you’ve added all the sprites in and made sure that they aren’t positioned off-screen. After you have finished, save the file as FIGHT.SFF. You are now done with the sprite file.
Section 4. The DEF file
Unlike character files, all the coding for the lifebars are in the DEF file. From now on, I’ll just take stuff from my Vampire Savior lifebars (edited a bit) and explain what each line does. The most important parts will be in bold.
Section 5. [Files]
[Files]
sff = fight.sff This is the file name of your sprites.
snd = vssnd.snd This is the file name of your sounds(does not apply if you don’t have any).
font1 = font/jg.fnt This is your first font that you use in the lifebars and where it is located at.
font2 = font/num1.fnt
font3 = font/name1.fnt
font4 = font/kof99.fnt
font5 = font/vslev.fnt
font6 = font/vstime.fnt
font7 = font/vshitfnt.fnt
fightfx.sff = fightfx.sff This is the hitsparks that you will use.
fightfx.air = fightfx.air This is the AIR file of your hitsparks.
common.snd = common.snd This is the common.snd that comes with your MUGEN.
Note: Basically, as long as you have the last 3, you can forget they ever existed for the rest of the tutorial.
Section 6. [Lifebar]
[Lifebar]
;Player 1
p1.pos = 159,117 The coordinates of your lifebars for player 1
p1.bg0.spr = 11,0 The lifebar sprite
p1.bg0.layerno = 1 Layer number of the lifebar sprite(refer to Section 20 for more details).
p1.mid.spr = 12,0 The losing life sprite
p1.front.spr = 13,0 The life sprite
p1.front.layerno = 1 Layer number of the life sprite (looks better if same as lifebar layer number)
p1.range.x = -26,-140
This is the amount of life position (from no life to full life). This number is obtained by getting the size of the sprite with relation to where on the x-axis it is located. This is negative since the sprite falls on the negative x-axis. In MUGEN, negative is left, positive is right, and zero is the middle.
;Player 2
p2.pos = 159,117 This is the same since I just put everything in 1 sprite
p2.bg0.spr = 11,0 ""
p2.bg0.facing = -1
This flips the lifebars so that you don’t have to make another (Note: Only do this if the lifebars are exactly the same when cut from the middle). Refer to Section 20 for more details on facing.
p2.bg0.layerno = 1
p2.mid.spr = 12,0
p2.mid.facing = -1
p2.front.spr = 13,0
p2.front.facing = -1
p2.front.layerno = 1
p2.range.x = 26,140 This is positive since the sprite falls on the positive x-axis
Section 7. [Simul Lifebar]
;Player 1
p1.pos = 159,117
p1.bg0.spr = 14, 1
Since the simultaneous lifebars and the normal lifebars are not the same, you have to call up the team lifebar sprite.
p1.bg0.layerno = 1
p1.mid.spr = 12,0
p1.front.spr = 13,0
p1.front.layerno = 1
p1.range.x = -26,-140
;Player 2
p2.pos = 159,117
p2.bg0.spr = 14, 1
p2.bg0.facing = -1
p2.bg0.layerno = 1
p2.mid.spr = 12,0
p2.mid.facing = -1
p2.front.spr = 13,0
p2.front.facing = -1
p2.front.layerno = 1
p2.range.x = 26,140
;Player 3 Player 3 is player 1’s teammate
p3.pos = 159,117 The position is the same since you’ve already positioned it perfectly in the SFF file.
p3.mid.spr = 12,1
Since this is not player 1 and we can’t flip it like with player 2, we need to use a different sprite for player 3.
p3.front.spr = 13,1 ""
p3.front.layerno = 1
p3.range.x = -40,-134 As with the above, since it’s at a different x position, we have to fit it in again.
;Player 4 Player 4 is player 2’s teammate
p4.pos = 159,117
p4.mid.spr = 12,1
p2.mid.facing = -1
As with player 2, since we’re just recycling player 3’s sprite, we flip it across the y-axis with the facing.
p4.front.spr = 13,1
p4.front.facing = -1
p4.front.layerno = 1
p4.range.x = 40,134
Section 8. [Turns Lifebar]
Since the Turns lifebars are the same as the normal lifebars, you can be lazy and just use the same coding from [Lifebars].
;Player 1
p1.pos = 160,120
p1.bg0.spr = 11,0
p1.bg0.layerno = 1
p1.mid.spr = 12,0
p1.front.spr = 13,0
p1.front.layerno = 1
p1.range.x = -27,-124
;Player 2
p2.pos = 160,120
p2.bg0.spr = 11,1
p2.bg0.layerno = 1
p2.mid.spr = 12,1
p2.front.spr = 13,1
p2.front.layerno = 1
p2.range.x = 26,123
Section 9. [Powerbar]
p1.pos = 156,125
p1.bg0.spr = 21,0
p1.bg0.layerno = 1
p1.front.anim = 23
This lets the power be played as an animation. See [begin action 23] below, for the coding of the animation. Note: You can replace any .text with either a .spr or an .anim. The reverse applies as well.
p1.front.layerno = 1
p1.mid.spr = 22,0
p1.range.x = -10,-124
This is the amount of power position(from no power to full power).
p1.counter.offset = -135,101
This is the position of the counter for your powerbar. It shows you which level you are at currently. Refer to Section 20 for more on offset.
p1.counter.font = 5,0,0
This is the font that I used for the counter font. In this case it is the 5th font vslev.fnt as defined under [Files].
p1.counter.layerno = 1 Layer number of the counter.
; --p2------
p2.pos = 156,125
p2.bg0.spr = 21,1
p2.bg0.layerno = 1
p2.front.anim = 24
p2.front.layerno = 1
p1.mid.spr = 22,1
p2.range.x = 16,130
p2.counter.offset = 141,101
p2.counter.font = 5,0,0
p2.counter.layerno = 1
; --level sounds---
The sounds that will play when you gain a level. Note: Currently, MUGEN can only support up to level 9 so don’t beat your computer when your level 5000 snds don’t work (if your sound goes that high, you should just go shoot yourself).
level1.snd = 0,2
level2.snd = 0,3
level3.snd = 0,4
[begin action 23]
If you have created a character before, this will look familiar. As with the air file, this is the coding to begin the animations for the 23rd action, in this case, the power sprite animations.
23, 0 , 0, 0, 10
This calls up the sprite from group 23, number 0, and displays it for 10 ticks at x = 0, y = 0 (since I’ve already positioned them in the sff with mcm).
23, 1 , 0, 0, 10
23, 2 , 0, 0, 10
[begin action 24]
24, 0 , 0, 0, 10
24, 1 , 0, 0, 10
24, 2 , 0, 0, 10
Note: There isn’t a player 3 or 4 coding in [Powerbar] since the powerbars are shared in team battle.
Section 10. [Face]
This is the coding for the player icons.
p1.pos = 120, 28
p1.face.spr = 9000,0 Do not change this since this is the MUGEN default for player 1’s icon.
p1.face.layerno = 0
p1.face.facing = 1
p1.face.offset = 0,0
p1.face.scale = .6,.6
This is the size of player1’s icon where 1 is normal, .5 is 50%, etc. Refer to section 20 for more details).
p2.pos= 197, 28
p2.face.spr = 9000,0
p2.face.layerno = 0
p2.face.facing = -1
p2.face.offset = 0,0
p2.face.scale = .6,.6
Section 11. [Simul Face]
This is the coding for the team icons. It’s pretty much the same as above except you’ve got 2 more players to account for. Since there’s nothing new, I’ll just show you what it looks like.
;Player 1
p1.pos = 120, 28
p1.face.spr = 9000,0
p1.face.layerno = 0
p1.face.facing = 1
p1.face.scale = 0.6,0.6
;Player 2
p2.pos = 197, 28
p2.face.spr = 9000,0
p2.face.layerno = 0
p2.face.facing = -1
p2.face.scale = 0.6,0.6
;Player 3
p3.pos = 112,38
p3.face.spr = 9000,0
p3.face.layerno = 0
p3.face.scale = 0.45,0.45
p3.face.facing = 1
;Player 4
p4.pos = 205,38
p4.bg.facing = -1
p4.face.spr = 9000,0
p4.face.layerno = 0
p4.face.scale = 0.45,0.45
p4.face.facing = -1
Section 12. [Turns Face]
The first half of the coding is exactly the same as the [Face] coding since the lifebars look the same. In MUGEN version 4.01, they introduced the new mode of Turn battle which allows you to have KOF tag mode. This adds a few more icons for the rest of your characters so the second half is what’s new.
[Turns Face]
;Player 1
p1.pos = 10, 14
p1.face.spr = 9000,0
p1.face.layerno = 2
p1.face.facing = 1
p1.face.offset = 0,0
p1.face.scale = .6,.6
p1.teammate.pos = 10,37 Position of your teammate’s icon
p1.teammate.spacing = 13,0 The space for each of your teammate’s icons
p1.teammate.ko.spr = 10,0 The sprite that is overlayed when one of your character is defeated.
p1.teammate.face.spr = 9000,0 Don’t change this line.
p1.teammate.face.scale = .5,.5
p1.teammate.face.facing = 1
p1.teammate.face.offset = 1,0
;Player 2
p2.pos= 309, 14
p2.face.spr = 9000,0
p2.face.layerno = 2
p2.face.facing = -1
p2.face.offset = 0,0
p2.face.scale = .6,.6
p2.teammate.pos = 310,37
p2.teammate.spacing = -13,0
p2.teammate.ko.spr = 10,0
p2.teammate.ko.facing = -1
p2.teammate.face.spr = 9000,0
p2.teammate.face.scale = 0.5,0.5
p2.teammate.face.facing = -1
p2.teammate.face.offset = -1,0
Section 13. [Name]
The name of the characters. Nothing new concept wise.
p1.pos = 69,36
p1.name.font = 3,0,0
p1.name.layerno = 1
p2.pos = 254,36
p2.name.font = 3,0,0
p2.name.layerno = 1
Section 14. [Simul Name]
The name of the teams. Still nothing.
p1.pos = 69,45
p1.name.font = 3,0,0
p1.name.layerno = 1
p2.pos = 254,45
p2.name.font = 3,0,0
p2.name.layerno = 1
p3.pos = 69,52
p3.name.font = 3,0,0
p3.name.layerno = 1
p4.pos = 254,52
p4.name.font = 3,0,0
p4.name.layerno = 1
Section 15. [Turn Name]
Same as the [Name] since it only displays the name of the current character you are using.
p1.pos = 69,36
p1.name.font = 3,0,0
p1.name.layerno = 1
p2.pos = 254,36
p2.name.font = 3,0,0
p2.name.layerno = 1
Section 16. [Time]
This is the coding for the timer.
pos = 156,41
counter.font = 6,0
counter.layerno = 1
counter.offset = 4, 0
framespercount = 60
This is how fast you want the timer to be in a sense. Since MUGEN counts time by ticks and 60 ticks equals 1 second, keep it at 60 to make it accurate.
Section 17. [Combo]
This is the coding for the combo counter.
pos = 10,80 This is the position that the counter will be shown.
start.x = -40
This is the x-coordinate where the counter will start.
count.font = 7,0
count.shake = 1
This controls the action of the combo counter. Shakes if set to 1 and not shake if set at 0.