Introduction
In this tutorial we'll learn the basic skills about Drag and Drop tutorial mixed with some basic Frame and Array concepts.
Finally, we will develop a quiz game, similar to a Moddle Platform.
This tutorial is based (under CC) on two tutorials:
- The drag and drop object Sprite originally produced by dingereben
- Drag-Drop / setting frame when dragging left-right originally produced by producermark11.
I strongly recommend you to take a look in these tutorials above if you have doubts in the second and third parts of this tutorial.
I won't go over basic skills for example "how to insert an Object", "how to make a frame", "how to add a behavior", "how to toggle an event", etc. because I know that any basic tutorial here can teach you this knowledge. Although I give some tips, that basic stuff that none will tell you and makes the total difference.
Therefore, you must follow along every item with the *.capx examples. I can't explain "how to insert an event" in every event of the examples below, you can click twice in events and actions to go back the choices and learn them in every example, this practice will make this tutorial better.
1. Basic Drag and Drop
First of all, let's create a simple example of a Drag and Drop behavior, you just have to create 2 Rectangular Sprite Objects. Add a Drag and Drop behavior on each of them, and then click in Run:
You'll realize that your Objects already drag on Layout even with no Event created. But at this point you have no Drop effect already. For now on, make sure that the Z Order of the MainSquare Sprite is adjusted over the S_Square1 Sprite (right click on the Sprite opens the Object menu and you can see the "Z Order" item).
2. Drop Events
Now, let's try some drop events.
Common mistake
I'll try to drop the MainSquare in the center of the S_Square1, it'll have an effect of magnetism to the center of S_Square1. For a novice on Construct Events, you'll probably insert a Mouse Object and try the follow:
But you'll realize that it's quite difficult to drop the MainSquare exactly on the center of the S_Square1, and taking it off can be a trouble also.
Self adjustable Drop
So, this is exactly what you need to create the magnetic effect, and it's easy to take it off:
Don't worry about decorate the position strings. When defining the X or Y values, note that appear a faded window with objects behind this one, ('Object' expressions) select the MainSquare Sprite and click twice in your option (they are all descriptive):
Make sure that the ImagePoint(0) of both Sprites are on their centers.
3. Frame Changes Events on Dragging
Let's start to deal with frames.
Changing to Frame 1 on Dragging
In this part we'll learn how to mix the drag and drop behavior with a frame change, in the first example we'll create a simple change on dragging. On the second one, a different frame on dragging to left or right.
First of all, we need to create a rectangular Sprite with 3 frames within, and then add the Drag and Drop behavior:
Now we can add events for a basic drag and drop change of frame:
Look out!
If you run this Project as it is (supposing that you creating a new project), you'll note that it'll automatically animate as it starts, and stop on Frame 2. So, we have to access the Animation Properties, it's only available when you click twice on the Sprite:
Left-Right Frame Differentiation
Now, let's make a change on dragging to left or right:
4. Adding an Array for Frame Changes
Array Basic Concept
Think about an Array as a 3D Box. This box is divided in blocks, each one has an XYZ axis size:
Every x, y and z value is referred as a Width Size, Height Size and Depth Size of the Array in Construct 2. For our example below we'll build up a “4,1,1” Array Size:
In this basic example, we have to keep in mind that the position in the Array is 0-based, so the position in the Array of each array block above are (0,0,0), (1,0,0), (2,0,0) and (3,0,0).
We'll fill each array position with textual values. So remember using double quotes in every value inserted.
Again, remember that even though the values of Width, Height and Depth start with “1” (size of the array), they must be indexed starting with “0” when referred on events (position in the array).
Animation Transition Test
After all of this theory above, let's handle it out:
In this example we’ll simulate a transition test with an Array expression and next we’ll try other Array expressions and explain how to work with random expression.
This first example we'll create 4 Animation with just 1 frame each (or you can try a single Animation - Default - with 4 frames).
First of all, create the Array Object on the Layout and create the “4,1,1” Array Size:
For each X index, set an Animation value, the same of the Sprite created:
Remember: for a 4-width-array size, we have a 0-3 X-index.
Notice that on setting the values for the Array Object, they have to be set on start layout.
We’ll change the Animation, after some time, to that one stored at X-index 1, so we have to select the expression Array.At(1):
Don’t forget to download and see the Drag and Drop file about the example above.
Some Array Expressions
The second example (now with a Frame variation instead of an Animation), we’ll try some other Array expressions. We'll test some expressions to retrieve some X values: Front, Back and Width.
Front and Back are related with X-index of Width Size, for this example:
- Front: X-index 0 (0,0,0)
- Back: X-index 3 (3,0,0)
Width is related with the value set for the X axis of the Array (4 in this case). Take a look at the Text Objects created to test the “Array.Back” and “Array.Width” expressions:
Note that they are inside "Every tick" Event because even if they vary when the Project is played, those values will follow along the variation. Of course, if you are not a novice you'll probably do the same thing running the Debug option.
For this example file we have 2 Frame transition test with Time Event. The first Transition test must show the Frame 3 because it’s what we expect when we set Array.At(Array.Back) expression:
If: Array.Back = 3 -----> Then: Array.At(3)
Random Expression
The Second Transition Option is about random expression for Frames.
The random expression generates a float number (similar to real numbers in Maths) in a pre defined range.
We can set a random expression as random(b) or random(a,b), they work the equally considering random(b) = random(0,b). The “b” number is the “border” of the generation, so it’ll be never generated ("b - a unit of float number" will be showed).
In our example we’ll use the expression random(0,Array.Width), just for practice and comprehensive training. Now we know that it’s the same as random(0,4).
But, there’s a problem: random(a,b) generates float numbers (never forget this), so the expression random(0,Array.Width) can generate:
- 0
- 1
- 1.5
- 1.8982982
- 2
- 2.9999999
- etc.
But do we have a 2.999999 Frame? I don’t think so.
We have just 0, 1, 2, 3 values for Frames, they can be Real Numbers as well but we need to narrow the choices only to Natural Numbers. So we refer them as Integer (it's not possible select only Natural Numbers without a kind of Function):
int(random(0,Array.Width))
So, toggle the first option and toggle the second to make it available. Run the Project to test the random animation.
Drag and Drop events mixed with Array expression
The last part of this file is just to show a Drag and Drop event mixed with the Array Concept. You need to toggle the "Drag-Drop with Array" group to make this work.
All of the Array examples above are just to fix the use of Array Concepts for most of us who is afraid of this dammed Object! :P
5. Drag and Drop Quiz Game
This is an example of a Drag and Drop Quiz Game, commonly used in Moodle Platform. This is a simple example, but can be incremented in many ways. Notice that the background is made of a Sprite instead of a TiledBackground because of some problems that I have using Windows virtualized on MAC OS.
Setting different Sprites to Drop on Different Blank Spaces
Blank Sprite Objects need that the ImagePoint(0) stays in the center of each of them.
The example below is only to show the magnetic effect on Dropping the Object on each alternative, but we’ll realize that we can freely Drag it again and there’s no problem about dropping the sprites in the wrong place:
Checking the correct answers
The next example is just an evolution, it shows a system that shows the correct places and what happens when you drop the Sprites in the wrong place (a Check System).
First of all, we’ll disable DragDrop Behavior after dropping:
Then we create two Buttons to Check the correct answers and another one to the player try again.
For this simple example, the check system will work just changing the Frame answer to a green one. So, pressing the Check Button will bring the answers to an AND condition: if both “X,Y” position are right, the answer Sprite will change to Frame 1, otherwise they’ll keep the same color:
This could be incremented with some Function Object and expressions, but this is not the aim of this Tutorial, I hope that I can make some basic Function tutorial soon.
Thanks everybody and I hope you enjoyed this tutorial! ;)