Create Drag & Drop game

Drag and drop game is perfect to engage users and deliver educational informations. Like in a puzzle, users must drag objects and position them at the right place. In this example, users must find the animals that are living in the forest and replace them in their natural environment.

[TRANSCRIPT]

In this video, let’s see how to create a drag & drop game. A drag & drop game is perfect to engage users and deliver informative or educational informations. Like in a puzzle, users must drag objects and position to hem at the right place.

In this example, users must find the right animals that are living in the forest and replace them in their natural environment.

First, let’s import the images of the animals and the forest. Insert images in your screen and design the static user interface.

Now let’s turn animals into moveable objects. Select an animal, go to Layout menu at the top and choose Add Drag & Drop. This is a shortcut: instead of adding a Drag & Drop component and copy-paste content inside, you can automatically turn any object into a Drag & Drop

Rename this component with the name of the animal and in the Properties, activate Moveable option.

Do the same with the other animals: turn static images into Drag & Drop component and make them draggable by enabling the Moveable option.

Now you can move animals around but as you can see, they automatically return to their initial position.

Let’s create the zone where they can be dropped. To do so, select the Forest image and do the same thing: from the top menu, choose Add a Drag & Drop. In the properties now choose Drop zone. You must also select the Moveable objects that are accepted to be dropped there. In this example, select all animals except the Fish. We could also have accepted the Fish to automatically trigger a pop-up to inform that it’s a wrong answer.

Another tip: in the list of objects, make sure the Forest is behind the animals in terms of position. Otherwise animals will be placed behind the forest.

Let’s see the result! Great: animals can be dragged and dropped above the Forest image.

However animals can be dropped anywhere by the user and it can look a little messy. We could have created many drop zones but it would have been confusing for the user. Let’s position them automatically at the right place to make the global picture look good.

For that we’ll automatically make disappear the moveable animal after it has been dropped and use the Multi-state to hide or show each animal at the right position.

Let’s create a Multi-state component per animal as each animal is independent and also we don’t know the order when they’re gonna be placed.

Insert a Multi-state above the Forest and rename it with the name of the animal. In the first state, there is nothing as the animal is hidden. Create a second state and inside add the animal to be displayed.

Exit the multi-state using the breadcrumb. To avoid any mistake, you can lock it once it is done using the lock icon in the list of object. .

Now let’s create the action to display this once the moveable deer has been dropped. Select the Forest drop zone and click on Actions. As you can see there are 3 types of triggering event per moveable object: when it’s dropped, when it’s entering and exiting the zone. Choose the Dropping Deer event and the action Interact with a component > Multi-state > Go to state 2 Visible.

Yay it’s working! However the moveable object is still visible. Let’s hide it once it has been dropped.

To do so, instead of having a static image, let’s turn it into a Multi-state component that shows or hide the image.

Go inside the Drag & Drop component. Select the image and choose the Layout menu > Add to Multi-state. This is another shortcut to automatically turn any object into a Multi-state component. Rename it and enter inside. In the first state, there is the image of the animal. Create a the second one in which it’s hidden: you can either delete the image or keep it with a 0% Opacity.

Create the action to make it disappear as soon as it is dropped. Select again the Forest drop zone and choose the same event: Dropping Deer. Add another action which is Interact with a component and go inside the Deer moveable object to select the Multi-state. Choose the second state Hidden.

Perfect! Once the Deer is dropped, it automatically disappeared and correctly displayed in the picture.

Do the same with the other animals. Turn all your moveable objects into multi-states that are composed of 2 states: the default will be visible, and the second one will be hidden.

Prepare the Multi-states that display the animals at the right place in the forest. You can just copy-paste the other component. Inside it’s the opposite: in the first state, animal is hidden and in the second it’s displayed. Add all the actions related to the Drop zone Forest.

That’s it! Once dropped, the animal is automatically displayed at the right place. Every animal can be dropped in the forest, except for the fish that is not living in the forest.

If you want to highlight the Forest when an animal is placed above it, you need to turn the Forest image into a Multi-state as well. In this second state, you can for example add a border. Use the Entering event to display this state and add another action to go back to initial state when the animal is dropped. If you want to reinitialize the game, add a button and choose the action Interact with a component. Select the Drop zone and choose Remove all draggables.

However you must add others action to change states of the Multi-states to display the animal again and return to the initial state of the Forest.

If you liked this video, please click on the like button below and subscribe to our Youtube channel?