# Tutorials about the m.u.g.e.n engine

Learn how to set and customize your game

jump to navigation

## Title Screen with Layers! 20 20UTC June 20UTC 2009

Posted by mugencharacters in m.u.g.e.n.
add a comment
A “layer” is a layer of an image. Usually, in games, the Layers are used to separate the elements of interactivity with the character (and wider bars for example) or elements that comprise a title of the game design of the bottom (background). The technique of layers can be used in the mugen also, for example, make a screen with the logo of your game or assemble a scene where the characters are talking in the introduction or what your imagination allows course with patience and dedication.

Now we begin to put your hand in the mass: Show how to mount a screen with the logo of the game divided into layers. For parts:

~ PART 1 PREPARING THE IMAGES: ~

We separate the layers of Title 1. In this example we use:

a) a background (an image of 320 by 240 – Group 1): Fund to be used

b) The title itself (based on an image size that provides the background – Group 2): logo of the game

c) A message of “Press Start” (Two Images – Group 3): Create an image with nothing also and only with transparent background.

d) A notice of “Copyright” (A picture – Group 4): The famous “Produced by so-and-so and so …”

It is necessary that these images are prepared in PCX or BMP for use in Fighter Factory.
If you do not know how to give a look at the link below which will be of great use:

> LINK TO LEARN to make your images ready for use in MUGEN <

With everything ready to follow the second phase of the tutorial:

~ PART 2 – INSERTING THE IMAGES IN SFF: ~

Very well. Now put the images in the file “System.Sff” with the help of Fighter Factory.
Open fighter factory and go to “Sprite.” Click on this option, select “Open” and browse to the file in your mugen System.Sff. Finding the file open it and we will begin to insrir images.

Create 4 different groups for each layer to be used on the screen we are doing, ie: A group for background only, the other for the title of the game design, another for the message of “Press Start” and another for the message Copyrights.

“P0 # @! Not know Fighter Factory in the fuses right, that’s not gonna work …”

Ok, ok … You have not had the pleasure of seeing the classic “Basic Tutorial Super Mega Supreme Bolado Supimpa To Chuchú With Sauce Choy” the carnage as I. Let ’s: To make the groups click on the menu for sprites (to the left of the icon ” Animations “represented by a claquete film …) and then click the íconezinho the” Add “which is in that menu that appears. It is a white icon with the letters “PCX” written in blue.

“Black Heart Drugs do not think that in this Fighter Factory!”

Note the image is then the case is that …

Reduced: 63% of original size [803 x 609] – Click to view full image

After clicking this icon will open a screen that allows you to add more in a group or please add a picture to an existing group. Here we create. Note the following settings:

In “Group”:
Let the number of group sprite to be used.
It is the basis for the definition of Layers (Remember: The background here is a sprite from group 1).

In “Axis”:
Check “0.0″. This is because unless you know exactly where your image is going to be better to let the position go zeradas and then manually setting the height of the images on screen. I teach to make it more forward.

In “Image”:
Do not move, leave as is in 0,1,2,3,4 …

Also check the option “Crop automatically” if the image still needs some adjustments for the size is right and not “other space” in both file size and the size of it even (The larger the image and definition of it, the greater the Her size in bytes or megabytes. Once more the please also …)

In all right, look for the image to be added, and open it by clicking “OK” or double-click on it for even shorter work. Here in the example will use the groups 1, 2, 3 and 4 for each item you list in order. Remember that the group of “Press Start” message is this one more animation “empty” and only with transparent background. Do it for the purpose of creating flash.

~ PART 3 – PROGRAM: ~

Having added the images, we now plan to screen with the logo. Use a file called Logo.def that will be created with a simple notebook. Then create a notebook with that name inside the folder “data” of your mugen (where the files are sytem.def, and mugen.cfg etc …). Open the Notepad again and copy the code below (All) and paste it. Then save your notebook (use the shortcut CTRL + S to do this or Click “File” and then “Save”):

[SceneDef]
spr = system.sff
;—————————–
; Screen Title:
[Scene 0]

; Fade in:
fadein.time = 30; Time of appearance of the effect of fade in, as amior more you take the screen to appear
clearcolor = 0,0,0; Set here the color fade with 0,0,0 is black and 255,255,255 is white.

; Fade out:
; fadeout.time = 30; Time of appearance of the effect of fade in, as amior more you take the screen to appear
; clearcolor = 0,0,0; Set here the color fade with 0,0,0 is black and 255,255,255 is white.

; General position of all items on the screen:
layerall.pos = 0.0
; Above is the default position of all layers together (1 is the number 2 is horizontal and the vertical).
; If Mech here in a position to fuse together at once.

; Definition of Groups of Layers This screen (is only allowed to “layer9.anim” only):
layer0.anim = 1; Group Background In System.Sff
layer1.anim = 2; Group logo in the game System.Sff
layer2.anim = 3, Group of the “Press Start” in System.Sff
layer3.anim = 4; Group “All Rights Reserveds” in System.Sff

; BGM:
BGM = none.mp3; Set the music to be played on your title here. the music must be in the “date” too.
bgm.loop = 0; Here defines the music will start again when you finish (number 1) or not (number 0, which is as it is)

; Total Residence Time of Display:
end.time = 600; 600 ticks = 10 seconds to stay on the screen before going to the main menu or other screen.

; Logo On the game:
[Begin Action 1]
2,0,0,0, -1

; On “Press Start”:
[Begin Action 2]
3,0,0,0,12; Animation 1, “Press Start”
3,1,0,0,12; Animation 2, “Press Start” – nothing that will fund the animation go away and return ( “looping point)

; On “All Rights Reserved”
[Begin Action 3]
4,0,0,0, -1

; Enable Background:
[Begin Action 4]
1,0,0,0, -1

; OBS.1: To disable a “layer” just put a; before [Begin Action] (this is for example ->; [Begin Action 1])

; OBS.2: Layer 0 is always the bottom of the image. The Layer 1 is in front of Zero that is always behind the Layer 2 which is, always behind the layer 3 and so will … To change which image is in front of which simply change the number of them.

; OBS.3: The Fade out is the same as the fade in the end but for the time of the screen. Enable if you want.

;—————————–

Copied? Not this course not! She is not part of the code! Do not copy! Rsrsrs …
So continuing. As you can see, the code above is self explanatory. Before you crucify me will not say I’m not trying to say or assume that I made this code, because I have this gift. Part of this code is present in Logo.def file that is inside the folder Kfm the original Mugen. Anyone has access to it. The rest I learned from reading the docs Elecbyte even then I was watching “as was” the basis of trial and error.

“Ta, but man … I told you not bag Mugen and that no section of Layers,
whatever! Explains right there why not understand anything of what such a code saying ta! “

Po … I will not explain everything, because ta well explicadinho it (could it really is people …).
But I will explain how fuses in the position of each layer independently.
You noticed that each have 5 Begin Action figures? These numbers mean the following, from left to right:

1 and 2 – Numbers of the Group’s Animation / Layer in System.Sff. Example: The background is only an animation, then it will be 1.0 (Group 1, Zero Image)

3 & 4 – Modifying the Axes X & Y. These are numbers that indicate the position of the layer on the screen (1 is the number 2 is horizontal and the vertical)

5 – Time of stay of onscreen Layer defined in game ticks. If you put -1 in this number, as done in the layer of “all rights reserved,” the permanence of this is endless. Any image will disappear from the screen, where when the specified time of her stay in the same end.

Now that you know which elements change to change the position of layers …
We will not fuses them! Will be zero in the same! Why? Well ..
What for who invented the Fighter Factory? It was not to facilitate it? So let’s make good use of it:
Fuses for each layer independently go to the sprites again and find the group of animation you want to stand right on the screen. So I spoke earlier to leave the image positioned in 0.0 when you add it in the Fighter Factory.

We use the title as an example here: Once there just use the blue to go cetas positioning it on the screen. After making the changes that you think is the value of correct position for the screen, save the change to please (the button “Save” – a disquetezinho SFF blue with the letters in red pencil and a yellow …) and restart your Mugen. Note that the position title has changed. If not how you want to quit the game, return to the Fighter Factory and repeat the process until you have placed the image on the screen the way you want. That for all layers.

The final product will be something like:

This is the title screen of my game beta 1.2 I made using this system
I passed to you now!

Something important to say: To add a screen before or after this created (Type a screen with a logo of SNK already built it), simply use the same code but replacing the [Scene 0] by [Scene 1] to appear after that a screen or other [Scene 0] before the already set up a screen to appear before we create. For a screen with the names and stuff already on it, we need only one layer (layer0.anim) and begin action this layer only.

Well, that’s it. I hope this tutorial has been well explained and useful for learning how to use layers. Now just let their imaginations fly.

« newer posts