|
SpritesWhat is a Sprite?
Sprites are typically used for characters and moving objects. They can also be used for mouse pointers and displaying written messages. For on-screen moving objects larger than the sprite, sprites may be combined to form a larger image.
Sprite Sizes
|
In Nintendo DS Development, your sprites have to be certain sizes or the game will not work. To put it mathematically, the dimensions of sprites should correspond to powers of 2. Not everyone is a maths guru. The diagram below shows the most common sprite sizes. The table to the right shows all possible sprite sizes, in pixels.
|
|
|
8
|
16
|
32
|
64
|
|
8
|
8x8
|
16x8
|
32x8
|
|
|
16
|
8x16
|
16x16
|
32x16
|
|
|
32
|
8x32
|
16x32
|
32x32
|
64x32
|
|
64
|
|
|
32x64
|
64x64
|
|
Sprite Transparency
|
DS Sprites can have transparent areas where other sprites and the background show through. You cannot set the transparent colour of sprites. Instead, you must use the colour Magenta (bright pink). The RGB Code of this colour is 255,0,255. Any areas which are Magenta will become transparent. You cannot disable transparency. If you want to use Magenta without transparency you should use the RGB code 244,0,244 which is virtually identical to Magenta itself. The human eye cannot tell the difference between the 2 colours.
|
Transparency at Design Time
|
Although when your game is commited to an NDS file your sprites with Magenta will always be transparent, you can optionally disable transparency whilst you design your game. To do this, you need to have the Registered Edition of DS Game Maker. As soon as this is the case, click the icon in the room designer:
Once you have made your choice, the room designer automatically reloads showing the change.
|
Sprite Limitations
There are some limitations to bare in mind when designing and utilizing sprites for DS Game Maker. Please see below:
- Limit on Sprite Sizes - see above section
- Limit of 16 different sprites per project. You can work round this limit by putting multiple sprites into one and animating to the required frame
- Limit of 128 Sprites placed per screen. You can work round this limit by deleting then recreating sprites you do not need the player to see at a specific moment
- There is a limit of 256 colours for a sprite. This is the same quality as you find in GIF files and Average Quality backgrounds
Adding a sprite to your project
To add a sprite, use the Add Sprite button on the top toolbar:
A new sprite will then appear in the resources treeview:
Renaming a sprite
|
DS Game Maker conveniently names your sprites Sprite_1, Sprite_2 (..) but if you want to make your work easier to look at and organize you should give resources appropriate names. You can change the default Sprite_X names to a custom name. To do this, double click the sprite in the resources treeview and click the Rename button:
A dialog will appear asking you for the new name for the sprite (see right).
Once you have clicked Okay the name will change in the resources treeview.
Note that if you reference the sprite in an action somewhere - for example "Create Sprite", you will have to change the name in the action by hand. At current DS Game Maker cannot do this for you.
|
|
Deleting a sprite
|
You can delete sprites by using the Delete button, which is next to the Rename button. Be careful when deleting sprites. It is a permament change and DS Game Maker will remove all placements of the sprite throughout all the rooms in your game. DS Game Maker provides a convenient confirmation message reading: "Are you sure you want to delete Sprite_X". This is for the safety of your project. You can click No if you do not want to delete your sprite. Click Yes to delete your sprite and remove all instances of the sprite throughout the project's rooms.
Note that, as with renaming sprites, if you reference the sprite in an action somewhere - for example "Create Sprite", you will have to remove or update the action yourself or you will receive a compile error when the program is refering to a sprite which no longer exists under the same alias.
|
|
Placing sprites
Select a room
Select a Sprite
|
To place a sprite, open the room you wish to place a sprite in by double clicking it in the resources treeview.
|
Placing the Sprite
|
In the Room Designer (shown left), click on either screen to place your sprite.
|
Important for later: A Sprite's Index
When you place a sprite, it is given an index, or unique number which you can use to identify it later on. The first sprite you add will have an ID of 0, the second 1 and the third 2, etc. Baring in mind the limits mentioned above, that means there are a total of 127 sprite numbers available. When you hover over a sprite, DS Game Maker will tell you it's ID which you will need to use to identify it later once you add sprite related actions.
Removing a placed sprite
To remove a placed sprite in the room designer, simply right click it and select 'Delete' from the popup menu.
Moving a single placed sprite
|
If you want to design a precise interface, or if you need the character, for example, to start at a specific location, you can also move the sprite to custom co-ordinates. Right click the sprite and select 'Move' from the popup menu. A small dialog will appear containing the current co-ordinates of the sprite. You may change these values and press 'Okay'. The room will reload with the sprite in the new position. Bare in mind that the DS Screen size is 256x192 pixels and that 0,0 is the top left of the screen when changing the position of sprites.
|
|
Moving all placed sprites
If you later realise that you placed all your sprites 16 pixels too far down or left, you can reposition them all in one go. In DS Game Maker 2.0, you can also specify if this operation happens on the top, bottom or both screens. To move all sprites by a certain amount, click this button on the room designer toolbar:
Select the amount of pixels which you would like to move all of the sprites by. You can use both positive and negative values. Positive values increase the X and Y co-ordinate making the sprites move down or right. Negative values decrease the X and Y co-ordinates making the sprites move up or left. Note that this operation, like all other operations in DS Game Maker is not undoable. Use it with care, or you might end up with a messy layout!
You can choose which sprites will be moved by using the screen selector:
Animating Sprites
Animated Sprites look really professional and, up till now, there has been no documentation on how to use them. Here is an in depth guide on how to animate sprites. You need the Registered Edition of DS Game Maker for this section.
Introduction
|
|
The first thing to take note of is that animated sprites are *not* like animated GIFs. The image, at design time is still. There are 2 images on the left. The first is a demonstration of what Yoshi will look like in the running game. The second is what Yoshi's sprite actually looks like as we design the game.
In an animated sprite, simply lay out all the frames one after another in a single sprite. Do not include any gaps between frames or include different sized frames, or DS Game Maker will not accept your sprite.
|
The Actions
What confuses alot of users is that there are 2 actions with almost identical names - Animate Sprite and S Animate Sprite. Both of these are useful in different situations:
- S Animate Sprite: Starts a sprite animating once. You can easily add this action at the start of your room to animate a sprite. This is most useful when you do not need to change the animation speed or frameset later on, although you can still use the regular Animate Sprite to do that for further modifications.
- Animate Sprite: Animates a sprite. The crucial difference is that S Animate Sprite starts the sprite animating once. If you use Animate Sprite at the beginning of a room your sprite *will not move an inch*. This is because the DS is trying to restart the animation every frame. If you need to update the animation, for example, depending on the direction the player is walking, at run time, you must use the Animate Sprite action.
Let's get started!
I believe in learning by example so I present you with the first example. Here were are simply having Yoshi moving at a constant rate with no user interaction. I will explain the arguments of the actions later.
S Animate Sprite 0;0;0;2;2
- Screen - Self explanatory. The screen on which the sprite you wish to animate is placed
- Sprite Number - The Sprite you wish to animate
- First Frame - We saw above that an animation contains frames and that Yoshi had 3 frames. We do not have to animate from the start to the very end, we have the ability to animate from somewhere in the middle to somewhere else. The First frame is a zero indexed number. This means that the first frame is actually 0.
- Second Frame - See Above. This number is also zero indexed, so the last frame is actually the total frames - 1. The last frame in Yoshi is 2 (0,1,2), and in a sprite with 10 frames the last frame we would animate to would be frame 9. Simples!
- Speed (FPS) - The number of frames to flick past every second. In my example, Yoshi tinkers along nicely at 2 frames a second. It is up to you to experiment with this value. I have found that values between 1 and 5 work best. Beyond that and the animation is too fast for recognition.
A better example
The above example was rather simple but showed a powerful concept. Now we will build upon what we have learnt and make Yoshi stop and start with buttons on the DS. Once again I will give you my list of actions and explain how it works:
S Animate Sprite 0;0;0;2;2
If Button Press Newpress;A
Animate Sprite 0;0;0;2;2
End If
If Button Press Newpress;B
Pause Animation 0;0;1
End If
In that example, if you press B, Yoshi will pause to gather his thoughts until you press A and let him continue. I will explain the example line by line:
- S Animate Sprite - Not an absolute necessity, since the player can press A to make Yoshi start animating themselves. But in my opinion, it just looks nicer if Yoshi is already moving when the game launches.
- If Button Press Newpress;A - Actions are executed from here to End If when the player presses A.
- Animate Sprite 0;0;0;2;2 - Animates Sprite 0 on the Bottom Screen from Frame 0 to 2 (all frames) at 2 Frames Per Second.
- End If - Tells the DS to stop doing actions now that A has been pressed.
- If Button Press Newpress;B - Actions are executed from here to End If when the player presses B.
- Pause Animation 0;0;1 - Pauses the animation of Sprite 0 on Bottom Screen.
- End If - Tells the DS to stop doing actions now that B has been pressed.
Yoshi on drugs
In this example, we will let the player change the speed of Yoshi when the game is running, seemingly creating the effect that Yoshi is on drugs if he moves really fast. This is a rather advanced example which involves more than just animation actions. I will do my best to explain things.
Part 1: Increasing and Decreasing Variables
For this to work, we need a way for the player to alter Yoshi's speed. We will do this with a variable. We also need to protect Yoshi from bad input, for instance, the use of negative speeds and speeds way too fast for Yoshi to keep up with!
S Animate Sprite 0;0;0;2;2
Declare Room Global speed;int;2
If Button Press Newpress;Up
If speed < 10
Set Variable speed;speed+1
End If
End If
If Button Press Newpress;Down
If speed > 1
Set Variable speed;speed-1
End If
End If
To keep this short and snappy, I will only explain the important bits. Actions such as End If and Set Variable are simple enough, eh?
- Declare Global speed;int;2 - Make a variable called 'speed' to hold Yoshi's speed. It should be an integer (large whole number) and start at number 2.
- If speed < 10 - Get the value of Speed and continue if it is less than 10. This is our upper limiter.
- If speed > 0 - Get the value of Speed and continue if it is more than 0. This is our lower limiter.
Part 2: Testing so far
To make sure everything is going okay, you can add a Draw Variable action to your room to check the code is working. Your list should look like:
...
.... End If
.... End If
Draw Variable 0;0;0;speed
Part 3: Adding the animation
Now we have the variable working, all we need to do is tie the animation in with what we have. This is what we will do (in order):
- Remove the Draw Variable action. It's no longer needed.
- Add an S Animate action so Yoshi is moving when the game starts.
- Add 2 Animate Sprite actions in to be run when the player presses up and down.
Item 1 on the Agenda is really easy. Do that now. Finished? Great. Adding the S Animate Sprite action is also easy, now you've read the above examples. For the sake of those of you who are not awake, this is the action you need to add at the start of your room:
S Animate Sprite 0;0;0;2;2
The last item is similar to item 2, but instead of knowing exactly what speed to animate at (2), we must use our variable instead. Here is how you use a variable with the Animate Sprite Action. You replace the number with the name of the variable, like so:
Animate Sprite 0;0;0;2;speed
I stated above that we needed to add 2 of those. We need one when the player presses Up and one when the player presses Down. We should squeeze our actions between each pair of End Ifs.
This is what the finished list should look like:
S Animate Sprite 0;0;0;2;2
Declare Room Global speed;int;2
If Button Press Newpress;Up
If speed < 10
Set Variable speed;speed+1
End If
Animate Sprite 0;0;0;2;speed
End If
If Button Press Newpress;Down
If speed > 1
Set Variable speed;speed-1
End If
Animate Sprite 0;0;0;2;speed
End If
Adding Randomization
Randomization is all the craze at the moment - Every time the player has a go they get a different experience or challenge. Randomization is easy to add to DS Game Maker. We will make Yoshi jump to a random frame and face a random direction (hmm, not too random, left or right).
Part 1: Set up If and End If Structure
We will start by creating a simple If and End If structure so that the player can press A and have something happen.
If Button Press Newpress;A
...
End If
Part 2: Random Animation
We saw in the previous example that we could animate a sprite using variables for the arguments. As well as variables we can also use Random Numbers. We generate Random Numbers using a PAlib function called PA_RandMinMax. We need a variable to hold our random number. We only need to make a very small change to our existing Animate Sprite action, too. Add a Declare Global action to the start of the room, like so:
Decare Global x;int;0
x will hold our random number. It is declared as an integer which is a whole number. It is given the value of 0 as it's value will be set to a random number before it is used. The next step is to add an Animate Sprite action, using our variable. Note that C is case sensitive, so a capitol X differs from a lower case x.
Declare Global x;int;0
If Button Press Newpress;A
Animate Sprite 0;0;x;x;2
End If
In the above the sprite is being animated from our random number -> our random number. This means the frame is static. That example is all well and good but we still do not have any random numbers involved. We will add a final action for that - Set Variable.
Set Variable x;PA_RandMinMax(0,2)
Add that in before the Animate Sprite action to give a completed action list for Part 2:
Declare Global x;int;0
If Button Press Newpress;A
Set Variable x;PA_RandMinMax(0,2)
Animate Sprite 0;0;x;x;2
End If
Part 3: Random Flipping
Now we have random animate random flipping is easy to add. We will now declare an extra variable called y to hold our random number for flipping. Use another declare Global action and then add the following Set Variable action below the existing one:
Set Variable y;PA_RandMinMax(0,1)
Y will represent whether Yoshi should flip or not. In programming, loosely, 1 represents YES and 0 represents NO. Therefore, we are randomly assigning YES or NO to our variable. Finally, we will perform our signature move, adding the Flip Sprite action. It has 3 arguments. The first 2 are self explanatory. The 3rd argument expects a Yes/No value, so we will have to perform an If to check the value of our random number. All will become clear in our finished list:
Declare Global x;int;0
Declare Global y;int;0
If Button Press Newpress;A
Set Variable x;PA_RandMinMax(0,2)
Set Variable y;PA_RandMinMax(0,1)
Animate Sprite 0;0;x;x;2
If y == 0
Flip Sprite 0;0;0
Else
Flip Sprite 0;0;1
End IF
End If
Well, that is all there is to say about Animating Sprites. You have scoured my brain for everything I can teach you. Good luck, apprentice!
Miscellaneous Actions
How to make a sprite be moved by the D-Pad
|
|
Firstly, what is the D-Pad? You might already know this. It's the cross shaped button which has up, down, left and right controls. The Move Sprite with D-Pad action enables the sprite to be moved by these 4 buttons. This action requires 3 arguments:
|
- Screen on which the sprite you wish to use is placed on (Top or Bottom)
- Number of the sprite. See the Placing a Sprite section - it's the top row of the table
- Amount of pixels that the sprite will move. It is better to call this the "speed". The higher the number, the faster the sprite will move. 1 is a good value to start with. In that scenario the sprite will move 1 pixel per frame which is ~60 pixels per second.
Example Usage: Screen Boundary
Move Sprite with D-Pad 0;0;1
Output Text 0;0;0;Move the Sprite Up!
If Sprite Location 0;Y;0;0;==
Switch Room WinRoom
End If
End If
How to make a sprite draggable
|
|
This action is very similar to Move Sprite by D-Pad, but instead it lets the player move a sprite around with the stylus. This action only works for sprites placed on the bottom screen. It has one argument, sprite number, which corresponds to the sprite which should have stylus movement enabled.
|
Example Usage: Control the balloon
Move Sprite By stylus 0
If Button Press Newpress;A
Set Sprite X 0;0;32
Set Sprite Y 0;0;32
End If
Output Text 0;0;0;"Press A to reset"
How to change the locations of sprites
Just like on a graph, every sprite has X and Y co-ordinates. The X co-ordinate is how far across the screen a sprite is positioned and the Y co-ordinate is how far down the screen a sprite is positioned. You can place sprites wherever you like when you design your game. You can move then all by a specified amount and move them all individually. But. Sometimes you need to move sprites once the game is being played on the DS. There are two actions to do this for you: Set Sprite X and Set Sprite Y.
When you set the co-ordinates of sprites bare in mind the size of the DS screen is 256x192 pixels. Setting a sprite's co-ordinates to values larger than those values will cause them to appear off the screen. This is a way to hide sprites if you need to.
The Set Sprite X/Y actions require 3 arguments:
- Screen - which screen the desired screen is placed upon
- Sprite Number - the number of the sprite which you want to change the co-ordinate of
- X/Y Co-ordinate: The axis position at which to move the sprite to
Example Usage: Random Positioning
If Button Press Newpress;A
Set Sprite X 0;0;PA_RandMinMax(16,208)
Set Sprite Y 0;0;PA_RandMinMax(16,144)
End If
How to make sprites 'clickable' (If Sprite Touched)
Sprites are very good for making buttons. There is an action to complement this idea perfectly. It is called 'If Sprite Touched'. This action only works on sprites placed on the bottom DS screen (for obvious reasons). Enter the sprite number of the sprite of which you wish to detect stylus touches for the first argument.
This action acts like an If action and therefore requires an End If action so DS Game Maker knows when the actions which happen when the button is touched ends. Between If Sprite Touched and End if you place the actions you want to happen when the player touches the sprite. This is an example of how to use If Sprite Touched:
Example Usage: Pop the Balloon
If Sprite Touched 0
Delete Sprite 0;0
End If
How to clear all sprites
Please note, there is currently no way to re-place sprites that have been created at design time unless you implement your own way of storing what sprites were where, which is past the level of knowledge given by this help file.
Example Usage: Pop all the balloons in one go!
If Button Press Newpress;A
Reset Sprite System
End If
Output Text 0;0;0;Press A to Pop them all!
|
