Help: How to create a game
– Creating a game step-by-step
Game Graphics
- Inserting graphics to a game:
images and animations
Don't miss
At this point you have probably already read our essential guide to creating games and now you want to know more. So here it is: Detailed Features of the Game Editor, tips and tricks that allow you to create a game with animations, objects, sounds and other features according to your wishes.
(Our tips for other tutorials: Basic instructions on creating games, Tips on working with graphics)
Recommended: See this video with tips for creating games. Click to the bottom right to enlarge it to full screen and to set the quality of the video to HD. Alongside the simple demo game there, you can also see footage from the actual game created in the GameStylus system - from time 7:45.
This text continues below the video.
You can upload your sounds and music to the game the same way you uploaded your graphic. Click the Home in the top menu and then Sounds and Music. Use the OGG file format for sounds and MID for music (you can also use OGG, but using MID you save users downloading large amounts of data).
To create OGG files, we recommend using Audacity software. For music we recommend Aria Maestosa software. Both are free.
Let‘s return to the animation of the main character of the game. Note that the location for hero animations is 4 times greater than any normal location. This is for you to have enough space for all animations of your hero. To move easier through the location, use the last two buttons in the top menu - they will move your viewpoint and the menu to the left/right and up/down.
The recommended number of steps (frames) of any animation of walking in one direction is 6 to 9. The recommended height of the hero is up to 350 pixels (dots). Scenes of the game should have appropriate size to this, of course. Sometimes; however, you may have your reasons to deviate away from these recommendations.
When your hero moves a little differently than you expect, or when he/she twitches during the animation, it has probably poorly adjusted Position Points. A Position Point says at what point (of the path in the scene) your hero exactly stands in the current frame of animation. When creating the animation, the system only estimates the point - and you can set it precisely. Select the appropriate frame of the animation, use the item more... in the top menu, and click to the button Edit Position Point and then click to the place where you want to place the position point. Or just click to the button Edit Position Point and then use the arrows to move the point – and then save the new position.
If the hero stands still, the Position Point should generally always be in the same place of the feet or shoes of the hero! This is true for all animations that might follow in one place. (You may press CTRL key when placing the Position Point by mouse to place the Position Point on the same place for the whole animation. This is useful for animations done on one spot – like bending over or standing on tiptoes. ATTENTION: You still have to go through all steps of the animation and save the new position of the Position Point for each of them individually – always use the appropriate button Save. Otherwise, the changes made are only temporary!)
Sometimes it may happen that you need to replace one image with another. There is no problem with the backgrounds - simply delete the old one, upload the new one and change it at the appropriate location.
But it may be worse for images of objects and characters. You have probably defined sub-images of the images, placed the images to the scenes etc. And you don‘t want to do it again with the new image. Therefore, a special trick allows you to quickly replace an image with a new one. How? Upload the new image. Rename the old image (the one you want to replace) to @replace@ (including the @ at the beginning and the end); then press the Replace button at the new image - and the old image will be replaced. Note: Only one file may be named @replace@ and the old and the new file must be different. But they should have the same size.
If you have created a hero for your game and you want to use him/her in the next game, follow these steps: Create a new game. Don’t upload anything to it! In the game where the hero was created, click to Locations in the menu and at the For tests and common animations - Only for special use – press button Export/Import. Then go to the new game. It must be completely empty at this point! Go to the same place (Locations), press and hold the CTRL key and click to the same button (Export/Import). All pictures of your hero, as well as all his/her animations etc. are now copied to the new game. Any changes to the hero in any of these games from now doen’t have any effect on the other game.
Be careful with the images of dark items to collect – the game inventory has a black background so it may be difficult to see dark images on it. For dark objects, it is a good idea to create a light border around them.
Note that the maximum number of simultaneously collected items is 55. It is recommended to let players own - at any point in the game - significantly fewer items, so that they could keep an overview over them.
Pictures of all items which should be displayed in the inventory should be in one png file. (It is not necessary, but it speeds up the application and saves memory - so it is strongly recommended!) The optimal size of any item to collect is 90 x 90 pixels, while the larger sizes are reduced by the system. We recommend not to have objects smaller than 20 x 20 pixels - they can become too small in the inventory - especially on small screens - and difficult to see.
Collected items can be combined in the inventory. How to do it? Click Home in the menu and then Items Combinations at the top. Select the objects that should be combined (original items 1 and 2) and what items the player receives as a result of this action (new items 1 and 2). So the player may get up to two new items. Choose what happens to the original items - whether they will remain in the inventory or if they should be deleted. Write a text explaining what just happened.
The flags should have values in the range +/- 127. The GameStylus system can usually cope with a greater range of numbers, but it is better not to rely on it entirely.
Sometimes it can be useful to take an object to your hand and then move it to another place in the same location without placing it in the inventory. How to do it? In the same place where you define items to collect use the choice For experienced users only: Set the flag when item not taken (to 1). How does it work?
Take a look at this example: Let’s say there is a carrot in a location which is displayed when the flag Carrot > 0. When the hero takes the carrot, its active area has probably these instructions: If the flag Carrot > 0 Take the item Carrot, Set flag Carrot = 0. This way the carrot is taken and disappears from the scene. If you choose the flag Carrot in the choice For experienced users only... then the player will be able to take the carrot and move it around the scene, but when he/she releases it, the carrot won’t go to the inventory, but the flag Carrot is set to 1. So the carrot appears on the scene again and the hero can take it again.
Note that when selecting the flag a code is written to the text field for the action. Don’t change it! You don’t need this text because when the item is used inappropriately, it just returns to the scene.
If you want the hero to go anywhere the player taps without having to create an active area and inserting the instruction to walk for every point of the path, use Add Active Points in the main menu. This way you add walking points together with appropriate active areas and instructions.
If you are editing objects in the scene and you need to know their numbers, you can switch the numbers on - in the main menu use button Show/Hide Numbers... (You've probably noticed that all the objects get their numbers when they are inserted to the location). You can also change the color of the lines to see the numbers better; even on a dark or light background.
Use the button Hide/Show all objects/anim. objects for editing to display or hide different types of objects in the scene. When editing objects, you can also use the */- buttons at the top. The asterisk button hides all objects except the currently selected one; the minus button on the contrary permanently hides the selected object, so you can easily modify objects that are underneath.
If you press the + button and then click on the scene, you create a + sign. This can come in handy if you need to put more objects in one place. It is better than to point to the display by your fingers.
All these functions are of course only related to the editor, they don‘t affect the display of objects in the real game.
Most objects can be moved using the arrow buttons at the top. Just select the number of an object to be edited and then make the changes. When you finish editing the objects of one type, press the button Save to save the changes.
When clicking the arrows you can press the SHIFT key to move the objects faster. When making adjustments of the active areas, press the CTRL key and then use the arrows to resize them.
Properties of most objects can be adjusted by using the choice more... at the top. You can also delete objects there or even delete all objects of this type from the scene. Do you need more details?
Select - at the top - the number of the animation object (frame) you want to edit and go to the item more... at the top. You can change the number of animation to which the object belongs, or the number of its step. Attention: The step numbers in one animation should go one by one (1, 2, 3...).
If you need to move the object to a new animation, use the button Add an empty Animation. If you press the CTRL key simultaneously, all objects – from the chosen one - with the same number (id) of animation will be moved to the new animation starting with step 1. CAUTION: You must still go through all the objects individually and save the change, otherwise the change of the animation number and the step number is only temporary.
You can decide if the animation does not continue after the selected step, if any flag is greater or smaller than a number. So you can control the animation flow. Attention! The value is examined only when the animation is going forward, not backward (if the animation is set to go back and forth).
CAUTION: If the first step of the animation is dependent on a flag (eg. Flag > 0; beware, in this case, you can not use <=) and the value of the flag is -100 or less, the animation jumps straight to the last frame (step). What is it good for? Let's say the hero has to move a chair; first the frame of the chair animation is dependent on the flag Chair; once set to 1, the chair is moved – and will be animated. But when the hero leaves the scene and then comes back? How do you ensure the chair is still shifted? Thanks to the value -100 it is easy, because if the flag Chair <= -100 the animation goes directly to the last frame (shifted chair). If the last step of the animation is hidden then - if used the -100 value - the animation goes directly to the hidden phase.
After showing each step of the animation you can also change any flag – add or subtract a number from it (using a positive or a negative number) – when going forth (>>) or back (<<). Attention: The first and last frame of the animation is considered as always going forth, never back. If you fill in number 0, then one step later the flag is set to 1 (which is useful if you need to set some flag after the end of the animation).
WARNING: Each showing of the animation step performs the desired change of the value.
You can also set the duration of each step, and the Z-index, which makes possible to determine which object is where. The higher the Z-index, the closer the object is to the player.
Attention: Every button Save is only related to the marked section of the menu. Press the button to save any desired changes.
If the first step of an animation should not be visible before the animation is started, set it as invisible. If the last step should be invisible after the animation finishes, set the last step as invisible.
You can also set the animation to repeat or to run back and forth (the first and the last frame can be omitted if they should not repeat with the other steps) and choose the number of repetitions. If you enter 0, the animation will repeat again and again. When the animation goes back and forth then each way is counted as one repetition.
When editing the points of the paths you can set the size of the hero for each of the points. If the size of the hero is, for example, 50% (half) in one point and full (100%) in the other point, then when the hero moves from the first point to the second point then his/her size changes continuously. The same applies to the Z-index. You can also set a special animation, which will take place if the hero is at a point. It can, for example, be crouching down.
Regarding the paths between points, there are two important things:
1) Animation 1 (left/top) is used when the hero moves from a point on the right to a point on the left. If the points are exactly one above the other, then this animation is used to move up. Animation 2 is used for the movement to the right. If the points are exactly one above the other, then the animation is used to move down.
2) The hero always moves exactly as the animation says! So if you use the animation moving to the left for the path where the hero should go to the right, then the hero will go in the wrong direction!
Item 2 deserves an explanation: The GameStylus system of course computes the best path; even if you use an animation for walking straight the system is able to use it for oblique moving. Such a choice is fine. But if you choose the opposite direction, the computing won’t work. Is it because you may want your hero to totter, for example, two steps forward and one step back; if we recalculate the walking completely; then you could not accomplish such an idea.
The list of instructions in Active Areas is, as we believe, self-explanatory. Nevertheless, we added some further remarks:
Note that you can specify the conditions under which something happens. You may want the hero to possess an object or to use it or a flag to have some value. You can put several conditions one after another. If you then want to do something else if the condition is not met, simply insert the instruction: Do the next steps - if the previous condition is not met. If you want to do the following instructions always, whether the condition is met or not, choose the option - always.
Typically, the condition looks like this: If the flag MouseFlag = 1; Take the item Mouse; Set flag MouseFlag = 0. If the condition is met, the player takes the mouse. The condition, however, may continue: Do the next steps - if the previous condition is not met; Show this text – There is no mouse. Thus, when the initial condition is not met, the text shows. Or there can be: Do the next steps - always; Go to point 3. Then the hero will go to point three, whether the introductory condition is met or not. When using Do the next steps - if the previous condition is not met you can still later add Do the next steps - always. Then the next instructions are executed after instructions in the condition, whether the condition is met or not.
When you use a condition on the owning of an item, it is evaluated as true even if the user has just the thing in his hand - and uses it to perform an action.
Note that if the hero has to go to some point, the next instructions are waiting until he gets there. But the player can interrupt the walking, so the next instructions may never be executed. (If you prefer to not allow the interruption, use an uninterruptible sequence of instructions. More about that later.)
Running of any action may be delayed until a flag is set. Even this waiting can be interrupted by the player.
Note that the hero can hide and then show later at another point of the location. Note that if the hero is hidden, the player can not perform any actions. When the current action is finished the hero is shown again. If this is not what you need - and you need to hide the hero - place the hero to a point with size of 0%.
Note that any text can be viewed in four different positions of the display. ATTENTION, there is a hidden trick: You can use the word @$@ in the text (separated by spaces at the beginning and at the end, i.e. space @$@ space) to force the system to insert a new line. But we recommend letting the system format your texts.
If you enter the command to animate the hero, then the next instructions wait until the first run of the animation is finished.
If you insert the instruction Play this sound then the selected sound is played. If you use Play this music then this happens: If the same music is played at this moment, nothing happens. If it is not played, then it starts to play. This instruction is suitable for insertion into the Default Action of any location. This ensures that in the scene, the selected music will always be played. Music is played over and over again. Caution: The game player can always turn the sounds and music off.
CAUTION: If you - in an active area - use a condition with a flag and then – for the case the first condition is not met - a condition with an item, then if the first condition is met then the second condition is not used. But this means that if the player uses the item here and the first condition is met then the default text for the item shows. If this is undesirable, it is necessary to insert the conditions in another order.
If you use an instruction to delete an item (Delete item) and the hero does not own the item in that moment then nothing happens.
Note the text more... in the list of actions. If you click it, some special instructions show. You can, for example, let the menu of the game open here (at the end of the game; be careful: After opening the menu (using this instruction) the player cannot use the collected items anymore!).
You can also prevent players from breaking the sequence of instructions (by tapping on the display and starting another event). But beware: If the player is prevented from making another action, then you should always have a good reason for this (such as when you want to perform a more complex animation, perhaps an intro or ending of the game). Uninterruptible sequences can be ended by inserting of the same instruction, or moving to another location. If the uninterruptible sequence should continue even in the new location, then you must start it there again (in the Default Action).
You can also insert a film cut – fade in/out. If you put it before the change of the location then you can see fading out in the first location and fading in to the second one. (Why? Instructions placed after the instruction of the film cut always wait until the scene is dark - and then they are executed. Then the scene lights up again.)
And you can specify here that instructions from another active area will be performed. If you have multiple active areas for the same activities, you don‘t need to re-enter the same instructions into each of them. Caution: Instructions placed behind this instruction, unless under a different condition, are never executed. It is also not possible to directly perform instructions in the same active area again. Caution: If you test if user uses an item in the first active area, then you use an interruptible instruction (eg. walking) and then you call another active area, it is not possible to test if user uses the item again in this second active area. Caution: If you are going to instructions in another area only if an item is used, and before moving to the second area you do not use any interruptible instruction, it is necessary to test the existence of the item again in the new area. Otherwise, when using the item, only a standard message (of the item) appears and the instructions of that area are not be performed!
You can delete any instruction at any time. And you can add a new instruction to any position (note the box New code is inserted at this step). You can easily insert several instructions in a row inside as the position counter increments automatically. Using the button Move you can move any instruction to this position. And some instructions can also be edited. Note that if you change any text in the instruction list, you must first confirm the change by clicking the button Update and then - after making all the necessary adjustments - saving them by clicking the button Save all the inserted Actions.
Even the Active Areas have Z-index, so they can be placed one above the other. If the conditions in the top area are not met, the system tries to execute instructions in the area below, etc. So you can, for example, overlay the whole location by one active area to prevent any action until a certain condition is met (for example, until the hero owns an item).
Z-index of active areas is unrelated to the Z-index of other objects (such as animated objects or points of paths).
Note: There is a special Active Area named Default Action. Actions inserted there are performed whenever the hero enters the scene. If the condition If the hero uses is used in the Default Action, then instructions in this condition are performed whenever the player uses this item on the hero in this scene.
When a player makes no action for some time, your hero can become bored. If you want him/her to make some special animation (e.g. blink of an eye), set the animation to the down direction in the basic settings of the game and set the time after what the hero starts to be bored. The animations to other directions will be used when hero rotates to see in that direction.
If you do not want such an animation over and over again, set the duration of the last frame to 1500000. This also applies to other animations of the hero, such as crouching down.
If you want the game to be working in several languages, go to the basic settings (Home screen) and click Translations. Export the language in which you created the game and translate the resulting file (be careful to keep line breaks in their places!). Then import the file to the appropriate language. (Use UTF-8 coding.) Then you can check the result using the link Check.
If there is no translation of the user interface for the desired language, you must translate these texts too. (Our translation is available for those languages where you can see the word Export on the corresponding line.) Export the texts of the user interface, translate them and then upload the resulting file to the appropriate language.
This way you can create a translation of the game in any number of languages. The default language for any player is set according to the settings of his/her smartphone/tablet, but this can be changed manually.
If there are no in-game texts, the game player can switch to any of the languages for which a translation of the user interface exists.
Caution: Texts are divided and printed on lines considering spaces between words. If there are no spaces in a text, after reaching the end of line the text is divided in any point. In languages where there are no normal ASCII spaces (eg. Chinese), we recommend to add spaces to places where text can be split to multiple lines (eg. after dots, dashes, etc.).
Click the Home link in the top menu and you can see the text Export this game for testing and a box for a Password (optional) there. If you enter the password, you will need to enter it when you download your game, so you get an additional layer of data protection. But it is appropriate to note that, due to the properties of mobile operating systems, this data will never be perfectly protected.
Before exporting the final game, you should delete all images, backgrounds, sounds and music that are not used in the game. Otherwise, they will be downloaded along with the game. (Why don’t we delete them automatically? Because you may want to download all the graphics for debugging – even the images that will be used later. More about that below.)
On the home page you can also assign the rights to edit your game to another user of GameStylus system. Just insert his/her e-mail address which is registered in the system and click Grant to grant the access. Similarly, it can be later removed. So you can easily collaborate on your game with your team.
Before publishing your game, it is advisable to thoroughly test it - preferably with the help of other people than just the creators of the game. For these purposes, you can also publish the game partially hidden - as available only to those people who know the right link.
For your own testing, you can not only use the basic download, but some special options as well. Just look at your list of games – below the Download link there is this: Downloads for very experienced users: (show). Tap to show. Anytime you make a change in your game, you can – if you wish - download only the changed parts – just the music, backgrounds, game definition... If you tap the symbol (()) for the appropriate choice you will download the selected data and the game remains in the state in which it is – with your hero in the same location and with the flags pre-set.
CAUTION: Use these choices with care. When improperly used, they can sometimes lead to a failure of the mobile app!
Is your game finished? Then you can publish it to the public list of games at GameStylus.com. In your list of games, just select Publish this game (this option is available after the first export of the game). Upload the image of the game, select a language and enter the name and description of the game (you can choose more languages step by step and fill in the texts for each of them), authors etc. Then choose whether to publish the game completely publicly - in the list, or partially hidden - only available for people who know the link to it.
And then just press the button Save all and Publish.
CAUTION: If you need to delete a text in one language, there must remain at least one character (e.g. space) in the title; if the title text and description are completely empty, the change will not be saved.
TIP: If you export your game with a password and the game is published entirely publicly then the password is not used for the public game. If you publish the game partially hidden then the password is used as a part of the url - so it is not possible for anybody to simply guess a hidden link to your game. (Note that after any new publication - with a new password - it is therefore necessary to find out the new url of the game.)
Do you want your game released as a standalone application on Google Play? Write to us! From the games you've created here, we can create a full-fledged standalone application and we will discuss with you how to publish it to be successful. We hope your game will become a new online hit!
And where to go now? We recommend this: Practical advice for creating games.