teachinTech


Using Mouse including Drag-n-Drop

The mouse object provides some additional functionality for your games. This activity will explore some of the ways the mouse can be used in your game.

Turn In: MousingAround.capx file

This activity provides different and unrelated tasks to explore some of the different things that can be done with the mouse in Construct2. These items can be used in previous or future games.

For this activity, create a new project called MousingAround.capx with the window and layout size of 800 by 600.

Insert a new sprite object and named it RedBlock. In Edit image, click on the Resize button (two arrows) and change it to 30 by 30. Choose the Fill icon on the left side of the editor and pick red as the color then fill in the box and close Edit image. In the Objects box, right click on the RedBlock and pick the Clone option. If you do not see RedBlock2 in the Objects window, right click in that area, pick Filter objects then pick "All project objects". Right click on RedBlock2 and choose rename using the name GreenBlock. Click and drag GreenBlock onto the Layout1. Double-click on the GreenBlock (which is still red) to open it in the Edit image tool and use the Fill button to make the block green. Repeat the process of clone, rename, drag onto Layout1, and change color so that you have the following: BlueBlock, BlackBlock, GreyBlock, PinkBlock, and OrangeBlock.

Also, insert a new sprite called Arrow, resize it to 30 pixels wide and 50 pixels high. Draw/paint an arrow pointing toward the top of the screen. Click on icon across the top that says "Rotate 90 degrees clockwise" (hover your mouse over the icons to see their names). The arrow should now be pointing to the right side.

Add the Mouse Object

In order to use most of the capabilities of a mouse in your games, you need to add the mouse object.

Double-click somewhere on the empty part of Layout 1, click Insert new object then from the Input section, pick Mouse.

The Mouse object appears in the Projects window and also in the Objects window but there is nothing to put on the layout. Adding this object enables some items on the Event sheet that were not previously available.

Mouse Events

First, we are going to have our arrow point to our mouse as it moves around. On Event sheet 1, add the event System->Every tick. Then Add action ... Arrow->Set angle toward position. In the X box, type in Mouse.X and in the Y box type in Mouse.Y ... notice that as you start typing, Construct2 shows you some things that are available.

Run layout and move your mouse around, you should see the arrow point to the mouse as you move it. 60 times every second (every tick), Construct2 is finding the mouse's left to right (the X) position and setting the angle of the arrow to that value. Also, it is finding the top/bottom (or Y) position and setting the arrow to that position.

Events can take place when the mouse cursor is positioned over an object and when it is not positioned over an object. This is helpful in creating effects, providing feedback to the person playing your game, or game play based on mouse position.

In this example, we are going to lighten up the red square when our mouse is over it and leave it completely red when the mouse is not over it.

Add an event, select the Mouse, pick "Cursor is over object", then choose RedBlock. Add Action, choose RedBlock then "Set opacity", click Next, and use 25 for the opacity (0 is completely transparent). Run layout and move your mouse over the red block then off the red block. Notice that it turns very light when you move your mouse over it and also when you move your mouse back off. Not exactly what we wanted, one more step needed.

We need to change opacity back to 100 (display the original color) when the mouse is not on the red block. Create a new event exactly like the one above but set the opacity to 100. Right click on the "Cursor is over RedBlock" then pick the Invert option. Notice that it puts a red X in front of the text of that condition. This means when the cursor is not over the red block then it is going to set the opacity to 100. Run layout and make sure the box is dim when your mouse is over it and normal color when your mouse is not over it.

Let's paint using some mouse events. We are going to paint pink with our right mouse button. Add event then pick Mouse and click Next. Select "Mouse button is down" and click Next. Choose the Right mouse button and click on Done. Add action, pick System, click Next, pick "Create object", click Next, choose the PinkBlock as the object and type in Mouse.X for the X and Mouse.Y for the Y. The layer can be 0 for now but in a more developed game, you might have a layer just for this task or let the person choose their layer. Click Done and Run layout. Hold down your right mouse button and move around ... you should be drawing in pink as you move your mouse.

Learn More On Your Own: Try this if you want an additional challenge ... it is optional. Allow for erasing the pink blocks. The action would be PinkBlock->Destroy. The condition/event could be when the Middle button is click on the PinkBlock object or you could use a global variable to store whether you are painting or erasing and use right button for both. Ask your instructor attempting this and have any questions.

The Drag & Drop Behavior

When running the layout, click on the orange block and try to click on the orange block drag it around ... it does not move.

Add the Drag & Drop behavior to the orange block then Run layout and try to click on the orange block and drag it around ... it should work this time. The Drag & Drop behavior will work even if you do not add the mouse object but often both are needed for specific types of game play.

Some games involve drag/drop of objects from one location to another. We are going to work through some of how that works.

Hold down the Ctrl key then drag the GreyBlock to a different location, it should create a second GreyBlock. Repeat that until you have a total of 5 GreyBlocks. Then move the GreyBlocks so they are across the top of the window with a little bit of space between them. Run layout then drag and drop the orange block on each of the grey blocks in different parts of the grey blocks. Notice that in most cases (maybe all) the grey block is in front of the orange block, we want the other way around. Back on Layout 1, right click on one of the GreyBlocks then pick "Z Order" then pick "Send to bottom of layer". Repeat these steps for all 5 GreyBlocks. Run layout and drag/drop the orange block around. It should now be in front of the grey blocks.

What we want to do is have the game put the orange block directly on the grey block even if it is not exactly lined up. Here are the steps ...

Add event, pick OrangeBlock, click Next, pick "On drop", and click Done. Add action, pick OrangeBlock, click Next, choose "Set position to another object", choose the GreyBlock object, click Done. Run layout and drag the OrangeBlock on each of the grey blocks. Notice that it always moves to the same block each time, not the one we dropped it on.

Right click on the OrangeBlock->On DragDrop drop condition and pick "Add another condition". Choose OrangeBlock, click Next, choose "Is overlapping another object", click Next, choose the GreyBlock and click on Done. Run layout and drag the orange block to different places on each of the grey blocks. It should lock the orange block onto the grey block that it is touching. We created a two condition event where both of the actions have to be true in order for the action to take place.

Optional: A little clicking or locked in sound for this event would be a nice touch.

Note: Many people playing games on the Internet do so with their mobile devices. Most mobile devices do not have a mouse, they have touch. The touch and mouse objects are similar and the touch object will respond to the mouse. Determine the audience for your game along with the functionality you want in your game when choosing rather to use Touch or Mouse.

Additional Testing

As time and interest permits, use the other colored blocks to test out different things that can be done with the mouse and drag & drop.


Copyright © 2021 Eric Schumm. Permission granted to freely use this in your classroom.