Hola Studio 入门教程 第一部分

引言

介绍基本结构

背景

Hola Studio - 一款游戏开发IDE。

关于 Hola Studio

Hola Studio 是世界上第一个基于 HTML5 的在线游戏开发平台。开发者无需下载或安装任何东西。只需打开 Hola Studio 开发网站即可开始开发。整个游戏开发过程可视化，您可以看到您所做的一切。无论您是编码大师还是初学者，都可以使用本教程或一小时的视频来开始开发您的游戏。 Hola Studio 拥有全面的可视化布局 UI，使开发者能够更多地关注游戏逻辑，从而提高游戏开发效率。该开发平台集成了设计、开发、预览、调试和发布，并结合了共享、统计和广告功能，提供从设计到盈利的完整流程。

它易于使用，并提供快速开发。让我们开始吧！

界面介绍

在您的浏览器中打开 HolaStudio 地址：http://studio.holaverse.com/，然后注册并登录。
HolaStudio 界面分为 8 个部分。

a) 菜单栏

菜单栏的主要功能包括游戏预览、发布、设置和帮助。

b) 布局栏

布局栏的主要功能包括撤销、重做、剪切、复制、左对齐、右对齐、上对齐、下对齐和居中。

c) 元素栏

元素栏包括游戏的大部分元素。只需将它们拖动到游戏场景中即可使用。

d) 树形视图

树形视图包括游戏中的所有场景以及场景的层结构。在这里您可以复制、粘贴或删除元素。

e) 属性栏

属性栏显示游戏场景中选定元素（或场景）的属性。它包括层、旋转角度、透明度、位置信息、大小和其他常用信息。开发者可以在文本框中调整值。

f) 事件栏

事件栏向开发者显示游戏场景中选定元素（或场景）的相应事件类型。例如，场景可以监听点击事件、屏幕滑动事件、初始化场景事件、onOpen 场景事件等等。元素可以监听点击事件或其他事件。

g) 游戏场景

游戏场景是游戏布局和设计界面。开发者可以将所需的元素（如图像、按钮、文本或声音）拖到游戏场景中。

1. 坐标系
   右 = 正 X 轴，左 = 负 X 轴；上 = 负 Y 轴，下 = 正 Y 轴。
2. 元素锚点在左上角。锚点界面可用于重置 setAnchor(x,y)。

   h) 代码编辑界面

   单击任何监听器事件以进入代码编辑器界面。左上方列出了所有类型的监听器事件。左下方是代码生成器（单击“编译 Javascript”以显示代码生成器的内容）。右侧是代码逻辑编辑界面。
   
   
   

   预览、导出（发布）和导入

i) 如何预览游戏

单击 菜单 > 文件 > 在设备上预览，然后打开链接或扫描二维码。

j) 如何导出（发布）游戏

单击 菜单 > 文件 > 导出项目，然后单击链接以下载 zip 文件。这是游戏的完整构建版本。

k) 如何导入游戏

单击 菜单 > 文件 > 导入项目，然后选择本地文件中的项目。

i) 游戏构建分析

PARM	定义
cantk-game	包含游戏的内部图像资源文件
cantk	包含游戏引擎文件
资源文件	包含游戏的所有资源文件
myapp.js	游戏布局和业务逻辑
index.html	游戏的入口
deps.js	信息文件
assetsGroupConfig.json	资源分组加载配置的文件