Infinity MUGEN Team

IMT Main => M.U.G.E.N Guides & Tutorials => Topic started by: OldGamer on September 26, 2017, 07:25:12 PM

Title: How to make a basic mugen ScreenPack 2019
Post by: OldGamer on September 26, 2017, 07:25:12 PM

Screen Pack Guide Part 1:
How to get setup and make a title Screen video guide

(click to show/hide)

the tools you need and website to see and go to

Google Drive Mugen Tools
https://drive.google.com/drive/folders/1q09TU0w6TYp5fcXaUKhtBLMpKkIM2khU?usp=sharing

Paint software free
https://www.dotpdn.com/downloads/pdn.html

Gimp 2.8.22
https://www.gimp.org/downloads/oldstable/

Bimp 1.18.1
https://github.com/alessandrofrancesconi/gimp-plugin-bimp/releases/tag/v1.18

Audacity Free software
https://www.fosshub.com/Audacity.html

Font charts
http://www.elecbyte.com/mugendocs-11b1/mugen.html#documentation

These code is to understand the Title Setting and what they can do for you

Code: [Select]

;-------------------------------------------------------------------
;Title screen definition
[Title Info]
fadein.time = 10
fadeout.time = 10
menu.pos = 159,158 <<<<<<<<<<<< these are to move all menu selection letters fonts
menu.item.font = 3,0,0     <<<<<<<<<<<<number font location
menu.item.active.font = 3,5,0 <<<<<<<<<<<<number font location
menu.item.spacing = 0, 13 <<<<<<<< spacing fonts letters
menu.itemname.arcade = "ARCADE" 
menu.itemname.versus = "VS MODE"
menu.itemname.teamarcade = "TEAM ARCADE"
menu.itemname.teamversus = "TEAM VS"
menu.itemname.teamcoop = "TEAM CO-OP"
menu.itemname.survival = "SURVIVAL"
menu.itemname.survivalcoop = "SURVIVAL CO-OP"
menu.itemname.training = "TRAINING"
menu.itemname.watch = "WATCH"
menu.itemname.options = "OPTIONS"
menu.itemname.exit = "EXIT"
menu.window.margins.y = 12, 8 <<<<<<<<<<< this tell how many item letter spacing control
menu.window.visibleitems = 5 <<<<<<<<<<<<<<< how many fonts want to show on the screen
menu.boxcursor.visible = 1     <<<<<<<<<<this  can remove or display the flashing bar icon and set to 0s turn its off
menu.boxcursor.coords = -58,-10,57,2 <<<<<<<<<<< control the size for the flashing box cursor
cursor.move.snd = 100,0 <<<<<<<<< this from sound fx for the system.def
cursor.done.snd = 100,1 <<<<<<<<< this from sound fx for the system.def
cancel.snd = 100,2 <<<<<<<<< this from sound fx for the system.def

;----------------------------
;Title background definition
[TitleBGdef]
bgclearcolor = 0,0,0

[TitleBG 0] ;black border <<<<<<<<<< code to show sprite normal or animation sprite on the screen display
type  = normal
spriteno = 1,0
start = 0, 0
mask = 0

[TitleBG 1] ;blue light bottom left
type  = anim <<<<<<<<<<<<<<<<<<<< this mean an sprite has animation see the image what they are and do
actionno = 4
start = -240, 160
mask = 1

(https://i.imgur.com/pT1qNmk.png)


Video Guide Part 2 : How to Add Option Screen animation and Add Bitmap fonts and Truetype Fonts

(click to show/hide)

Tools you need for this lesson two
https://drive.google.com/file/d/1SseFI7A4ciYXSyDfoWW19q8KbeKyE7uE/view?usp=sharing

text guide for font for option screen

(click to show/hide)

when you are trying to add a font for the option screen for mugen 1.0 and mugen 1.1 the Option runs on Option.def  and they use two type of fonts
 Truetype Fonts as TTF and other is Bitmap fonts as Sprite fonts variables

you have two chooses to add fonts

for Bitmap font they need to be at least 16x16 size and not by 8x8  you have to find fonts for that size or make your own Sprite fonts for them

The 3 main colors for the fonts to show in the option screen is WHITE,GREY OR YELLOW are aloud to be in the display color and need to be 256 bit of colors

when making your own Bitmap Sprite fonts they have to be index as png or pcx with the same color pallet

and you have to crop each letter with Gimp or Photoshop or Microsoft Paint

once you crop them you need to indexed them with your Image editor

next you need to come here because this is important
http://www.elecbyte.com/mugendocs-11b1/fonts.html#ascii-character-reference

that is a chart ascii-character-reference
Only characters from the ASCII character set are supported by bitmap fonts. The extended ASCII set is not supported. For a table of the ASCII character set, see "ASCII character reference" below.

Bitmap fonts must be accompanied by an SFF file that contains the sprites for the glyphs. Each character in the font maps to a sprite indexed by 0,<ASCII code> where <ASCII code> is the corresponding ASCII code for the character. For example, the character 'A' (ASCII code 65) maps to sprite 0,65. Zero is the group and sixtyfive is the index number display for fighter factory

Any character which does not have a corresponding sprite will not be rendered.

Bitmap fonts may contain one or more color banks. Each color bank maps to a palette stored in the SFF, and indexed by 0,<color bank number> where <color bank number> is a positive number. If during font rendering, an invalid color bank is specified, the palette of the first sprite in the SFF will be used.

Okay now how do you go about doing it ?
 1.first make your own fonts or draw them out it's your choose how do it

2. use any image editor to crop and index each character letter and symbols and numbers into pcx or png
(https://i.imgur.com/TAOPnp6.png)

3.first you need go to mugen font folder and find f-4x6.def  be sure to make a copy duplicate of its
just like this
(https://i.imgur.com/lN59WzS.png)

4.please keep your  copy f-4x6.def leave it there for now

5. go ahead and add your bitmap sprite characters in the fighter factory 3.0.1 that you already crop and indexed for them
be sure to save as Mugen 1.0 not mugen 1,1 and give a name as for Im going to name it BlueLettersOption save as SFF AND save it in the mugen font folder
(https://i.imgur.com/PtX0Rks.png)

6.now final delete the old options.def that in your mugen font folder and rename your copy f-4x6.def to options.def its should look like this
(https://i.imgur.com/mhOPATG.png)

7. next is you need to open your copy f-4x6.def as a notepad
don't be scared of the ugly text mess

8. scroll down and find  File = f-4x6.SFF and change it to whatever name you want give it, but as for me I'm going to change to  BlueLettersOption.sff its should look like this
(https://i.imgur.com/xYQYybh.png)

9 go to option,def Size = 3,6  and play with these value until you get right, BUT as I'm going to set my value to Size = 15,15 and the Spacing = 0,0 set it to
0,0 and Offset = 0,0 like this
(https://i.imgur.com/ASMWjZD.png)

After all said and done you can see the changes after and the before
Default option screen
(https://i.imgur.com/cFn5QJj.png)

Now before you add the Bitmap sprite on your Option screen its look like this now
(https://i.imgur.com/mDWSkwH.png)


if your not a artist and you don't know how to draw your own bitmap that mean you can always come here to make a auto make the font from here
http://arcade.photonstorm.com/

or here at sprite resources for premade fonts just be sure that the font are 16x16 be sure that the fonts is 16x16
https://www.spriters-resource.com/search/?q=fonts


BUT if your to DAM LAZY TO DO ALL THAT WORK
 there easy way and that Truetype font

with Truetype fonts you can resize them in the Option screen but also be sure that the font you choose is really TTF aka truetype fonts

JUST KEEP IN MIND THAT TRUETYPE FONT WON'T CHANGE COLORS FOR OPTION SCREEN
They can change color for other places in the screen pack but not on the Option screen, because they always stay as while color
 you can find a bunch of them here at dafont
https://www.dafont.com


to just add your truetype font
1. choose the truetype font you want and please put in the truetype font inside the mugen font folder
2. go inside your mugen font folder  and find Option.def
3. open the Option.def with notepad

you will see this Ugly mess of text and you find arial.ttf
(https://i.imgur.com/SwAwyNz.png)

once you find it you want to change the name, I'm going to use busterbit.ttf that I found on the datfont and I am going to change arial.ttf to busterbit.ttf
(https://i.imgur.com/08Y8zi8.png)

now only thing you need to play with is the font size and Size of font: width, height.  Only height is used for truetype fonts.
Size = 6,11 <<<<<<<<<< play with this until you got the perfect size for your option screen font fit right

here an example from after and before

Default Font after
(https://i.imgur.com/cFn5QJj.png)

Before I change it and fit the right type of SIZE
(https://i.imgur.com/PHqkKw8.png)

Video Guide Part 3: How to add a Mugen Screenpack's Versus & Victory Screen

(click to show/hide)

There no tools needed for this lesson 3

Video Guide Part 4:  How to add a Mugen Screenpack's Sounds & Select Screen

(click to show/hide)

no tools need it but you need an website for Sounds and Select sprite folder with wav sounds

Select sprite folder located here for the lesson
https://drive.google.com/file/d/1kDvNxPaFP7meQDwGBiisyLyE2UlqScIb/view?usp=sharing

Sound resources website
https://www.sounds-resource.com/

Video Guide Part 5:  How to add a Mugen Screenpack's Cursor & Team Menu Background

(click to show/hide)

Video Guide final Part 6:  How to add a Mugen Screenpack's Congrats & Continue Screen

(click to show/hide)

Title: Re: Complete Guide: How to make a Basic Mugen Screen packs for Beginners
Post by: OldGamer on September 26, 2017, 07:36:05 PM

the real reason why the video is long because Im trying to explain in easy understanding in baby sets on how to make a simple mugen screen pack for the mugen software. also if you feel this video guide is not for you please don't wasting your time. but if this video guide is for you . that mean you wanting to learn how to make your own screen pack.

Part 2 be coming soon  ::salute::

Title: Re: Complete Guide: How to make a Basic Mugen Screen packs for Beginners
Post by: OldGamer on September 27, 2017, 03:59:51 AM

Part 2 is done and part 3 is under way :w00t:

Title: Re: Complete Guide: How to make a Basic Mugen Screen packs for Beginners
Post by: OldGamer on September 27, 2017, 10:52:58 PM

 :o part 4 is done and now part 5 coming soon  :w00t:

Title: Re: Complete Guide: How to make a Basic Mugen Screen packs for Beginners
Post by: OldGamer on September 28, 2017, 08:19:18 PM

part 5 is done on to the next part 6  :w00t:

Title: Re: Complete Guide: How to make a Basic Mugen Screen packs for Beginners
Post by: O Ilusionista on September 29, 2017, 02:24:59 PM

Really thanks for all your hard work. Its very cool to see someone still making full tutorials for mugen.

Title: Re: Complete Guide: How to make a Basic Mugen Screen packs for Beginners
Post by: I-Skorp-I on September 29, 2017, 04:44:47 PM

OG YOU ARE F*CKIN* LEGIT! Word can't describe how appreciative we are for your hard work put into these tutorials!  O0 ^:)^

Title: Re: Complete Guide: How to make a Basic Mugen Screen packs for Beginners
Post by: OldGamer on September 29, 2017, 10:31:02 PM

Quote from: .:O Ilusionista:. on September 29, 2017, 02:24:59 PM

Really thanks for all your hard work. Its very cool to see someone still making full tutorials for mugen.

Thank you O Illusionista  ::salute:: also I just made Part 6 this something you might want take a look at How to add your own new font on the option screen is going blow your mind buddy and this will help you for your Full game's Option screen :D this time video is only 20 min long xD

Title: Re: Complete Guide: How to make a Basic Mugen Screen packs for Beginners
Post by: OldGamer on September 29, 2017, 10:33:21 PM

Quote from: I-Skorp-I on September 29, 2017, 04:44:47 PM

OG YOU ARE F*CKIN* LEGIT! Word can't describe how appreciative we are for your hard work put into these tutorials!  O0 ^:)^

I-Skorp-I  HI BUDDY And thanks man for the kind words  :thumbsup: I hope this help everyone  :w00t:

Title: Re: Complete Guide: How to make a Basic Mugen Screen packs for Beginners
Post by: OldGamer on September 30, 2017, 12:33:08 AM

part 6 is done and Part 7 is coming soon  :w00t:

Title: Re: Complete Guide: How to make a Basic Mugen Screen packs for Beginners
Post by: dev. on September 30, 2017, 04:47:11 AM

This is cool. I recorded the conversation we had years ago about screenpacks on skype and I still have it. It's helping me every time.

Title: Re: Complete Guide: How to make a Basic Mugen Screen packs for Beginners
Post by: OldGamer on October 02, 2017, 01:32:16 AM

Quote from: dev. on September 30, 2017, 04:47:11 AM

This is cool. I recorded the conversation we had years ago about screenpacks on skype and I still have it. It's helping me every time.

thank you  :w00t: also part 7 is done now its the part 8 coming soon  :w00t:

Title: Re: Complete Guide: How to make a Basic Mugen Screen packs for Beginners
Post by: OldGamer on October 03, 2017, 07:20:04 PM

Part 8 is done and Part 9 is coming soon  :w00t:

Title: Re: Complete Guide: How to make a Basic Mugen Screen packs for Beginners
Post by: O Ilusionista on November 21, 2018, 11:24:11 AM

Hey man, can you reupload those videos?

Title: Re: How to make a basic mugen ScreenPack 2019
Post by: OldGamer on September 18, 2019, 03:40:52 AM

New video and New updates

Title: Re: How to make a basic mugen ScreenPack 2019
Post by: OldGamer on September 18, 2019, 01:19:54 PM

part 2 is done part 3 coming soon  :w00t:

Title: Re: How to make a basic mugen ScreenPack 2019
Post by: OldGamer on September 19, 2019, 12:31:28 AM

part 3 is done and part 4 is coming soon

Title: Re: How to make a basic mugen ScreenPack 2019
Post by: OldGamer on September 19, 2019, 04:28:12 PM

part 4 is done and part 5 coming soon

Title: Re: How to make a basic mugen ScreenPack 2019
Post by: OldGamer on September 20, 2019, 08:24:09 PM

part 5 is done and final part 6 is coming soon

Title: Re: How to make a basic mugen ScreenPack 2019
Post by: OldGamer on September 21, 2019, 01:10:13 AM

the screen pac guide is now complete
 also

I would like to make clear that I went ahead and took all my time to get all this done to help everyone to understand and learn how to make your own screen pack if you have any other questions about regarding with the guide that I provide for you guys please let me know however I am not going out of my way to help fix your own troubleshoot but I will will help you and see and find out what is your problem when you're making your own screen pack I'll try to troubleshoot your problem and then tell you what you did wrong but then you have to fix it yourself after that that's the kind of support I will willing to do for anyone who wants to learn about screenpack please use simple words that I can understand do not use short-term questions that don't make no sense to me you have to be very clear and very detail what's your sentence so this way I can look and see what went wrong and I can give you the proper answer of yours troubleshooting when you're making your own screen pack

Title: Re: How to make a basic mugen ScreenPack 2019
Post by: MatreroG on September 28, 2019, 10:25:57 AM

Thanks again OG. When I have some free time I will start with my first attempts in this area  :)

Title: Re: How to make a basic mugen ScreenPack 2019
Post by: OldGamer on October 05, 2019, 03:22:53 AM

Quote from: MatreroG on September 28, 2019, 10:25:57 AM

Thanks again OG. When I have some free time I will start with my first attempts in this area  :)

:)