Theme Tutorial for OITG/NITG

There's always a lot of people that ask me how do i make themes.

This can relate to Simply Love Gooder (Jose's Unofficial Visual Modificiation), which is a visual overhaul I did of Simply Love by Mad Matt and hurtpiggypig.
So, in this page i'll explain how to make a simple theme so you can start theming. When i start writing it.
Keep in mind that this page will be updated as i can, school is preventing me from doing it every 20 minutes, but im trying my best.

The first thing you will need to do, is to create a folder inside of the "Themes" directory in your OITG/NITG folder.

OITG/NITG Folder/Themes


Fallback
default
Love
SIMPLY LOVE GOODER (Jose's Unofficial Visual Modification)
GrooveNights
Meat
My Theme


After that, create a metrics.ini (all lowercase) and add the following.

[Global]
Fallback=Fallback

[Common]
ColorP1=@PlayerColor(PLAYER_1)
ColorP2=@PlayerColor(PLAYER_2)
InitialScreen=ScreenTitleMenu
WindowTitle=Test Theme
DefaultModifiers=2.5x, Overhead, Metal
DefaultCpuModifiers=robot
DifficultiesToShow=beginner,easy,medium,hard,challenge
CourseDifficultiesToShow=regular,difficult
StepsTypesToHide=dance-couple,dance-solo,lights-cabinet
ScreenWidth=640
ScreenHeight=480


On this, we are setting up several elements to start.
- ColorP1 and ColorP2 are the colors that are going to be used for the players.
- InitialScreen Will call which screen will be the first to load when you start OITG/NITG.
- Window Title Is the name of the theme. It will also be displayed as the title of the window.
- DefaultModifiers Is the default modifiers that will be applied everytime you start the game. You can change this as you like.
- DefaultCpuModifiers The default modifiers for the CPU that will use on Battle Mode if a second player is not available.
- DifficultiesToShow The difficulties that are shown on the difficulty list, when you select a song.
- CourseDifficultiesToShow The difficulties that are shown on the difficulty list, only on Marathon Mode.
- StepsTypesToHide Here you can specify which steps are not going to be shown in your theme. It is useful if you're not going to use steps that you don't want to be played on your theme, like lights. You can see a list of the existing step types in Sora's Doc. StepsType
- ScreenWidth and ScreenHeight set the Width and Height that you can use to work with the theme. I recommend not changing them, due to the fact that most OITG/NITG files work with 480p themes (640x480 in this case) and changing these values can lead to horrifying results and most files being totally unplayable.

Also you will need to create several folders which will be the following:

OITG/NITG Folder/Themes/Your Theme



BGAnimations
Graphics
Sounds
Scripts
Metrics.ini

These folders are going to be useful later for the next chapters.
So, now that we setup the folder, its time to see it running!
So now go to your Data folder of your OITG/NITG and open GamePrefs.ini
It will look like this.

[Options]
Game=dance

[dance]
Announcer=
DefaultModifiers=2.5x, Overhead, Contrast
Theme=Default


To load your theme at the moment you start the game, change the Theme tag to the name of the folder of your theme.

Theme=My Theme

At the moment you boot up OITG/NITG, you'll see that the default theme appears.


Don't get mad, since it means that Stepmania was able to detect the theme. You can see that by the Window Title you set on Metrics.ini.

So, the next thing you'll want to do, is to create your first screen.


To do this, think of the name of the screen, and then create a folder or simple .xml with the name of the screen + overlay/underlay/background (The overlay/underlay/background tag must be in lowercase), in BGAnimations.

ScreenHello overlay.xml


The order of a screen will always go like this:


The overlay will always be on top of the last one.

So, let's begin with the new screen and add a hello!

<ActorFrame><children>
  <Layer
        Font="Common Normal"
        Text="Hello!"
        OnCommand="%function(self)
        self:x(SCREEN_CENTER_X)
        self:y(SCREEN_CENTER_Y)
        end"
  />
</children></ActorFrame>


After you've done this, you need to add something extra to your metrics.ini, which is essenciatly what defines the screen.
So, we're gonna make the Hello! screen be a Choice-Based screen, by making it's class ScreenSelectMaster.


[ScreenHello]
Class=ScreenSelectMaster
Fallback=ScreenSelectMaster
TimerSeconds=0
PrevScreen=ScreenOptionsMenu
ChoiceNames=1
Choice1=screen,ScreenTitleMenu
ChoiceOnCommand=zoom,0
HelpOnCommand=hidden,1


Now, to try this new screen, we need to make the game enter it, but since we haven't made a choice that directly sends us to the menu in-game yet, we're gonna make it boot to it!
So, for now, we're gonna change the InitialScreen to this:


FirstAttractScreen=ScreenTitleMenu
InitialScreen=ScreenHello

Once you're done with that, we're gonna reload the game, and upon bootup, you should see the "Hello!" you inserted.