Introduction
Introduce the basic construction
Background
Hola Studio - an IDE for game development.
About Hola Studio
Hola Studio is the world’s first online HTML5-based game development platform. Developers don’t need to download or install anything. They can begin developing just by opening the Hola Studio development website. The entire game development process is visualized, where you can see everything you do. Whether you’re a coding master or a beginner, you can use this tutorial or an hour-long video to begin developing your game. Hola Studio has a comprehensive visual layout UI, which allows developers to focus more on game logic, thereby improving game development efficiency. This development platform incorporates design, development, preview, debugging, and publishing, with combined sharing, statistics, and ad functions, to provide a comprehensive process from design to monetization.
It’s easy to use, and provides quick development. Let’s get started!
Interface Introduction
Open the HolaStudio address in your browser: http://studio.holaverse.com/, then register and log in.
The HolaStudio interface is divided into 8 parts.
The Menu Bar’s main functions include game preview, publishing, settings, and help.
b) Layout Bar
The Layout Bar’s main functions include undo, redo, cut, copy, align left, align right, align top, align bottom, and center.
c) Elements bar
The Elements bar includes most of the game’s elements. They can be used simply by dragging them into the game scene.
d) Tree View
Tree View includes all of the scenes in the game as well as the scenes’ layer structure. Here you can copy, paste, or delete elements.
e) Properties Bar
The Properties Bar has the properties of the selected element (or scene) in a game scene. It includes layer, rotational angle, transparency, position information, size, and other common information. Developers can adjust values in the text box.
f) Event Bar
The Event Bar shows developers the corresponding event type of a selected element (or scene) in a game scene. For example, the scene can be listening for a click event, screen swipe event, initialization scene event, onOpen scene event, and more. Elements can listen for click events, or other events.
g) Game Scene
The Game Scene is the game’s layout and design interface. Developers can drag needed elements (such as images, buttons, text, or sounds) into the game scene.
- Coordinate system:
right = positive X axis, left = negative X axis; up = negative Y axis, down = positive Y axis. - Element anchor points are in the upper left corner. The anchor interface can be used to reset the setAnchor(x,y).
h) Code editing interface
Click on any listener event to enter the coding editor interface. The upper left lists all the types of listener events. The lower left is the code generator (click on “Compile Javascript” to show the content of the code generator). The right side is the code logic editing interface.
Preview,Export(Publish) and Import
i) How to preview games
Click on the Menu > File > Preview On Device,and open the link or scan the QR code.
j) How to Export(Publish) games
Click on the Menu > File > Export Project,and click the link to download a zip file. This is the completed build of the game.
k) How to import games
Click on the Menu > File > Import Project,and choose the project on local files.
i) Game build analysis
| PARM | Definition |
| cantk-game | contains the game’s internal image resource files |
| cantk | contains the game’s engine files |
| assets | contains all of the game’s asset files |
| myapp.js | the game’s layout and business logic |
| index.html | the portal to the game |
| deps.js | the informational file |
| assetsGroupConfig.json | file of resource grouping loaded configuration |
