Introduction
Intruduce the basic construction
Background
Hola Studio - an IDE for game development.
Element Introduction
The following tells you how to use some commonly-used elements
a) Images
In the Elements bar, drag this element into the game scene, and select it.
- The bottom left tree view bar is the position of the element in the game structure.
- The upper right general properties bar are the property parameters of the element.
- The lower right event bar contains the events this element can listen for.
1)Hide: Right click on the element in the tree view bar. Click on “Hide” or click on the eye behind it to hide or reveal the element.
2)Edit properties: On the top right of the general properties bar, you can edit the name, position, transparency, size, layer, rotational angle, and other properties.
3)Replace image: An element is just a usable template. Developers need to replace its image based on game content. On the right > Images, locate the choose button, and select the image to upload.
4)Listener event: locate the Event Bar (with an onClick event as an example). Click the onClick, and open the code editor.
You can input the test code console.log(“image click event”),into the code editor, as seen below:
Save and then click the code editor’s preview button. Open the control panel, and click on the image in the preview window that pops up to see the test code you input.
5)Change image: Sometimes the same element needs to be able to switch images, such as switching images when an element is clicked.
a. Properties bar > Image Properties, click on the image path bar, and select an image order number (example: image_0).
b. Then, click on the “choose” button after the URL to switch the image;
c. Click on “onClick events” to enter the code editor page. Typethis.setValue(0) (The image order number that we chose was image_0, so this parameter is 0)
- leran more about Image
Following the same steps that you took to create an image, locate the button element in the Elements bar, then drag it into the game scene.
1）Edit properties (same as image)
2）Switch images
Buttons have three states, normal, active, and disabled. Located the image properties in the Properties bar on the upper right, and switch three states of images in the image path (switch based on the image element).
- leran more about Button
c) Label
Locate the label element in the Elements bar, then drag it into the game scene.
Specific
Where you can find the font, color, text, alignment, and other properties, and edit properties as needed.
Edit the text via the code (for example, clicking the button can change the text to “hello world”).
- Click on the button’s
onClick event, and enter the code editor.
- You can use the code generator to locate this text element. Locate the code generator in the bottom right of the code editor. In the
Choose Actions bar, choose “set object text”, then in the Choose object bar, choose this text element, enter “hello world” in the label, then click “Generate code”. - Click on the upper right to save the code, then click “Preview” , and click on the button in the preview window. You should be able to see the text change to “hello world”.
- learn more about Label
d) Image combination function
HolaStudio can very easily use Texture Packer tools to export combined images. The exported JSON file and corresponding PNG file will be uploaded to the same directory as the game. When replacing files, you can select a single image within the combined image.
e) Digits labels
Locate the digital label element in the Elements bar, then drag it into the game scene.
1) Specific
In the Properties bar > Specific, you can see text, all text, align methods, columns and rows, and other properties.
2) Replacement of numeric font function (example: switch the element’s digits font with the font in the right picture).
The top picture is a picture with one row and ten columns of numbers. Based on the method of replacing the image element, click on thechoose button after the Image URL to replace it with the above image, then enter 1 for the row, and 5 for the column. For the text, enter 1234567890, and you will have replaced the digits label.
3）The font has been replaced, but I want to change the numerical content to 1111. How do I do that?
A）Open the code editor (using the Text element method) and locate the code generator.
B）Set the object’s value: Locate the object, set the value, and click “Generate code”.
C) Click on the upper right to save the code, then click “Preview” , and click on the button in the preview window. You should be able to see the text change to “1111”.
Bitmap font is a font library which includes two corresponding files (the font file in json/fnt and the corresponding image files). Let’s try to use this element!
1）In the upper right General properties bar, locate the image bar and replace the image file with png.
2）In the Specific bar, locate the Font URL bar and replace the font file with fnt.
3）This configures the bitmap font’s label. Next, use some code to change the text font to ABCabc0123.
4）Open the code editor, locate the code generator, choose “set object text”, locate this element, set the text, and click “Generate code”.
1）Locate the progress bar element in the Elements bar, then drag it into the game scene.
2）Locate specific, then adjust the value and color. What you see below are the circle and rounded rectangle effects.
Next, we can begin to make a timer for the progress bar, so that it increases by 10% every second.
1）In the Elements bar, locate the timer element and drag it into the game. You can adjust the number of executions, delay time, frequency type, and interval (time between executions) in the Specific on the upper right.
2）The Events Handlers has an onTimeout event. This event is a function which runs at the end of each cycle. You can write the logic code here (increasing the progress bar by 10% every second).
3）Click the onTimeout event, enter the code editor, locate the code generator, set the object’s value, locate the progress bar element, set the value to whatever you want, and click “Generate code”!
Edit the code to be:
var me = this;
var win = this.getWindow();
window.percent = window.percent || 0;
window.percent += 10;
win.find("progressbar").setValue(10);
- learn more about Timer
i) Frame animation
1）Prepare a sequential frame animation
Example:
2）Locate the frame animation element in the Elements bar, then drag it into the game scene.
3）Locate the Specific bar, clear the image, choose the image you’ve prepared, and selected all the above frames in sequential order in the pop-up box.
4）Click “Group management”, enter the Group Name, click the frame images in sequence based on the order they should play in, save the group, and your animation is complete! You can change the frames per second and delayed playback in the Specific bar.
5）Optimized settings
Set the default state to hidden, and set it to only play once when the button is clicked.
A）In the animation’s General properties, uncheck “visible when playing”.
B) Click on the button’s onClick event, and enter the code editor.
C) Locate the code generator:
a.Click display object, locate the element’s animation, then click “Generate code”;
b. Play animation, locate the animation element. It will automatically load the animation’s name, then click “Generate code”;
D) Click on the upper right to save the code, then click “Preview” , and click on the button in the preview window to see the animation play.
The DragonBones animation includes three files: animation JSON, texture JSON, and texture image.
First, prepare a DragonBones animation material.
1）Locate the DragonBones animation element in the Elements bar, then drag it into the game scene.
2）Locate the Specific bar, replace the three above files, and reload it.
3）Scripting the animation
A) Click on the button’s onClick event, and enter the code editor.
B) Locate the “code generator”, then locate the animation element. Choose the animation name that you need to play, then click “Generate code”;
C) Click on the upper right to save the code, then click “Preview” , and click on the button in the preview window to see the animation play.
Locate the Sound effects element in the Elements bar. In Menu > Options > Project Settings > Sound Config , then choose the sound file to be imported.
Sound effects typically trigger an event. Here, we’ll be playing a sound effect when a button is clicked.
Click on the button’s onClick event, and enter the code editor. Locate the code generator, locate the sound effect to play, generate the code, save the code, click on the button in the preview window, and the sound effect should play.
Compatible with particle files created by the cocos2d particle editor (including plist and png files).
Locate the Particle element in the Elements bar and drag it into the game scene. Locate the Specific bar, then click on the “Choose” button to replace the particle files (the plist file and corresponding png need to be in the same directory);
n) Creating a new scene & switching between scenes
1）Creating a new scene:
You can create a new scene by clicking the + sign in the upper left corner of a game scene, or by clicking “New scene” at the bottom.
2）Switching between scenes
How to switch between scenes by clicking a button
A）Create a new scene named gameScene.
B）Drag a button element into the scene, then click on the button’s onClick event to enter the code editor.
Locate the code generator, choose “Close current window and open a new window”, select gameScene, and click “Generate code”;
