Hola Studio 基础教程
关于Hola Studio
Hola Studio是全球首款基于浏览器的Html5在线游戏开发平台,开发者无需下载安装,打开Hola Studio开发网页即可开发游戏。游戏开发全程可视化操作,所见即所得,无论你是技术大咖还是新入行的小牛,通过本文档或者一个小时的视频学习都可以开发游戏。本开发平台完美解决可视化布局UI,从而让开发者更专注游戏逻辑,继而提升游戏开发效率。本开发平台融合了从设计,开发,预览,调试,发布,到集成分享,统计,广告的全部功能,真正实现从设计到变现的整套流程。
轻松上手,快速开发,让我们开始学习吧!
界面介绍
用浏览器打开Hola Studio地址:https://www.doczj.com/doc/bd9577495.html,/注册登录账号
HolaStudio界面共分8个部分:
?a)菜单栏
菜单栏主要包含的功能为对游戏的预览,发布,设置,帮助等。
?b)布局栏
布局栏主要包含功能是撤销,反撤销,截切,复制,左对齐,右对齐,上对齐,下对齐,居中对齐等。
?c)组件栏
组件栏囊括了大部分在游戏中的组件,直接将组件拖动到游戏场景中就可以使用。
?d)树形视图
树形视图包含了游戏中所有场景以及场景中的层级结构,可以复制,粘贴或者删除组件。
?e)属性栏
属性栏是开发者在游戏场景中选中的组件(或场景)的属性,包含层级,旋转角度,透明度,
位置信息,大小等通用信息,开发者可以在文本框里调整数值。
f)事件栏
事件栏是开发者在游戏场景中选中的组件(或场景)所对应的事件类型,比如场景可以监听到点击事件,屏幕滑动事件,初始化场景事件,打开场景事件等;组件可以监听到点击事件等。
g)游戏场景
游戏场景就是游戏的布局和设计界面,开发者可以通过拖动需要的组件到游戏场景,比如图片,按钮,文字,声音等。
1.坐标系:向右x轴正向,向左x轴负向,向上y轴负向,向下y轴正向
2.组件锚点在左上角,可以通过锚点接口重新设置setAnchor(x,y)
h)代码编辑界面
点击任何一个监听事件进入代码编辑界面,左上部是监听的事件类型,左下部是代码产生器(点击‘编写Javascript脚本’既可以呈现代码产生器的内容),右部是代码逻辑编写界面。
游戏生成和发布
?i)游戏如何预览
游戏场景下方包含一排按钮,包含新建场景,横竖屏切换,预览整个游戏,预览当前游戏场景。
?j)游戏如何发布
点击菜单栏 > 文件 > 导出PhoneGap文件,即可下载一个zip包,这个游戏包就是游戏的
成品文件。
k)游戏包解析
解压上面的成品文件压缩包
参数名参数说明assets 游戏所有的资源文件
cantk 游戏的引擎文件
cantk-game 游戏的内置图片资源文件
index.html 游戏的入口
myapp.js 游戏的布局和业务逻辑文件
组件介绍
下面介绍一些常用组件的使用:
a) 图片
在组件栏找到图片组件,拖动该组件到游戏场景,选中该组件,
?左下树形视图栏是该组件在游戏结构中的位置;
?右上通用属性栏是该组件的属性参数;
?右下事件栏是该组件可以监听到的事件;
1)隐藏:在树形视图栏的组件上右键,点击隐藏;或者点击后面的小眼睛可以隐藏/显示组件
2)修改属性:在右上通用属性栏修改名称,位置,透明度,大小,层级,旋转角
度等
3)替换图片:组件只是一个可用模板,开发者根据游戏内容需要替换图片。在属
性栏 > 图片,找到”…”按钮,选择已上传的图片
4)监听事件:找到事件栏(以点击事件为例),点击onClick栏,打开代码编辑
器,
可以在代码编辑器里输入测试代码console.log(“image=======”);如下图;
测试事件功能(下图):保存并点击代码编辑器预览按钮;
打开控制台,在弹出的预览窗口里点击图片,即可看到输入的测试代码
5)替换图片:有时候同一组件需要切换图片,比如如何实现点击图片换一张图。
a. 属性栏 > 图片属性,点开图片用途栏,选择一个图片序号(如:图片_0),
b. 选择Url后面的“…”按钮,替换图片;
c. 点到onClick事件,进入代码编辑页面,输入代码 this.setValue(0)(我们选择的替换图片的序号是图片_0,所以序号是0)
b) 按钮
按照上面创建图片的例子,在组件栏找到按钮组件,拖入游戏场景
1)修改属性(同上)
2)替换图片
按钮通常有3种状态,正常状态,点击状态,禁用状态,找到右上属性栏的图片属性,在图片用途栏替换三种状态的图片(参照图片组件的替换)
c) 文本
在组件栏找到文本组件,拖入游戏场景
1)特有属性
属性栏 > 特有属性,可以看到字体,颜色,文本,对齐方式等属性,可以根据需要修改属性
2)通过程序修改文本(例如,点击按钮让文本的内容修改为hello world)
A)点开按钮onClick事件,进入代码编辑器
B)可以通过代码生成器找到这个文本组件,找到代码编辑器右下代码产生器模块,在‘事件处理方法’栏选择设置对象文字,在‘请选择对象’栏选择这个文本组件,在‘文本’框里输入hello world,点击‘产生代码’
C)保存代码并点击预览,在预览的窗口里点击按钮,可以看到文本的内容变为”hello world”。
d) 合图功能
本平台也可以很方便的使用Texture Packer工具导出的合图,将导出的json 文件和对应的png文件上传至同一目录下,在替换文件的时候就可以直接选中合图中的单个图片了
e) 数字标签
在组件栏找到数字标签组件拖入游戏场景
1)特有属性
属性栏 > 特有属性,可以看到文本,全部文字,对齐方式,行列数等属性
2)实现替换数字字体的功能(例:把组件的数字字体替换成右图的字体)
上图是一张一行十列的数字图片,按照替换图片组件的方法,点击”Image URL”后面的”…”按钮替换为上图,行输入1,列输入5,文本内容输
入”1234567890”,这样数字标签就替换好了
3)上面的字体已经替换好了,我想把数字的内容改为1111,如何操作?
A)按照文本组件的方式打开代码编辑器,找到代码产生器,
B)设置对象的数值,找到对象,设置数值,点击产生代码
C)保存代码并点击预览,在预览的窗口里点击按钮,可以看到文本的内容变为1111了。
f) 图片字体
图片字体是一个图片字体库,包含了两个对应的文件(json/fnt的字体文件和对应的图片文件),现在尝试使用该组件(准备这两个文件如futura-48.fnt,futura-48.png)
在组件栏找到图片字体组件拖入游戏场景;
1)在右上通用属性栏找到图片栏,替换图片文件为futura-48.png
2)在特有属性栏找到Font URL栏,替换font文件为futura-48.fnt
3)这样图片字体的标签已经配置完成,下面通过代码把这个文本字体的内容修改为ABCabc0123
4)打开代码编辑器,找到代码产生器,选择“设置对象文字”,找到该组件,设置文本内容,点击“产生代码”即可
g) 进度条
1)在组件栏找到进度条组件,拖入游戏场景
2)找到特有属性,调整里面的数值和颜色,下面呈现的就是圆形和圆角矩形的效果
3)通过点击按钮实现进度条设置数值30%
A)打开代码编辑器,找到代码产生器,设置对象数值,找到进度条组件,设置数值,点击“产生代码”
h) 定时器
我们接着上面进度条开始做定时器,实现进度条每个一秒进度条增加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(window.percent);
i) 帧动画
1)准备一序列帧动画
如:
2)在组件栏找到帧动画组件,拖入游戏场景
3)找到特有属性,清除图片,选择准备好的图片,在弹框中按序选择上述所有帧
4)点击分组管理,输入Group Name,按照动画的播放顺序点击序列帧图片,保存分组,这样这个动画就完成了!可以在特有属性里修改帧率和延时播放
5)优化设置
设置默认隐藏状态,点击按钮时只播放动画1次A)在该动画的通用属性里,反勾选“运行时可见”
B)从按钮的onClick事件栏进入代码编辑器
C)找到代码产生器:
a.显示对象,找到组件动画,产生代码;
b.播放动画,找到动画组件,自动会加载动画名称,产生代码;
D)保存代码并点击预览,在预览的窗口里点击按钮,动画就播放了。
j) 龙骨与spine
龙骨动画包含三个文件,动画json,纹理json,纹理图片
先准备一个龙骨动画的素材
1)在组件栏找到龙骨动画组件,拖入到游戏场景
2)找到特有属性,替换上述的三个文件,重新载入
3)代码播放动画实现
A)从按钮的onClick事件栏进入代码编辑器
B)找到代码产生器,播放动画,找到动画组件,选择需要播放的动画名称,产生代码
C)点击右上角保存代码,再点击预览,在预览的窗口里点击按钮,动画就播放了。
k) 音效
在组件栏找到音效组件,在特有属性栏清除内置音效,选择需要导入的音频文件;音效一般需要触发事件,这里实现通过点击“按钮”播放音效
从按钮onClick事件进入代码编辑器 > 找到代码产生器 > 找到播放的音效 > 产生代码并保存,在预览的窗口里点击“按钮”,音效就播放了