WiMi5

This project is designed to serve as a template for creating games in which the user has to put a sequence of elements in order, aimed at children aged 5 to 11.

You can find this project in the WiMi5 editor dashboard under the “Education” section when creating a new project.

This one in particular has the player putting the letter of an animal’s name in order.

We’re going to see how, starting with a clone of this template, to create another game ordering letters that make up the names of the basic colors.  But instead of small letters, we’ll use capital ones.

This template doesn’t have to be limited to making games to put letters in order to make a word.  It can also be used to create any game that has the objective of ordering image sequences.  For example, it could be used to put images of the life cycle of a plant in order..

1. THE SCENE

If you go to the scene editor and take a look at the Asset Manager, you’ll see one scene called “scene” which has five layers.  The one we’re interested in is called “action”.  It in turn has several 2D objects below it, but what we’ll be modifying are “models” and “clues”.

1.1. ELEMENTS TO COMPLETE THE SEQUENCE

Under “models”, you’ll see several elements but the one we’re interested in right now is called “boxModel”.  It’s a sprite whose animations represent the elements that are going to make up the sequences in the games.  In this template, the animations of this sprite are the letters of the alphabet in minuscule.  If you go to the “Sprites” panel, you’ll find the definition of the “boxes” sprite, which is the one we used to create the “boxModel” object.

You can see that there’s an animation of each small letter in the alphabet, and that the name of the animation is the letter itself.

For our color game, we’ll need to define a new type of sprite, which we’ll call “boxes_new”, with an animation for every capital letter.  If you don’t know how to add a new type of sprite, this tutorial is an excellent place to learn.

Also, to keep this project tidy (optional but highly recommended), you can delete the sprite type that we currently have for the small letters.  All you have to do is press the 3-dot button that you’ll find to the right of the “boxes” type sprites and, in the dropdown menu, choose “delete”.

We’re also going to delete the “redLetters.png” image from the “Images” panel; that is, the one we were using to create the small letter sprite.  All you have to do is press the trash can icon to the right of the file name.

After doing all that, in our case, the result is that we no longer have any “boxes” type sprites; instead, we’ve created another that we’ve called “boxes_new” with an animation for each capital letter.  The names of the animations are the letters themselves, but capital letters in this case.

To finish, in “AssetManager”, in the “models” object under the “action” layer, select the “boxModel” sprite.  You’ll see, in the properties panel, that its “spriteDef” property has no value. This is because its value was “boxes”, which is the sprite type we just deleted.  In its place, we’re going to assign it the new type of sprite, the one we just created: “boxes_new”.

1.2. THE CLUES

Under the “clues” object are the images for every animal we’ll show in the different levels of the game.  In our colors game, we’ll use the image of a splotch of paint in the color that must be spelled in each level.

To start with, in the “Asset Manager”, press the 3-dot button to the right of each animal image under the “clues” object, and in the dropdown menu, click on “delete”.  Then, in the “images” panel, just as we did with the “redLetters.png” image, delete all the animal images (“bee.png”, “chicken.png”, “cow.png”, “crocodile.png”, “dog.png”, “duck.png”, “elephant.png”, “fish.png”, “giraffe.png”, “horse.png”, “monkey.png”, “mouse.png”, “snake.png”, “spider.png”, “whale.png”).

Now, we’re going to upload the images we’re going to use in our project.  We’re going to use these eight images as goals:

You need to upload them to your image repository, and then add them to the project.  If you don’t know how, you can check out this section of the My first WiMi5 game tutorial.  Keep in mind that, when you cloned the original game, a folder with all the game’s images and audio was created in the repository.  This folder will have the same name as the original name the cloned project was created with.  The best idea is to upload these new images to this folder, in order to keep everything tidy.  Also, if you believe that you’re not going to be using the images of the animals and the small letters, you can delete them from the resources repository (images and audio).

Once we have them available to our project, we’re going to create our new goals.  To do this, first, select the “action” layer in the “Asset Manager”.  Then, from the “images” panel, drag out, one by one, the eight color images to the “Scene view”.  In the “Asset Manager”, you’ll see that you have eight images whose names are the colors they represent, and they are directly under the “action” layer.  Now, what you have to do is select each one in the “Asset Manager” and put them under the object called “clues”.

Also, now that they’re selected, in the “Properties” panel, change their “anchor” property to the “CENTER” value, and its A position to “x=0, y=0”.  It’s important to do this in that in exactly that order, because if you change the position to 0,0 and then “anchor”, you’ll see that the change to anchor has caused the position to change again.

And with that, we’ve completed the work in the scene editor.

2. SOUNDS

You have the option to have an audio file played when a level is completed.  In the case of the game we’re using as a template, we’ll hear the name of the animal in English, to reinforce the learning of the word.  In the case of our clone, we’re going to want exactly the same, but with the English name of the color played.

To do this, first, we need audio files.  There are many possibilities here, but the easiest, in this case, is to use one of the many tools there are out there to create an audio file based on text.  Two good options are https://text-to-speech-demo.mybluemix.net/ and http://www.fromtexttospeech.com/ .

As for the file format, at WiMi5, we recommend .M4A (AAC), which is supported by practically all browsers.  If we don’t know what tool to use to edit audio files, an excellent option is to use Audacity.

Once we have the audio file for each color, we need to upload them to our repository and add them to our project, just as we did with the color image files.  And, just as we did with the animal image files, to keep our project tidy, it’s a good idea to delete the animal name files from our project, and from our resource repository.

Finally, we need to slightly modify the logistics of our game.  To do so, in the “Logic Chart” panel, go to the script called “GralConfig”, which you’ll find at the root level of the project.  One way to reach this script is to simply double click on it.  If you’re not familiar with how to work with scripts and levels, our “Scripts and Levels” video tutorial, which you’ll find here, is the best way to learn.

Once inside the script, you’ll see an “ActionOnCollection” blackbox, with the “addItems” action assigned to it.  What we’re doing here is putting in a list of all the game’s audio files.

At this time, we can see that all of its input parameters are marked as obsolete (with an X).  This is because we’ve deleted all the audio files we were using for animal names from the project.

So, what we need to do is delete these obsolete elements by right-clicking on them and selecting the option “Remove”.  Or, you can click on the blackbox and select the “Del Last Item(s)” option once for each audio file.  Then, we’re going to add the audio files we need for our game.  All you have to do is drag each audio file from the “Audio” panel to the blackbox.  It’s important to do this in order because, as we’ll see later, we’ll use the position in the list to set up the game.

Now we’ve done all the work for the sound files.

3. SETTING UP THE GAME

The first thing you have to do is create a text file with the name “config.json”.  Be careful: this file name must be exactly this, including the “.json” extension.

We’re going to copy the following content into the file, which is the setup for the template game:

{
 "title": ["animals"],
 "rounds": 6,
 "ordered": false,
 "shown": 1,
 "extraOptions": 3,
 "levels":[ 
 {
 "target": ["c","o","w"],
 "clue": "cow",
 "shown": 0,
 "sound": 1
 },
 {
 "target": ["d","u","c","k"],
 "clue": "duck",
 "sound": 2
 },
 {
 "target": ["h","o","r","s","e"],
 "clue": "horse",
 "sound": 3
 },
 {
 "target": ["c","r","o","c","o","d","i","l","e"],
 "clue": "crocodile",
 "shown": 2,
 "sound": 4
 },
 {
 "target": ["d","o","g"],
 "clue": "dog",
 "shown": 0,
 "sound": 5
 },
 {
 "target": ["s","n","a","k","e"],
 "clue": "snake",
 "sound": 6
 },
 {
 "target": ["e","l","e","p","h","a","n","t"],
 "clue": "elephant",
 "shown": 2,
 "sound": 7
 },
 {
 "target": ["f","i","s","h"],
 "clue": "fish",
 "shown": 0,
 "sound": 8
 },
 {
 "target": ["s","p","i","d","e","r"],
 "clue": "spider",
 "sound": 9
 },
 {
 "target": ["c","h","i","c","k","e","n"],
 "clue": "chicken",
 "sound": 10
 },
 {
 "target": ["m","o","n","k","e","y"],
 "clue": "monkey",
 "sound": 11
 },
 {
 "target": ["g","i","r","a","f","f","e"],
 "clue": "giraffe",
 "sound": 12
 },
 {
 "target": ["m","o","u","s","e"],
 "clue": "mouse",
 "sound": 13
 },
 {
 "target": ["b","e","e"],
 "clue": "bee",
 "shown": 0,
 "sound": 14
 },
 {
 "target": ["w","h","a","l","e"],
 "clue": "whale",
 "sound": 15
 }
 ]
}

The file has six sections :

• title: the game’s title in small letters.  It appears at the beginning with an effect of bubbles appearing and floating upwards.  As you can see, the content is a list of texts in double quotes.  It’s important to remember that, since this is a list of elements, the texts going between square brackets [ and ].
  In this example, in the list, there is only one text, “animals”.  Each text in the list will be shown on a different line.  Valid examples of titles might be:
  • [“The days”, “of the week”]
  • [“Vegetables”]
  • [“The Life Cycle”, “of the Plant”]
    The title in the first and third examples would be shown on two lines.
    In our clone, the content of this section will be [“colours”].
• rounds: this is the number of rounds that will be played in each match.  It should be equal to or less than the number of levels we define later.
  In our clone, there will be four rounds per match, so the value of this section will be 4.
• ordered: this indicates whether the levels should be shown in the order they’re defined in this file or randomly.  The value will be true if we want the levels to be shown in order, and false otherwise.  In our case, false.
• shown: this indicates the number of elements of each sequence that, by default, is shown already solved at the beginning of the level.  We say “by default” because, as we’ll see later on, in the definition of each level, we can establish a specific value for this property.
  In this example, we can see that the value is 1, which means that in each level, one of the letters of the animal’s name will already be shown in position.
  In our clone, we’ll make it so that, by default, 2 letters are shown, so we’ll set this value to 2.
• extraOptions: indicates the number of extra options, alongside the necessary ones to make up the sequence that will be shown in each level by default.  In this case, this is also a value that can be defined specifically for each level.  In the example, the value is set at 3, meaning that three extra letters in addition to the necessary ones will be shown.  In our clone, we’ll set it so that there are no extra letters, putting the value at 0 .
• levels: this is a list with the specific settings for each game level.  We must remember that since it is a list of elements, the content must go between square brackets, [ and ].
  The settings for each level are defined between curly brackets, { and }.  For each level, we can define five properties although, as we’ll see now, several of them are optional:
  • target: this defines the sequence to complete in the level.  The value is a list with the names of the animations we’ve created for the “boxes_new” sprite in section 2.1.  For example, in our game, for the level with the color black, the content of this section will be [“B”,”L”,”A”,”C”,”K”]. We must remember that we put the names of the letters in capitals.
  • shown: this section is optional.  Its purpose is to change the game’s default setting.  If we wanted for only one letter to be shown in any given level instead of the two we have as a default, we would include the section with the value of 1.
  • extraOptions: this section is optional.  Its purpose is to substitute the game’s default setting.  If we wanted a given level to show two extra letters, instead of not showing any as we’ve set as the default, we’d include this section with a value of 2.
  • clue: this section is optional.  Its purpose is to show, or not, an image as a clue for the sequence to be created.  In our case, we’re going to show a splotch with the corresponding color.  The content must be a text with the name that we gave the image of the color in question in the scene.  We’re referring to the images we put under the “clues” layer.  So, for the “black” level, the value of this section will be “black”.
  • sound: this section is optional.  Its purpose is to play, or not, a sound once a level is completed.  The content must be in the same position on the list as the audio in the list of audios we created in section 3.  We want to play a file saying the name of the color.  For the “black” level, the content for this section will be 1, since it was the first audio file we added to the list.

Once you’ve understood this file, you should be able to define everything about your game.  This is how the file would look for our game:

{
 "title": ["colours"],
 "rounds": 4,
 "ordered": false,
 "shown": 2,
 "extraOptions": 0,
 "levels":
 [ 
 {
 "target": ["B","L","A","C","K"],
 "clue": "black",
 "sound": 1
 },
 {
 "target": ["B","L","U","E"],
 "clue": "blue",
 "sound": 2
 },
 {
 "target": ["G","R","E","E","N"],
 "clue": "green",
 "sound": 3
 },
 {
 "target": ["O","R","A","N","G","E"],
 "clue": "orange",
 "sound": 4
 },
 {
 "target": ["P","I","N","K"],
 "clue": "pink",
 "sound": 5
 },
 {
 "target": ["R","E","D"],
 "shown": 1,
 "clue": "red",
 "sound": 6
 },
 {
 "target": ["W","H","I","T","E"],
 "clue": "white",
 "sound": 7
 },
 {
 "target": ["Y","E","L","L","O","W"],
 "clue": "yellow",
 "sound": 8
 }
 ]
}

As you can see, the game’s title will be “colours”, and each match will be four rounds whose levels will be shown randomly.  By default, 2 letters will be shown at the start in their position, and there will be no extra letters, meaning that there will be no letters that do not make up part of the solution.

As for the levels, eight have been defined, all of them showing an image as a clue and with an assigned audio file for when the level is solved.  Also, they all use the default values, except for the “red” level, where instead of two letters already being shown, only one is.

The final step is to substitute the original settings files from the template with ours.  To do this, all you have to do is go to the “ParamMap” section in the logic editor, and upload our new file.  Since our file has the same exact name as the original, i.e. “config.json”, a window will pop up warning us that the file will be overwritten.  Click on yes, and with that, you’ll have finished the process.

If you go to the logic desktop, and click on the “play” button in the “Preview” panel, you should get a preview of your working game.

4. CHANGING THE HOW-TO-PLAY TEXT

There are three texts that will be seen in the game.  Two of them are general instructions, so they don’t need to be modified.  But one of them is the text explaining the objective of this game in particular.

This text is an image, so the easiest way to modify it would be creating a .png image with the new text, which could be “What color is this?”, for example.  The font used for all of the texts is “Fredoka One”.  The image must have exactly the same name as the one used in the original; in this case, “gameHowTo.png”.

You need to upload it to the repository, in the same folder as the original.  A window will pop up with a warning that you’re going to overwrite a file and seeking confirmation.  Confirm that you want to overwrite and thus you’ll have a new image applied to the game.  Since you overwrote the original, you don’t have to do anything else.

It’s time to go back to the logic editor and press “play “ in the “Preview” panel to see the changes in the game.

5. CHANGING THE GENERAL APPEARANCE OF THE GAME

You might want to do more than just change the sound or audio files; maybe you also want to personalize the appearance of your new game, by changing the background, the boxes that contain the elements of the sequence, or everything at once.  In this case, you’d best read this tutorial.

Tutorial written by Francisco Almeida. CTO WiMi5