This project is designed to serve as a template for your own game of matching concepts. You can find it in the dashboard of the WiMi5 editor in the Education section when creating a new project. This one in particular consists of pairing addition problems with their answers, aimed at 5- to 8-year-olds.
In this tutorial, we’ll explain how to duplicate or clone this project by matching colors with their respective names.
SUBSTITUTING THE ADDITION PROBLEMS AND ANSWERS
This game was designed such that the game’s theme could be easily modified just be changing the images that are used to create the pairs.
If we go to the scene editor and take a look at the Asset Manager, we’ll see just one scene called level_4_slots, under which there are five layers. The one we’re interested in is the layer called action. Under it, there are several 2D objects, but the ones called pictures_targest and pictures_pairs are the ones we’re going to be modifying.
All the images we consider targets are in pictures_targets; in our case, the addition problems. The images that complete the pair, the answers, are in pictures_pairs. If you look closely, you’ll see that the names of each target and pair match. This is the key to personalizing our game. All we have to do is substitute these images in order to have a new challenge with which to educate and entertain children.
The easiest way to do this is by erasing all the images in both pictures_targets and pictures_pairs, and adding in new images. We just have to remember our basic rule: the target object we add to picuters_targets must have exactly the same filename as its pair in pictures_pairs. Let’s see how this is done, step by step.
Firstly, in the Asset Manager, we click on the 3-dot button to the right of each image of the layers we’re interested in and, in the drop-down menu, we click on delete.
Then, to keep our project tidy, and this is optional but highly recommended, we go to the Images panel and delete the images we aren’t going to use anymore: on the one hand, the ones we used as targets, equals2.png to equals9.png, and, on the other, the ones we used for pairing up. In this last case, we used a sprite, so we need to delete the image numbers.png.
We’re also going to delete the definition of the numbers sprite, which can be found in the Sprites panel.
Now is when we need to upload the new images that we’re going to use in our project. Let’s suppose we have these five images as our targets:
And that we have these five images as pairs:
We need to upload them to our image repository, and then add them to the project. If you don’t know how to do this, follow the instructions in the Designing the game section of our My first WiMi5 game tutorial. Keep in mind that, when you cloned the original project, a file with all the game’s images and audio files was created in your repository. This folder will have the same name as the original name that was created when the cloned project was created. The best idea is to upload these new images to that folder, to keep everything tidy. Likewise, if you think that you won’t be using the numbers and addition problem images again, you should erase them from your image repository.
Once we have them available to our project, we’re going to create our new targets. To do this, first we’re going to select the action layer in the Asset Manager. Then, drag the five images of the five colors from the Image panel to the Scene view, one by one. You’ll see that we have five new images in the Asset Manager, and their names are the colors they represent, and are directly under action. Now, what we need to do is select each one and place it under the pictures_targets object.
Also, while they’re still selected, we’ll go to the Properties panel and change their anchor property to CENTER and their position to x=0 and y=0. It’s important to do this in exactly this order, since if you change the position to (0,0) and then change anchor, you’ll see that the anchor has reset the position.
To create our pairs, we need to follow the same procedure, but using the images with the color names. We also need to make sure they’re under pictures_pairs instead of pictures_targets in the Asset Manager, and with them repeat the same process of resetting the anchor and start positions. Finally, we need to remember the basic rule. To follow it, we need to rename, in the Asset Manager (we must not try to do this in the Images panel) each of these images so that they have the same name as their targets. That is, the whiteName file should be renamed white, etc.
And that’s it. If you go to the logic desktop and press play in the Preview panel, you should see our version of the game working correctly.
CHANGING THE INSTRUCTIONS TEXT.
Throughout the game three texts appear. Two of them are general instructions, so they don’t need to be modified. But one of them is the text that explains the objective of this game in particular.
This text is an image, so the easiest way to modify it is by creating a .png image with the new text, which could be “Match each color and its name!”, in this case for example. The font used for all the texts in the game is Odin Rounded Bold. The image must have exactly the same name as the one used in the original version, i.e., gameHowTo.png.
Upload it to your repository in the same folder as the original. A warning will pop up, telling you that you’re about to overwrite a file and asking for confirmation; confirm that you want to do it, and that way, the new image will be applied to the game. Since you overwrote the old file, nothing more needs be done.
Now it’s time to go back to the logic editor and click on the play button in the Preview panel to see the change to the game.
CHANGING THE GENERAL APPEARANCE OF THE GAME
Perhaps you’re not content with just changing the images of the targets and pairs, and you’d like to personalize the game’s appearance: the background, the character, or everything at the same time. In that case, you should read this tutorial.
Of course, it’s possible to change the game even more, by adding more pairs or having successively harder levels, but that is for another tutorial.20/10/2016 / No Comments