Skip to content Skip to main navigation Skip to footer

How to customize a mini game with game editor?

The game editor allows you to customize the template game which you have selected for your campaign, to become your own branded game.

You can access the game editor by following: 

  1. Go to Dashboard and create a new campaign, or tap any campaign to open it.
  2. In the Game Settings, select the “Customize Game” button.

In the game editor, there are two modes: 

  • Easy mode: simple customize the game template by replacing the image assets.
  • Pro mode: provide more advanced tools to customize the game template, 

You can quickly switch between the two modes by selecting either the “Easy Mode” or “Pro Mode” button in the top right of the game editor:

EASY MODE

1. INTERFACE

1. Category

In a game, the image assets which have similar characteristics will be grouped in the same category. 

Category shows all the categories of the game.

Note: depending on the game, there may be more or less categories available.

2. Settings

Settings Panel shows all image assets of the selected category in the Category Panel.

3. Game Preview

Game Preview shows the game which has applied all the changes that you have made.

You can see how the game looks like, as well as play the game in the Game Preview area.

4. Top Buttons

Show the functional buttons, which have:

  • Restore Default button: restore all the image assets of the game to original ones.
  • Save & Quit button: save all the changes that you have made and quit the game editor.
  • Pro Mode button: switch the game editor to Pro mode.
  • Fullscreen button: make the game editor show as fullscreen (may not work in some devices). 

5. Asset Bundle Buttons

Show the buttons to handle image assets in bundle, which have:

  • Download button: download all the image assets of the game as ZIP file.
  • Upload button: upload all the image assets of the game as ZIP file.

Note: while uploading all image assets as a ZIP file, please make sure that the filename and dimension of image assets are the same as original ones.

6. Help Banner

The banner which will lead you to the help article about how to modify the graphic images once selected.

2. STEPS TO CUSTOMIZE THE GAME

You can customize the game in Easy mode by following the steps below:

Step 1. Select the image asset

Choose a category in the Category Panel to load its image assets.

Once loaded, select any image asset then the control buttons will be shown:

  • Download button: download the current image asset file.
  • Upload button: upload the image asset file from your PC to replace the current one.
  • Restore button: restore the image asset to original one.

Step 2. Customize the image asset

To customize the selected image asset, upload your own image asset to replace it by following the steps below:

  • Select the “Upload” button.
  • Drag and drop your own image asset into this area or select “choose an image” to browse to your file:
  • Once dropped or selected, the new image asset will be uploaded to replace the original one.

Step 3. Preview the changes

Once finished uploading your own image asset, the game in the Game Preview area will automatically be refreshed to let you preview how the game with the changes will look like.

Repeat step 1-3 to change all the game’s image assets with your own ones.

Step 4. Save changes to the game

Once finished changing all the image assets, select the “Save & Quit” button on the top right to save all changes of the game and quit the game editor.

Congratulations! You have finished making your own mini game.

PRO MODE

1. INTERFACE

1. Scene

Scene shows all the scenes in the game.

Normally, a game will have 4 main scenes as below: 

  • Loading scene: shows when the game is loading its assets.
  • Instructions scene: shows when the game has finished loading, and ready to play. This scene also shows a simple guide about how to play the game. 
  • Gameplay scene: shows when the user plays the game.
  • Results scene: shows when the user has finished playing and has the results of the play session.

You can choose which scene to customize by selecting it in the Scene.

2. Components

Once you have selected a scene, all the image assets belonging to that scene will be loaded and shown in the Components.

Depending on their nature, the image assets can be grouped in different categories.

3. Canvas

Canvas shows a visual look of the scene that you have selected.

You can interact with the image assets in the Canvas directly to customize how they will be shown in the game.

4. Properties

Properties shows the available properties of the selected image asset in Component.

You can precisely control the image asset’s looks and feel (e.g. position or size) by changing the corresponding values in Properties.

5. Canvas Control Buttons

Shows the buttons to control action in canvas, and other functions as well:

  • Undo button: revert the most recent change that you have made.
  • Redo button: redo the most recent change that you have made (available when you have undone one or some changes).
  • Fullscreen button: make the game editor show as fullscreen (may not work in some devices). 
  • Game Preview: show the game which applies all the changes that you have made in a popup. You can see how the game looks lively, as well as play the game in the Game Preview area. 

6. Top Buttons:

Show the functional buttons, which have:

  • Restore Default button: restore all the image assets of the game to original ones.
  • Save & Quit button: save all the changes that you have made and quit the game editor.
  • Easy Mode button: switch the game editor to Easy mode.
  • Properties button: toggle the Sprite Property Panel to show or hide. 

7. Asset Bundle Buttons

Show the buttons to handle image assets in bundle, which have:

  • Download button: download all the image assets of the game as ZIP file.
  • Upload button: upload all the image assets of the game as ZIP file.

Note: while uploading all image assets as a ZIP file, please make sure that the filename and dimension of image assets are the same as original ones.

8. Help Banner

The banner which will lead you to the help article about how to modify the graphic images once selected.

2. STEPS TO CUSTOMIZE THE GAME

You can customize the game in Pro mode by following the steps below:

Step 1. Select the image asset

Select a scene in the Scene to load its image assets.

In the Components, select any image asset to start to customize.

Once selected:

  1. In Components, the control buttons of that image asset will be shown:
  • Download button: download the current image asset file.
  • Upload button: upload the image asset file from your PC to replace the current one.
  • Restore button: restore the image asset to original one.
  1. In Canvas, that image asset will be selected and rounded with a red rectangle.
  2. In the Properties, that image asset’s properties will be shown.

Step 2. Customize the image asset

Change the image asset

To change the selected image asset, upload your own image asset to replace it by following the steps below:

  • Select the “Upload” button.
  • Drag and drop your own image asset into this area or select “choose an image” to browse to your file:
  • Once dropped or selected, the new image asset will be uploaded to replace the original one.

Change the image asset’s position or size

Using Canvas:

Once the image asset is selected, you can interact with it in the Canvas directly:

  • Change size: hold & drag the corners of image asset to resize it
  • Change position: hold & drag the center part of image asset to move it around

Using Properties:

For advanced users, you can precisely control the image asset’s position and size by changing the corresponding values in Properties.

Change the image asset’s Z-order

Z-order is an ordering of overlapping two-dimensional objects.

The image asset which has higher z-order value will overlap the one which has lower z-order value. 

You can set the Z-order value of an image asset in Properties.

Step 3. Preview the changes

Once finished customizing the image assets of the game, select the “Game Preview” button in the top area to let you preview how the game with the changes will look like.

Repeat step 1-3 to change all the game’s image assets with your own ones.

Step 4. Save changes to the game

Once finished customizing all the image assets, select the “Save & Quit” button on the top right to save all changes of the game and quit the game editor.

Congratulations! You have finished making your own mini game.

3. VIDEO GUIDE

Please also check the video below to know the detailed steps to customize a game template to your own mini-game using Pro Mode in Studio.

OTHER FEATURES

1. DOWNLOAD ALL IMAGE ASSETS OF THE GAME

If you don’t want to download and customize the image assets one by one, you can download all the image assets of the game (as one ZIP file) by selecting the “Download” button at the bottom of the game editor.

2. UPLOAD ALL IMAGE ASSETS OF THE GAME

You can upload all the customized image assets for the game (as one ZIP file) at once by selecting the “Upload” button at the bottom of the game editor.

Note:

  • The customized image assets must have the same filenames and same dimensions as the original image assets. 
  • The ZIP file doesn’t need to include all the image assets, but you can select some image assets to customize and add them only into the ZIP file.

3. RESTORE AN IMAGE ASSET TO ORIGINAL ONE

After customizing an image asset of the game, when needed, you can restore it to original state by following the steps below:

  1. Select the image asset.
  2. Select the “Restore” button.

4. RESTORE ALL IMAGE ASSETS TO ORIGINAL ONES

After customizing the game, when needed, you can restore the whole game to its original state by selecting the “Restore Default” button on the top right of the game editor.

Submit a query

Leave us a message