 |
|
The text below is a written version of the video above, choose whichever you find easier to follow.
Extra note: If you experience errors after copying the codes highlighted yellow it may be because the indents of the text get published as spaces instead of tabs, you will need to delete all of these spaces and indent it properly in your text editor.
=== TUTORIAL #4 ===
Text and Variables
— Step 1: Understanding Variables
Variables in their simplest forms are words that have been declared as capable of holding words and numbers within them, in the case of foregrounds you don’t need to go through any processes of declaring them, you just need to tell the game what to do with whatever variable you make.
The first thing to do is to open up your default.xml file and instead of making a layer, we will make a bitmap text tag between your children tags.
The file you select will be a system font, more often than not the font listed below is used across all themes.
<BitmapText
File="_eurostile normal"
Text="Your Text Here"
InitCommand=""
/>
In order for variables to be declared we need to change the structure of the commands we use, we will be changing the command to a LUA function.
This example shows that a function targeting itself starts when the InitCommand starts, 2 lines below that indicates that the function has ended followed by the quotes to close the whole command off.
<BitmapText
File="_eurostile normal"
Text="Your Text Here"
InitCommand="%function(self)
end"
/>
Everything written between the start of the function and “end” will be very similar to the horizontal sequencing of a regular command, except it lists vertically.
Let’s say we want to write “x,320;y,240;linear,5;x,0;y,100;” using this new method, it would look like this.
<BitmapText
File="_eurostile normal"
Text="Your Text Here"
InitCommand="%function(self)
self:x(320);
self:y(240);
self:linear(5);
self:x(0);
self:y(100);
end"
/>
— Step 2: Setting Text and Variables
Now that you understand the formatting of functions and how variables work, now it’s time to work with variables.
Let’s say you want to make a timer that increases by 1 every 0.1 seconds, you can do that by bouncing an increasing variable between commands.
<BitmapText
File="_eurostile normal"
Text="Your Text Here"
InitCommand="%function(self)
TimerVar = 0;
self:sleep(0.1);
self:queuecommand('Bouncer');
end"
BouncerCommand="%function(self)
TimerVar = TimerVar + 1;
self:sleep(0.1);
self:queuecommand('Bouncer2');
end"
Bouncer2Command="%function(self)
TimerVar = TimerVar + 1;
self:sleep(0.1);
self:queuecommand('Bouncer');
end"
/>
The next step from here is showing the variable in your text, this is performed with the settext command.
Setting the text equal to the variable immediately after it is changed achieves a timer effect.
<BitmapText
File="_eurostile normal"
Text="Your Text Here"
InitCommand="%function(self)
TimerVar = 0;
self:settext(TimerVar);
self:sleep(0.1);
self:queuecommand('Bouncer');
end"
BouncerCommand="%function(self)
TimerVar = TimerVar + 1;
self:settext(TimerVar);
self:sleep(0.1);
self:queuecommand('Bouncer2');
end"
Bouncer2Command="%function(self)
TimerVar = TimerVar + 1;
self:settext(TimerVar);
self:sleep(0.1);
self:queuecommand('Bouncer');
end"
/>
You should now understand the majority of how to make basic foregrounds, the rest is up to you!
Everything beyond this is a matter of research; there are many more parameters, tweens, functions and conditions to learn but this covers the basics and the majority of what you need to work with.
If you need to know more, take a look at any Stepmania or ITG theme, they are all made the exact same way.
Alternatively, here is a great source of commands for you to tinker with. A lot of it is fairly undocumented but in the same sense a lot of it is fairly self explanatory:
http://kki.ajworld.net/wiki/Commands:Main
|
|
The text below is a written version of the video above, choose whichever you find easier to follow.
Extra note: If you experience errors after copying the codes highlighted yellow it may be because the indents of the text get published as spaces instead of tabs, you will need to delete all of these spaces and indent it properly in your text editor.
=== TUTORIAL #3 ===
Animated Sprites
— Step 1: Understanding Sprites
Sprites in Stepmania and OpenITG are text files that reference parts of an image in succession to make an animation.
The first thing you need to do is open a new text file in Notepad and “Save As…” spritename.sprite into your “animations” folder.
Go back into your default.xml file and change the file to the name of your new sprite file.
<Layer
File="nyancat.sprite"
InitCommand=""
/>
Now that stepmania will be referencing the sprite file instead, open it up in notepad and enter the following, it won’t mean a lot yet but will be used later.
[Sprite]
Texture=spritesheet 1x1
Frame0000=0
Delay0000=0.5
Noting [Sprite] at the top of the file allows Stepmania and OpenITG to recognise how to use the file.
The texture is the spritesheet you are going to be using, the 1×1 represents the number of frames across, and down there are.
Frame0000 is the first frame the sprite file has been programmed to show, in this case it shows frame 0 which is the first frame in the spritesheet.
Delay0000 is the delay time for the frame above, in this case it means Frame0000 will be on screen for 0.5 seconds.
Now that you understand all of the different parts you will need to make a spritesheet.
— Step 2: Creating Spritesheets
If you aren’t savvy with image editing this part may be tricky, I will show my method briefly.
Frame by frame in flash I position my images in the center of a box that is significantly bigger than my image.
Once all of my frames are in place I export as a PNG sequence to a new folder.
I open GraphicsGale and import multiple files in one hit and click sort.
I see how the animation looks in GraphicsGale’s preview and then export it combining all of the frames as a PNG with alpha channel.
I then open the image in photoshop and magic wand the background out so that only a sprite remains.
Once saved, I copy the file into the animations folder.
By now after using whatever method you have decided suits you, you should have a large image with all of the frames shown in a grid-like fashion.
In order for the spritesheet to work properly every frame needs to be the same size which is why combining them all through my method always works.
Rename your image to anything you want, in my case it’s nyansheet.
After renaming your file open it and count the number of frames going across and the number of frames going down.
In my case my image has 1 frame going across and 8 frames going down.
Rename your image again to the same name as before but place a space followed by your frames across x frames down.
My Example: nyansheet 1×8.png
Your spritesheet is now done, the final step is getting your .sprite file to reference the sheet.
— Step 3: Animating your Sprite
You need to change the texture to the name of your spritesheet.
[Sprite]
Texture=nyansheet 1x8
Frame0000=0
Delay0000=0.1
For each frame you want to show, you need to add and increase the frame and delay numbers, then next to each instance you enter the which frame of the image you want to display and how long you want the frame to be on screen for.
[Sprite]
Texture=nyansheet 1x8
Frame0000=0
Delay0000=0.07
Frame0001=1
Delay0001=0.07
Frame0002=2
Delay0002=0.07
Frame0003=3
Delay0003=0.07
Frame0004=4
Delay0004=0.07
Frame0005=5
Delay0005=0.07
Frame0006=6
Delay0006=0.07
Frame0007=7
Delay0007=0.07
Frame0008=8
Delay0008=0.07
Frame0009=9
Delay0009=0.07
Frame0010=10
Delay0010=0.07
Frame0011=11
Delay0011=0.07
Save your sprite file and test it out.
Once the sequence reaches the final frame and delay the game knows to jump back up to the top and continuously loop it.
Jumping back to your default.xml file you can now proceed to add any of your positioning and movements that will help make the animated sprite look even better.
<Layer
File="nyancat.sprite"
InitCommand="x,900;y,240;linear,5;addx,-1800;"
/>
If you have been following me up to this point you will now know how to create spritesheets, get sprite files to reference them and get your default.xml file to reference the sprite files.
Tune in next time when we learn how to use variables and display text.
|
|
The text below is a written version of the video above, choose whichever you find easier to follow.
Extra note: If you experience errors after copying the codes highlighted yellow it may be because the indents of the text get published as spaces instead of tabs, you will need to delete all of these spaces and indent it properly in your text editor.
=== TUTORIAL #2 ===
Common Commands
— Step 1: Learn common parameters and tweens
You know how to change parameters and you have learned the sleep tween from the previous tutorial.
Here are some of the more common ones you’ll come to use.
Parameter:
addx,200; adds to the file’s current X coordinate, the example will add 200 to whatever the coordinate was previously.
addy,300; adds to the file’s current Y coordinate, the example will add 300 to whatever the coordinate was previously.
diffusealpha,0.5; changes the file’s opacity where 1 is Opaque and 0 is Transparent, example demonstrates 50% transparent.
zoom,2; stretches the image, the example makes the image twice as big.
rotationz,30; rotates the file along the Z axis (screen), the example rotates the file to 30 degrees.
rotationy,180; rotates the file along the Y axis, the example flips the file horizontally
rotationx,180; rotates the file along the X axis, the example flips the file vertically
Tween:
linear,2; sets a transition between the first parameters set, and the parameters set afterward, the example has a 2 second transition.
accelerate,2; sets a slow to fast transition between the first parameters set, and the parameters set afterward, the example has a 2 second transition.
decelerate,2; sets a fast to slow transition between the first parameters set, and the parameters set afterward, the example has a 2 second transition.
— Step 2: Using Tweens
Think of a Tween like a transition between point A and point B over a certain period of time, all parameters set before a tween get changed to new values gradually if you set them again after the tween.
Continuing on from the example in the previous tutorial, we are going to clear the command.
<Layer
File="nyan.png"
InitCommand=""
/>
The first thing you should do is make a note of the effect you hope to achieve, using nyan cat I know that I need to have my file scroll across the screen.
This example starts the File’s X coordinate at 900, Y coordinate at 240, then it has a linear transition of 5 seconds before reaching its end point at X coordinate of -900 after taking 1800 from the starting X coordinate.
<Layer
File="nyan.png"
InitCommand="x,900;y,240;linear,5;addx,-1800;"
/>
But let’s say I want nyan cat to arc upwards and rotate a bit instead, but also gradually build speed…
This example starts the File’s X coordinate at 900, Y coordinate at 240, then it has a linear transition of 5 seconds before reaching its end point at X of -900, Y of 100 and a new rotation of 10 degrees.
<Layer
File="nyan.png"
InitCommand="x,900;y,240;accelerate,5;addx,-1800;rotationz,20;addy,-140;"
/>
Maybe I instead want to make nyan cat slow down gradually, shrink and disappear too.
This example does exactly that, try seeing if you can follow what happens.
<Layer
File="nyan.png"
InitCommand="x,900;y,240;decelerate,5;addx,-1800;rotationz,20;addy,-140;zoom,0.1;diffusealpha,0;"
/>
Stepmania and OpenITG will allow you to place up to 52 of these entries into a single command, the last example contained 8.
If you ever find that you are running out you can use playcommand.
This example does exactly the same thing except it is cut into 2 different commands, you have the freedom to name these commands however you wish so long as they aren’t global commands such as On, Off and Init.
<Layer
File="nyan.png"
InitCommand="x,900;y,240;playcommand,NyanSmash;"
NyanSmashCommand="decelerate,5;addx,-1800;rotationz,20;addy,-140;zoom,0.1;diffusealpha,0;"
/>
— Step 3: Do the same with ActorFrames
You can do the same commands inside an actorframe too, referring back to the last tutorial an actorframe is like a box that contains all of your files, therefore running a command on an actorframe will affect every file within it.
The below example will zoom everything to 5-times their original sizes over the period of 5 seconds, this is semi-countered by the fact that the file’s command is gradually making it shrink.
<ActorFrame InitCommand="linear,5;zoom,5;">
<children>
<Layer
File="nyan.png"
InitCommand="x,900;y,240;playcommand,NyanSmash;"
NyanSmashCommand="decelerate,5;addx,-1800;rotationz,20;addy,-140;zoom,0.1;diffusealpha,0;"
/>
</children>
</ActorFrame>
By now you will have the knowledge to perform basic movements and actions.
Tune in next time to learn how to incorporate animated sprites.
|
The text below is a written version of the video above, choose whichever you find easier to follow.
Extra note: If you experience errors after copying the codes highlighted yellow it may be because the indents of the text get published as spaces instead of tabs, you will need to delete all of these spaces and indent it properly in your text editor.
=== TUTORIAL #1 ===
GETTING STARTED
— Step 1: Referencing
Make a new folder called “animations” inside your simfile’s folder.
Open .SM file in notepad and change #BGCHANGES:; to #FGCHANGES:;
Type the beat number you want the animation to start from:
#FGCHANGES:0.000=
Type the folder containing your animation:
#FGCHANGES:0.000=animations=
The rest influence whether the animation fades in and/or out and over what period, best bet is to just keep it the same as this:
#FGCHANGES:0.000=animations=1.000=0=0=1;
Save .SM file then go to your “animations” folder.
— Step 2: Structuring the Animation
Open a blank text file in Notepad and “Save As…” default.xml into the animations folder.
default.xml is the file that is referenced by your simfile when you select a folder to display, each folder you make should have its own default.xml file.
Keeping default.xml open, Open and close an <ActorFrame> tag and a <children> tag.
<ActorFrame>
<children>
</children>
</ActorFrame>
Think of an actorframe as a box and the children as the box’s contents, your animations will be written between the children tags.
You can place another actorframe inside the children tags or directly below the closed actorframe but for now we will work with one.
Get any sort of image you want and place it into your “animations” folder.
Create a layer tag between your children tags, a layer is best described as a piece of paper stuck to the front of your box.
All of the layer’s properties will be within the open tag, therefore a slash needs to be indicated to close the tag off.
<Layer/>
Place your cursor between the R and the Slash and make 3 new lines.
<Layer
/>
On the first line you reference the file you’d like to show, the filename must be in quotes.
<Layer
File="nyan.png"
/>
On the second line you declare what happens when the image is shown with either an OnCommand or InitCommand.
<Layer
File="nyan.png"
InitCommand=""
/>
The third line closes the layer off, you can have as many layers as you wish between the children tags.
Layers listed first are displayed first, therefore listing further layers down the page will appear on top of the first one listed, like sticking pieces of paper on top of each other.
— Step 3: Command Structure
A command acts like a timeline, every change you make to the file is done in the order you enter it into the command.
Everything entered into a command can be considered as a personal attribute of the file that you are altering.
They are easy to use because they have a basic structure similar to editing stop gimmicks in notepad.
To set the X coordinate of the file to 320 and the Y coordinate to 240 just do this.
x,320;y,240;
You write the parameter followed by a comma, the comma tells the command that the parameter has been entered and now it’s time to enter the value of that parameter.
After entering the value, you close it off with a semicolon, the semicolon tells the command that the parameter has been set and you are moving onto a new one.
Basic Parameters:
x: sets the horizontal coordinate of the file.
y: sets the vertical coordinate of the file.
sleep: sets the amount of time (in seconds) before setting the next parameter.
Now the command starts to take shape as a basic timeline, in this case it sets the X coordinate to 320 and the Y coordinate to 240, then it waits for 2 seconds, after that it sets the X coordinate to 100 and the Y coordinate to 300,then it waits for 1.2 seconds.
<Layer
File="nyan.png"
InitCommand="x,320;y,240;sleep,2;x,100;y,300;sleep,1.2;"
/>
As soon as a command ends, the file disappears.
At this point you will have a functioning foreground effect, it’s still very basic it’s a start!
Tune in next time for a more in depth view of commands!
|
|
|
|
|
| |
