Hola Studio Basic Tutorial - Part III

Introduction

This article introduces the basic construction.

Background

Hola Studio - an IDE for game development.

Actions

Games often move elements to a certain position, or change their transparency. Let’s create each of these functions.
(See: https://github.com/drawapp8/cantk/wiki/animation_config_zh）
First, create an image element, and rename it. Then create a button.
Objective: When the button is clicked, we want to:

• make image move to a new position at x=300, y=300 after 1 second
• then rotate the image 180 degrees
• then make the image gradually disappear

1. Click on the button’s onClick event, and enter the code editor. Use the code generator to locate image, and click “Generate code”.
2. Edit the code. Give it a new variable like var image_a = win.find(“image”);
3. Use config1 to make the element move to x=300, y=300 after 1 second. duration is how long the move takes (in ms), while delay is how long it is delayed (in ms).
   C++

   var config1 = {
       x:300,
       y:300,
       duration:1000,
       delay:1000
   }

4. Use config2 to rotate the element 180 degrees. “rotation” is in radians, not degrees.
   C++

   var config2 = {
       rotation:Math.PI,
       duration:1000
   }

5. Use config3 to make the element gradually disappear.
   C++

   var config3 = {
       duration:1000,
       opacity:0
   }

6. Combine the three configs, and have the element execute the configs.
   C++

   config1.next = config2;
   config2.next = config3;
   image_a.animate(config1);

7. Preview the game, click on the bbb button, and the aaa element will execute its actions.

Physics Engine

This game solution perfectly incorporates box2d, which is used to achieve truly visualized and easy operation.

1. How to make a body fall from midair and elastically collide with the ground.
   1. Ground: Locate the square rigidbody in the Elements list, drag it into the game scene, and pull the rectangular element.
      Locate the density in the Unique properties bar and change it to 0, to emulate ground;
   2. For the midair body, drag either a circle or square rigidbody into the scene;
   3. Preview the game.
2. Click the button, and make the body on the ground have an upward speed.
   Using the above demo as a basis:

   

   1. Create a button in the scene.
   2. Click on the button’s onClick event to enter the code editor. Locate the code generator, and set the object’s speed.
   3. Set the speed in the x and y directions (right and down = positive values, left and up = negative values), then click “Generate code”.
   4. Save the code, preview it, and click the button to achieve the effect!
3. Monitoring and implementing collision events between two bodies.
   Using the above demo as a basis:
   1. Drag a rigidbody into the scene, and place two rigidbodies on the ground.
   2. Then edit the button’s code. Use the code generator to make the rigidbody on the left move right.
   3. This way, when the button is clicked, the rigidbody on the left will collide with the rigidbody on the right.

      

   4. The onBeginContact event in the rigidbody element is the rigidbody’s collision event. You can write a listener event in this event.

Code Management

There are two types of code management. If it is a fairly small game, you can create some game logic and functions in the scene’s beforeOpen event ahead of time, and call them when you need them. You can also package the game’s business logic as an independent JavaScript file, then import it into the game, to be used by the game. We’ve done a demo to show you the specific details.

1. Writing logic and code in the scene’s beforeOpen event.
   • Drag a button and image into the game scene. Click on the button’s event, then write a function. This function should make the image move to the position of x=300, y=300.
   • Open the game scene’s beforeOpen event, and use the code generator to locate the element. Then write a function to make the element execute an action, as seen below:
     C++

     var me = this;
     var win = this.getWindow();
     var img = win.find("image");
     window.moveImg = function(){
         var config = {
             x:300,
             y:300,
             duration:1000
         };
         img.animate(config);
     }

   • In the button’s onClick event, you can call the window.moveImg() function to package the business logic for use.
   C++

   window.moveImg()

2. Importing the game logic code:
   Follow the above steps for the business logic.
   • Click on any event to enter the code editor. Then click File > New, and type game.js.
   • Write the game’s business logic code, as seen below (as shown):
     The Game.init function initializes its parent element win. It needs to be initialized in the scene’s beforeOpen function.
     Then, call the movement function Game.moveImg() (as shown) where the button is pressed. This will implement the above function:
     C++

     var Game = {};
     Game.init = function(win){
         Game.win = win;
     }
     Game.moveImg = function(){
         var img = Game.win.find("image");
         var config = {
             x:300,
             y:300,
             duration:1000
         };
         img.animate(config);
     }

     

     

     

Debugging

You can debug the game based on the previous code management steps. Preview the game, and open the control panel:

1. If the code logic was written into the scene’s beforeOpen function, you can use the following debug method: Navigate to the control/js folder and locate the ui-call-events-handler.js file. This contains all of the scene’s events. The code we just mentioned is in the scene’s beforeOpen, make a breakpoint in the event, then debug the code written there.

   

   

2. If you created an external JavaScript file for the game’s logic code, you can use the following debug method: Navigate to the storage folder and locate the game.js file. The right side of this will have our code, and you can set a breakpoint where the functions are, to debug it.

   

• Learn more about Debug

Adaptive Design

This platform’s adaptive screen uses an adaptive solution with width with proportional height scaling to the edge of the screen. For landscape screens, we recommend using Android resolution proportions. For portrait screens, we suggest using iPhone 5 resolution proportions.

Sharing

In the Elements bar > Expansion elements, locate the sharing button and drag it into the game scene. If you want to edit the content being shared, all you need to do is click on the sharing button’s onClick event and edit it.

• Sharing title: shareInfo.title (default is game name)
• Sharing content: shareInfo.desc (default is game description)
• Sharing link: shareInfo.link (default is current link)
• Sharing icon: shareInfo.appIcon (default is game icon)

The default data can be found in the Menu bar > Options > Project settings

Statistics

When the game ends, all you need to do is call the interface HolaSDK.gameOver(score, level, duration):

• score = current score
• level = current level
• duration = duration that game lasted

Advertising

In the Elements bar > Expansion elements, locate the Ad button and drag it into the game scene. When an ad needs to be displayed (for example, having a button fire an ad pop-up), enter the code editor, locate the code generator, click “Activate object”, locate the ad element, and click “Generate code”.

Internet

Reference interface: link

Multilingual Support

Our game might be published in multiple languages. How do we configure localization?
We can use a string to illustrate this example. In a Chinese environment, we want this string to be displayed as “你好世界”. In an English environment, we want it to be displayed as “Hello, world”.

1. Drag a text element into the game scene.

   

2. In the Menu bar, locate > Tools > Localization settings, then click on it to see that it has extracted the game’s text content. Under “Chinese”, we can edit the JSON value’s label to be “你好世界”, then in the same place under “English”, change it to “Hello, world”. Save it, and the localization is complete!
3. How to use code to retrieve the corresponding label value in a certain language environment?
   You can use the interface webappGetText to do this, as shown here:
   C++

   var str = webappGetText("Label");
   console.log(str)

Instructions

1. Select an element and press F1 to enter the corresponding document.
2. Please only use English and numbers for the game’s file paths and resource names, for easier conversion of localization settings.