Drag and Drop Game for Children

[CodeTRUCKER]

Howdy from Texas!

***************
I am happy to announce that with the help of some fine people from this forum, "VeggieSquares" has been brought to reality in a pre-release version.  It is called "VeggieSquares" because it incorporates my simple "Four-Square" gardening method I developed for my purposes.  It is born of the collective wisdom of many gardeners.  

You can download the latest zip file at the bottom of this post.

***************

I am attempting to develop a freeware drag and drop game for children and I'm coming up a dry well.  Here is what I want to do...

• Drag and object (icon or button) from a frame on the right on to an uncolored outline (coloring book type) background graphic on the left, like a park bench in a park.
• Drag another object next to the first dropped object.
• When the second object is dropped next to the first, a lookup is done in a table and a comic book style balloon pops up as if the first object was speaking to the second object.

FYI - the "table" could be a DB, an *.ini file or just a series of CASE statements.

There is more, but if I could get this much going, then I think I can make the rest work.  

Thanks in advance!

Calvin

[ZeroDog]

To start off, I would setup a 2D DirectX screen.  Load your graphics (outlines and benches etc.) as sprites, and draw them to the screen in the appropriate locations.    When the user clicks on an object to drag it, have it redraw the sprite at the current mouse position.  When the user releases the mouse button, do a collision detection between the object and the outline, and if they match correctly, then draw the sprite in the same location as the outline.  Draw your word bubble sprite, and write the appropriate text in the bubble from the table.

All of the commands needed to do these are in the Users Guide, in the 2D programming section.

[CodeTRUCKER]

To start off, I would setup a 2D DirectX screen.  Load your graphics (outlines and benches etc.) as sprites, and draw them to the screen in the appropriate locations.    When the user clicks on an object to drag it, have it redraw the sprite at the current mouse position.  When the user releases the mouse button, do a collision detection between the object and the outline, and if they match correctly, then draw the sprite in the same location as the outline.  Draw your word bubble sprite, and write the appropriate text in the bubble from the table.

All of the commands needed to do these are in the Users Guide, in the 2D programming section.

Thank you very much!  This gives me a vector to go to work now.

[Kian]

Hi CodeTRUCKER,
Attached to this message is a short example of what you were after.
I knocked it up rather quickly so it probably isn't what you would call an example of beautiful code, although it should give a rough idea.
It pretty much does exactly as ZeroDog described.
Hope this helps.
Kian

[CodeTRUCKER]

...
Hope this helps.
Kian

Thanks, Kian.  This helps a lot!  I think I might be able to make it from here once I figure out everything that is going on.
~ CT

[AdrianFox]

Thanks from me too Kian!  Gives me a great idea for a Xmas card.

[CodeTRUCKER]

Hi Kian,

Many thanks for your giving me a boost!  The project is coming along nicely with less than five days to go.  I will post back here when the project is ensconced.

Kian, in your program there is a strange anomaly in your original code that did not show up due to the large scale and oddly, it only occurs when dragging the sprite "down" or "up" (the "y" ).  It does not occur when dragging in the "x" direction?!  Specifically, you can see the 1x1 pixel sprite drag farther and farther behind the tip of the mouse "arrowhead" as you drag down.

To test this...

• Execute the app, but don't click on the dalmatian just yet.
• First, move the mouse up toward the dog's left eye as this is the "highest" clear spot where the anomaly can be observed.
• Locate the 1x1 sprite just above the mouse tip.
• Click and drag the mouse down as far as you can and observe how the space between the sprite and mouse tip increases as you drag down and decreases as you drag back up

You may want or need to...
<> Set the screen resolution to 800x600
<>The "detect=CREATESPRITE(1,1,1)" to "detect=CREATESPRITE(10,10,1)

... to view the anomaly more easily.  I have spent several hours attempting unravel (debug) this mystery, but to no avail, hence this post seeking assistance.  My biggest puzzlement is why does this only happen in the "y" direction and not the "x?"  Most peculiar.

Thanks again for the help!
Calvin

{Edits}
Ok, I have discovered the anomaly occurs on the @IDMOUSEMOVE event.  It is not necessary to drag anything to see the anomaly, but dragging will highlight it.
It also appears to be a cascading error.  The dog's eye, the 10x10 sprite and the mouse tip all spread evenly while dragging down.

[CodeTRUCKER]

Hi Kian,

Could you also please explain the rationale for the code in red below?

SUB handler
    IF @MESSAGE=@IDMOUSEMOVE
   cx=@MOUSEX
   cy=@MOUSEY
   cy=cy+(30*cy/570)
   cx=cx+(8*cx/772)
   MOVESPRITE detect,cx,cy
   ENDIF

Thank you,
Calvin

[LarryMc]

Calvin

comment out the two lines in red that you posted above and see what that does to your anomaly.

LarryMc

[CodeTRUCKER]

Calvin

comment out the two lines in red that you posted above and see what that does to your anomaly.

LarryMc

Thanks for the help, LarryM.  Good call!

OK, that prevented the 10x10 from changing position on the dog, but it did not remove the anomaly.  The spread still occurs between the 10x10 and the mouse tip.

FYI - I'm persuaded it is somehow connected to the @IDMOUSEMOVE since the remaining anomaly ("spread" between 10x10 and the mouse tip) occurs by just moving the mouse down (not dragging).  

[Kian]

Update - ignore this and see following post.

Kian


Hi again,
The code you highlighted in red was a quick and dirty fix.
When @IDMOUSEMOVE is called, the client area coordinates returned also include the borders around the window.
This is what causes the offset. This varies according to OS and setup.
To rectify this, paste the following code at the start of your program:

Code Select Expand

$include "windowssdk.inc"
int wintop = GetSystemMetrics(SM_CYSIZE)
int winbot = GetSystemMetrics(SM_CYSIZEFRAME)
int ydiff=wintop+winbot
int xdiff=GetSystemMetrics(SM_CXSIZEFRAME)

In the red section, change the '30' to 'ydiff' and the '8' to 'xdiff'.
Hopefully this should (crosses fingers) sort out the problem.
I've tried this on XP and 7 and it seems to work, but let me know if it doesn't.
Kian

(revised code attached)

Update:
I've done a few more tests and it still seems to create a slight "spread" depending on the OS, although not as great as before. Going from one edge of the screen to the other (either vertically or horizontally) there is still a shift of a couple of pixels, although any changes I make seem to be amplified on XP compared to 7.
You could always make it full screen and none of this would be a problem.

[Kian]

Scratch that last post. Still too inconsistent.
As often happens, IWbasic provides us with the perfect tool, if only we look hard enough for it.
Using 'GETCLIENTSIZE' gives the exact client area, so giving the correct ratio to adjust by.
(see attached code).

Kian

[CodeTRUCKER]

Scratch that last post. Still too inconsistent.
As often happens, IWbasic provides us with the perfect tool, if only we look hard enough for it.
Using 'GETCLIENTSIZE' gives the exact client area, so giving the correct ratio to adjust by.
(see attached code).

OK the "anomaly"... IT"S FIXED!  Yea!

Ah!  "GETCLIENTSIZE" ... you don't say?  I was using "GETSCREENSIZE."  Live and learn.
In my general debugging I also discovered some @MOUSEX and @MOUSEY where cx and cy should have been. GIGO lives!

I guess I'll forge ahead now.  A LOT to do before New Years!

Thank you for the help.

Calvin

[CodeTRUCKER]

@Kian and Anyone Else,

The formula code worked great until a MENU was added, then it was necessary to modify it.  Given the MENU was 25 pixels high the following mod (in red) fixed it up.  The salient point is if menus, statusbar or anything else which subtracts from the vertical screen real estate is in the window an adjustment will be necessary.  GETCLIENTSIZE does not "see" these, AFAICT.

SUB handler
    IF @MESSAGE=@IDMOUSEMOVE
   cx=@MOUSEX
   cy=@MOUSEY
   cy=cy*600/(h-25)
   cx=cx*800/w
   MOVESPRITE detect,cx,cy
   ENDIF

I've attached the files below. 

@Anyone - Try both *eba files and drag down from inside the dog's eye to see the effect.

[Kian]

Tried downloading zip file but file will not extract 
Could you upload again?

You may want to use :

$include "windowssdk.inc"
int menusize=GetSystemMetrics(SM_CYMENU)

to find the menu height as on my system the menu bar is only 20 pixels deep.

Kian

P.S. - I've tried inserting a menu (the example from the user guide) into my program and 'GETCLIENTSIZE' DOES take this into account.(under XP and 7)

[Brian]

Hi,

This worked for me - Win XP SP3. Added autodefine "off" and changed
the bitmap variables to POINTERS (as it says in the help file!). A lot of the
variables were undefined

Worked as I think you wanted it to...

Brian

[CodeTRUCKER]

Hi Folks,

Next issue... I have tried a number of permutations of DRAWSPRITE, FLIP(), etc., but to no level of success.

What I am trying to do is to move any vegetable sprite object I click on will be brought to the front which will allow me to drop it *on* another sprite object, covering it.

The present behavior is...
<> I drag a "squash" on to the "gardenplot"
<> Then I drag a "tomato" under the "squash"  

The desired behavior is...
<> I drag a "squash" on to the "gardenplot"
<> Then I drag a "tomato" on top of the "squash"  

What's the command to "move to front" where sprites are concerned?

Thanks for the help,
Calvin

[CodeTRUCKER]

Tried downloading zip file but file will not extract  
Could you upload again?

Sure, but let me take a look at Brian P.'s *.eba

You may want to use :

$include "windowssdk.inc"
int menusize=GetSystemMetrics(SM_CYMENU)

to find the menu height as on my system the menu bar is only 20 pixels deep.

Kian

Thanks for the tip.  I had used a pixel measuring tool, but your method should be more precise.

P.S. - I've tried inserting a menu (the example from the user guide) into my program and 'GETCLIENTSIZE' DOES take this into account.(under XP and 7)

Hmmm.... if that is the case, I wonder why does my behavior NOT work without the adjustment?

[Kian]

Another mystery solved,Calvin.
Finally managed to extract with Tugzip 
In your version, the menu was built AFTER getting the client size. This is why it did not show up.

Re: the sprite order, they are layered in the order that they are drawn.
Do the sprites you are using always appear in the same order (ie tomato over squash)?
If this is so then it is possible to just draw them in the order they are required with the 'top' one drawn last.
If this is not the case, you could assign each sprite a 'depth' variable which determines the order.

Kian

[CodeTRUCKER]

Hi,

This worked for me - Win XP SP3. Added autodefine "off" and changed
the bitmap variables to POINTERS (as it says in the help file!). A lot of the
variables were undefined

Worked as I think you wanted it to...

Brian

Thanks, Brian.

As far as "...(as it says in the help file!)...." is concerned, I apologize for any inconvenience, but I abhor lazy people as much as anyone.  Unfortunately, I am experiencing more "senior moments" than I really care to admit.  Anytime I request help it is usually hours (if not days) of digging in examples, forum searches and help files myself before I seek assistance. I learn best this way, even it it is painful sometimes.  Frankly, I can't get my brain around what you are talking about "pointers," but I'll dig into that too and see if I can understand.  It's my fault I waited so long to begin (and discover how much I had forgotten), but life has kept me busy and away from coding.  FYI - I am against a deadline of 2010-12-31 23:59, so I am very appreciative of any assistance.  Please be patient with me, but know I am attempting to honor your contributions.

Calvin

[CodeTRUCKER]

Another mystery solved,Calvin.
Finally managed to extract with Tugzip 

I'm glad it worked!  FYI - I used Winrar.

In your version, the menu was built AFTER getting the client size. This is why it did not show up.

Ok, Thanks!  I'll give it a whirl.  My "guesses" at what goes where has been something of a trial.

Re: the sprite order, they are layered in the order that they are drawn.
Do the sprites you are using always appear in the same order (ie tomato over squash)?
If this is so then it is possible to just draw them in the order they are required with the 'top' one drawn last.
If this is not the case, you could assign each sprite a 'depth' variable which determines the order.

Kian

It's the latter, but it has to be dynamic.  Every time the child "clicks" on a vegetable, it needs it to "move to front."  I'll try some experiments with your suggestion.

Calvin

[Kian]

A very simple example:
In the original version the dog sprite was always drawn behind the hydrant.
In this version, whichever sprite is being dragged is assigned the highest 'depth' value.
Line 7 sets up an array to hold pointers to each sprite.
This array is then used by the sprite drawing routine (lines 88-92) to draw them in the correct order. The initial order is set in lines 47-52.(The outlines always remain at the back)
When a sprite is clicked on to be dragged, the array is changed to reflect this, bringing the selected item to the top(lines 133-136 for dog, lines 147-150 for hydrant).
When using more than the 2 sprites here this could be done with a loop which moves all the sprites above the selected one down in priority.
e.g.
depth[0]=tomatoOL
depth[1]=squashOL
depth[2]=cucumberOL
depth[3]=tomato
depth[4]=squash
depth[5]=cucumber
If tomato is clicked on:
squash->depth[3]
cucumber->depth[4]
tomato->depth[5]

Kian

[CodeTRUCKER]

FYI - I did the unthinkable.  Please see here.

I will take another shot at it later and thanks to all for the help!

Calvin

[Brian]

Hey, Calvin!

I wasn't having a dig at you. I've never used this Direct stuff before myself. When I loaded
up your example, it threw an error with the bitmaps. So THEN I looked at the help file

My programming is a bit like yours, 90% looking up examples, and 10% writing code

Unfortunately, at work today . . .

Brian

[LarryMc]

My programming is a bit like yours, 90% looking up examples, and 10% writing code

As is mine!

LarryMc