Changes

Libwiisprite/tutorial (view source)

Revision as of 21:20, 25 November 2010

1,233 bytes removed , 21:20, 25 November 2010

m

Reverted spam html code

Line 22: Line 22:

If you haven’t read the foreword, read it and don’t be lazy. This will be a fairly short lesson and at this point I will assume you have downloaded the Libwiisprite. First, you need to know how to set your make file. The basic template will look something like this:

−

~~<~~!-- Use source lang="text" to avoid munging Makefiles with spaces for Wiki -->

+

−

~~<~~source lang="text">

+

#---------------------------------------------------------------------------------

# Clear the implicit built in rules

Line 30: Line 30:

#---------------------------------------------------------------------------------

ifeq ($(strip $(DEVKITPPC)),)

−

$(error "Please set DEVKITPPC in your environment. export DEVKITPPC=~~<~~path to>devkitPPC")

+

$(error "Please set DEVKITPPC in your environment. export DEVKITPPC=<path to>devkitPPC")

endif

Line 37: Line 37:

#---------------------------------------------------------------------------------

# TARGET is the name of the output

−

# BUILD is the directory where object files &~~amp;~~ intermediate files will be placed

+

# BUILD is the directory where object files & intermediate files will be placed

# SOURCES is a list of directories containing source code

# INCLUDES is a list of directories containing extra header files

Line 154: Line 154:

%.jpg.o : %.jpg

#---------------------------------------------------------------------------------

−

@echo $(notdir $~~<~~)

+

@echo $(notdir $<)

$(bin2o)

Line 162: Line 162:

endif

#---------------------------------------------------------------------------------

−

~~<~~/source>

+

</source>

(taken from the Libwiisprite template make file)

Line 183: Line 183:

Now it is time to see some real program code! The following it taken from the Libwiisprite example template (libwiisprite\examples\template\source\template.cpp). The entire program is as follow and is the minimum to get up a screen of RGBA colour values (if you don’t understand this you will soon) and render it. The source is as follows:

−

~~<~~source lang = "cpp">

+

−

#include ~~<~~wiiuse/wpad.h>

+

#include <wiiuse/wpad.h>

−

#include ~~<~~wiisprite.h>

+

#include <wiisprite.h>

// libwiisprite uses wsp as it's namespace

Line 204: Line 204:

{

WPAD_ScanPads();

−

if(WPAD_ButtonsDown(WPAD_CHAN_0)&~~amp;~~WPAD_BUTTON_HOME)

+

if(WPAD_ButtonsDown(WPAD_CHAN_0)&WPAD_BUTTON_HOME)

break;

gwd.Flush();

Line 210: Line 210:

return 0;

}

−

~~<~~/source>

+

</source>

Ok, so let’s look at it piece by piece. First two lines include the required header files to just get the program going. The header file is for getting input from the wiimote which at this stage will only be used to exit the program. The functions used by this file are WPAD_Init(), WPAD_ScanPads() and WPAD_Buttons_Down(), these functions are not related to Libwiisprite so I will not describe their functions, visit the wiibrew wiki for more information on the Wiimote.

Line 216: Line 216:

The next line of importance that you must note is

−

~~<~~source lang = "cpp">using namespace wsp;~~<~~/source>

+

<source lang = "cpp">using namespace wsp;</source>

most people use std namespace a lot and may be wondering what wsp could mean, if you don’t know about namespaces I won’t tell you here as it is related to C++ programming, if you wish to learn about namespaces visit one of the many C++ programming sites.

Line 229: Line 229:

The next function however, is not so simple and is called as such:

−

~~<~~source lang = "cpp">gwd.SetBackground((GXColor){ 255, 255, 255, 255 });~~<~~/source>

+

<source lang = "cpp">gwd.SetBackground((GXColor){ 255, 255, 255, 255 });</source>

Again, this is part of the GameWindow class and is defined in the documentation like this:

Line 241: Line 241:

Now you’re thinking, how does all of this relate to my wee program. Now that you understand about a 32 bit colour display, take a look at the last line I showed you, in case you forgot:

−

~~<~~source lang = "cpp">gwd.SetBackground((GXColor){ 255, 255, 255, 255 });~~<~~/source>

+

<source lang = "cpp">gwd.SetBackground((GXColor){ 255, 255, 255, 255 });</source>

Now take a look at those numbers! Wo0t they make sense! This will set the background colour to full red, green, blue and alpha which will be a solid, white screen (if all goes well behind the scenes). For now, ignore the GXColor type and bask in your understanding of what a few numbers do, of course if you have done graphics programming before you will likely have known this already. Also, If you are used to programming in a more popular say Direc3D or OpenGL you will likely have had to input these as a float value between 0.0f and 1.0f. Also, you will often see 0xFF and 0x00, these are hexadecimal values, 0xFF base 16 for 255 and 0x00 is base 16 for 0.

Line 248: Line 248:

Upon entering the loop 2 more ‘wiiMote’ related functions are called, and ask if the user is pressing the home button, if so break the loop, return 0 and exit the program. If however the user isn’t pressing the home button, the program executes the Flush() function, another function found in the GameWindow class we used at the start of the program. This function is defined as follows in the documentation

−

~~<~~source lang = "cpp">void Flush () Finishes rendering.~~<~~/source>

+

<source lang = "cpp">void Flush () Finishes rendering.</source>

Not a huge amount of information I know, and I am not allowed to release the source for I’ll explain what it does. It copy’s the back buffer to the front buffer, waits for the vertical synchronisation then renders the image to the screen and deletes the back buffer, ready for a new image to be produced (even though it will look the same all the time in our small program here).

Line 265: Line 265:

You may be wondering why this function would be of any use. Once you have large programs, you may be starting and stopping your video setup with the first function I mentioned and InitVideo(), so you may also want to check if you have your Wii initialised and if it isn’t then call the InitVideo() function, such code may look like this:

−

~~<~~source lang = "cpp">If ( ! IsInitialized())

+

<source lang = "cpp">If ( ! IsInitialized())

{

InitVideo()

}

−

~~<~~/source>

+

</source>

There’s another two functions that you may want to use, and they are GetWidth() and GetHeight. They get the width and height of the current screen. A possible application of this is to make sure your character doesn’t go beyond the edge of the screen, or where to draw your background or where to print your menu so that its centred.

Line 307: Line 307:

Open the source file at Libwiisprite/examples/spritetest/source/spritetest.cpp. The first line of interest to us is this

−

~~<~~source lang = "cpp">Sprite sprite; // The drawable object we can modify.~~<~~/source>

+

<source lang = "cpp">Sprite sprite; // The drawable object we can modify.</source>

This creates a sprite object of type Sprite, this is probably the most flexable class for manipulating an image, although you should use it in conjunction with the Image class, this will be shown in the following example. But remember that if you don’t should select your classes dependant on what you actually need, not just you can select a certain type.

Continuing on now, we see another four declarations of various class types, the only ones we are concerned with are

−

~~<~~source lang = "cpp">Sprite sprite2; // Another drawable object we can modify.

+

<source lang = "cpp">Sprite sprite2; // Another drawable object we can modify.

Image image; // Holds our image/texture from the SD Card.

Image image2; // Holds our buffer image/texture.

−

~~<~~/source>

+

</source>

At this point don’t worry why there are declarations of the same things twice in small example, basically, it’s to show you how to load an object of type Sprite from the buffer as well as from file and the same goes for the two images of type Image.

Skip a few lines and go to

−

~~<~~source lang = "cpp">

+

// Initialize filesystem to load from SD Card

fatInitDefault();

−

~~<~~/source>

+

</source>

−

This function is included in fat.h and is called as #include ~~<~~fat.h>, this is for file management and makes it easier and safer to handle files from the SD card, unless you know what you are doing with file handling and even if you do, it’s always a good idea to include this.

+

This function is included in fat.h and is called as #include <fat.h>, this is for file management and makes it easier and safer to handle files from the SD card, unless you know what you are doing with file handling and even if you do, it’s always a good idea to include this.

Now we shall move down a little further and skip a few things along the way until we reach this wee section of code here:

−

~~<~~source lang = "cpp">if(image.LoadImage("libwiisprite.png") != IMG_LOAD_ERROR_NONE)exit(0);~~<~~/source>

+

<source lang = "cpp">if(image.LoadImage("libwiisprite.png") != IMG_LOAD_ERROR_NONE)exit(0);</source>

This function is one of the ones that reads from the SD card. If the image isn’t at found at the location specified in the quotation marks, the function will return false and the program will automatically exit, otherwise it will return an address in memory where the image has been loaded and assign a value to our Image object, image. The next line is very similar but differs substantially in the details:

−

~~<~~source lang = "cpp">if(image2.LoadImage(libwiisprite) != IMG_LOAD_ERROR_NONE)exit(0);~~<~~/source>

+

<source lang = "cpp">if(image2.LoadImage(libwiisprite) != IMG_LOAD_ERROR_NONE)exit(0);</source>

libwiisprite (the one between the bracts in the above line) is defined in libwiisprite as a huge, fat array of constant, unsigned char’s. It’s been generated so that it can be loaded directly into memory on runtime which is what happens as soon as the program sees this chunky piece of code. So the above code segment attempts to find it in memory, if the image isn’t in memory, the program will exit, otherwise the value of libwiisprite is assigned to image2, and has been loaded from the buffer rather than the SD card. Easy!

Line 338: Line 338: −

~~<~~source lang = "cpp">

+

−

sprite.SetImage(&~~amp;~~image);

+

sprite.SetImage(&image);

−

sprite2.SetImage(&~~amp;~~image2);

+

sprite2.SetImage(&image2);

−

~~<~~/source>

+

</source>

To properly understand what’s going on we are going to have a look at how the documentation defines the SetImage() function, just have to love the documentation don’t you!

Line 362: Line 362:

At this stage, we are only using the first parameter and ignoring the second two. After consulting the source code for this function, it will work fine with no parameters, it will set them to 0 if no other is there.

−

What we have done with our two images is pass the address of the images using the address of operator (&~~amp;~~), then the function will handle the image for us the rest of the way. Now we have an image loaded into our sprite with all the abilities of the Image class as well as the Sprite class. Next line of interest is this one

+

What we have done with our two images is pass the address of the images using the address of operator (&), then the function will handle the image for us the rest of the way. Now we have an image loaded into our sprite with all the abilities of the Image class as well as the Sprite class. Next line of interest is this one

−

~~<~~source lang = "cpp">sprite.SetPosition(0, 0);~~<~~/source>

+

<source lang = "cpp">sprite.SetPosition(0, 0);</source>

Again we shall now look at the documents definition of the SetPosition() function in case you can’t guess what those 2 parameters represent.

Line 393: Line 393:

It’s just a 2D coordinate system with an inverted vertical (or y) axis. With the origin (0,0) at the top left hand corner, x increases moving right of the screen and y increases moving down. A note on depth and z is that in computers it usually increases going into the screen and decreases coming out. The reason that the coordinate system works this way is because of the way that the back buffer prints to the front buffer (front buffer is a fancy name for screen), it starts printing from the top left corner at (0,0) then moves one pixel across the x axis to (1,0). Once a top line has been rendered to the front buffer, it will start printing at the next line and do it all over again until the entire image is drawn. This happens so fast that you can’t actually see each pixel being drawn. So when we use this call:

−

~~<~~source lang = "cpp">

+

sprite.SetPosition(0, 0);

−

~~<~~/source>

+

</source>

We are setting its location to print the top left corner of the image to top left corner of the screen. This is commonly used when printing backgrounds to cover the entire screen regardless of screen size/resolution.

The next print call we encounter is as follows:

−

~~<~~source lang = "cpp">

+

sprite2.SetPosition(320, 240);

−

~~<~~/source>

+

</source>

That’s it for this lesson now that you know how to load an image from the buffer or from the SD card and print them to the screen. One thing to note is that your images resolution must be a multiple of four otherwise your program will not be happy with you, in the next we will look at some more interesting stuff, specifically, manipulating images using Libwiisprite for more interesting effects.

Line 413: Line 413:

We will start this lesson at line 99 and 100 of spritetest.cpp

−

~~<~~source lang = "cpp">

+

−

if(pressed &~~amp;~~ WPAD_BUTTON_MINUS)

+

if(pressed & WPAD_BUTTON_MINUS)

sprite.SetZoom(sprite.GetZoom()-0.1f);

−

~~<~~/source>

+

</source>

Ignore the first line for now, the second contains 2 very easy to use functions for getting and setting zoom values. Before I continue have a quick look at the definition for each of these functions:

Line 428: Line 428:

CURRENT ZOOM CANNOT BE SMALLER THAN 0! Make sure you go by this rule, to make sure that your images zoom level never goes below 0 you may add a simple check like this:

−

~~<~~source lang = "cpp">

+

−

if(pressed &~~amp;~~ WPAD_BUTTON_MINUS &~~amp;~~&~~amp;~~ sprite.GetZoom() > 0)

+

if(pressed & WPAD_BUTTON_MINUS && sprite.GetZoom() > 0)

sprite.SetZoom(sprite.GetZoom()-0.1f);

−

~~<~~/source>

+

</source>

This simply checks sprites zoom using the GetZoom() function defined like this:

Line 442: Line 442:

This will return a float value which is being applied to the current image to scale using some formula we don’t need to worry about (thanks Libwiisprite!). So the expression

−

~~<~~source lang = "cpp">if(pressed &~~amp;~~ WPAD_BUTTON_MINUS &~~amp;~~&~~amp;~~ sprite.GetZoom() > 0)~~<~~/source>

+

<source lang = "cpp">if(pressed & WPAD_BUTTON_MINUS && sprite.GetZoom() > 0)</source>

Will be true if the user is pressing the minus button and the Zoom factor for sprite is greater than 0. Note, don’t set the sprite.GetZoom() expression to >= 0, otherwise, if = sprites zoom factor == 0 then it will decrease it further, not something we want to do as this would put it in the negatives, who knows what horrible consequences this may have!

So now we understand GetZoom, what about SetZoom? Well, again this is another very easy function to use, one parameter of type float. In our example it’s called like this:

−

~~<~~source lang = "cpp">sprite.SetZoom(sprite.GetZoom()-0.1f);~~<~~/source>

+

<source lang = "cpp">sprite.SetZoom(sprite.GetZoom()-0.1f);</source>

if the player is pressing the minus button then this line of code executes, it will use GetZoom() to return the current zoom factor, then decreases it by a value of 0.1. So say for example that the current zoom factor is 1, the native resolution of the image, then in plain English, the expression would look like this: “set sprites zoom factor to 1 – 0.1 which equals 0.9, then multiply the images native resolution by this”. That’s simple enough in my opinion, that you should now be able to understand the next two lines in the program:

−

~~<~~source lang = "cpp">

+

−

if(pressed &~~amp;~~ WPAD_BUTTON_PLUS)

+

if(pressed & WPAD_BUTTON_PLUS)

sprite.SetZoom(sprite.GetZoom()+0.1f);

−

~~<~~/source>

+

</source>

Just in case you aren’t sure what this does, it checks to see if the user is pressing the plus button and if this evaluates to true, then sprites zoom factor is increased by 0.1. You may be wondering why there’s and f after the increase value, this is just how most programs accept a float value, if you’ve done much graphics programming you will used to setting verticies, materials, colours, alpha values and all manner of things as a value with f at the end.

Now we will move onto the next few lines of interest;

−

~~<~~source lang = "cpp">

+

−

if(pressed &~~amp;~~ WPAD_BUTTON_A &~~amp;~~&~~amp;~~ sprite.GetTransparency() ~~<~~ 0xff-4)

+

if(pressed & WPAD_BUTTON_A && sprite.GetTransparency() < 0xff-4)

sprite.SetTransparency(sprite.GetTransparency()+5);

−

if(pressed &~~amp;~~ WPAD_BUTTON_B &~~amp;~~&~~amp;~~ sprite.GetTransparency() > 4){

+

if(pressed & WPAD_BUTTON_B && sprite.GetTransparency() > 4){

sprite.SetTransparency(sprite.GetTransparency()-5);

−

~~<~~/source>

+

</source>

In many ways this is similar to the lines we just looked at, except that it changes the value of the images transparency, I will refer to transparency as alpha from now on as its the more ‘correct’ term and far easier to type.

Line 481: Line 481:

The values 0x00 and 0xFF are hexadecimal or more commonly called ‘hex’, this is how most of your image will be handled although the functions are just as happy to work with decimal as shown in the code segment at the start of the Transparency section. In our example, 0x00 is the same as 0 (no alpha, and 0xFF is 255 (fully opaque). Now let’s look again at that code segment

−

~~<~~source lang = "cpp">if(pressed &~~amp;~~ WPAD_BUTTON_A &~~amp;~~&~~amp;~~ sprite.GetTransparency() ~~<~~ 0xff-4)

+

<source lang = "cpp">if(pressed & WPAD_BUTTON_A && sprite.GetTransparency() < 0xff-4)

sprite.SetTransparency(sprite.GetTransparency()+5);

−

if(pressed &~~amp;~~ WPAD_BUTTON_B &~~amp;~~&~~amp;~~ sprite.GetTransparency() > 4){

+

if(pressed & WPAD_BUTTON_B && sprite.GetTransparency() > 4){

sprite.SetTransparency(sprite.GetTransparency()-5);

−

~~<~~/source>

+

</source>

Line one will see if the user is pressing A first of all. The next part is a little trickier to understand, lets look at it in small sections at a time to see exactly what is happening.

−

~~<~~source lang = "cpp">sprite.GetTransparency() ~~<~~ 0xff-4~~<~~/source>

+

<source lang = "cpp">sprite.GetTransparency() < 0xff-4</source>

GetTransparency() is the alpha equivalent to GetZoom(), it is defined as such:

Line 508: Line 508:

Now we are going to look another example where the images alpha is less than 0xFF – 4, let’s say the alpha value of the image is equal to 100, and A is being pressed, because 100 is less than 251 and A is being pressed the if statement is true, so the program executes this line of code:

−

~~<~~source lang = "cpp">sprite.SetTransparency(sprite.GetTransparency()+5);~~<~~/source>

+

<source lang = "cpp">sprite.SetTransparency(sprite.GetTransparency()+5);</source>

This will call SetTransparency() and pass it the current alpha and increase it by a value of 5. The next two lines of code are more or less the same but the user must be pressing B and the images alpha must be greater than 4, if so then it will call SetTransparency() to decrease the current alpha by a value of 5. The reason that the alpha must be greater than (but not and equal to) is so that if the alpha value is equal to 5 and it calls the SetTransparency() function then the current alpha value will be 0, if it were 0 and you were able to decreases the alpha value further you would have negative values (obviously) which won’t go down well with the program at all! Always make sure you have checks to stop values going below thresholds, the program will almost never do this for you so you must code your applications, games etc carefully to avoid these things.

Line 514: Line 514: −

~~<~~source lang = "cpp">

+

−

if(pressed &~~amp;~~ WPAD_BUTTON_UP)

+

if(pressed & WPAD_BUTTON_UP)

sprite2.SetStretchHeight(sprite2.GetStretchHeight()+0.1f);

−

if(pressed &~~amp;~~ WPAD_BUTTON_DOWN)

+

if(pressed & WPAD_BUTTON_DOWN)

sprite2.SetStretchHeight(sprite2.GetStretchHeight()-0.1f);

−

~~<~~/source>

+

</source>

This works in the same way as the other Get and Set functions, but these adjust the Height of the images. First the program asks if the player is pressing up, if he/she is, then sprite2’s images height will be increased by a scale factor of its current Height + 0.1, again a float value, Here are the two Get and Set functions for height:

Line 538: Line 538:

GetStretchHeight() will return the current height stretch factor, when an image is loaded this value is 1 and all other values are based on that. The second two lines do pretty much the same thing again except it requires input of down from the wiimote and decreases the stretch height. Next two functions...

−

~~<~~source lang = "cpp">

+

−

if(pressed &~~amp;~~ WPAD_BUTTON_RIGHT)

+

if(pressed & WPAD_BUTTON_RIGHT)

sprite2.SetStretchWidth(sprite2.GetStretchWidth()+0.1f);

−

if(pressed &~~amp;~~ WPAD_BUTTON_LEFT)

+

if(pressed & WPAD_BUTTON_LEFT)

sprite2.SetStretchWidth(sprite2.GetStretchWidth()-0.1f);

−

~~<~~/source>

+

</source>

same as its preceding functions although this changes the Width instead, hence the function GetStretchWidth() and SetStretchWidth(). Now we have those functions out of the way we shall move down the loop to a new line:

−

~~<~~source lang = "cpp"> sprite.Move(-((f32)sprite.GetWidth()/2), -((f32)sprite.GetHeight()/2));~~<~~/source>

+

<source lang = "cpp"> sprite.Move(-((f32)sprite.GetWidth()/2), -((f32)sprite.GetHeight()/2));</source>

The Move() function is defined as follows in the documentation:

Line 564: Line 564:

The function takes two parameters, a value of type f32 that is for the x and another for y. So the line

−

~~<~~source lang = "cpp">sprite.Move(-((f32)sprite.GetWidth()/2), -((f32)sprite.GetHeight()/2));~~<~~/source>

+

<source lang = "cpp">sprite.Move(-((f32)sprite.GetWidth()/2), -((f32)sprite.GetHeight()/2));</source>

calculates -((f32)sprite.GetWidth()/2), in other words, the inverse of the width of sprite divided by 2, and the second line does the same thing but uses GetHeight() instead of GetWidth(). This is a particularly useful function if you want to, well, move your images around, look at your average 2D side scroller, everything moves in some or other way, the character, the enemy’s, and of course the background. Say you wanted to make your image move right when you press the right button and move it left when you pressed the left button, your code might look something like this:

−

~~<~~source lang = "cpp">

+

−

if(pressed &~~amp;~~ WPAD_BUTTON_RIGHT)

+

if(pressed & WPAD_BUTTON_RIGHT)

sprite.Move( 1, 0 );

−

if (pressed &~~amp;~~ WPAD_BUTTON_LEFT)

+

if (pressed & WPAD_BUTTON_LEFT)

sprite.Move(-1, 0 );

−

~~<~~/source>

+

</source>

In the first pair of lines, a check is done to see if the player is pressing the right button, if this results to be true, then sprite.Move() is called. I assign the first parameter which is the x value to change, 1, and the second parameter which is the y value, to 0. I set the second to 0 so that the image stays at the same height, after all we only want it to move along the x axis. You can do the same for the y axis by putting in something like this:

−

~~<~~source lang = "cpp">

+

−

if(pressed &~~amp;~~ WPAD_BUTTON_UP)

+

if(pressed & WPAD_BUTTON_UP)

sprite.Move( 0, -1 );

−

if (pressed &~~amp;~~ WPAD_BUTTON_DOWN)

+

if (pressed & WPAD_BUTTON_DOWN)

sprite.Move(0, 1 );

−

~~<~~/source>

+

</source>

This moves the image up the screen if you press up and down if you press down, remember that the y axis increases as you move down, therefore to move up you must decreases the current y value of the image.

Line 599: Line 599:

In the program the following line of code is called.

−

~~<~~source lang = "cpp">sprite.SetRotation(ir.angle/2);~~<~~/source>

+

<source lang = "cpp">sprite.SetRotation(ir.angle/2);</source>

Ignore ir.angle , it’s to do with the an abbreviation for infa red and is in the ir_t structure. SetRotate() is another easy function to use, just pass the number of degrees you want and divide by two or if you know how much you want to do, calculate the value then pass it before a build. For example, if we wanted to turn it 90 degrees (as shown in the parameter documentation) we could either do it like this:

−

~~<~~source lang = "cpp">sprite.SetRotation(90/2);~~<~~/source>

+

<source lang = "cpp">sprite.SetRotation(90/2);</source>

or if we only needed to do it once and not get the degrees on the run we could do the calculation before hand to get the result passed to the function to save out program using up a couple of cycles to do it, like this:

−

~~<~~source lang = "cpp">sprite.SetRotation(45);~~<~~/source>

+

<source lang = "cpp">sprite.SetRotation(45);</source>

A more flexable method again is to have a variable called degrees (or whatever you want to call it), and the value of degrees depends on some input, say the angle of the wiimote then call the function like this:

−

~~<~~source lang = "cpp">Sprite.SetRotate(degrees/2);~~<~~/source>

+

<source lang = "cpp">Sprite.SetRotate(degrees/2);</source>

You can also get the current rotation by calling the GetRotation() function which is defined as follows:

Line 621: Line 621:

Returns a value of type f32 by default this is 0 when the image is loaded unless specified otherwise. Now we are almost at the end of the program, the last two functions that are called are these:

−

~~<~~source lang = "cpp">

+

manager.Draw(0, 0);

gwd.Flush();

−

~~<~~/source>

+

</source>

These two functions require the inclusion LayerManager.h and GameWindow.h as well as an instance of the classes. The first of these two functions, Draw() is used to determine off set and the second one does the rest of the rendering work but don’t worry about these too much I’ll explain them later, so that’s it for this lesson, a long lesson with lots of handy functions that are easy to use. Till next time,

Line 635: Line 635:

First thing we need to use layers is to include LayerManager.h, this is done in our program by including libwiisprite.h, which if you remember includes everything else in the library. Now look further down the source at line 42;

−

~~<~~source lang = "cpp">LayerManager manager(3);~~<~~/source>

+

<source lang = "cpp">LayerManager manager(3);</source>

This is the first call in the program to LayerManager, this creates an instance of LayerManager called manager and calls its constructer and passes 3 to it. This means that we now have a limit of 3 layers for this layer manager. What the constructer does is create an array of (in this case) 3 elements of type Layer. So it will look something like this (note its only and abstraction to make it easier to understand what it looks like in memory):

Line 652: Line 652:

Ok, so now we have a layer manager set up, how do we use it? Let’s take a look at the source code

−

~~<~~source lang = "cpp">

+

−

manager.Append(&~~amp;~~sprite);

+

manager.Append(&sprite);

−

~~<~~/source>

+

</source>

The append function is in the LayerManager class and is defined as such:

Line 666: Line 666:

This function takes one parameter and that’s the address of a layer object. Some things to note about our manager object, it is essentially an array, thinking about it in this manner will help you understand layers much easier. Now with this in mind let’s look at that line again:

−

~~<~~source lang = "cpp">manager.Append(&~~amp;~~sprite);~~<~~/source>

+

<source lang = "cpp">manager.Append(&sprite);</source>

Append as you should know means ‘add at the end’, and when you think in terms of an array, it would add at the lastlocation + 1. Currently our manager has no elements, so passing the address of sprite to Append() will add it to the element 0 as arrays begin a 0 not 1. So now our manager will look like this:

Line 677: Line 677: −

~~<~~source lang = "cpp">manager.Append(&~~amp;~~sprite2);~~<~~/source>

+

<source lang = "cpp">manager.Append(&sprite2);</source>

Appends another object to the manager, this time its sprite2, now to update our manager it will look like this

Line 699: Line 699:

Very similar to the Append() function, but this lets you add objects to your manager where ever you want. And that’s what we do with the next line:

−

~~<~~source lang = "cpp">manager.Insert(&~~amp;~~quad, 0);~~<~~/source>

+

<source lang = "cpp">manager.Insert(&quad, 0);</source>

Just like with the Append function, it requires the address of an object to add to the list, but as well as this it requires the element, where you want to insert. In the above it adds at the element 0, which is the first. Inserting here will increment the element number of each element that is greater than that of the inserted layer, if your list is full and you add something at the start, the last layer will be deleted. Here’s a visual representation of Inserting a layer to a full list:

Line 716: Line 716:

Back to our program now, after calling this line:

−

~~<~~source lang = "cpp">manager.Insert(&~~amp;~~quad, 0);~~<~~/source>

+

<source lang = "cpp">manager.Insert(&quad, 0);</source>

our manager will look like this:

Line 726: Line 726:

Pretty slick isn’t it? Simple as that! Now you’re saying why on earth did I do all of that? Well simply put, this will now dictate what is drawn when. You may recall at the end of the previous lesson I gave you a very quick bit of information about this line:

−

~~<~~source lang = "cpp">manager.Draw(0, 0);~~<~~/source>

+

<source lang = "cpp">manager.Draw(0, 0);</source>

well now we are going to understand exactly what this function does. For your reference it is found at lines 130 and 137 in spritetest.cpp, the function is defined:

Line 754: Line 754:

[object1][object2][object3]

−

Then we call Remove() like this: manager.Remove(&~~amp;~~object1);

+

Then we call Remove() like this: manager.Remove(&object1);

Now our list will look like this:

Line 772: Line 772:

Deletes everything in the current list, example of a call would look like this:

−

~~<~~source lang = "cpp">manager.RemoveAll()~~<~~/source>

+

<source lang = "cpp">manager.RemoveAll()</source>

Requires no parameters.

Line 796: Line 796: −

~~<~~source lang = "cpp">manager.GetLayerAt(1);~~<~~/source>

+

<source lang = "cpp">manager.GetLayerAt(1);</source>

What this does is return the address at the specified element, in this case, we have passed 1 to the function. Then the function declares a variable and assigns the value passed to it. It then iterates through the layer until the value passed == the element your at and returns the address. So in the case of out example here, it would return 000001. If we passed 2 to GetLayerAt() then we would get 000002 (note these addresses are somewhat made up by me, completely).

Line 807: Line 807:

In case you live under a rock, quad means four, in graphics programming, a quad typically means a shape with four sides. It’s very handy having the ability to create a quad on the fly and fortunately, Libwiisprite gives us a class that handles GX to create and manipulate a quad. This class, is simply called, Quad. To include it in your programs you must include either libwiisprite.h or Quad.h. For the basics of Quad, I will again refer to spritetest.cpp in examples. The first line we will look at is line 25.

−

~~<~~source lang="cpp">Quad quad;~~<~~/source>

+

Here we create an instance of Quad called quad that we can now use in our program, but there’s still some more work to do before we can print it to the screen! Move further down the code till you get to this section:

−

~~<~~source lang="cpp">quad.SetPosition(-40, -40);

+

<source lang="cpp">quad.SetPosition(-40, -40);

quad.SetWidth(800);

−

quad.SetHeight(600);~~<~~/source>

+

quad.SetHeight(600);</source>

We encountered SetPosition() in chapter 3, so I won’t go over its function again. So instead we shall look at SetWidth() and SetHeight, they are both simple functions here is the definition:

−

~~<~~source lang="cpp">void wsp::Quad::SetWidth ( u32 width )

+

<source lang="cpp">void wsp::Quad::SetWidth ( u32 width )

Sets the width of the quad.

Parameters:

−

width The new width of the quad.~~<~~/source>

+

width The new width of the quad.</source>

−

~~<~~source lang="cpp">void wsp::Quad::SetHeight ( u32 height )

+

<source lang="cpp">void wsp::Quad::SetHeight ( u32 height )

Seets the height of the quad.

Parameters:

−

height The new height of the quad.~~<~~/source>

+

height The new height of the quad.</source>

Both of these functions need to be called before Draw() for a Quad object. Each of these takes as a parameter one number of type u32, this determines the pixels height and width, you can change this later in your game or app if you need to. So looking at this:

−

~~<~~source lang="cpp">quad.SetWidth(800);

+

<source lang="cpp">quad.SetWidth(800);

−

quad.SetHeight(600);~~<~~/source>

+

quad.SetHeight(600);</source>

we can see this sets quad’s height to 600 pixels and quad’s width to 800. Simple enough? Lets move on. There’s only one other Quad function in this program and its used in a slightly complicated way so I’ll introduce it in an easier way, this function is SetBorderColor() its defined like this:

−

~~<~~source lang="cpp">void wsp::Quad::SetBorderColor ( GXColor borderColor )

+

<source lang="cpp">void wsp::Quad::SetBorderColor ( GXColor borderColor )

Sets the color of the border of the quad. Initial color is black.

Parameters:

−

borderColor A GXColor with the desired data.~~<~~/source>

+

borderColor A GXColor with the desired data.</source>

For the purpose of this guide, we will only be dealing with a 32-bit colour stream, there are several flags you can use as it is passed directly to DX, we will use DXColor. A simple call to this using our quad object may look something like this:

−

~~<~~source lang="cpp">quad.SetFillColor((GXColor){0x00, 0x00, 0x00, 0xFF});~~<~~/source>

+

<source lang="cpp">quad.SetFillColor((GXColor){0x00, 0x00, 0x00, 0xFF});</source>

first we pass the colour flag called GXColor then the required RGBA colours. This would make our quad object fill with the colour black and because the alpha value is set to full its solid. To understand what the values in hex are see chapter 2. Aside from the ability to set a colour, being able to set its alpha is very handy, you can create fade screens by creating a variable that holds the value 255, then, when something happens you could fade it out then fade in again. There’s a function in spritetest.cpp that accomplishes this task although I won’t go over it here, but it can be used in a similar way to the SetTransparency() function that we used on the sprites.

Line 855: Line 855:

=== SetRotation and GetRotation ===

−

~~<~~source lang="cpp">void wsp::Quad::SetRotation ( f32 rotation )

+

<source lang="cpp">void wsp::Quad::SetRotation ( f32 rotation )

Sets the rotation angle of the quad.

Parameters:

−

rotation The new angle of the quad. It is measured in degrees/2, so if 90 degrees is wanted, 45 degrees should be the passed parameter.~~<~~/source>

+

rotation The new angle of the quad. It is measured in degrees/2, so if 90 degrees is wanted, 45 degrees should be the passed parameter.</source>

This works in the same way as SetRotation() in Lesson 4, the value passed must by divided by two in order to get the true result. As this simply works in the same way as SetRotation in the Sprite class, simply read that description in order to learn how to use it. GetRotation() works in the same way as any other ‘Get’ function. Simply call GetRotation from the Quad class to, well, get the current angle of rotation. Examples of how both of these functions would be used:

−

~~<~~source lang="cpp">quad.SetRotation(90/2); // This would rotate the image +45 degrees

+

<source lang="cpp">quad.SetRotation(90/2); // This would rotate the image +45 degrees

−

quad.GetRotation(); ~~<~~/source>

+

quad.GetRotation(); </source>

Second function will return the current rotation of the quad object which is of type Quad. After the first call for example GetRotation() will return 45.

Line 869: Line 869:

Now I will take a short interlude to introduce a function that will allow you to understand the rest of the functions I will go over. The function of which I speak of is SetBorder(), this again is found in the Quad class.

−

~~<~~source lang="cpp">void wsp::Quad::SetBorder ( bool border ) ~~<~~/source>

+

<source lang="cpp">void wsp::Quad::SetBorder ( bool border ) </source>

Turns the border of the quad on or off.

−

~~<~~source lang="cpp">Parameters:

+

<source lang="cpp">Parameters:

−

border Set to true if the quad should have border, false if not.~~<~~/source>

+

border Set to true if the quad should have border, false if not.</source>

Line 881: Line 881: −

~~<~~source lang="cpp">quad.SetBorder(true);~~<~~/source>

+

<source lang="cpp">quad.SetBorder(true);</source>

and to turn it off,

−

~~<~~source lang="cpp">quad.SetBorder(false);~~<~~/source>

+

<source lang="cpp">quad.SetBorder(false);</source>

That’s about it for that function, now we are able to move on to the rest of the Get, Set functions.

Line 892: Line 892:

=== SetBorderWidth and GetBorderWidth ===

−

~~<~~source lang="cpp">void wsp::Quad::SetBorderWidth ( u16 width )

+

<source lang="cpp">void wsp::Quad::SetBorderWidth ( u16 width )

Sets the border width of the quad.

Parameters:

−

width The new border width of the quad.~~<~~/source>

+

width The new border width of the quad.</source>

Line 913: Line 913:

A note on storing frames, in most professional applications, the animation frames wouldn’t be in separate files and loaded into separate addresses. Instead, the entire animation sequence would be stored in a single image, which itself would be loaded into a single address in memory. The application would then use some math (which you can easily do in Libwiisprite) to determine which parts of the image to display for each frame of the animation. But will just keep it simple, we will load the individual images. First you will need to declare a few instances:

−

~~<~~source lang = "cpp">

+

GameWindow gwd;

Sprite Frame1, Frame2, Frame3, Frame4;

Image image1, image2, image3, image4;

Quad backGroundQuad;

−

~~<~~/source>

+

</source>

You don’t really need the backGroundQuad object, but it makes for a more interesting program. Now we need to load some images, we will assume that you actually have these images at the given location on an SD card:

−

~~<~~source lang = "cpp">

+

// load images from SD card

if(image1.LoadImage("frame1.png") != IMG_LOAD_ERROR_NONE) exit(0);

Line 930: Line 930:

// Set Images to Sprite objects

−

Frame1.SetImage(&~~amp;~~image1);

+

Frame1.SetImage(&image1);

−

Frame2.SetImage(&~~amp;~~image2);

+

Frame2.SetImage(&image2);

−

Frame3.SetImage(&~~amp;~~image3);

+

Frame3.SetImage(&image3);

−

Frame4.SetImage(&~~amp;~~image4);

+

Frame4.SetImage(&image4);

−

~~<~~/source>

+

</source>

I won’t go over an entire program, but I will show you a couple of ways you might go about animating your player. The first method is a timer based animation, that is, the animation is based on each frame lasting a certain duration based on a value that increments over time. This is most commonly used in things like films.

There’s a few functions you will be needing for this along with an array that holds the addresses of the objects. We could accomplish this as follows:

−

~~<~~source lang = "cpp">int array[] = { &~~amp;~~Frame1, &~~amp;~~Frame2, Frame3, Frame4 };~~<~~/source>

+

<source lang = "cpp">int array[] = { &Frame1, &Frame2, Frame3, Frame4 };</source>

Now we create a function that checks each loop to see if it’s time to change to the next frame:

−

~~<~~source lang = "cpp">

+

bool IsTimeForNextFrame()

{

Line 956: Line 956:

return FALSE;

}

−

~~<~~/source>

+

</source>

Next thing we need to do is update the frame counter, there’s several ways of doing this, but I’ll opt for this method:

−

~~<~~source lang = "cpp">

+

Static frameNum = 0;

frameNum += 1;

if (frameNum == 4 )

frameNum = 0;

−

~~<~~/source>

+

</source>

This is somewhat boring though as most of what we want to do will involve something that will change dependant on the players input. So now I will introduce a slightly more complex scenario. We have a character that we want to animate, four images for walking left and four images for walking right. For the sake of simplicity, these are loaded from the SD card and are in the ‘Images’ folder. Now we want to make a program that will use these animations to animate our player while moving around, this is what we will look into.

First thing we need is our objects for sprites and images (still not using the more optimized way yet):

−

~~<~~source lang = "cpp">

+

Sprite RightFrame1, RightFrame2, RightFrame3, RightFrame4;

Sprite LeftFrame1, LeftFrame2, LeftFrame3, LeftFrame4;

Image r1, r2, r3, r4, l1, l2, l3, l4;

−

~~<~~/source>

+

</source>

Now we load the images:

Line 985: Line 985:

Then load into the appropriate Image objects:

−

RightFrame1.SetImage(&~~amp;~~r1);

+

RightFrame1.SetImage(&r1);

.

Line 995: Line 995:

That was the easy part. Now we need to determine how we will go about animating the images. I’ve chosen the easiest option I can for here although as far as animation methods go its very slow. First thing we will need is a structure that holds the players information (you may want to consider changing this to a class, then changing the members to private and creating get and set functions).

−

~~<~~source lang = "cpp">

+

struct Player {

int x = 100;

Line 1,006: Line 1,006:

Sprite image = direction[animateImage]

}

−

~~<~~/source>

+

</source>

Here’s what the members represent

Line 1,019: Line 1,019:

An update must be applied each loop to the Players x and y members and would be called as follows:

−

~~<~~source lang = "cpp">Player. image.SetPosition(Player.x, Player.y);~~<~~/source>

+

<source lang = "cpp">Player. image.SetPosition(Player.x, Player.y);</source>

Next thing we need is a function for changing our animation, I will separate this into two different functions, one will get the direction while the other changes the image. The first is the one that will get the direction:

−

~~<~~source lang = "cpp">

+

void readControls()

{

WPAD_ScanPads();

−

if(pressed &~~amp;~~ WPAD_BUTTON_RIGHT)

+

if(pressed & WPAD_BUTTON_RIGHT)

Player.x += 2;

Player.direction[] = right[];

animatePlayer()

−

elseif(pressed &~~amp;~~ WPAD_BUTTON_LEFT)

+

elseif(pressed & WPAD_BUTTON_LEFT)

Player.x -= 2;

Player.direction[] = left[];

animatePlayer()

}

−

~~<~~/source>

+

</source>

This function will get whatever is being pressed on the wii mote thats what WPAD_ScanPads(); does, it’s then checked against the if statement. We will take an example, if we were pressing the Right button on the wiiMote, Player’s x member would increase by 2, then, the right array would be copied to direction in Player, then after that, control would be passed to animatePlayer() which we will have a look at now.

Seeing as we’ve done all of this we will now need a function that will change the frame to which ever one relevant. The function may look something like this:

−

~~<~~source lang = "cpp">

+

void animatePlayer()

{

Line 1,064: Line 1,064:

}

−

~~<~~/source>

+

</source>

This isn’t the best way of doing it, but very easy to understand. This is called each loop and Player.time is incremented. It is then checked against a series of if statements to see if it should change the animateImage variable. Now we have a series of functions we need to know in which order we should call them, it doesn’t matter too much the way you call them but in relation to Flush and Draw function calls they should be called in a certain order so that we can actually see our animation working correctly.

Line 1,075: Line 1,075:

Something else to take into account is passing the current image to the current layer object. Another more advanced function for animation (that is far more efficient) follows:

−

~~<~~source lang = "cpp">

+

void addAnimation(string name, int frames, int interval)

{

Line 1,091: Line 1,091:

return math.ceil(animations[name].timer/animations[name].interval);

}

−

~~<~~/source>

+

</source>

Called as:

Line 1,099: Line 1,099:

That’s the manual way of doing animation, now that you have a foundation understanding of it all let’s take a look at how Libwiisprite does it and how it makes it easier for us. The first function we will look at is SetFrameSequence() found in the Sprite class.

−

~~<~~source lang = "cpp">

+

void wsp::Sprite::SetFrameSequence ( u32 * sequence,

u32 length

Line 1,107: Line 1,107:

sequence An array with data for each sequence. Each member cannot be bigger than the maximum amount of frames.

length The length of the sequence. Gets length amount of data.

−

~~<~~/source>

+

</source>

Seeing as how there is a section in the documentation about this specific topic, here’s what it says:

Line 1,137: Line 1,137:

Explanation is on the previous page, but to tell you what’s actually happening, it increments a pointer to the next element, if the pointer is at the end it will be pointing to null in which case it will move to element 0.

−

~~<~~source lang = "cpp">void wsp::Sprite::PrevFrame ( )

+

<source lang = "cpp">void wsp::Sprite::PrevFrame ( )

Sets the current frame to the previous frame in the sequence. Goes to the last member if the current frame is 0.

−

~~<~~/source>

+

</source>

Similar to NextFrame() although decrements the pointer to point to the nth – 1 element, if the pointer moves past the 0th element and subsequently points to null, then it will move to the last element in the array.

−

~~<~~source lang = "cpp">

+

u32 wsp::Sprite::GetRawFrameCount ( ) const

Gets how many frames there are at all.

−

~~<~~/source>

+

</source>

Simple enough function, I don’t bother explaining what’s already written.

−

~~<~~source lang = "cpp">

+

u32 wsp::Sprite::GetFrame ( ) const

Gets the current frame of the sprite.

Returns:

The frame this sprite is at.

−

~~<~~/source>

+

</source>

This will be the element of the array passed to SetFrameSequence(). And that’s about it for this lesson, till next time...

Line 1,170: Line 1,170:

This would require some math and a lot of GetWidth() calls, but, Libwiisprite has brought us a bunch of functions that will allow us to check collision without having to even know what math is. First function regarding collision is CollidesWith(), if you have looked at the documentation, you will see 3 different definitions for CollidesWith(), we will first look at the second which looks like this:

−

~~<~~source lang="cpp">bool wsp::Sprite::CollidesWith ( const Sprite * sprite,

+

<source lang="cpp">bool wsp::Sprite::CollidesWith ( const Sprite * sprite,

bool complete = false

−

) const~~<~~/source>

+

) const</source>

Checks if another sprite collides with this sprite.

−

~~<~~source lang="cpp">Parameters:

+

<source lang="cpp">Parameters:

sprite The sprite to check.

−

complete Set this to true, if you also want to use zoom and rotation with the collision detecting.~~<~~/source>

+

complete Set this to true, if you also want to use zoom and rotation with the collision detecting.</source>

Now, for a lot of people that are new to collision detection or programming in general, this will make little sense, I’ll show you a small example on how to use it. First we set up two sprite objects (lets assume that we have already passed it an Image object), called sprite and sprite2. This is how we would pass them to the function:

−

~~<~~source lang="cpp">sprite.CollidesWith(&~~amp;~~sprite2);~~<~~/source>

+

<source lang="cpp">sprite.CollidesWith(&sprite2);</source>

This will test both sprite and sprite2’s locations in terms of their x and y values AS WELL as their x values +width and height values + height. If sprite and sprite2 are colliding

Line 1,204: Line 1,204: −

~~<~~source lang="cpp">int main()

+

<source lang="cpp">int main()

{

init stuff

Line 1,213: Line 1,213:

int oldX = Player.x;

get input from wiiMote

−

if ( sprite2.CollidesWith(&~~amp;~~sprite))

+

if ( sprite2.CollidesWith(&sprite))

−

Player.x = oldX~~<~~/source>

+

Player.x = oldX</source>

The previous section of code gets the players x position at the start of every loop and saves it in an int. Then, it makes a call to CollidesWith() and tests if sprite is colliding with sprite2, if this returns true then Player.x will be changed to whatever it was at the start of that loop. You have to make sure that you lay out the get x, THEN input from the wiimote then call the collision function. If you don’t understand why this must be done, I’ll walk you through an example, say Player.x = 100, when it gets to

−

~~<~~source lang="cpp">int oldX = Player.x;~~<~~/source>

+

<source lang="cpp">int oldX = Player.x;</source>

Line 1,225: Line 1,225:

Now, you may have noticed all of the calls CollidesWith() have only used the first parameter, I’ve stayed away completely from it. So now I shall reveal its functionality. Due to the nature of the collision we’ve been using, it will only work for images at their native resolution and not rotated (amongst other things) so that’s why we have the second parameter. Set it true if you want to add collision detection for objects that are rotated or zoomed, if you aren’t sure how to go about this:

−

~~<~~source lang="cpp">sprite2.CollidesWith(&~~amp;~~sprite, true);~~<~~/source>

+

<source lang="cpp">sprite2.CollidesWith(&sprite, true);</source>

There is a cost associated with this though, if you don’t need to check collision on something that’s rotating or zooming, don’t. It’s not very good programming practice and will lower the performance of your program.

Line 1,239: Line 1,239:

Now, you may be wondering “how do we set up these nodes?”, I will do it using Libwiisprites Rectangle object, so we set up four nodes:

−

~~<~~source lang="cpp">Rectangle Node1, Node2, Node3, Node4;~~<~~/source>

+

<source lang="cpp">Rectangle Node1, Node2, Node3, Node4;</source>

Rectangle is a structure defined as:

−

~~<~~source lang="cpp">Public Attributes

+

<source lang="cpp">Public Attributes

f32 x

Line 1,259: Line 1,259:

Detailed Description

−

Basic data for a rectangle.~~<~~/source>

+

Basic data for a rectangle.</source>

Now we need to fill these attributes. To simplify things, let’s say our screen resolution is 800x600, now we need to separate 800x600 into 4 equal squares like in figure 4. So we take the resolution and divided it by square root of n number of nodes, so square root of 4 is 2, 800 x 600 divided by 2 = 400 x 300, this is the size of each of our nodes and will be filled in as follows:

−

~~<~~source lang="cpp">Node1.height = 300; Node1.width = 400;~~<~~/source>

+

<source lang="cpp">Node1.height = 300; Node1.width = 400;</source>

And continue on for the rest of the nodes filling in the same values. Next we need the x and y values of the nodes so the program knows where they are on the screen. This is easily done considering the top left of the screen to be (0,0) and x increases moving left with y increasing moving down the screen, look at figure 5 for a visual representation of all coordinates.

Line 1,271: Line 1,271:

If you recall, all coordinates for images (and objects alike) are for the top left corner of the image/object, so our x and y values would look like this:

−

~~<~~source lang="cpp">Node1.x = 0; Node1.y = 0;

+

<source lang="cpp">Node1.x = 0; Node1.y = 0;

Node2.x = 400; Node2.y = 0;

Node3.x = 0; Node3.y = 300;

−

Node4.x = 400, Node 4.y = 300;~~<~~/source>

+

Node4.x = 400, Node 4.y = 300;</source>

If you still don’t see where I got the values look at the coordinates at the top left corner of every node, they correspond to the values filled in for their x and y values.

Line 1,280: Line 1,280:

Next we check collision against each of the nodes, not the objects that we are actually colliding with within the nodes, we don’t care about weather or not we are colliding with them (note, some additional coding may be required dependant on how your program is set up), so we would do it like this:

−

~~<~~source lang="cpp">If (Player.CollidesWith(&~~amp;~~Node1)) { // check node1

+

<source lang="cpp">If (Player.CollidesWith(&Node1)) { // check node1

// other stuff here }

−

If (Player.CollidesWith(&~~amp;~~Node2)) { // check node2

+

If (Player.CollidesWith(&Node2)) { // check node2

// other stuff here }

−

If (Player.CollidesWith(&~~amp;~~Node3)) { // check node3

+

If (Player.CollidesWith(&Node3)) { // check node3

// other stuff here }

−

If (Player.CollidesWith(&~~amp;~~Node4)) { // check node4

+

If (Player.CollidesWith(&Node4)) { // check node4

// other stuff here }

−

~~<~~/source>

+

</source>

Line 1,300: Line 1,300:

First our program will check Node1, because Player isn’t colliding with or ‘in’ Node1, this will return false and it will move to Node2, Node’s 2 and 3 will return false, but Node4 will return true and execute other stuff, this other stuff is the collision checks that are within that node so let’s replace other stuff with the other collision checks for the objects that are in Node4:

−

~~<~~source lang="cpp">If (Player.CollidesWith(&~~amp;~~Node1)) { // check node1

+

<source lang="cpp">If (Player.CollidesWith(&Node1)) { // check node1

−

if ( Player.CollidesWith(&~~amp;~~object1))

+

if ( Player.CollidesWith(&object1))

Player.x = oldX;

Player.y = oldY;

Line 1,308: Line 1,308:

.

Etc

−

if ( Player.CollidesWith(&~~amp;~~objectN))

+

if ( Player.CollidesWith(&objectN))

Player.x = oldX;

Player.y = oldY;

−

}~~<~~/source>

+

}</source>

See now, we have cut 100 checks (25 objects in each node was the example), down to just 29, 4 for the nodes and 25 for the objects in the node, that’s 71 less checks and exactly the same result as 100 checks! Now consider the following figure (7)

Line 1,341: Line 1,341:

Before I finish up this section on collision detection, I’ll go over a couple more functions from Libwiisprite related to collision detection. The first is DefineCollisionRectangle().

−

~~<~~source lang="cpp">void wsp::Sprite::DefineCollisionRectangle ( f32 x,

+

<source lang="cpp">void wsp::Sprite::DefineCollisionRectangle ( f32 x,

f32 y,

f32 width,

f32 height

−

) ~~<~~/source>

+

) </source>

Defines a collision rectangle. On startup it's the same as Image width and height.

−

~~<~~source lang="cpp">Parameters:

+

<source lang="cpp">Parameters:

x Offset from the upper left corners position of the sprite.

y Offset from the upper left corners position of the sprite.

width The width of the collision rectangle.

−

height The height of the collision rectangle.~~<~~/source>

+

height The height of the collision rectangle.</source>

It looks long and complicated but really it’s just the same as setting up a Rectangle object. A Collision Rectangle is an area in our plane that we can check against for collision that has 4 sides, exactly the same as our Nodes, so let’s say we wanted to create Nod1 from this, we would do it as such:

−

~~<~~source lang="cpp">Node1.DefineCollisionRectangle(0,0,400,300);~~<~~/source>

+

<source lang="cpp">Node1.DefineCollisionRectangle(0,0,400,300);</source>

X position = 0, y position = 0 (top left of the screen is (0,0,)), width is 400 pixels and height, 300. Simple enough, now we have a node set up. Instead of using the CollidesWith() function as we have previously been using, we will use a new function in Libwiisprite called GetCollisionRectangle()

−

~~<~~source lang="cpp">const Rectangle* wsp::Sprite::GetCollisionRectangle

+

<source lang="cpp">const Rectangle* wsp::Sprite::GetCollisionRectangle

( ) const

Gets the current collision rectangle.

−

Returns: A pointer to the rectangle.~~<~~/source>

+

Returns: A pointer to the rectangle.</source>

Rather than returning true or false, it will return a pointer the current collision rectangle, which we know as being a node. From here, we then check the player against the objects in that node just like before but use pointers for the nodes instead of the object itself. Some additional coding may be required for objects that are colliding with more than one node.

Line 1,381: Line 1,381:

So, first thing we need to do is load in an image so we must create an Image object

−

~~<~~source lang="cpp">Image spirteSheet;~~<~~/source>

+

<source lang="cpp">Image spirteSheet;</source>

For this example, imagine this is our sprite sheet that we will be using throughout the program:

Line 1,397: Line 1,397:

then image from memory or from file:

−

~~<~~source lang="cpp">if(spirteSheet.LoadImage("spirteSheet.png") != IMG_LOAD_ERROR_NONE)exit(0);~~<~~/source>

+

<source lang="cpp">if(spirteSheet.LoadImage("spirteSheet.png") != IMG_LOAD_ERROR_NONE)exit(0);</source>

or

−

~~<~~source lang="cpp">if(spirteSheet.LoadImage(spirteSheetImage) != IMG_LOAD_ERROR_NONE)exit(0);~~<~~/source>

+

<source lang="cpp">if(spirteSheet.LoadImage(spirteSheetImage) != IMG_LOAD_ERROR_NONE)exit(0);</source>

Instead of creating a Sprite object and passing it the address of the Image object, we set up a TiledLayer object and call its constructor, so let’s take a look at the constructor:

−

~~<~~source lang="cpp">Constructor &~~amp;~~ Destructor Documentation

+

<source lang="cpp">Constructor & Destructor Documentation

wsp::TiledLayer::TiledLayer ( s32 columns,

s32 rows,

Line 1,415: Line 1,415:

columns The number of columns.

rows The number of rows.

−

ani The possible number of tiles with animations.~~<~~/source>

+

ani The possible number of tiles with animations.</source>

−

If we look at our sprite sheet we can see that there are 4 rows (rows go these ways ~~<~~-> ) and 2 columns (go up and down). The number of possible animation tiles is rows times columns which gives us all of our values, 2, 4 and 8 (remember to include tiledlayer.h):

+

If we look at our sprite sheet we can see that there are 4 rows (rows go these ways <-> ) and 2 columns (go up and down). The number of possible animation tiles is rows times columns which gives us all of our values, 2, 4 and 8 (remember to include tiledlayer.h):

−

~~<~~source lang="cpp">TiledLayer ourTileObject(2, 4, 8);~~<~~/source>

+

<source lang="cpp">TiledLayer ourTileObject(2, 4, 8);</source>

This determines how our image will be split up. The width of each tile will be the images native width divided by the number of columns you input, and the height of each tile will be the images native height divided by the number of rows you pass to the constructor.

Now we have a TiledLayer object setup called ourTileObject (excellent name I believe), now we need to load our image into it, we do this using the function called SetStaticTileset()

−

~~<~~source lang="cpp">void wsp::TiledLayer::SetStaticTileset ( Image * image,

+

<source lang="cpp">void wsp::TiledLayer::SetStaticTileset ( Image * image,

u32 tileWidth,

u32 tileHeight

Line 1,432: Line 1,432:

image The image to set as the new Tilesetlayer. If the Image has more or equal tiles, the data won't change.

tileWidth The width of each tile.

−

tileHeight The height of each tile.~~<~~/source>

+

tileHeight The height of each tile.</source>

The first parameter is simply the address of Image object called spriteSheet, the second ones aren’t difficult but I will explain. For our above sprite sheet, the resolution is 100 x 200, that is, 100 pixels across by 200 pixels down, the width of each tile is 50 pixels (total width divided by total number of columns) and the height of each tile 50 pixels (total height divided by total number of rows). So we can fill in the parameters as follows:

−

~~<~~source lang="cpp">ourTileObject. SetStaticTileset(&~~amp;~~spriteSheet, 50, 50);~~<~~/source>

+

<source lang="cpp">ourTileObject. SetStaticTileset(&spriteSheet, 50, 50);</source>

This will pass our sprite sheet to outTileObject and specify that each tile must have a height and width of 50 pixels. Each tile is assigned a unique index number. The tile located in the upper-left corner of the Image is assigned an index of 1. The remaining tiles are then numbered consecutively in row-major order (indices are assigned across the first row, then the second row, and so on). These tiles are regarded as static tiles because there is a fixed link between the tile and the image data associated with it.

Line 1,468: Line 1,468:

Now we know how to use the main part of the functions, we will now take a look at some more functions that will help you use tiles in your programs. First I will go over a series of ‘get’ functions, the first of which is GetRows() (and GetColumns() . They are both defined as:

−

~~<~~source lang="cpp">u32 wsp::TiledLayer::GetColumns ( ) const

+

<source lang="cpp">u32 wsp::TiledLayer::GetColumns ( ) const

Gets the size of the columns.

Returns:

−

The size of one column.~~<~~/source>

+

The size of one column.</source>

And

−

~~<~~source lang="cpp">u32 wsp::TiledLayer::GetRows ( ) const

+

<source lang="cpp">u32 wsp::TiledLayer::GetRows ( ) const

Gets the size of the rows.

Returns:

−

The size of one row.~~<~~/source>

+

The size of one row.</source>

Very easy to use function, just call it and it return a type u32 of the number of columns or rows in that Object. The next is a handy function for getting the address of the image passed to the TiledLayer object:

−

~~<~~source lang="cpp">const Image* wsp::TiledLayer::GetImage ( ) const

+

<source lang="cpp">const Image* wsp::TiledLayer::GetImage ( ) const

Gets the image of the tiledlayer.

Returns:

−

A pointer to the image. NULL if there is no image specified.~~<~~/source>

+

A pointer to the image. NULL if there is no image specified.</source>

Simple enough to use, just make sure you have something set up to handle if this function returns null otherwise your program will not be very happy. On we go to the next functions! GetCellHeight() and GetCellWidth() .

−

~~<~~source lang="cpp">u32 wsp::TiledLayer::GetCellWidth ( ) const

+

<source lang="cpp">u32 wsp::TiledLayer::GetCellWidth ( ) const

Gets the cell width.

Returns:

−

The width of a single cell.~~<~~/source>

+

The width of a single cell.</source>

And

−

~~<~~source lang="cpp">u32 wsp::TiledLayer::GetCellHeight ( ) const

+

<source lang="cpp">u32 wsp::TiledLayer::GetCellHeight ( ) const

Gets the cell height.

Returns:

−

The height of a single cell.~~<~~/source>

+

The height of a single cell.</source>

This will return a type u32 with the width or height in pixels (obviously you can’t have half a pixel), this can be useful if you want to manipulate the size of each cell by its current size +/- a value.

Line 1,505: Line 1,505:

Next functions we will look at regard the alpha value of the Image object passed to, this works just the same as SetTransparency() for a Sprites image:

−

~~<~~source lang="cpp">void wsp::TiledLayer::SetTransparency ( u8 alpha )

+

<source lang="cpp">void wsp::TiledLayer::SetTransparency ( u8 alpha )

Sets the transparency of the tiledlayer.

Parameters:

−

alpha Sets the transparency. Has a range from 0x00 (invisible) to 0xFF (fully visible)~~<~~/source>

+

alpha Sets the transparency. Has a range from 0x00 (invisible) to 0xFF (fully visible)</source>

And to get...

−

~~<~~source lang="cpp">u8 wsp::TiledLayer::GetTransparency ( ) const

+

<source lang="cpp">u8 wsp::TiledLayer::GetTransparency ( ) const

Gets the transparency of the tiledlayer.

Returns:

−

The current transparency of the tiledlayer. Has a range from 0x00 (invisible) to 0xFF (fully visible)~~<~~/source>

+

The current transparency of the tiledlayer. Has a range from 0x00 (invisible) to 0xFF (fully visible)</source>

I won’t bother telling you what these do, the examples enough and there’s a more detailed description on getting and setting alpha values in chapter 4.

Line 1,521: Line 1,521:

Moving along quickly, we will now look at the last function regarding the TiledLayer class, Draw()

−

~~<~~source lang="cpp">void Draw (f32 offsetX=0, f32 offsetY=0) const

+

<source lang="cpp">void Draw (f32 offsetX=0, f32 offsetY=0) const

−

Draws the tiledlayer to the current viewport.~~<~~/source>

+

Draws the tiledlayer to the current viewport.</source>

A very handy function for easily drawing your tiles, ignore the parameters for now, just leave them as 0, this will draw a TiledLayer object to the viewport, so you can see it basically. Call like this:

−

~~<~~source lang="cpp">ourTileObject.Draw(0,0);~~<~~/source>

+

<source lang="cpp">ourTileObject.Draw(0,0);</source>

Simple! And that brings us to the end of the Tiled Layer section of this guide. Note: some of this was taken from http://java.sun.com/ I thank the people at Sun for allowing the use of their material in this section. Until next time,

Line 1,540: Line 1,540:

If however, you were to print that image at location (100,100) with an offset of (10,10) then you would print that image at location (110,110). You can calculate the offset by adding the coordinates, this goes for negatives as well, a few examples.

−

~~<~~source lang="cpp">Coordinates OffSet PrintLocation

+

<source lang="cpp">Coordinates OffSet PrintLocation

(10, 40) (-20, 4) (-10, 44)

(300, 0) (0, 0) (300, 0)

−

Etc~~<~~/source>

+

Etc</source>

That’s about all there is to offset, so let’s look at the slightly more complex, Pixel Referencing. The easiest way to understand pixel references is an example. In sprite.cpp we looked at the following SetPosition() function:

−

~~<~~source lang="cpp">sprite2.SetPosition(320, 240);~~<~~/source>

+

<source lang="cpp">sprite2.SetPosition(320, 240);</source>

This was one method of setting where the image should be printed, but I completely ignored the other which is, SetRefPixelPositioning()

−

~~<~~source lang="cpp">void wsp::Sprite::SetRefPixelPositioning ( REFPIXEL_POSITIONING

+

<source lang="cpp">void wsp::Sprite::SetRefPixelPositioning ( REFPIXEL_POSITIONING

positioning )

Sets how the sprite should react on X and Y coordinates.

Parameters:

−

positioning Specifies the type of the positioning.~~<~~/source>

+

positioning Specifies the type of the positioning.</source>

Usually when you print an image to the screen, it, by default, prints to the top left (wsp::REFPIXEL_POSITIONING, default parameter in the emuneration is REFPIXEL_POS_TOPLEFT), but what we have done here, is instead pass it a different parameter that lets you customize where your image will print by default. We pass the function REFPIXEL_POS_PIXEL, which in is defined in the enum section:

Line 1,591: Line 1,591:

main.cpp

−

~~<~~source lang = "cpp">

+

−

#include ~~<~~wiiuse/wpad.h>

+

#include <wiiuse/wpad.h>

−

#include ~~<~~wiisprite.h>

+

#include <wiisprite.h>

// libwiisprite uses wsp as it's namespace

Line 1,612: Line 1,612:

{

WPAD_ScanPads();

−

if(WPAD_ButtonsDown(WPAD_CHAN_0)&~~amp;~~WPAD_BUTTON_HOME)

+

if(WPAD_ButtonsDown(WPAD_CHAN_0)&WPAD_BUTTON_HOME)

break;

gwd.Flush();

Line 1,618: Line 1,618:

return 0;

}

−

~~<~~/source>

+

</source>

=== Lesson 3: Loading and printing images. ===

Line 1,624: Line 1,624:

Description: a simple program that loads an image from SD card and prints it to the screen, see Lesson3 for more information.

−

~~<~~source lang = "cpp">

+

−

#include ~~<~~stdio.h>

+

#include <stdio.h>

−

#include ~~<~~stdlib.h>

+

#include <stdlib.h>

−

#include ~~<~~gccore.h>

+

#include <gccore.h>

−

#include ~~<~~wiiuse/wpad.h>

+

#include <wiiuse/wpad.h>

−

#include ~~<~~fat.h>

+

#include <fat.h>

−

#include ~~<~~wiisprite.h>

+

#include <wiisprite.h>

using namespace wsp;

Line 1,647: Line 1,647:

if(image.LoadImage("libwiisprite.png") != IMG_LOAD_ERROR_NONE)exit(0);

−

sprite.SetImage(&~~amp;~~image);

+

sprite.SetImage(&image);

sprite.SetPosition(0, 0);

−

manager.Append(&~~amp;~~sprite); // Gets drawn the closest.

+

manager.Append(&sprite); // Gets drawn the closest.

WPAD_Init();

Line 1,670: Line 1,670:

return 0;

}

−

~~<~~/source>

+

</source>

=== Lesson 4: Basic Image Manipulation ===

Line 1,676: Line 1,676:

Description: Shows some examples of manipulation images with some of the basic public functions in Libwiisprite, this was taken from sprite.cpp in the Libwiisprite examples release. This assumes you have two images on the SD card called libwiisprite.png and libwiisprite2.png..

−

~~<~~source lang = "cpp">

+

−

#include ~~<~~stdio.h>

+

#include <stdio.h>

−

#include ~~<~~stdlib.h>

+

#include <stdlib.h>

−

#include ~~<~~gccore.h>

+

#include <gccore.h>

−

#include ~~<~~wiiuse/wpad.h>

+

#include <wiiuse/wpad.h>

−

#include ~~<~~fat.h>

+

#include <fat.h>

−

#include ~~<~~wiisprite.h>

+

#include <wiisprite.h>

using namespace wsp;

Line 1,706: Line 1,706:

if(image2.LoadImage("libwiisprite2.png") != IMG_LOAD_ERROR_NONE)exit(0);

−

sprite.SetImage(&~~amp;~~image);

+

sprite.SetImage(&image);

−

sprite2.SetImage(&~~amp;~~image2);

+

sprite2.SetImage(&image2);

sprite.SetPosition(0, 0);

Line 1,718: Line 1,718:

quad.SetHeight(600);

−

manager.Append(&~~amp;~~quad);

+

manager.Append(&quad);

−

manager.Append(&~~amp;~~sprite);

+

manager.Append(&sprite);

−

manager.Append(&~~amp;~~sprite2);

+

manager.Append(&sprite2);

WPAD_Init();

Line 1,731: Line 1,731:

u32 pressed = WPAD_ButtonsHeld(WPAD_CHAN_0);

−

if(pressed &~~amp;~~ WPAD_BUTTON_HOME)fading = 2;

+

if(pressed & WPAD_BUTTON_HOME)fading = 2;

if(calc_fade(fading))break;

if(fadedata == 0x00)fading = 0;

−

if(pressed &~~amp;~~ WPAD_BUTTON_MINUS)

+

if(pressed & WPAD_BUTTON_MINUS)

sprite.SetZoom(sprite.GetZoom()-0.1f);

−

if(pressed &~~amp;~~ WPAD_BUTTON_PLUS)

+

if(pressed & WPAD_BUTTON_PLUS)

sprite.SetZoom(sprite.GetZoom()+0.1f);

−

if(pressed &~~amp;~~ WPAD_BUTTON_A &~~amp;~~&~~amp;~~ sprite.GetTransparency() ~~<~~ 0xff-4)

+

if(pressed & WPAD_BUTTON_A && sprite.GetTransparency() < 0xff-4)

sprite.SetTransparency(sprite.GetTransparency()+5);

−

if(pressed &~~amp;~~ WPAD_BUTTON_B &~~amp;~~&~~amp;~~ sprite.GetTransparency() > 4){

+

if(pressed & WPAD_BUTTON_B && sprite.GetTransparency() > 4){

sprite.SetTransparency(sprite.GetTransparency()-5);

}

−

if(pressed &~~amp;~~ WPAD_BUTTON_UP)

+

if(pressed & WPAD_BUTTON_UP)

sprite2.SetStretchHeight(sprite2.GetStretchHeight()+0.1f);

−

if(pressed &~~amp;~~ WPAD_BUTTON_DOWN)

+

if(pressed & WPAD_BUTTON_DOWN)

sprite2.SetStretchHeight(sprite2.GetStretchHeight()-0.1f);

−

if(pressed &~~amp;~~ WPAD_BUTTON_RIGHT)

+

if(pressed & WPAD_BUTTON_RIGHT)

sprite2.SetStretchWidth(sprite2.GetStretchWidth()+0.1f);

−

if(pressed &~~amp;~~ WPAD_BUTTON_LEFT)

+

if(pressed & WPAD_BUTTON_LEFT)

sprite2.SetStretchWidth(sprite2.GetStretchWidth()-0.1f);

ir_t ir;

−

WPAD_IR(WPAD_CHAN_0, &~~amp;~~ir);

+

WPAD_IR(WPAD_CHAN_0, &ir);

sprite.SetPosition(ir.sx-WSP_POINTER_CORRECTION_X, ir.sy-WSP_POINTER_CORRECTION_Y);

sprite.Move(-((f32)sprite.GetWidth()/2), -((f32)sprite.GetHeight()/2));

Line 1,776: Line 1,776:

if(fade == 1){ // Fading in

−

if(fadedata ~~<~~ 0x10)fadedata = 0x10;

+

if(fadedata < 0x10)fadedata = 0x10;

fadedata -= 0x10;

}else if(fade == 2){ //Fading out

−

if(0xef ~~<~~ fadedata)fadedata = 0xef;

+

if(0xef < fadedata)fadedata = 0xef;

fadedata += 0x10;

}

Line 1,785: Line 1,785:

quad.SetFillColor((GXColor){0x00, 0x00, 0x00, fadedata});

−

if(fade == 2 &~~amp;~~&~~amp;~~ fadedata == 0xff)return true;

+

if(fade == 2 && fadedata == 0xff)return true;

return false;

}

−

~~<~~/source>

+

</source>

=== Lesson 5: Layer Management. ===

Line 1,795: Line 1,795:

Description: A small program that shows how to use function in the LayerManager class. By then end of the series of calls, Quad is at location 0 and sprite is at 1.

−

~~<~~source lang = "cpp">

+

−

#include ~~<~~stdio.h>

+

#include <stdio.h>

−

#include ~~<~~stdlib.h>

+

#include <stdlib.h>

−

#include ~~<~~gccore.h>

+

#include <gccore.h>

−

#include ~~<~~wiiuse/wpad.h>

+

#include <wiiuse/wpad.h>

−

#include ~~<~~fat.h>

+

#include <fat.h>

−

#include ~~<~~wiisprite.h>

+

#include <wiisprite.h>

using namespace wsp;

Line 1,819: Line 1,819:

if(image.LoadImage("libwiisprite.png") != IMG_LOAD_ERROR_NONE)exit(0);

−

sprite.SetImage(&~~amp;~~image);

+

sprite.SetImage(&image);

sprite.SetPosition(0, 0);

Line 1,827: Line 1,827:

//action starts here

−

manager.Append(&~~amp;~~sprite);

+

manager.Append(&sprite);

−

manager.Append(&~~amp;~~quad);

+

manager.Append(&quad);

u32 sizeOfList = manager.GetSize();

Line 1,834: Line 1,834:

manager.RemoveAll();

−

manager.Append(&~~amp;~~sprite);

+

manager.Append(&sprite);

−

manager.Insert(&~~amp;~~quad, 0);

+

manager.Insert(&quad, 0);

// and ends here

Line 1,856: Line 1,856:

return 0;

}

−

~~<~~/source>

+

</source>

=== Lesson 6: Quad. ===

Line 1,862: Line 1,862:

Description: Shows examples of how you might call functions in the quad class as well as how to create one.

−

~~<~~source lang = "cpp">

+

−

#include ~~<~~stdio.h>

+

#include <stdio.h>

−

#include ~~<~~stdlib.h>

+

#include <stdlib.h>

−

#include ~~<~~gccore.h>

+

#include <gccore.h>

−

#include ~~<~~wiiuse/wpad.h>

+

#include <wiiuse/wpad.h>

−

#include ~~<~~fat.h>

+

#include <fat.h>

−

#include ~~<~~wiisprite.h>

+

#include <wiisprite.h>

using namespace wsp;

Line 1,896: Line 1,896:

quad2.SetFillColor((GXColor) {0x00, 0x00, 0x00, 0x00});

−

manager.Append(&~~amp;~~quad);

+

manager.Append(&quad);

−

manager.Append(&~~amp;~~quad2);

+

manager.Append(&quad2);

WPAD_Init();

Line 1,916: Line 1,916:

return 0;

−

}~~<~~/source>

+

}</source>

=== Lesson 7: Basic Animation ===

Line 1,925: Line 1,925:

Description: Shows how to test for collision between various objects, does not contain an example for node based collision detection (yet).

−

~~<~~source lang = "cpp">

+

−

#include ~~<~~stdio.h>

+

#include <stdio.h>

−

#include ~~<~~stdlib.h>

+

#include <stdlib.h>

−

#include ~~<~~gccore.h>

+

#include <gccore.h>

−

#include ~~<~~wiiuse/wpad.h>

+

#include <wiiuse/wpad.h>

−

#include ~~<~~fat.h>

+

#include <fat.h>

−

#include ~~<~~wiisprite.h>

+

#include <wiisprite.h>

using namespace wsp;

Line 1,965: Line 1,965:

if(image.LoadImage("libwiisprite2.png") != IMG_LOAD_ERROR_NONE)exit(0);

−

sprite.SetImage(&~~amp;~~image);

+

sprite.SetImage(&image);

sprite.SetPosition(Player.xpos, Player.ypos);

−

sprite2.SetImage(&~~amp;~~image2);

+

sprite2.SetImage(&image2);

sprite2.SetPosition(200,200);

−

manager.Append(&~~amp;~~sprite);

+

manager.Append(&sprite);

−

manager.Append(&~~amp;~~Rectangle);

+

manager.Append(&Rectangle);

rect.width = 20; rect.height = 20;

rect.x = 50; rect.y = 50;

−

quad.SetRectangle(&~~amp;~~rect);

+

quad.SetRectangle(&rect);

WPAD_Init();

Line 1,988: Line 1,988:

u32 pressed = WPAD_ButtonsHeld(WPAD_CHAN_0);

−

if(pressed &~~amp;~~ WPAD_BUTTON_UP)

+

if(pressed & WPAD_BUTTON_UP)

Player.ypos -= 1;

−

if(pressed &~~amp;~~ WPAD_BUTTON_DOWN)

+

if(pressed & WPAD_BUTTON_DOWN)

Player.ypos += 1;

−

if(pressed &~~amp;~~ WPAD_BUTTON_LEFT)

+

if(pressed & WPAD_BUTTON_LEFT)

Player.xpos -= 1;

−

if(pressed &~~amp;~~ WPAD_BUTTON_RIGHT)

+

if(pressed & WPAD_BUTTON_RIGHT)

Player.xpos += 1;

Line 2,018: Line 2,018:

void checkCollision(u32 oldX, u32 oldY)

{

−

if (sprite.CollidesWith(&~~amp;~~sprite2)) {

+

if (sprite.CollidesWith(&sprite2)) {

Player.x = oldX;

Player.y = oldY;

}

−

if (sprite.CollidesWith(&~~amp;~~quad)) {

+

if (sprite.CollidesWith(&quad)) {

Player.x = oldX;

Player.y = oldY;

}

−

}~~<~~/source>

+

}</source>

=== Lesson 9: Tiled Layers. ===

LoganA

3,893

edits

Changes

Libwiisprite/tutorial (view source)

Revision as of 21:20, 25 November 2010

Navigation menu

Search