BRANDED MINI-GAMES

Branded Mini Games are short mobile web games packed with powerful social features. They are fully customisable to any brand and run well on laptop, tablet, mobile or within an app.

How to customize your HTML5 game with Game Editor?

Follow

The Game Editor is a tool which allows you to customize the game as you need.

There are two Game Editor modes: Easy and Pro.

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

EASY MODE

MAIN LAYOUT

image86.png

CATEGORY PANEL 

The Category Panel contains all groups for the components which can be customized in the BMG game:

  • Object: the image-type components that can be customized by replacing with your own image:
    • Brand Logo: contains components which identify your brand in-game.
    • Text: contains text components used in-game. Note: only image-based text will be shown in here, not the text that is drawn using system fonts.
    • Button: contains button components used in-game.
    • Background: contains background components used in-game.
    • Character: contains components which define the characters used in-game.

Note: depending upon the game, there may be more or less groups and components available for customization.

SETTINGS PANEL

After you select a group in the Category panel, all of its components will be displayed in the Settings Panel.

You can upload new custom the components in here.

PREVIEW AREA

All the changes you make to the components will be reflected live in the Preview Area.

CUSTOMIZE THE COMPONENT

You can customize the game components by following the steps below:

Step 1. Select the category to load its components

Choose a Category in the Category Panel to load its components and begin the customization:

image20.png

Step 2. Select the component to customize

Once the components of a Category are loaded, you can select the component to customize by simply selecting it:

image33.png

Step 3. Customize the Component

Once the Component is selected, you upload your own image to replace that component:

  • Select “Upload” button

    image53.png

  • Drag and drop your own image into this area or select “choose an image” to browse to your file:

    image54.png

Step 4. Preview the change

Once the image has finished uploading, the Preview Area will automatically refresh allowing you to preview how the game will look with your own image:

 

image78.png

PRO MODE

MAIN LAYOUT

image21.png

 

SCENE TABS

A BMG game always has 4 Scenes: Loading, Instructions, Gameplay, and Results.

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

image122.png

After you select a Scene tab, its components will be loaded into the Editor Body, Components Panel

COMPONENTS PANEL

Lists all available components of the selected Scene.

There are two component types:

  • Image: the component is an image
  • Text: the component is a text string

Also, depending on their nature, the components are grouped into 4 groups:

  • Branded: the components that are used to represent your Brand
  • Typography: the components that contain some text
  • All: show all components (include the components which don’t belong to either of the groups above)
  • Hidden: the components that are hidden

image100.png

After you select a component group, its components will be shown in the Editor Body.

EDITOR BODY

Shows all available components in one component group of a Scene.

The user can see how those components look, and interact with them directly to change their properties.

SPRITE PROPERTIES

Lists all properties of a selected component; depending upon the component type, its properties may be different.

CUSTOMIZE THE COMPONENT

You can customize the game components by following the steps below:

Step 1. Select the game’s Scene to customize

Choose a Scene in the Scene Tabs to load its components and properties to begin the customization:

image101.png

Step 2. Select the Component to customize

Once the Components and Properties of a Scene are loaded, you can select the Component to customize by one of two ways:

  1. Select the Component displayed in the Scene area.

    image38.png

  2. Select the Component listed in the Component area:
image34.png
Image-type Component
 image27.png
Text-type Component

 

Step 3. Customize the Component

You can customize the Component by interacting directly with them in the Editor Body, for example:

  • Change size: select the Component then hold & drag its corners to resize it

    image38.png

  • Change position: select the Component then hold & drag its center part to move it around

    image38.png

If the selected Component is Image-type, you can download it, then modify as you want, and then upload new file to replace the original one in Components Panel

image73.png

For advanced users, you can select the “Properties” button to expand the Properties Panel for more customization options:

  1. Z-order: is an ordering of overlapping two-dimensional objects; the Component which has higher z-order value will overlap the Component which has lower z-order value. you can input Z-order value directly:

    image74.png

  2. Size: is the dimensions of the Component, you can input Width and Height value:

    image04.png

  3. Position: is the position of the Component in the Scene, you can input X axis and Y axis value:

    image80.png

  4. Text (only for Text-type Component): you can customize:
    a. Text: input the text value
    b. Text Size: input the size of the text
    c. Text Color: select the color of the text
    d. Align: select the align of the text

    image143.png

OTHER CONTROLS 

CHANGE BMG TITLE

Simply click on the title and change it to any name you want:

image102.png

UNDO/REDO THE CHANGE

While customizing the Component, if you want to undo any action, you can simply click the “Undo” button on top of Scene area to do it:

image99.png

And, if you want to redo any action, simply click “Redo” button next by:

image106.png

PREVIEW THE GAME

You can always preview how the game looks like during the customized process by selecting “Preview” button in Scene area:

image17.png

A “Game Preview” popup will be shown to let you preview how your game looks:

image78.png

CLOSE/EXPAND THE COMPONENTS AND SPRITE PROPERTIES AREA

To close/expand the Components or Sprite Properties area, simply move the cursor to the separated line between two areas and select it:

image18.png

When those areas are expanded, you can also close them by selecting the “…” button on top of it:

image107.png

For Sprite Properties area, you can also select the “Properties” button to close/expand it:

image108.png

CUSTOMIZE ALL IMAGE-TYPE COMPONENTS AT ONCE

If you don’t want to customize the Image-type Components one by one, you can download all of them at once, and customize offline, then upload to change them all.

To download all Image-type Components, simply click “Download” button at the bottom right of the screen:

image41.png

And to upload them back, simply click the “Upload” button:

image02.png

*Note: Images in the compressed file to upload must have the same name and size as the original image.

 

Comments