Tutorial 2 Part 3

Right, lets get the mouse doing something!

  • Download this zip file containing 2 icons (tutorial2c_icons.zip (3kb)) and extract the file into the same directory as the files for the previous parts of this tutorial.

  • In the same project, create a new image in the banks window and select the first icon file (dance_but.bmp). Create a new sequence, select the icon and enter the values : Sprite X = 125, Sprite Y = 25, Sprite Count = 1, X Count = 1

  • Now do the same with the second icon file (dance2_but.bmp). The sequence values are the same.

  • In the CREATE_SPRITES() procedure add a Create Sprite statement using the icon sequence in bank 7 (Create Sprite 3,10,215 Using Bank 7) and turn the sprite on.

  • Create a new variable called HIT which will keep record of whether or not the mouse is touching the icon and another variable called DANCING which will tell us whether or not the baby is currently dancing. Set DANCING to equal 0 and in the CREATE_SPRITES() procedure turn off the animation for sprite 1 (Sprite Animate 1 Off).

  • At the beginning of the Repeat Until loop check for a sprite collision with sprite 3 (the icon) and assign the result to HIT (HIT = SpriteCollide(3)).

  • If there is a collision then change the icon sprite to the lit icon. This can be done by changing the sprite sequence to bank 9 (If HIT > 0 Then : Set Sprite Sequence 3 To Bank 9).

  • Now check to see if the mouse button is being pressed (If MouseButton(1) Then). If it has then check to see if the baby is not dancing (If DANCING = 0 Then). If it isn't then animate sprite 2 (Sprite Animate 1 On), play the midi file (SynthCommand(MIDI_Play)) and set DANCING to equal 1. You may find that you will also need to add a delay so that the program only registers one mouse click (Delay(200)) .

  • If the baby is not dancing then turn off the music (SynthCommand(MIDI_Stop)), turn off the animation (Sprite Animate 1 Off), set DANCING back to 0 and add another delay.

  • If the icon is not being collided then set the sprite sequence back to bank 7.

    Remember to take out the SynthCommand(MIDI_Play) from above the Repeat Until loop.

    Your code should look like this :

    NOTE: If you do not wish to type the code below you may download or open this text file and simply copy and paste the code into your project.


    //TUTORIAL 2 PART 3

    //DEFINE VARIABLES

    Global KEYPRESS$, HIT, DANCING

    //DEFINE PROCEDURES
    DefProc INIT_DISPLAY()
    DefProc CREATE_SPRITES()
    DefProc LOAD_MUSIC()
    DefProc MOUSE_POINTER()

    //---- START MAIN CODE ----

    //CALL THE PROCEDURE TO CREATE THE SCREEN

    INIT_DISPLAY()

    //CALL THE PROCEDURE TO CREATE THE SPRITES
    CREATE_SPRITES()

    //CALL THE PROCEDURE TO LOAD THE MUSIC
    LOAD_MUSIC()

    //CALL THE PROCEDURE TO CREATE THE MOUSE POINTER
    MOUSE_POINTER()

    DANCING = 0

    //START LOOP - THIS LOOP WILL REPEAT UNTIL A KEY IS PRESSED
    Repeat

      HIT = SpriteCollide(3) //CHECK FOR A COLLISION WITH SPRITE 3 (THE DANCE BUTTON)

      If HIT > 0 Then //IF A COLLIDE HAS OCCURRED...

        Set Sprite Sequence 3 To Bank 9 //CHANGE THE BUTTON TO THE LIT IMAGE

        If MouseButton(1) Then //HAS THE LEFT MOUSE BUTTON BEEN PRESSED AS WELL?

          If DANCING = 0 Then //IF THE BABY IS NOT DANCING...

            SynthCommand(MIDI_Play) //PLAY THE LOADED MIDI FILE
            Sprite Animate 1 On //ANIMATE THE BABY
            DANCING = 1
            Delay(200) // CREATE A SMALL DELAY SO THAT ONLY 1 MOUSE CLICK IS REGISTERED

          Else

            SynthCommand(MIDI_Stop) //STOP THE LOADED MIDI FILE
            Sprite Animate 1 Off //TURN OFF THE ANIMATION
            DANCING = 0
            Delay(200) // CREATE A SMALL DELAY SO THAT ONLY 1 MOUSE CLICK IS REGISTERED

          EndIf

        EndIf

      Else

        Set Sprite Sequence 3 To Bank 7//IF THE MOUSE IS NOT ON THE BUTTON THEN CHANGE THE IMAGE TO UNLIT ONE
      EndIf

      KEYPRESS$ = Inkey$()
      Update Display

      Until KEYPRESS$ > ""

      //THE INIT_DISPLAY PROCEDURE CREATES A SCREEN AND A PLANE
      Procedure INIT_DISPLAY()

        Create Map 640,480,1,1 In Bank 50 //CREATE A MAP IN BANK 50
        Set Tile 0,0,1 Using Bank 50 //CREATE A TILE USING A BACKGROUND IMAGE IN BANK 1
        Create Plane 1 Using Bank 50 //CREATE PLANE 1 USING THE MAP IN BANK 50

        //CHANGE THE TRANSPARENCY OF THE SPRITES TO AN UNUSED OR BACKGROUND COLOUR
        Set Bitmap 2 Transparency To 0,0,255
        Set Bitmap 4 Transparency To 0,0,255
        Set Bitmap 6 Transparency To 0,0,255
        Set Bitmap 8 Transparency To 0,0,255

      EndProc

      //THIS PROCEDURE WILL CREATE THE SPRITE
      Procedure CREATE_SPRITES()

        Create Sprite 1,256,176 Using Bank 3 //CREATE SPRITE #1 AT 256,176 USING THE SEQUENCE IN BANK 3
        Create Sprite 2,100,100 Using Bank 5
        Create Sprite 3,10,215 Using Bank 7

        Sprite On 1 //ENABLE THE SPRITES
        Sprite On 2
        Sprite On 3
        Sprites On //NOW TURN ON THE SPRITE SYSTEM

        Sprite Animate 1 Off //TURN OFF ANIMATION ON SPRITE 1

      EndProc

      //LOAD MIDI MUSIC
      Procedure LOAD_MUSIC()

        SynthLoad("music.mid") //LOAD THE MID FILE INTO MEMORY

      EndProc

      //CREATE MOUSE POINTER
      Procedure MOUSE_POINTER()

        Set Mouse Pointer To Sprite 2 //CHANGE THE DEFAULT POINTER TO THE SPRITE
        Mouse Show //TURN ON THE MOUSE (BY DEFAULT IT IS TURNED OFF)

      EndProc

      EndProg


  • If you run the project now, you will be able to start and stop the baby and the music by clicking on the icon and the icon should light up when the mouse hovers over it.

    The dance icon


    At the moment, any part of the mouse pointer can be in contact with the icons to register a collision (enter the "Sprite Masks On" command in the beginning of the program to see the mask covering the whole mouse pointer).

    If you have small icons you will find that you need a much smaller "hotspot" on your pointer. Use the Set Mask command to create a 1 x 1 pixel zone in the top left hand corner of the pointer. So for our mouse pointer which is 16 x 15 pixels in size you would need to enter the command "Set Mask 0,0,15,14 For Sprite 2".

    Previous Page