Sorry your browser is not supported!

Hi,
recently just got back into DarkBASIC (pro), gave up half a year ago (i give up much to easy).
I knew nothing then, and know just as little at present.

I was wondering if anyone could write a small tutorial telling me how to draw a box on screen, and when you mouse click inside the box , it changes colour.

I know this sounds a bit of an odd request but I just thought It would be a cool thing to be able to do.
I can do some basic things with text and shaped and random colours, I just need a bit of guidance with how the mouse clicking would work.

Thanks in Advance

ok, first heres how to draw a box

box 100,100,150,150

this draws a box starting 100 pixels across the screen and 100 pixels down the screen, the bottom right of the box is 50 pixels further over than the start (150) and 50 pixels further down

now you have a box to aim at you need a section of code that repeatedly checks for the mouse pointer being somewhere inside the boxes boundary and checking for the mouse button being pressed at the same time, so you start the repeated section with "do" like this

do

then we put in the command that check for the mouse position being inside the box and the button on the mouse being pressed, like this

if mousex()>100 and mousex()<150 and mousey()>100 and mousey()<150 and mouseclick()

this checks for the mouse being more than 100 across the screen AND less than 150 across (so it has to be at the edge or inside the boxes highest and lowest possible x positions), then in the same command it does the same check for the height from 100 to 150, then finaly it checks for the left mouse button being pressed, the symbol < means less than and the symbol > means greater than, if those conditions are met then we do the lines between here and endif, if the mouse is not inside the box or the button is not pressed then we skip the instructions up to endif and just do the rest of the code.

ink rgb(rnd(255),rnd(255),rnd(255)),0

this sets the ink to a random colour, it just puts a random number from 0 to 255 inside the rgb function three times and sets the ink to that

box 100,100,150,150

this draws a new box in exactly the same place as the old box but in the new ink colour, so it makes it look as though the box has changed colour

wait 250

this makes the program wait for 1/4 of a second so that if you held the mouse key down the colour would not change realy fast and look weird or as though nothing was happening but the box flickering

endif

this is the end of the instructions that are followed if the mouse was pressed while the pointer was inside the box, if the pointer was outside the box or you didn`t click the mouse then the program ignores the last few lines and jumps straight to here.

loop

this sends the program back to the "do" part of the loop, starting the check all over again, it will keep doing this forever until you press escape, every loop it will check the position of the mouse pointer and the status of the mouse button, if they are checked and found to be inside the box and the mouse button pressed then it does the instructions between the if statement and endif, if not then the program just loops and checks again, and again, and again etc.

hope thats some help to you, heres the full program for you to try.

Ah thankyou very much, that is perfect, shall get my head around this then go onto something else .

Cheers again

The amazing O (..sounds kinda magic like doesnt it )

Now that I have understood that, I was wondering if anyone could show me what I have to do, to make it so when you click on the box, you can drag it around using the mouse.

I was thinking it would have to be similar as above, with the

if mousex()>100 and mousex()<150 and mousey()>100 and mousey()<150 and mouseclick()
To check if I was clicking on the box, but I am clueless as to how I could drag it around with the mouse?

I'll help you out on this one.

First you'll take the coding from what you already have. This makes it easier then starting a new program.



Now what you'll want to do is think about how a box is made. there are 4 x coordinates and 4 y coordinates. For moving the box around you'll want variables for these points since you never know which points on the screen you'll actually hit. Fortunately the computer will handle two of the points for us which is the upper right and lower left coordinates. so we can simply create four variable. x1 , x2 , y1 and y2.



So then we can replace your original box code with the following.



So you can see how all we did was take the original set in stone values and made it possible to make them bow to our will. This is what programming is. Finding values and manipulating them to do our bidding. Now we replace the box code in the main loop with the box code above.

Now this part is a bit trickier. We know what the values of the corners of the box is but we don't know what the coordinates of the mouse point is. So we use the following commands to get the mousex and mousey coordinates.



So now what we've done is take the values of the x and y coordinates of the mouse and changed them into variables that call the command. This is not necessary but I think it looks nicer. Make sure that this code is at the beginning of the loop in you program.

Now what we can do is take the bit about checking to see if the mouse is on the box and change the values like this.



Now you notice I did not do anything after that code. That is because we have to create a complex statement that will check for the clicking of the mouse button like this.



So you can see the command checking for a mouseclick on the left button by seeing that the value of mouseclick (default is zero) changing to 1. then it adjusts the values of all the coordinates by the movement of the mouse in either the x or y directions based on the coordinate it is moving. So y coordinates get adjusted by mousemovey().

Then you should make sure to see that the box that is constantly drawn on the screen each loop is updated so change the original code to the code for the box with the variable values to the one from above.

Now the code should let you move the box around and change the color at the same time. If you have any questions or if anything doesn't work tell me.

[Edit]
Now that the screen will be moving will have to clear the screen everytime the box moves or else the screen will fill up with colored boxes so at the top of the loop right after the do put the CLS command so the screen clears.

I made some minor changes to the coding so it would actually work. If you have any questions about the changes feel free to do so.

[Edit]
Ok some more changes. It won't check to make sure the mouse is on the box but for some reason there is some type of bug restricting us from doing this properly so here it is.

Cheers very much, shall have a look at this now, should be enough there for me to play around with and learn for a couple of days.

Thanks for taking all that time over it



I accidently came up with that (makes you be able to size the cube instead of drag it aroun), by writing box x1,x2,y1,y2 instead of x1,y1,x2,y2

good job. Hopefully what I wrote shows you how variables can be manipulated to get different results.

On a completly different matter I think that Me!'s avatar is the hottness.