Tutorial 8: Image changes

In this Wii programming tutorial we will modify the button detection tutorial and as requested show you how you can easily change a button from yes to no based on the user’s input. You can grab the PDF of this tutorial here: codemii-tutorial-8

Firstly download this tutorial8-blank which will contain the required files to get us started. Include in the zip are two images and they have been given added to the main.c file. Shown below are the important parts of the source code. I assume you know the rest from our other tutorials.

[sourcecode language=’c’]int main() {


memset(&yes, 0, sizeof(JPEGIMG));
memset(&no, 0, sizeof(JPEGIMG));

yes.inbuffer = picdata;
yes.inbufferlength = piclength;
no.inbuffer = picdata1;
no.inbufferlength = piclength1;



int cursor_x = 100;
int cursor_y = 100;

while(1) {

VIDEO_ClearFrameBuffer (rmode, xfb, COLOR_BLACK);


if (PAD_StickY(0) > 18) {
cursor_y -= 5;
if (PAD_StickY(0) < -18) { cursor_y += 5; } if (PAD_StickX(0) > 18) {
cursor_x += 5;
if (PAD_StickX(0) < -18) { cursor_x -= 5; } u16 buttonsDown = PAD_ButtonsDown(0); if(buttonsDown & PAD_BUTTON_A) { if (cursor_x >= 105 && cursor_x <= 155 && cursor_y >= 70 && cursor_y <= 95) { printf("Button pressed\n"); } printf("x = %i. y = %i\n", cursor_x, cursor_y); usleep(500000); } display_jpeg(yes, 50, 50); DrawBox (cursor_x, cursor_y, cursor_x + 1, cursor_y + 1, COLOR_WHITE); VIDEO_WaitVSync(); } return 0; }[/sourcecode] It’s pretty much the same as tutorial 6 except we now have two JPEG images defined which are “yes” and “no”. Now all we need to do is remove the print statements, add in a variable which can keep track of the button pressing and an if statement. First thing to do is create a variable which will handle the button, since there will only be two options (yes and no) we can simply have this variable set as a boolean (bool yes_no_button = true;) There is a long way and a simple way to do this. I’ll show you the longer way first. Now we just set an if statement after the user has pressed the button and it is in our buttons range, if the yes_no_button is equal to true then change it to false otherwise change it to true (since we know it would be false). [sourcecode language='c']if (yes_no_button == true) { yes_no_button = false; } else { yes_no_button = true; }[/sourcecode] The next thing to do is determine which image to display. Another simple if statement covers this exactly the same as above except it shows the image. [sourcecode language='c']if (yes_no_button == true) { display_jpeg(yes, 50, 50); } else { display_jpeg(no, 50, 50); }[/sourcecode] Only relevant code is shown below, our code now looks like this: [sourcecode language='c']… int cursor_x = 100; int cursor_y = 100; bool yes_no_button = true; while(1) { … u16 buttonsDown = PAD_ButtonsDown(0); if (buttonsDown & PAD_BUTTON_A) { if (cursor_x >= 105 && cursor_x <= 155 && cursor_y >= 70 && cursor_y <= 95) { if (yes_no_button == true) { yes_no_button = false; } else { yes_no_button = true; } } } if (yes_no_button == true) { display_jpeg(yes, 50, 50); } else { display_jpeg(no, 50, 50); } …[/sourcecode] Compile and test it, when pressing the A key (q) in gcube over the image it will change from yes to no to yes, etc. tutorial8-yes-no-long

Now for the quicker way which is simply to replace the code that determines whether the variable is true or false with one line:
yes_no_button ^= 1;

This basically just gives the opposite of what is in the variable and is commonly used to flip the framebuffer. The code now looks like:

[sourcecode language=’c’] if (buttonsDown & PAD_BUTTON_A) {
if (cursor_x >= 105 && cursor_x <= 155 && cursor_y >= 70 && cursor_y <= 95) { yes_no_button ^= 1; } }[/sourcecode] There you have it a simple example on how to change an image from saying yes to no. tutorial8-yes-no-short

Coding requires patience and can require changing one thing at a time and re-testing your code. You need to be able to use what you’ve got and explore doing other things with it. Are you able to make this button tutorial change between 3 buttons? Can you make the yes and no buttons appear on the screen and then print out which one the user choose? Can you make a question appear, the user choose yes or no and then have the question change to another one?

16 Responses to “Tutorial 8: Image changes”

  1. Qual_Tun says:

    another great tutorial!
    why are programming for the GC?
    I would like to see the same tutorial for use with the wiimote.
    keep up the great work with HBB!

  2. teknecal says:

    I’m programming for the GC because it’s easier to run the code on gcube. I’m hoping that people will make changes and experiment with this code to improve their learning.

    The code would be exactly the same to code this on the Wii except that you’ll have to use the Wiimote IR, etc. Changes to make can be found at http://www.codemii.com/2008/08/31/tutorial-4-cursors/

  3. harry says:

    thanks very much for all the updates yesterday. great job 🙂

  4. Slimmmmmm says:

    Great stuff again, I think the GC mode is a good idea giving people who can run a GC emulator the chance to test on the pc.

    I’m learning (slowly) a lot from these superb tutorials, thanks a million teknecal and keep them coming 😀

  5. Qual_Tun says:

    fair enough, i could never get gcube working my PC anyway 🙁

  6. teknecal says:

    Qual_Tun: In Windows, all that’s needed is to associate the .dol file to run with gcube and that should be all that’s needed. What problems do you have?

  7. Lewiis says:

    Hey Tek.

    Props out man! If you’re even in Perth, Western Australia, it’s my shout. The beer is on me fo’ sho’!

    These tutorials have been helping me out like you wouldn’t believe. Before these i’d never programmed for a console or in C. I’ve been programming a game but it is mainly other people’s code cut together to make what i want. It turns out the mistake i was making was i was trying to initialise after each image when you only need to initialise once, damn C.

    What i said about the beer is true,
    have a good one.

  8. Qual_Tun says:

    its just a matter of, the pc I dev with is crap 🙂
    intel 2.53
    geforce2 mx 100/200

  9. gcb says:

    great initiave doing the tutorials and this blog.

    but may i suggest you stop the PDF format and start using the homebrew wiki?

    that way everyone can fix typos and add hints.

    and it can also easy the work on your side 🙂

    thanks again

  10. Slimmmmmm says:

    So far upto this point we’re getting closer to learning things like your homebrew game simon which is very cool.

    HBB is coming along great too and I’d imagine that is your number one priority.

    I don’t know how you manage to get so much done :p

    A Wiki or forum etc where us n00bs can maybe give some time back and help each other could be good. Maybe we could compare code and build things which could in turn benefit some of your apps.

  11. gabriel says:

    ok, lame on me to mention the PDFs. reading the other comments i see it was kind of a request…

    as slimm, it eludes me as how you acomplish so much. cheers

  12. Ideka says:

    yes_no_button =! yes_no_button; ?

  13. Sardtok says:

    I’d say Ideka’s suggestion has better readability, considering it’s a bool.

    Since you would much rather write:
    if (!yes_no_button)
    if (yes_no_button ^ 1)
    Although many would probably write:
    if (yes_not_button == false)

    Which also shows that the lines with the code:
    if (yes_no_button == true)
    Could be exchanged for:
    if (yes_no_button)

    Although I would prefer to format the suggested code:
    yes_no_button = !yes_no_button;
    With a space after the = and no space between the ! and variable name, but I guess that too is a personal preference.

  14. Johannes says:


    The +16 is not needed here, it just puts the image 16 pixels lower than specified…

  15. I think teknecal is dead. R.I.P.

Leave a Reply