Hola Studio 入门教程 - 第三部分

Alan.Tooo

5.00/5 (1投票)

2016 年 7 月 5 日

CPOL

6分钟阅读

8134

介绍 Hola Studio 中的函数

引言

本文介绍基础构建。

背景

Hola Studio - 一款游戏开发IDE。

Actions

游戏经常会将元素移动到某个位置，或者改变它们的透明度。让我们来实现这些功能。
(参见：https://github.com/drawapp8/cantk/wiki/animation_config_zh）
首先，创建一个图像元素，并重命名它。然后创建一个按钮。
目标：当按钮被点击时，我们希望

图像在 1 秒后移动到新位置 x=300, y=300
然后将图像旋转 180 度
然后使图像逐渐消失

点击按钮的 onClick 事件，进入代码编辑器。使用代码生成器找到图像，然后点击“生成代码”。
编辑代码。给它一个新的变量，例如 var image_a = win.find(“image”);
使用 config1 使元素在 1 秒后移动到 x=300, y=300。duration 是移动所需的时间（以毫秒为单位），而 delay 是延迟的时间（以毫秒为单位）。
```
var config1 = {
    x:300,
    y:300,
    duration:1000,
    delay:1000
}
```
使用 config2 将元素旋转 180 度。“rotation”是以弧度为单位，而不是度。
```
var config2 = {
    rotation:Math.PI,
    duration:1000
}
```

使用 config3 使元素逐渐消失。

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

组合这三个配置，并让元素执行这些配置。

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

预览游戏，点击 bbb 按钮，aaa 元素将执行其操作。

物理引擎

这个游戏解决方案完美地集成了 box2d，用于实现真正可视化和易于操作的功能。

如何让一个物体从中空落下并与地面弹性碰撞。
1. 地面：在“元素”列表中找到方形刚体，将其拖入游戏场景，然后拉伸成矩形元素。
  在“唯一属性”面板中找到“密度”并将其更改为 0，以模拟地面；
2. 对于空中物体，将圆形或方形刚体拖入场景；
3. 预览游戏。
点击按钮，让地面上的物体获得向上的速度。
以上述演示为基础
1. 在场景中创建一个按钮。
2. 点击按钮的 onClick 事件进入代码编辑器。找到代码生成器，并设置对象的速度。
3. 设置 x 和 y 方向的速度（右和下为正值，左和上为负值），然后点击“生成代码”。
4. 保存代码，预览，然后点击按钮即可实现效果！
监控和实现两个物体之间的碰撞事件。
以上述演示为基础
1. 将一个 rigidbody 拖入场景，并将两个刚体放在地面上。
2. 然后编辑按钮的代码。使用代码生成器让左侧的 rigidbody 向右移动。
3. 这样，当按钮被点击时，左侧的 rigidbody 将与右侧的 rigidbody 发生碰撞。
4. rigidbody 元素中的 onBeginContact 事件是 rigidbody 的碰撞事件。您可以在此事件中编写一个监听器事件。

代码管理

代码管理有两种方式。如果游戏相对较小，您可以提前在场景的 beforeOpen 事件中创建一些游戏逻辑和函数，并在需要时调用它们。您也可以将游戏的业务逻辑打包成一个独立的 JavaScript 文件，然后将其导入到游戏中供游戏使用。我们已制作了一个演示来展示具体细节。

在场景的 beforeOpen 事件中编写逻辑和代码。
- 将按钮和图像拖入游戏场景。点击按钮的事件，然后编写一个函数。这个函数应该使图像移动到位置 x=300, y=300。
- 打开游戏场景的 beforeOpen 事件，并使用代码生成器定位元素。然后编写一个函数来使该元素执行动作，如下所示
```
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);
}
```
- 在按钮的 onClick 事件中，您可以调用 window.moveImg() 函数来打包业务逻辑以供使用。
```
window.moveImg()
```
导入游戏逻辑代码
按照上述步骤进行业务逻辑的编写。
- 点击任何事件进入代码编辑器。然后点击 **文件 > 新建**，并输入 game.js。
- 编写游戏业务逻辑代码，如下所示（如图）
  Game.init 函数初始化其父元素 win。它需要在场景的 beforeOpen 函数中初始化。
  然后，在按下按钮的地方调用移动函数 Game.moveImg()（如图）。这将实现上述功能。
```
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);
}
```

调试

您可以根据之前的代码管理步骤来调试游戏。预览游戏，然后打开控制面板。

如果代码逻辑是写入场景的 beforeOpen 函数中，您可以使用以下调试方法：导航到 control/js 文件夹并找到 ui-call-events-handler.js 文件。该文件包含所有场景事件。我们刚刚提到的代码位于场景的 beforeOpen 中，在该事件中设置断点，然后调试在那里编写的代码。
如果您为游戏的逻辑代码创建了一个外部 JavaScript 文件，您可以使用以下调试方法：导航到存储文件夹并找到 game.js 文件。该文件的右侧将是我们的代码，您可以为函数设置断点进行调试。

了解更多关于调试

自适应设计

本平台自适应屏幕使用宽度与高度成比例缩放到屏幕边缘的自适应解决方案。对于横屏，我们建议使用 Android 分辨率比例。对于竖屏，我们建议使用 iPhone 5 分辨率比例。

在元素栏 > 扩展元素中，找到分享按钮并将其拖入游戏场景。如果您想编辑分享的内容，只需点击分享按钮的 onClick 事件并进行编辑即可。

分享标题：shareInfo.title （默认是游戏名称）
分享内容：shareInfo.desc （默认是游戏描述）
分享链接：shareInfo.link （默认是当前链接）
分享图标：shareInfo.appIcon （默认是游戏图标）

默认数据可以在菜单栏 > 选项 > 项目设置中找到。

统计

游戏结束后，您只需调用接口 HolaSDK.gameOver(score, level, duration) 即可。

score = 当前得分
level = 当前关卡
duration = 游戏持续时间

网络

参考接口：链接

多语言支持

我们的游戏可能会以多种语言发布。我们如何配置本地化？
我们可以用一个字符串来举例说明。在中文环境下，我们希望这个字符串显示为“你好世界”。在英文环境下，我们希望它显示为“Hello, world”。

将一个文本元素拖入游戏场景。
在菜单栏中，找到 > 工具 > 本地化设置，然后点击它，您会看到它已提取了游戏的文本内容。在“中文”下，我们可以将 JSON 值的标签编辑为“你好世界”，然后在同一位置的“英文”下，将其更改为“Hello, world”。保存后，本地化就完成了！
如何使用代码在特定语言环境中检索相应的标签值？
您可以使用接口 webappGetText 来实现此目的，如下所示。
```
var str = webappGetText("Label");
console.log(str)
```

说明

选择一个元素并按 F1 进入相应的文档。
请仅在游戏的文件路径和资源名称中使用英文和数字，以便于本地化设置的转换。