Hola Studio 基础教程.docx
《Hola Studio 基础教程.docx》由会员分享，可在线阅读，更多相关《Hola Studio 基础教程.docx（28页珍藏版）》请在冰豆网上搜索。
HolaStudio基础教程
HolaStudio基础教程
关于HolaStudio
HolaStudio是全球首款基于浏览器的Html5在线游戏开发平台，开发者无需下载安装，打开HolaStudio开发网页即可开发游戏。
游戏开发全程可视化操作，所见即所得，无论你是技术大咖还是新入行的小牛，通过本文档或者一个小时的视频学习都可以开发游戏。
本开发平台完美解决可视化布局UI，从而让开发者更专注游戏逻辑，继而提升游戏开发效率。
本开发平台融合了从设计，开发，预览，调试，发布，到集成分享，统计，广告的全部功能，真正实现从设计到变现的整套流程。
轻松上手，快速开发，让我们开始学习吧！
界面介绍
用浏览器打开HolaStudio地址：
注册登录账号
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）通过程序修改文本（例如，点击按钮让文本的内容修改为helloworld）
A）点开按钮onClick事件，进入代码编辑器
B）可以通过代码生成器找到这个文本组件，找到代码编辑器右下代码产生器模块，在‘事件处理方法’栏选择设置对象文字，在‘请选择对象’栏选择这个文本组件，在‘文本’框里输入helloworld，点击‘产生代码’
C）保存代码并点击预览，在预览的窗口里点击按钮，可以看到文本的内容变为”helloworld”。
d）合图功能
本平台也可以很方便的使用TexturePacker工具导出的合图，将导出的json文件和对应的png文件上传至同一目录下，在替换文件的时候就可以直接选中合图中的单个图片了
e）数字标签
在组件栏找到数字标签组件拖入游戏场景
1）特有属性
属性栏>特有属性，可以看到文本，全部文字，对齐方式，行列数等属性
2）实现替换数字字体的功能（例：
把组件的数字字体替换成右图的字体）
上图是一张一行十列的数字图片，按照替换图片组件的方法，点击”ImageURL”后面的”…”按钮替换为上图，行输入1，列输入5，文本内容输入”1234567890”,这样数字标签就替换好了
3）上面的字体已经替换好了，我想把数字的内容改为1111，如何操作？
A）按照文本组件的方式打开代码编辑器，找到代码产生器，
B）设置对象的数值，找到对象，设置数值，点击产生代码
C）保存代码并点击预览，在预览的窗口里点击按钮，可以看到文本的内容变为1111了。
f）图片字体
图片字体是一个图片字体库，包含了两个对应的文件（json/fnt的字体文件和对应的图片文件），现在尝试使用该组件（准备这两个文件如futura-48.fnt，futura-48.png）
在组件栏找到图片字体组件拖入游戏场景；
1）在右上通用属性栏找到图片栏，替换图片文件为futura-48.png
2）在特有属性栏找到FontURL栏，替换font文件为futura-48.fnt
3）这样图片字体的标签已经配置完成，下面通过代码把这个文本字体的内容修改为ABCabc0123
4）打开代码编辑器，找到代码产生器，选择“设置对象文字”，找到该组件，设置文本内容，点击“产生代码”即可
g）进度条
1）在组件栏找到进度条组件，拖入游戏场景
2）找到特有属性，调整里面的数值和颜色，下面呈现的就是圆形和圆角矩形的效果
3）通过点击按钮实现进度条设置数值30%
A）打开代码编辑器，找到代码产生器，设置对象数值，找到进度条组件，设置数值，点击“产生代码”
h）定时器
我们接着上面进度条开始做定时器，实现进度条每个一秒进度条增加10%
1）在组件栏找到定时器组件，拖入游戏，在右上特有属性栏可以调整执行次数，延迟时长，时常类型，时长（执行事件间隔）
2）事件栏有个onTimeout事件，这个事件就是每次循环时间到之后执行的函数，可以在这个里面填写逻辑代码（实现进度条每个一秒进度条增加10%）
3）点击onTimeout事件，进入代码编辑器，找到代码产生器，设置对象数值，找到进度条组件，随意设置数值，产生代码！
修改代码为：
varme=this;
varwin=this.getWindow（）;
window.percent=window.percent||0;
window.percent+=10;
win.find（“progressbar”）.setValue（window.percent）;
i）帧动画
1）准备一序列帧动画
如：
2）在组件栏找到帧动画组件，拖入游戏场景
3）找到特有属性，清除图片，选择准备好的图片，在弹框中按序选择上述所有帧
4）点击分组管理，输入GroupName，按照动画的播放顺序点击序列帧图片，保存分组，这样这个动画就完成了！
可以在特有属性里修改帧率和延时播放
5）优化设置
设置默认隐藏状态，点击按钮时只播放动画1次
A）在该动画的通用属性里，反勾选“运行时可见”
B）从按钮的onClick事件栏进入代码编辑器
C）找到代码产生器：
a.显示对象，找到组件动画，产生代码；
b.播放动画，找到动画组件，自动会加载动画名称，产生代码；
D）保存代码并点击预览，在预览的窗口里点击按钮，动画就播放了。
j）龙骨与spine
龙骨动画包含三个文件，动画json，纹理json，纹理图片
先准备一个龙骨动画的素材
1）在组件栏找到龙骨动画组件，拖入到游戏场景
2）找到特有属性，替换上述的三个文件，重新载入
3）代码播放动画实现
A）从按钮的onClick事件栏进入代码编辑器
B）找到代码产生器,播放动画，找到动画组件，选择需要播放的动画名称，产生代码
C）点击右上角保存代码，再点击预览，在预览的窗口里点击按钮，动画就播放了。
k）音效
在组件栏找到音效组件，在特有属性栏清除内置音效，选择需要导入的音频文件；
音效一般需要触发事件，这里实现通过点击“按钮”播放音效
从按钮onClick事件进入代码编辑器>找到代码产生器>找到播放的音效>产生代码并保存，在预览的窗口里点击“按钮”，音效就播放了
l）粒子
兼容cocos2d粒子编辑器产生的粒子文件（包含plist和png两个文件）
在组件栏找到粒子组件，拖入游戏场景，找到特有属性，点击“…”的按钮替换粒子文件（plist文件和对应的png需在同一目录下）；
m）场景
1）场景新建：
可以在游戏场景中点击左上角的“+”或者拖入场景组件
2）场景切换
实现点击按钮切换一个场景
A）新建一个场景命名为gameScene
B）在场景中拖入一个按钮组件，通过按钮的onClick事件进入代码编辑器
找到代码产生器，选择“关闭当前窗口并打开新窗口”，选择gameScene，产生代码；
HolaStudio基础教程PartIII
HolaStudio相关功能支持介绍
Actions
游戏中通常会有移动组件到某个位置，或者变换透明度等，HolaStudio可以通过action实现此功能
（参数参考
创建一个图片组件b，创建一个按钮a
实现目标：
点击按钮
∙让组件b延迟一秒之后移动到新x=300，y=300位置，
∙让组件旋转180度，
∙让组件渐隐消失
1）从“按钮a”的onClick事件进入代码编辑器，用代码产生器找到“组件b”，产生代码
2）修改代码，重新赋变量如varaaa=win.find（“aaa”）;
3）通过config1让组件延迟一秒之后移动到x=300，y=300，duration是使用时长（毫秒），delay是延迟时长（毫秒）；
1.varconfig1={
2.x:
300,
3.y:
300,
4.duration:
1000,
5.delay:
1000
6.}
4）通过config2让组件旋转180度，rotation为弧度
1.varconfig2={
2.rotation:
Math.PI,
3.duration:
1000
4.}
5）通过config3让组件渐隐消失
1.varconfig3={
2.duration:
1000,
3.opacity:
0
4.}
6）组合三个config，并且让组件执行config
1.config1.next=config2;
2.config2.next=config3;
3.aaa.animate（config1）;
7）预览游戏，点击bbb按钮，aaa就执行动作了
完整代码如下：
物理引擎
本游戏引擎完美融合box2d，让box2d实现真正意义的可视化便捷操作
1）实现一个物体从空中掉落到地上弹性碰撞
A）地面：
在组件列表找到方块刚体，拖入到游戏场景，拉长方块组件，
在特有属性栏找到密度，修改为0，这样就可以模拟地面了；
B）空中物体，同样的方法拖一个刚体，方形的或者圆形的均可；
C）预览游戏
2）点击按钮，实现地面上的物体有一个向上的速度
以上面的demo为基础
A）在场景中创建一个按钮
B）通过按钮的onClick事件中，打开代码编辑器，找到代码产生器，设置对象速度
C）设置x，y方向的速度（右和下为正数，左和上为负数），产生代码
D）保存代码，预览，点击按钮，效果实现了！
3）监控实现两个物体的碰撞事件
以上面的demo为基础
A）再拖入一个刚体进入游戏场景，将两个刚体都放到地面之上
B）然后修改按钮的代码，通过代码产生器，实现左边的刚体向右移动
C）这样点击按钮左边的刚体就会撞向右边的刚体了
D）刚体组件的onBeginContact是刚体受到碰撞的事件，可以在这个事件里写代监听事件
代码管理
代码管理有两种方式，如果是比较小的游戏，可以采取在场景beforeOpen的事件里预制一些游戏逻辑的函数，在需要的时候可以直接调用，也可以将游戏的业务逻辑封装成一个独立的js文件，再引入游戏中，游戏中就可以直接用了，具体细节看下面demo
a）场景beforeOpen里写入逻辑代码
1）在游戏场景拖入一个按钮和一个图片，点击按钮事件，写入一个方法，该方法使得这个图片移动到x=300,y=300的位置
2）打开游戏场景的beforeOpen事件，通过代码产生器找到这个组件，然后写一个方法让组件执行动作，代码如下
1.varme=this;
2.varwin=this.getWindow（）;
3.varimg=win.find（"image"）;
4.window.moveImg=function（）{
5.varconfig={
6.x:
300,
7.y:
300,
8.duration:
1000
9.};
10.img.animate（config）;
11.}
如图：
3）在按钮点击onClick事件里可以调用window,moveImg（）方法，这样封装的业务逻辑就可以使用了
b）外部引入游戏逻辑代码
业务逻辑同上
1）点击任意一个事件进入代码编辑器，点击文件，新建，输入game.js
2）编写游戏业务逻辑代码，如下（如下图）：
Game.init方法是初始化父组件win，需要在场景的beforeOpen函数里初始化
然后再按钮点击的地方调用移动函数Game.moveImg（）（如下图），这样就实现了上述一样的功能了
1.varGame={};
2.Game.init=function（win）{
3.Game.win=win;
4.}
5.Game.moveImg=function（）{
6.varimg=Game.win.find（"image"）;
7.varconfig={
8.x:
300,
9.y:
300,
10.duration:
1000
11.};
12.img.animate（config）;
13.}
Debug
在上述代码管理的基础上debug，预览游戏，打开控制台：
1）如果是代码逻辑写到场景beforeOpen里的方式可以用下面的方式debug：
找到control/js文件下的ui-call-events-handler.js文件，这个是场景的所有事件入口，刚刚讲述的代码是在场景beforeOpen里，以这个事件入口处打断点，然后debug进入写的代码逻辑，
2）如果代码是新建立的外部js，可以采用这个方式debug：
找到storage下面的game.js文件右侧就是我们的代码部分了，可以将断点设在方法处，这样就可以debug了
自适应
该平台的自适应屏幕都是以宽度达到屏幕边界，高度等比缩放的适配方案，横屏建议使用通用安卓分辨率比例，竖屏建议采用iphone5分辨率比例
分享
在组件栏-扩展组件找到分享按钮，拖入游戏场景即可，如果想修改分享的分内容，只需要进入分享按钮的onClick事件里面修改就行了
分享标题：
shareInfo.title（默认获取游戏名称）
分享内容：
shareInfo.desc（默认获取游戏描述）
分享链接：
shareInfo.link（默认获取当前链接）
分享图标：
shareInfo.appIcon（默认获取游戏icon）
默认数据可以在菜单栏-选项-项目设置里找到
统计
游戏结束调用接口HolaSDK.gameOver（score,level,duration）
∙score为当前分数
∙level为当前关卡
∙duration为游戏持续时长
广告
在组件栏-扩展组件找到广告按钮，拖入游戏场景即可，在需要展示广告的时候（比如通过按钮触发广告弹出），进入代码编辑器，找到代码产生器，启用对象，找到广告组件，产生代码。
网络
参考接口：
多语言
我们的游戏可能会发布为多语言版本，如何进行国际化设置？
我们通过文本举例来说明，我们想让这个文本在中文环境下显示‘你好世界’，英文环境下显示‘hello，world’
A）拖入一个文本组件进入游戏场景
B）在菜单栏找到-工具-国际化设置，点开就可以看到已经把游戏中的文本的内容提取出来了，我们可以在中文下把json的value的Label修改为‘你好世界’，把英文下同样的地方修改为‘hello，world’，保存一下就完成国际化了；
C）如何通过代码的形式获取当前语言环境下对应的Label值呢？
可以通过接口webappGetText实现，代码如下：
1.varstr=webappGetText（"Label"）;
2.console.log（str）
说明
a）选择组件按F1可以进入对应的文档
b）游戏路径及资源名称请选用英文及数字，方便转码及国际化设置
升级会员 