Post #1 · Posted at 2015-04-02 08:40:55pm 9 years ago
 Th3_Ov3rHell_3XoduZ | |
|---|---|
 |
Member |
| 313 Posts | |
 | |
| Reg. 2012-09-13 | |
| "ITG, The Best Dance Machine!" | |
Alright, this will be a Basic Theming Guide focused on people that want start Theming or anyone that has nothing or a little of Theming knowledge (likes me). I still being a beginner on Theming but I already know the enough necessary to start and make very nice themes. Ill make this guide using the Stepmania 5 Beta 4 (for me the best version)... Let's Starts!
NOTE: If you never has theming before, the best way to start is making a copy of the default theme as base, as I do, it can helps a lot. I am one of the people that think using the default theme can make very awesome themes. (From this theme appeared METRO QUAD
).
ELEMENTS OF A THEME:
On SM5 a Theme is composed by a number of determinates folders, each folders contains determinates elements of a theme, these main folders are the nexts:
[MY THEME]/BGAnimations
[MY THEME]/Fonts
[MY THEME]/Graphics
[MY THEME]/Languages
[MY THEME]/Other
[MY THEME]/Scripts
[MY THEME]/Sounds
And of course, we have 2 files inside of our theme folder, these ones are the following:
[MY THEME]/metrics.ini
[MY THEME]/ThemeInfo.ini
All the above corresponding to all the basics elements of a Theme, now I am going to explain each elements for a better understanding, I'm going to start with the main folders:
BGAnimation: This folder contains the elements that someone want to add to the theme, texts, textures, LUA scripts, etc. Here in short words, we use this folder to add almost all we want to the theme with completely freedom. But for that we need some elements from others Main Folders.
Q: But If I can add anything I want to the theme using this folder, How I organize the elements for example to a determinate Screen of my Theme?
A: The way that BGAnimation works is because we can organize the elements by subfolders, each subfolder is a determinate Screen of our theme, for example:
[BGAnimation]/ScreenTitleMenu decorations/
[BGAnimation]/ScreenSelectProfile decorations/
[BGAnimation]/ScreenSelectPlayMode decorations/
Likes this way all the elements inside "ScreenTitleMenu decorations" will appears only on that Screen inside the game, easy right? Ok, now look at the second part of "ScreenTitleMenu". In BGAnimation we have a little of variations of a Screen:
[BGAnimation]/ScreenTitleMenu decorations/ (decorations is one of some variatios that a screen can has at the moment of organize the elements for a better result). The most used and recommended variations are the following:
[BGAnimation]/ScreenTitleMenu decorations/
[BGAnimation]/ScreenTitleMenu overlay/
[BGAnimation]/ScreenTitleMenu underlay/
There are a few more but with those 3 we already can to start theming and add elements.
Q: So what are the differences between those three variations?
A: A variation works as organizer for each element we add to the screen.
ScreenTitleMenu decorations: This is the Main folder of the screen to start adding elements, but sometimes when we add a element for example a text, on the game, the text could appears below or over another element. This is because the order of the elements to be drawn in the screen.
If we have a Banner and then we add a text "SONG", is possible that sometimes the element text appears below the banner, so obviously the text will not be visible, that's why we have 2 more variations.
ScreenTitleMenu overlay: All the elements added here will appears over any elements on the screen, this folder works very well to organize the elements that always must be over to another element.
ScreenTitleMenu underlay: Similar to overlay but with the difference that everything added here by default will appears under any element of the screen.
EXAMPLE: We have a texture added on ScreenTitleMenu overlay and a text on ScreenTitleMenu underlay. The result will be that the text will appears under the image added on ScreenTitleMenu overlay because as default everything on overlay will appears at the top.
With this now we can understand what should be in underlay or overlay. a Background should be in underlay because all the others elements that suppose to be over a background must be in overlay.
So in shorts: At the moment to start adding elements to a determinate folder we have three variations that can handle better a determinate element. But, remember that is not mandatory that each screen of our theme must have those folders. If a screen is not necessary to add the underlay variation. We not create it.
Fonts: Basically this folder contains all the fonts that we are going to start to use on our Theme. There's a very useful tool to create the fonts textures to inmediatelly uses them on our theme.
Graphics: Similar as BGAnimations but with several differences, here we cant add new elemets as we can do on BGAnimations, basically all the elements inside the folder Graphics corresponding to the hardcoded elements. But of course we can add for example textures and then uses them from a file from BGAnimations. BGAnimations and Graphics can works very well together.
Languages: This contains the .ini files corresponding to the languagues availables that our theme can has.
Other: Commonly not used but only on certain moment.
Scripts: This is a very important folder and a part of our theme, here are all the scripts that our theme uses, here we need to know a little of LUA Scripting to start make scripts for our theme.
Sounds: Similar as Fonts but only for all the Sounds that our theme will has.
metrics and ThemeInfo.ini: Ill explain later but those files and the most important metrics.ini is the file that has all the information about how our theme will works. Here we can edit each part of our theme, change positions, change properties, etc.
STARTING TO ADD ELEMENTS TO OUR THEME:
Here I will explain how we can add different type of elements to our theme, of course here we are going to start using BGAnimations. Alright, make a copy of the default theme or if you already have a theme use that one of course.
In this part I'll explain how to add textures, texts, basic scripts, etc. And understanding the commands we can uses for each type of elements. We first must to know what we want to add, so for start I'm going to add a simple text. I'll choose ScreenSelectMusic that corresponding to the screen where we choose a song.
NOTE: There's two way of make a variation of a screen, a folder as I have already explained or automatically a file:
AS A FILE: [BGAnimations]/ScreenSelectMusic overlay.lua
AS A FOLDER: [BGAnimations]/ScreenSelectMusic overlay/default.lua
If our variation is a folder, the first file that must contain is default.lua (This is the file that will control all we add to the Screen inside that variation).
IMPORTANT NOTE: On SM5 is very important that each type of element must be a determinate type of file, this means that a texture/image must be a .PNG file, a Sound element must be a .OGG sound file, a file where we add all the elements or a Script must be a .LUA file.
Of Let's start to add something:
I recommended uses NOTEPAD++ at the moment to start Theming, this is very important. Ok using NOTEPAD++ I'm going to create a file inside ScreenSelectMusic overlay, as this is a folder, the file inside is default.lua:
RESULT: ScreenSelectMusic overlay/default.lua
To Start adding elements, we Open the default.lua and we start to adding the following:
In each file you create on a overlay or underlay variation the default.lua should start with the first line local t = Def.ActorFrame{}; and the last one return t. Now all what we want to add must be between that two lines. VERY IMPORTANT!
Ok, I'll add a Simple Text, the syntax for this type of elements is the following:
The Result should be this:
USEFUL LINKS: HERE you can understand what does each command and how to use it. Click the link and expand "CLASS Actor".
Alright, now I'm going to add a simple texture, the syntax is the following:
Is important to say that if we are going to add a texture, that texture that is a PNG file, must be in the same folder for make it easy.
The Result should be:
Like those ways you can add differents elements to a screen, of course if we want to add for example a LUA script, we need to know a little of basic LUA. The lnik above contains all the codes we can use to Theming in SM5 with LUA.
Explain LUA for me is already hard, but add very simple scripts function is not hard. I'm going to add a simple script that will show the current gametype, this means if we are playing dance or pump for example.
In the same file we write this:
Ok, at this part, You should be able to understand how a theme is composed and how add determinate elements. I hope this can start as the FIRST STEP! If you need help in a determinate section. You can Start to ask in the comments, Also Here in ZiV are very professional Theme Makers!
NOTE: If you never has theming before, the best way to start is making a copy of the default theme as base, as I do, it can helps a lot. I am one of the people that think using the default theme can make very awesome themes. (From this theme appeared METRO QUAD
).ELEMENTS OF A THEME:
On SM5 a Theme is composed by a number of determinates folders, each folders contains determinates elements of a theme, these main folders are the nexts:
[MY THEME]/BGAnimations
[MY THEME]/Fonts
[MY THEME]/Graphics
[MY THEME]/Languages
[MY THEME]/Other
[MY THEME]/Scripts
[MY THEME]/Sounds
And of course, we have 2 files inside of our theme folder, these ones are the following:
[MY THEME]/metrics.ini
[MY THEME]/ThemeInfo.ini
All the above corresponding to all the basics elements of a Theme, now I am going to explain each elements for a better understanding, I'm going to start with the main folders:
BGAnimation: This folder contains the elements that someone want to add to the theme, texts, textures, LUA scripts, etc. Here in short words, we use this folder to add almost all we want to the theme with completely freedom. But for that we need some elements from others Main Folders.
Q: But If I can add anything I want to the theme using this folder, How I organize the elements for example to a determinate Screen of my Theme?
A: The way that BGAnimation works is because we can organize the elements by subfolders, each subfolder is a determinate Screen of our theme, for example:
[BGAnimation]/ScreenTitleMenu decorations/
[BGAnimation]/ScreenSelectProfile decorations/
[BGAnimation]/ScreenSelectPlayMode decorations/
Likes this way all the elements inside "ScreenTitleMenu decorations" will appears only on that Screen inside the game, easy right? Ok, now look at the second part of "ScreenTitleMenu". In BGAnimation we have a little of variations of a Screen:
[BGAnimation]/ScreenTitleMenu decorations/ (decorations is one of some variatios that a screen can has at the moment of organize the elements for a better result). The most used and recommended variations are the following:
[BGAnimation]/ScreenTitleMenu decorations/
[BGAnimation]/ScreenTitleMenu overlay/
[BGAnimation]/ScreenTitleMenu underlay/
There are a few more but with those 3 we already can to start theming and add elements.
Q: So what are the differences between those three variations?
A: A variation works as organizer for each element we add to the screen.
ScreenTitleMenu decorations: This is the Main folder of the screen to start adding elements, but sometimes when we add a element for example a text, on the game, the text could appears below or over another element. This is because the order of the elements to be drawn in the screen.
If we have a Banner and then we add a text "SONG", is possible that sometimes the element text appears below the banner, so obviously the text will not be visible, that's why we have 2 more variations.
ScreenTitleMenu overlay: All the elements added here will appears over any elements on the screen, this folder works very well to organize the elements that always must be over to another element.
ScreenTitleMenu underlay: Similar to overlay but with the difference that everything added here by default will appears under any element of the screen.
EXAMPLE: We have a texture added on ScreenTitleMenu overlay and a text on ScreenTitleMenu underlay. The result will be that the text will appears under the image added on ScreenTitleMenu overlay because as default everything on overlay will appears at the top.
With this now we can understand what should be in underlay or overlay. a Background should be in underlay because all the others elements that suppose to be over a background must be in overlay.
So in shorts: At the moment to start adding elements to a determinate folder we have three variations that can handle better a determinate element. But, remember that is not mandatory that each screen of our theme must have those folders. If a screen is not necessary to add the underlay variation. We not create it.
Fonts: Basically this folder contains all the fonts that we are going to start to use on our Theme. There's a very useful tool to create the fonts textures to inmediatelly uses them on our theme.
Graphics: Similar as BGAnimations but with several differences, here we cant add new elemets as we can do on BGAnimations, basically all the elements inside the folder Graphics corresponding to the hardcoded elements. But of course we can add for example textures and then uses them from a file from BGAnimations. BGAnimations and Graphics can works very well together.
Languages: This contains the .ini files corresponding to the languagues availables that our theme can has.
Other: Commonly not used but only on certain moment.
Scripts: This is a very important folder and a part of our theme, here are all the scripts that our theme uses, here we need to know a little of LUA Scripting to start make scripts for our theme.
Sounds: Similar as Fonts but only for all the Sounds that our theme will has.
metrics and ThemeInfo.ini: Ill explain later but those files and the most important metrics.ini is the file that has all the information about how our theme will works. Here we can edit each part of our theme, change positions, change properties, etc.
STARTING TO ADD ELEMENTS TO OUR THEME:
Here I will explain how we can add different type of elements to our theme, of course here we are going to start using BGAnimations. Alright, make a copy of the default theme or if you already have a theme use that one of course.
In this part I'll explain how to add textures, texts, basic scripts, etc. And understanding the commands we can uses for each type of elements. We first must to know what we want to add, so for start I'm going to add a simple text. I'll choose ScreenSelectMusic that corresponding to the screen where we choose a song.
NOTE: There's two way of make a variation of a screen, a folder as I have already explained or automatically a file:
AS A FILE: [BGAnimations]/ScreenSelectMusic overlay.lua
AS A FOLDER: [BGAnimations]/ScreenSelectMusic overlay/default.lua
If our variation is a folder, the first file that must contain is default.lua (This is the file that will control all we add to the Screen inside that variation).
IMPORTANT NOTE: On SM5 is very important that each type of element must be a determinate type of file, this means that a texture/image must be a .PNG file, a Sound element must be a .OGG sound file, a file where we add all the elements or a Script must be a .LUA file.
Of Let's start to add something:
I recommended uses NOTEPAD++ at the moment to start Theming, this is very important. Ok using NOTEPAD++ I'm going to create a file inside ScreenSelectMusic overlay, as this is a folder, the file inside is default.lua:
RESULT: ScreenSelectMusic overlay/default.lua
To Start adding elements, we Open the default.lua and we start to adding the following:
Quote: default.lua
local t = Def.ActorFrame{};
return t
return t
In each file you create on a overlay or underlay variation the default.lua should start with the first line local t = Def.ActorFrame{}; and the last one return t. Now all what we want to add must be between that two lines. VERY IMPORTANT!
Ok, I'll add a Simple Text, the syntax for this type of elements is the following:
Quote: default.lua (Adding a Text element)
local t = Def.ActorFrame{};
t[#t+1] = LoadFont("HERE YOU PUT THE FONT NAME (ALWAYS IN QUOTES)")..{
Name="THE ELEMENT NAME (ALWAYS IN QUOTES)"; (optional)
Text="THE TEXT YOU WANT (ALWAYS IN QUOTES)";
InitCommand=cmd(HERE YOU PUT THE INITIAL COMMANDS THAT WILL AFFECT THIS ACTOR);
OnCommand=cmd(HERE YOU PUT THE ON SCREEN COMMANDS FOR THE ACTOR); (Optional)
OffCommand=cmd(HERE YOU PUT THE OFF SCREEN COMMANDS FOR THE ACTOR); (Optional)
};
return t
t[#t+1] = LoadFont("HERE YOU PUT THE FONT NAME (ALWAYS IN QUOTES)")..{
Name="THE ELEMENT NAME (ALWAYS IN QUOTES)"; (optional)
Text="THE TEXT YOU WANT (ALWAYS IN QUOTES)";
InitCommand=cmd(HERE YOU PUT THE INITIAL COMMANDS THAT WILL AFFECT THIS ACTOR);
OnCommand=cmd(HERE YOU PUT THE ON SCREEN COMMANDS FOR THE ACTOR); (Optional)
OffCommand=cmd(HERE YOU PUT THE OFF SCREEN COMMANDS FOR THE ACTOR); (Optional)
};
return t
The Result should be this:
Quote: default.lua (Adding a Text element)
local t = Def.ActorFrame{};
t[#t+1] = LoadFont("Common Normal")..{
Name="Test Text";
Text="Hello World!";
InitCommand=cmd(x,SCREEN_CENTER_X;y,SCREEN_CENTER_Y);
OnCommand=cmd(zoom,0.5);
};
return t
t[#t+1] = LoadFont("Common Normal")..{
Name="Test Text";
Text="Hello World!";
InitCommand=cmd(x,SCREEN_CENTER_X;y,SCREEN_CENTER_Y);
OnCommand=cmd(zoom,0.5);
};
return t
USEFUL LINKS: HERE you can understand what does each command and how to use it. Click the link and expand "CLASS Actor".
Alright, now I'm going to add a simple texture, the syntax is the following:
Quote: default.lua (Adding a Texture/Image element)
local t = Def.ActorFrame{};
t[#t+1] = LoadActor("HERE YOU PUT THE NAME OF THE TEXTURE (ALWAYS IN QUOTES)")..{
Name="THE ELEMENT NAME (ALWAYS IN QUOTES)"; (optional)
InitCommand=cmd(HERE YOU PUT THE INITIAL COMMANDS THAT WILL AFFECT THIS ACTOR);
OnCommand=cmd(HERE YOU PUT THE ON SCREEN COMMANDS FOR THE ACTOR); (Optional)
OffCommand=cmd(HERE YOU PUT THE OFF SCREEN COMMANDS FOR THE ACTOR); (Optional)
};
return t
t[#t+1] = LoadActor("HERE YOU PUT THE NAME OF THE TEXTURE (ALWAYS IN QUOTES)")..{
Name="THE ELEMENT NAME (ALWAYS IN QUOTES)"; (optional)
InitCommand=cmd(HERE YOU PUT THE INITIAL COMMANDS THAT WILL AFFECT THIS ACTOR);
OnCommand=cmd(HERE YOU PUT THE ON SCREEN COMMANDS FOR THE ACTOR); (Optional)
OffCommand=cmd(HERE YOU PUT THE OFF SCREEN COMMANDS FOR THE ACTOR); (Optional)
};
return t
Is important to say that if we are going to add a texture, that texture that is a PNG file, must be in the same folder for make it easy.
The Result should be:
Quote: default.lua (Adding a Texture/Image element)
local t = Def.ActorFrame{};
t[#t+1] = LoadActor("My Image")..{
InitCommand=cmd(x,SCREEN_LEFT+120;y,SCREEN_CENTER_Y);
OnCommand=cmd(zoomx,0.5;zoomy,0.9);
};
return t
t[#t+1] = LoadActor("My Image")..{
InitCommand=cmd(x,SCREEN_LEFT+120;y,SCREEN_CENTER_Y);
OnCommand=cmd(zoomx,0.5;zoomy,0.9);
};
return t
Like those ways you can add differents elements to a screen, of course if we want to add for example a LUA script, we need to know a little of basic LUA. The lnik above contains all the codes we can use to Theming in SM5 with LUA.
Explain LUA for me is already hard, but add very simple scripts function is not hard. I'm going to add a simple script that will show the current gametype, this means if we are playing dance or pump for example.
In the same file we write this:
Quote: default.lua (Adding a LUA element)
local t = Def.ActorFrame{};
-- This will get the current Gametype. Again, use the above link to find all those codes.
local Gametype = GAMESTATE:GetCurrentGame():GetName()
t[#t+1] = LoadFont("Common Normal")..{
Name="Gametype";
-- Due to this is a variable, Gametype in Text=""; Should be NOT IN QUOTES!
Text=Gametype;
InitCommand=cmd(x,SCREEN_CENTER_X;y,SCREEN_CENTER_Y);
OnCommand=cmd(zoom,0.5);
};
return t
-- This will get the current Gametype. Again, use the above link to find all those codes.
local Gametype = GAMESTATE:GetCurrentGame():GetName()
t[#t+1] = LoadFont("Common Normal")..{
Name="Gametype";
-- Due to this is a variable, Gametype in Text=""; Should be NOT IN QUOTES!
Text=Gametype;
InitCommand=cmd(x,SCREEN_CENTER_X;y,SCREEN_CENTER_Y);
OnCommand=cmd(zoom,0.5);
};
return t
Ok, at this part, You should be able to understand how a theme is composed and how add determinate elements. I hope this can start as the FIRST STEP! If you need help in a determinate section. You can Start to ask in the comments, Also Here in ZiV are very professional Theme Makers!
Post #2 · Posted at 2015-04-02 09:35:10pm 9 years ago
| Engine_Machiner | |
|---|---|
 |
Member |
| 222 Posts | |
 | |
| Reg. 2014-01-16 | |
| "～The message～" | |
Hooray! Thank you so much for taking my request!
Post #3 · Posted at 2015-04-02 09:37:58pm 9 years ago
| Th3_Ov3rHell_3XoduZ | |
|---|---|
|
Member |
| 313 Posts | |
| | |
| Reg. 2012-09-13 | |
| "ITG, The Best Dance Machine!" | |
Quote: Engine_Machiner
Hooray! Thank you so much for taking my request!
Yor are welcome!
Post #4 · Posted at 2015-04-02 10:48:10pm 9 years ago
I have a question. How can I change the font of the ScreenTitleMenu? I'm using fallback.
Tengo una pregunta. Como puedo cambiar la "font" del ScreenTitleMenu. Estoy usando fallback.
Tengo una pregunta. Como puedo cambiar la "font" del ScreenTitleMenu. Estoy usando fallback.
Post #5 · Posted at 2015-04-03 01:33:58am 9 years ago
| Th3_Ov3rHell_3XoduZ | |
|---|---|
|
Member |
| 313 Posts | |
| | |
| Reg. 2012-09-13 | |
| "ITG, The Best Dance Machine!" | |
Quote: Engine_Machiner
I have a question. How can I change the font of the ScreenTitleMenu? I'm using fallback.
Tengo una pregunta. Como puedo cambiar la "font" del ScreenTitleMenu. Estoy usando fallback.
Tengo una pregunta. Como puedo cambiar la "font" del ScreenTitleMenu. Estoy usando fallback.
I dont recommend theming from fallback actually and change the font from what element exactly? You can try editing the file Common Normal located in the Fonts Folder
Post #6 · Posted at 2015-04-03 08:05:14pm 9 years ago
| Engine_Machiner | |
|---|---|
|
Member |
| 222 Posts | |
| | |
| Reg. 2014-01-16 | |
| "～The message～" | |
¿Cual es la herramienta para crear "fonts"?
Post #7 · Posted at 2015-04-03 09:12:14pm 9 years ago
| Th3_Ov3rHell_3XoduZ | |
|---|---|
|
Member |
| 313 Posts | |
| | |
| Reg. 2012-09-13 | |
| "ITG, The Best Dance Machine!" | |
Quote: Engine_Machiner
¿Cual es la herramienta para crear "fonts"?
Texture Font Generator, it is includes in the Stepmania 5 installer.
Post #8 · Posted at 2015-04-03 09:37:03pm 9 years ago
| Engine_Machiner | |
|---|---|
|
Member |
| 222 Posts | |
| | |
| Reg. 2014-01-16 | |
| "～The message～" | |
Por ejemplo en "metrics.ini" encuentro (ChoiceOptions="screen,ScreenOptionsService;text,Options") ¿Sabes como puedo cambiar el "text" para que me reconozca la "font"?
Post #9 · Posted at 2015-04-03 09:38:45pm 9 years ago
| Th3_Ov3rHell_3XoduZ | |
|---|---|
|
Member |
| 313 Posts | |
| | |
| Reg. 2012-09-13 | |
| "ITG, The Best Dance Machine!" | |
Quote: Engine_Machiner
Por ejemplo en "metrics.ini" encuentro (ChoiceOptions="screen,ScreenOptionsService;text,Options") ¿Sabes como puedo cambiar el "text" para que me reconozca la "font"?
Esa parte no tiene nada que ver con el tipo de fuente, text,Options significa el texto que se le esta asignando a esa linea.
Post #10 · Posted at 2015-04-09 03:54:11pm 9 years ago
| Musashi | |
|---|---|
 |
Member |
| 108 Posts | |
 | |
| Reg. 2014-05-03 | |
This thread should prove helpful to anyone wanting a particular theme. I would also encourage new themers to check out my journey into Stepmania 5 theming here: http://zenius-i-vanisher.com/v5.2/viewthread.php?threadid=6728&&page=1