Coding in graphics for the first time

After the success noted in my post "My Visual Debugging Tool" yesterday I decided to tackle graphics at this point. I now knew how to identify where my mouse was on the screen and determine when I was clicking.

The information of which how to do this was contained in tutorial threads I had been going through previously (noted in my previous posts as well) .

In the interest of sharing part of my learning process - the mouse detection code in Dark Basic Pro worked out to be something like this:

REM ***** SET MOUSE DETECTION *****
     Mx=MouseX(): My=MouseY(): Mc=MouseClick()
     MousePosX$=Str$(Mx)
     MousePosY$=Str$(My)
     Text 300,525, "Mouse X/Y Position"
     Text 300,540, MousePosX$+ " / " +MousePosY$ 

This includes the debug code I spoke about to print the value of the position on the screen so I could determine later when I was programming my button clicking code where exactly on the screen I was clicking.

Using the above code I was able to work out the following:

    If Mx>0 and My>0 and Mx<63 and My <63
         If Mc=1
         Paste Image 1,0,0
         Else
         Ink RGB (0,0,0), RGB(250,250,250)
        Text 0,525, "Mouse Now Over --- BUTTON 0,0." 
        Endif
        Ink RGB (0,0,0), RGB(250,250,250)
      ENDIF
      If Mc=2
         Gosub Screenfresh
    ENDIF

Essentially what this means if you click mouse button 1in the upper right corner aka the very first box it will load image 1.  Otherwise if you click mouse button 2 it will clear the screen - something I built in to test multiple passes per session.

Furthermore then I used that example to build out my visual debugging tool into this program:

You'll notice a blank grid on the left (before), and a 0 through 7 filled grid on the right (after).

This represents several hours of work where I learned to load the background checkerboard, then I learned how to get the 0 image to load.

Then over time I learned how to plot out the additional button positions of 1-7 and worked a loop in that would scan for the mouse click, and then load the appropriate image on the first row as seen above.

The game board and gems represent an interesting story as well, I had worked up a much fancier game board in Adobe Photoshop but found myself spending hours tweaking the graphics!  Eventually I said to myself "I could literally spend every minute of my time tweaking these graphics and never get my program done!" So instead I loaded up Adobe Illustrator and made the graphics you see in use here in about 15 minutes and swore to myself I would use them until my program is in beta.

If I don't say so myself, I think they turned out really nicely and look very vivid and colorful. As I achieved objectives the visual appeal of these simple graphics became another motivational factor for me!

See you next time.