65.9K
CodeProject 正在变化。 阅读更多。
Home

Hola Studio 入门教程 第二部分

Alan.Tooo
starIconstarIconstarIcon
emptyStarIcon
starIcon
emptyStarIcon

3.22/5 (2投票s)

2016 年 7 月 5 日

CPOL

8分钟阅读

viewsIcon

7058

介绍 Hola Studio 中的组件

引言

介绍基础组件

背景

Hola Studio - 一款游戏开发IDE。

元素介绍

以下介绍一些常用元素的用法

a) 图片

在“元素”栏中，将此元素拖拽到游戏场景中，并选中它。

  • 左下角的树形视图栏是元素在游戏结构中的位置。
  • 右上角“通用属性”栏是元素的属性参数。
  • 右下角“事件”栏包含此元素可以监听的事件。
    1) 隐藏：右键单击树形视图栏中的元素。点击“隐藏”或点击其后的眼睛图标即可隐藏或显示元素。


    2) 编辑属性：在“通用属性”栏的右上角，您可以编辑名称、位置、透明度、大小、层级、旋转角度等属性。
    3) 更换图片：元素只是一个可用的模板。开发者需要根据游戏内容替换其图片。在右侧 > “图片”中，找到“选择”按钮，然后选择要上传的图片。


    4) 监听事件：找到“事件”栏（以“onClick 事件”为例）。点击“onClick”，然后打开代码编辑器。


    您可以在代码编辑器中输入测试代码 console.log(“image click event”)，如下所示


    保存后，点击代码编辑器的预览按钮。打开控制面板，然后点击弹出窗口中的预览图片，即可看到您输入的确切测试代码。


    5) 更换图片：有时需要同一元素能够切换图片，例如点击元素时切换图片。
    a. 属性栏 > 图片属性，点击图片路径栏，然后选择图片顺序号（例如：image_0）。


    b. 然后，点击 URL 后面的“选择”按钮来切换图片；
    c. 点击“onClick 事件”进入代码编辑器页面。输入 `this.setValue(0)`（我们选择的图片顺序号是 image_0，所以这个参数是 0）

  • 了解更多关于图片

    b) 按钮

按照创建图片相同的步骤，在“元素”栏中找到按钮元素，然后将其拖拽到游戏场景中。
1）编辑属性（同图片）
2）切换图片
按钮有三种状态：普通、激活和禁用。在右上角的“属性栏”中找到图片属性，并在图片路径中切换三种状态的图片（根据图片元素切换）。

  • 了解更多关于按钮

    c) 标签

在“元素”栏中找到标签元素，然后将其拖拽到游戏场景中。

具体

在这里您可以找到字体、颜色、文本、对齐等属性，并根据需要编辑属性。

通过代码编辑文本（例如，点击按钮可以将文本更改为“hello world”）。

  • 点击按钮的“onClick 事件”，然后进入代码编辑器。

  • 您可以使用代码生成器来定位该文本元素。在代码编辑器的右下角找到代码生成器。在“选择操作”栏中，选择“设置对象文本”，然后在“选择对象”栏中，选择该文本元素，在标签中输入“hello world”，然后点击“生成代码”。
  • 点击右上角的保存代码，然后点击“预览”，再点击预览窗口中的按钮。您应该会看到文本更改为“hello world”。
  • 了解更多关于标签

    d) 图片组合功能

HolaStudio 可以非常轻松地使用 Texture Packer 工具导出组合图像。导出的 JSON 文件和相应的 PNG 文件将上传到游戏目录的同一目录下。在替换文件时，您可以选择组合图像中的单个图像。

e) 数字标签

在“元素”栏中找到数字标签元素，然后将其拖拽到游戏场景中。
1) 具体
在“属性栏”>“具体”中，您可以看到文本、所有文本、对齐方式、列和行等属性。


2) 数字字体功能替换（例如：用右图中的字体替换元素的数字字体）。


上面的图片是一个包含一行十列数字的图片。根据替换图片元素的方法，点击图片 URL 后面的“选择”按钮，将其替换为上述图片，然后为行输入`1`，为列输入`5`。对于文本，输入`1234567890`，这样您就替换了数字标签。
3）字体已替换，但我想将数字内容更改为`1111`。我该怎么做？
A）打开代码编辑器（使用文本元素的方法）并找到代码生成器。


B）设置对象的值：找到对象，设置值，然后点击“生成代码”。
C) 点击右上角的保存代码，然后点击“预览”，再点击预览窗口中的按钮。您应该会看到文本更改为“1111”。

位图字体是一个字体库，包含两个对应的文件（json/fnt 格式的字体文件和对应的图像文件）。让我们来尝试使用这个元素！
1）在右上角的“通用属性”栏中，找到图片栏，将图片文件替换为 png。
2）在“具体”栏中，找到字体 URL 栏，将字体文件替换为 fnt。


3）这将配置好位图字体的标签。接下来，使用一些代码将文本字体更改为 ABCabc0123。


4）打开代码编辑器，找到代码生成器，选择“设置对象文本”，找到该元素，设置文本，然后点击“生成代码”。

1）在“元素”栏中找到进度条元素，然后将其拖拽到游戏场景中。


2）找到“具体”设置，然后调整值和颜色。您在下面看到的是圆形和圆角矩形效果。

 

接下来，我们可以开始为进度条制作一个计时器，使其每秒增加 10%。


1）在“元素”栏中，找到计时器元素并将其拖拽到游戏中。您可以在右上角的“具体”设置中调整执行次数、延迟时间、频率类型和间隔（执行之间的间隔）。


2）“事件处理程序”有一个“onTimeout”事件。此事件是一个在每个周期结束时运行的函数。您可以在此处编写逻辑代码（每秒增加进度条 10%）。
3）点击“onTimeout”事件，进入代码编辑器，找到代码生成器，设置对象的值，找到进度条元素，将值设置为您想要的任何值，然后点击“生成代码”！


将代码编辑为

var me = this;
var win = this.getWindow();
window.percent = window.percent || 0;
window.percent += 10;
win.find("progressbar").setValue(10);

1）准备一个序列帧动画
示例
2）在“元素”栏中找到帧动画元素，然后将其拖拽到游戏场景中。


3）找到“具体”栏，清空图片，选择您准备好的图片，然后在弹出框中按顺序选择所有帧。


4）点击“组管理”，输入组名，按播放顺序点击帧图片，保存组，您的动画就完成了！您可以在“具体”栏中更改每秒帧数和延迟播放。


5）优化设置
将默认状态设置为隐藏，并设置为只在点击按钮时播放一次。
A）在动画的“通用属性”中，取消勾选“播放时可见”。


B) 点击按钮的 onClick 事件，然后进入代码编辑器。
C) 找到代码生成器
a. 点击“显示对象”，找到元素的动画，然后点击“生成代码”；
b. 播放动画，找到动画元素。它将自动加载动画的名称，然后点击“生成代码”；
D) 点击右上角的保存代码，然后点击“预览”，再点击预览窗口中的按钮，您将看到动画播放。

  • 了解更多关于帧动画

    j) DragonBones & Spine

DragonBones 动画包含三个文件：`animation JSON`、`texture JSON` 和 `texture image`。


首先，准备 DragonBones 动画素材。
1）在“元素”栏中找到 DragonBones 动画元素，然后将其拖拽到游戏场景中。
2）找到“具体”栏，替换以上三个文件，然后重新加载。
3）脚本化动画
A) 点击按钮的 `onClick` 事件，然后进入代码编辑器。
B) 找到“代码生成器”，然后找到动画元素。选择需要播放的动画名称，然后点击“生成代码”；
C) 点击右上角的保存代码，然后点击“预览”，再点击预览窗口中的按钮，您将看到动画播放。

在“元素”栏中找到音效元素。在菜单 > 选项 > 项目设置 > 音效配置中，然后选择要导入的声音文件。
音效通常由事件触发。在这里，我们将会在点击按钮时播放音效。


点击按钮的 onClick 事件，然后进入代码编辑器。找到代码生成器，找到要播放的音效，生成代码，保存代码，在预览窗口中点击按钮，音效就应该会播放。

兼容 cocos2d 粒子编辑器创建的粒子文件（包括 plist 和 png 文件）。


在“元素”栏中找到粒子元素并将其拖拽到游戏场景中。找到“具体”栏，然后点击“选择”按钮来替换粒子文件（plist 文件和对应的 png 需要在同一目录下）；

n) 创建新场景和切换场景

1）创建新场景
您可以通过点击游戏场景左上角的 + 号，或者点击底部的“新建场景”来创建新场景。
2）切换场景
如何通过点击按钮来切换场景
A）创建一个名为 gameScene 的新场景。
B）将一个按钮元素拖拽到场景中，然后点击按钮的 onClick 事件进入代码编辑器。
找到代码生成器，选择“关闭当前窗口并打开新窗口”，选择 gameScene，然后点击“生成代码”；

© . All rights reserved.