Tutorial on "Add a Word Game"

With our tool, you just need to prepare your images and vocabulary, and it will help you to create the voices and games in the same style as other word games on our website. This tutorial is to teach you how to use this tool.

You will take about 20 minutes to create a simple word game. The image in Figure 1 will be used for this game. Please right click on it and choose “Save image as” to save the image.

Figure 1

If you have already registered an account, you can log in directly and skip to next paragraph.

If you haven’t registered, click “Register” on lower-right corner. A registration form will appear. Fill in your username, email and other optional information, and then click “Create new account”. After a while, you will receive a confirmation email which contains your password. Use your username and this password to login. After login, you will notice that there is a new item “Add a Word Game” on the footer. Click it and you will go to the tool page.

If you can’t receive the confirmation email, you may consider to check your spam folder. If you still can’t find it, please feel to send me an email, I will help to set an account for you.

Language

Choose “English” for this tutorial.

Title

Enter “Living Room, tutorial” as the title of this game.

Content

Figure 2

1. Click “+ Image” in Figure 2(1) to add image(s). Select the image downloaded in Figure 1 and click “Open”. When completed, the editor message box will prompt "Upload progress: completed.”

   Note: If you want to upload more than one image, you can press “Ctrl” to select them.

   
   Figure 3

   Click the image to select it. Move the cursor over the image, you will see a cross arrow appear next to the cursor. Press left mouse button and hold on, and then move the image to the center of the yellow background and release button, as in Figure 3.

   Note: After selecting the image, some basic image editing tools are available, such as moving, scaling, rotating, and skewing. To scale the image while maintaining the x-y ratio, press “Shift” and drag the box at the corner of the image.

2. Click “+ Vocabulary”, as in Figure 2(2), to add the first vocabulary. “vocabulary #1” will appear at the upper-left corner, as in Figure 4.

   
   Figure 4

   1. Go to “Spelling” box, as in Figure 4(a). Enter “ceiling” for the first vocabulary.

   2. Go to “Phonetic” box, as in Figure 4(b). Some languages are quite difficult to learn without phonetics, like Chinese and Japanese. This box is for those languages. Since this game is in English. We just leave it blank.

   3. Click the “Sound” combo box in Figure 4(c). Select “Generated by machine” and click “Generate Now” button. When completed, the editor message box will prompt “Generating sound ……completed.” Then the sound icon’s color will change from gray to black. Click the black sound icon in Figure 5 to check the sound quality. You should hear the pronunciation of “ceiling”.

      
      Figure 5

      Note: Instead of generated by machine, you can choose to upload your own sound file.

   4. Click “Spelling, sound icon” combo box, as in Figure 4(d), choose the default option “Left -> Right” for vocabulary “ceiling”.

      Note: There are four options provided, shown in Figure 6. Depends on situation, you can choose the one that you feel the best.

      
      Figure 6

   5. Check “show outline in game mode” checkbox, as in Figure 4(e). You can see gray fill-in box and sound icon shown on each vocabulary, like Figure 9. Click on “Alignment in game mode” combo box and select “Left” for vocabulary “ceiling”. Uncheck “show outline in game mode” checkbox.

      Note: You may keep “show outline in game mode” checkbox checked throughout the editing if those auxiliary outlines do not affect your editing work.

      Understand what is “alignment in game mode”:
      When user plays the game, the vocabulary will be replaced by a box in match-up 2 / fill-in game or a sound icon in match-up 3 game, as in Figure 7. The alignment is to tell the computer how the box and sound icon aligned with the vocabulary in game mode.

      
      Figure 7

      Since the width of vocabulary, fill-in box and sound icon are different, correct alignment should be set to make them shown at appropriate location when user plays the games. Figure 7 shows the outcomes of correct alignment and misalignment. You may check “show outline in game mode” checkbox and try to change the alignment option. You will see the difference.

      You may note that the width of all fill-in boxes are the same so as to avoid the user easily guessing the answers simply by box width hint. Besides, the red cross next to the fill-in box and sound icon is a icon to indicate if the player's answer is correct or not.

   Click on vocabulary “ceiling”, move the cursor over the vocabulary and a cross arrow will appear next to the cursor, as in Figure 8. Press and hold, move the vocabulary to the right position shown in Figure 8, then release.

   
   Figure 8

   Repeat the above steps to add other vocabularies according to the below table and complete it as in Figure 8.

   Spelling	Phonetics	Sound	Spelling, sound icon	Alignment in game mode
   ceiling	[blank]	Generated by machine	Left -> Right	Left
   clock	[blank]	Generated by machine	Left -> Right	Center
   coffee table	[blank]	Generated by machine	Left -> Right	Center
   vase	[blank]	Generated by machine	Right -> Left	Right

3. Check “show outline in game mode” checkbox. Click “+ Line” in Figure 2(3). Click a start point near to the gray sound icon of vocabulary "ceiling". Click an end point indicating the ceiling in the image. Repeat this step for other vocabularies as in Figure 9. Upon finished, click “+ Line” again or press [Esc] to exit.

   
   Figure 9

   Understand more about “+ Line” operation:
   Be aware that once click “+ Line” to start, it will continue to add single lines in a way of start->end->start->end->… until you click “+ Line” again or press [Esc] to exit. If you want to edit or delete the line, click “+ Line” to exit first, then select the line to do so.

Appendix

There is no any extra information needed for this game, so just leave it blank.

Figure 10

Category

Select “Home”.

Cover image

Click “Browse” and select the image you downloaded before. Click “Upload”, and the image will be automatically downsized to fit 100 x 80 pixels.

Understand what is Cover image:
Cover image is the thumbnail icon to represent your game on the front page, as in Figure 11.

Figure 11

Status setting

Since this is only your trial game, select “Draft” for this purpose. For your formal game release, please select “Public”.

Preview and Save

Now all steps have been completed. Before saving, let’s have a preview first.

Click “Preview” button. Check the spellings, try the pronunciations and play the games. Especially play match-up 2 and 3 games to see if the fill-in boxes or sound icons are displayed at good locations. If everything goes fine, click “Save” button to save your work.

Congratulations! Now you have finished this tutorial. I hope you enjoy creating a game by yourself!

If you find any bugs or have any suggestion, please feel free to send me an email!

Further Information

There are some useful image websites. You may collect good images for your game.