Screenpack Tutorial Part 3

[MrSteve81]

Part 3 time my darlings! This section will be covering the character selection part of your screenpack. This is in my opinion the most important part of a screenpack. Get this wrong and your screenpack will look like rubbish and might not work correctly.
And no one wants an ugly bad working screenpack. Thats just a surefire way to make sure no one else wants to use it.
Open up your system.def once more.

;Character select definition
[Select Info]
fadein.time = 10 This is how long the screen fades in. Higher number = slower
fadeout.time = 10 And this is fadeout.
rows = 11 How many rows of character slots down it will be
columns = 22 And how many across See special notes at end.
wrapping = 1 Do you want the cursor to appear on the left of the screen when you go past the last slot on the right? Keep as 1. If not, change to 0   
pos = 3,23 This is where the first box will be drawn. Usual x,y type thing
showEmptyBoxes = 1 0 if you don't want to see slots with no character in
moveOverEmptyBoxes = 1 Skip over empty slots.
cell.size = 27,27 How big the slot will be
cell.spacing = 2 Size of gap between slots.
cell.bg.spr = 150,0 The sprite of the slots background
cell.random.spr = 151,0 If you are going to have random select slots, this is the sprite
cell.random.switchtime = 4 How long the random select will be on each character in gameticks
p1.cursor.startcell = 0,0 Start slot for player 1[/color
p1.cursor.active.anim = 160 The animation for before choosing you character around the slot
p1.cursor.done.anim = 161 And after choosing
p1.cursor.move.snd = 100,0 Sound when moving
p1.cursor.done.snd = 100,1 sound when selecting
p1.random.move.snd = 100,0 Sound when on the random select slots. The 6 things above are the same for player 2
p2.cursor.startcell = 0,21
p2.cursor.active.anim = 170
p2.cursor.done.anim = 171
p2.cursor.blink = 1       
p2.cursor.move.snd = 100,0
p2.cursor.done.snd = 100,1
p2.random.move.snd = 100,0
random.move.snd.cancel = 0
stage.move.snd = 100,0 Obvious?
stage.done.snd = 100,1 See above.
cancel.snd = 100,2 And again
portrait.offset = 0,0 Where the portrait will appear in the slot. Normally 0,0
portrait.scale = 1,1 Most small portraits are 25 by 25 pixels, so depending on your cell size you may need to increase or decrease these numbers. Best worked out with trial and error in my experiences.
title.offset = 319,13 Where your game mode will be written. You can delete this line and the next if you don't want it written anywhere.
title.font = 3,0,0
;Big portraits
p1.face.offset = 1,340 Position of your big portrait
p1.face.scale = 1,1 Its scale
p1.face.facing = 1 This is either 1 or -1 depending on which way you want the big portrait to face.
p2.face.offset = 639,340
p2.face.scale = 1,1
p2.face.facing = -1
;Name
p1.name.offset = 263,360 
p1.name.font = 3,4,-1     
p2.name.offset = 380,360
p2.name.font = 3,4,1
;Stage select
stage.pos = 320,450
stage.active.font = 3,0,0
stage.active2.font = 3,2,0 
stage.done.font = 3,0 That stuff is all obvious if you're following properly.

The team menu stuff is all very similar to normal stuff, the only differences being the icon section. Have a look at the sprites that are in the default mugen to see what they are and you'll understand straight away though.

;Team menu
teammenu.move.wrapping = 1
p1.teammenu.pos = 20, 360
;p1.teammenu.bg.spr =
p1.teammenu.selftitle.font = 3,0, 1
p1.teammenu.selftitle.text = Select team mode
p1.teammenu.enemytitle.font = 3,0, 1
p1.teammenu.enemytitle.text = Opponent team mode
p1.teammenu.move.snd = 100,0
p1.teammenu.value.snd = 100,0
p1.teammenu.done.snd = 100,1
p1.teammenu.item.offset = 0,20
p1.teammenu.item.spacing = 0,15
p1.teammenu.item.font = 3,0, 1
p1.teammenu.item.active.font = 3,3, 1
p1.teammenu.item.active2.font = 3,0, 1
p1.teammenu.item.cursor.offset = -10, 0
;p1.teammenu.item.cursor.anim = 180; ?
p1.teammenu.item.cursor.spr = 180,0
p1.teammenu.value.icon.offset = 60,1
p1.teammenu.value.icon.spr = 181,0
p1.teammenu.value.empty.icon.offset = 60,1
p1.teammenu.value.empty.icon.spr = 182,0
p1.teammenu.value.spacing = 6,0
;p2 team
p2.teammenu.pos = 619, 360
;p2.teammenu.bg.spr =
p2.teammenu.selftitle.font = 3,0, -1
p2.teammenu.selftitle.text = Select team mode
p2.teammenu.enemytitle.font = 3,0, -1
p2.teammenu.enemytitle.text = Opponent team mode
p2.teammenu.move.snd = 100,0
p2.teammenu.value.snd = 100,0
p2.teammenu.done.snd = 100,1
p2.teammenu.item.offset = 0,20
p2.teammenu.item.spacing = 0,15
p2.teammenu.item.font = 3,0, -1
p2.teammenu.item.active.font = 3,1, -1
p2.teammenu.item.active2.font = 3,0, -1
p2.teammenu.item.cursor.offset = 10, 0
;p2.teammenu.item.cursor.anim = 190; ?
p2.teammenu.item.cursor.spr = 190,0
p2.teammenu.value.icon.offset = -60,1
p2.teammenu.value.icon.spr = 191,0
p2.teammenu.value.empty.icon.offset = -60,1
p2.teammenu.value.empty.icon.spr = 192,0
p2.teammenu.value.spacing = -6,0

Special notes.
Say for instance you want to make a character selection box a bit like this:

You would need to make your rows and columns 6 in the coding and leave the boxes that are not there as blanks in the select.def (another lesson, maybe lesson 4).

The rest of the character select definition is to do with the background. Check lesson 1 for more information on backgrounds. It really is very similar/exactly the same.

[TAIMAT]

simple but deadly ... thank u

[ANGELM]

simple but deadly ... thank u

First, welcome to the forum. Make sure you read the rules.

Second, this topic is more than 30 days old. If you see a topic that is 30 days old or more, do not post there.

[MrSteve81]

Its posts like this that keep tutorial makers like me making tutorials. Thanks for the feedback Tiamat.

[carloskillar3675]

Well on my screenpack i shrunk my character select screen and my cursor is to big and everything is how i want it exept the character select is to big , do you know how i can change this

[MrSteve81]

You will need to shrink the cursor sprite using photoshop, or any other editor, and insert it into Fighter Factory using the same group and sprite numbers.