Blitz2D Newbies: Mouse Cursors
by Krylar

Introduction:

I've noticed a lot of folks asking about how to make the mouse show up in BB, so I thought I'd write up a little article that explains it and also provide some source code.

Download the to see this stuff in action: Click Here

Displaying a Mouse Cursor

Where Windows has the mouse functionality built in for displaying, saving the background and restoring the background...DirectX, and thus BB, does not. See, where the mouse cursor appears to simply be a graphic image that appears to magically move over the background, there's a lot more going on underneath the hood.

Think about it, if you were to draw a graphic image and move it around without first saving what's under that image (or better, just redrawing what's behind it), you'd get a bunch of "chunks" ripped out of your background. So, somehow we have to save the data directly behind the mouse and redisplay that before we redraw the mouse in it's new position.

This, by the way, is exactly what a sprite is! Yep, that means that the mouse cursor functions just like a sprite does.

In BB, there are two ways to do this. The first way is to use the GrabImage and DrawImage commands to snag each chunk from the background *before* drawing the mouse image, then to replace that chunk after the loop. Here are the steps:

  • Replace the "grabbed" background piece before rendering, using DrawImage.
  • Grab the new background piece using GrabImage (Note: You will first need to use CreateImage in order to setup the proper size requirements for the GrabImage command.)
  • Render the screen and draw the mouse in it's new position

Sounds easy, no? Well, it is a little tricky to do this. But moreso than tricky, this can be quite slow since you will be reading from and writing to the video's memory. Reading from video memory is the problem...it's very slow! According to my tests and the comments of most people on the BB board, simply re-drawing the screen each rendering cycle is much quicker than doing many reads. See, if you follow the grab-chunk,draw image, replace-chunk method for the mouse, you'll likely be tempted to do this with all of your images. This will take your speedy little game down to a crawl.

So how do you do it then? It's actually EXTREMELY easy. You use page flipping just like you have in past animations (at least in these articles). Draw all of the images each rendering cycle and just treat the mouse like any other image (sprite). You may still want to keep track of your old positions so you can see if the mouse has even moved, but that's simply a case of using the MouseX() and MouseY() functions.

Changing the Mouse Cursor Image

Since the mouse is basically being portrayed like any other image, all you have to do is change the image that you send to DrawImage. I know that sounds really really simple...good news! It is!

In the source code I use two images to demonstrate this. This first is your typical arrow and the second is a cross-hair type image. If the mouse is within a particular area, I simply have the DrawImage draw the appropriate image. Here's a snippet from the source:


I wrote a little function called "CheckMousePosition(...)" that is there simply to tell me if the mouse is within a particular area. This is not a very portable function because it's case-specific, but it makes the main loop cleaner and that's a big plus as your programs get bigger. Here's the source for "CheckMousePosition(...)" in case you're interested:


This function could be greatly expanded to incorporate various images for checking, and it could also be used to see where the user is when he/she clicks a button. But you would be better served by having a Type that contains all the clickable elements on the screen. This way you can run through the list of items in your Type and make determinations based on the Type data. That kind of function would be more portable to other interfaces, but it's outside the scope of this article (maybe I'll touch on that in the future, if there's interest.)

Conclusion

If you study the source code you'll find that there are also uses for the mouse buttons and such. These should be easily understood if you've read the BlitzBasic Newbies #4 article.

I admit that this is a very brief article, but there really isn't much more that I can get into on this topic without really expanding it into a big GUI article.

Until next time...cya!

-Krylar


For a printable copy of this article, please click HERE.


This site is Copyright© 2000-2004, BlitzCoder. All rights reserved.