Hola Studio 基础教程Word格式.docx

上传人:b****5 文档编号:21429028 上传时间:2023-01-30 格式:DOCX 页数:28 大小:397.13KB
下载 相关 举报
Hola Studio 基础教程Word格式.docx_第1页
第1页 / 共28页
Hola Studio 基础教程Word格式.docx_第2页
第2页 / 共28页
Hola Studio 基础教程Word格式.docx_第3页
第3页 / 共28页
Hola Studio 基础教程Word格式.docx_第4页
第4页 / 共28页
Hola Studio 基础教程Word格式.docx_第5页
第5页 / 共28页
点击查看更多>>
下载资源
资源描述

Hola Studio 基础教程Word格式.docx

《Hola Studio 基础教程Word格式.docx》由会员分享,可在线阅读,更多相关《Hola Studio 基础教程Word格式.docx(28页珍藏版)》请在冰豆网上搜索。

Hola Studio 基础教程Word格式.docx

点击任何一个监听事件进入代码编辑界面,左上部是监听的事件类型,左下部是代码产生器(点击‘编写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)数字标签

在组件栏找到数字标签组件拖入游戏场景

特有属性,可以看到文本,全部文字,对齐方式,行列数等属性

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:

4.duration:

1000,

5.delay:

1000

6.}

4)通过config2让组件旋转180度,rotation为弧度

1.varconfig2={

2.rotation:

Math.PI,

3.duration:

4.}

5)通过config3让组件渐隐消失

1.varconfig3={

2.duration:

3.opacity:

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)监控实现两个物体的碰撞事件

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:

7.y:

8.duration:

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;

5.Game.moveImg=function(){

6.varimg=Game.win.find("

7.varconfig={

8.x:

9.y:

10.duration:

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)游戏路径及资源名称请选用英文及数字,方便转码及国际化设置

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 党团工作 > 思想汇报心得体会

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1