欢迎来到冰豆网! | 帮助中心 分享价值,成长自我!
冰豆网
全部分类
  • IT计算机>
  • 经管营销>
  • 医药卫生>
  • 自然科学>
  • 农林牧渔>
  • 人文社科>
  • 工程科技>
  • PPT模板>
  • 求职职场>
  • 解决方案>
  • 总结汇报>
  • 党团工作>
  • ImageVerifierCode 换一换
    首页 冰豆网 > 资源分类 > DOCX文档下载
    分享到微信 分享到微博 分享到QQ空间

    Hola Studio 基础教程Word格式.docx

    • 资源ID:21429028       资源大小:397.13KB        全文页数:28页
    • 资源格式: DOCX        下载积分:12金币
    快捷下载 游客一键下载
    账号登录下载
    微信登录下载
    三方登录下载: 微信开放平台登录 QQ登录
    二维码
    微信扫一扫登录
    下载资源需要12金币
    邮箱/手机:
    温馨提示:
    快捷下载时,用户名和密码都是您填写的邮箱或者手机号,方便查询和重复下载(系统自动生成)。
    如填写123,账号就是123,密码也是123。
    支付方式: 支付宝    微信支付   
    验证码:   换一换

    加入VIP,免费下载
     
    账号:
    密码:
    验证码:   换一换
      忘记密码?
        
    友情提示
    2、PDF文件下载后,可能会被浏览器默认打开,此种情况可以点击浏览器菜单,保存网页到桌面,就可以正常下载了。
    3、本站不支持迅雷下载,请使用电脑自带的IE浏览器,或者360浏览器、谷歌浏览器下载即可。
    4、本站资源下载后的文档和图纸-无水印,预览文档经过压缩,下载后原文更清晰。
    5、试题试卷类文档,如果标题没有明确说明有答案则都视为没有答案,请知晓。

    Hola Studio 基础教程Word格式.docx

    1、点击任何一个监听事件进入代码编辑界面,左上部是监听的事件类型,左下部是代码产生器(点击编写Javascript脚本既可以呈现代码产生器的内容),右部是代码逻辑编写界面。游戏生成和发布 i)游戏如何预览游戏场景下方包含一排按钮,包含新建场景,横竖屏切换,预览整个游戏,预览当前游戏场景。 j)游戏如何发布点击菜单栏 文件 导出PhoneGap文件,即可下载一个zip包,这个游戏包就是游戏的成品文件。 k)游戏包解析解压上面的成品文件压缩包参数名参数说明assets游戏所有的资源文件cantk游戏的引擎文件cantk-game游戏的内置图片资源文件index.html游戏的入口myapp.js游戏的

    2、布局和业务逻辑文件组件介绍下面介绍一些常用组件的使用:a) 图片在组件栏找到图片组件,拖动该组件到游戏场景,选中该组件, 左下树形视图栏是该组件在游戏结构中的位置; 右上通用属性栏是该组件的属性参数; 右下事件栏是该组件可以监听到的事件;1)隐藏:在树形视图栏的组件上右键,点击隐藏;或者点击后面的小眼睛可以隐藏/显示组件2)修改属性:在右上通用属性栏修改名称,位置,透明度,大小,层级,旋转角度等3)替换图片:组件只是一个可用模板,开发者根据游戏内容需要替换图片。在属性栏 图片,找到”按钮,选择已上传的图片4)监听事件:找到事件栏(以点击事件为例),点击onClick栏,打开代码编辑器,可以在代

    3、码编辑器里输入测试代码console.log(“image=”);如下图;测试事件功能(下图):保存并点击代码编辑器预览按钮;打开控制台,在弹出的预览窗口里点击图片,即可看到输入的测试代码5)替换图片:有时候同一组件需要切换图片,比如如何实现点击图片换一张图。a. 属性栏 图片属性,点开图片用途栏,选择一个图片序号(如:图片_0),b. 选择Url后面的“”按钮,替换图片;c. 点到onClick事件,进入代码编辑页面,输入代码 this.setValue(0)(我们选择的替换图片的序号是图片_0,所以序号是0)b) 按钮按照上面创建图片的例子,在组件栏找到按钮组件,拖入游戏场景1)修改属性(

    4、同上)2)替换图片按钮通常有3种状态,正常状态,点击状态,禁用状态,找到右上属性栏的图 片属性,在图片用途栏替换三种状态的图片(参照图片组件的替换)c) 文本在组件栏找到文本组件,拖入游戏场景1)特有属性属性栏 特有属性,可以看到字体,颜色,文本,对齐方式等属性,可以根据需要修改属性2)通过程序修改文本(例如,点击按钮让文本的内容修改为hello world)A)点开按钮onClick事件,进入代码编辑器B)可以通过代码生成器找到这个文本组件,找到代码编辑器右下 代码产生器模块,在事件处理方法栏选择设置对象文字,在请选择对象栏选择这个文本组件,在文本框里输入hello world,点击产生代码

    5、C)保存代码并点击预览,在预览的窗口里点击按钮,可以看到文本的内容变为”hello world”。d) 合图功能本平台也可以很方便的使用Texture Packer工具导出的合图,将导出的json文件和对应的png文件上传至同一目录下,在替换文件的时候就可以直接选中合图中的单个图片了e) 数字标签在组件栏找到数字标签组件拖入游戏场景 特有属性,可以看到文本,全部文字,对齐 方式,行列数等属性2)实现替换数字字体的功能(例:把组件的数字字体替换成右图的字体)上图是一张一行十列的数字图片,按照替换图片组件的方法,点击”Image URL”后面的”按钮替换为上图,行输入1,列输入5,文本内容输入”1

    6、234567890”,这样数字标签就替换好了3)上面的字体已经替换好了,我想把数字的内容改为1111,如何操作?A)按照文本组件的方式打开代码编辑器,找到代码产生器,B)设置对象的数值,找到对象,设置数值,点击产生代码C)保存代码并点击预览,在预览的窗口里点击按钮,可以看到文本的内容变为1111了。f) 图片字体图片字体是一个图片字体库,包含了两个对应的文件(json/fnt的字体文件和对应的图片文件),现在尝试使用该组件(准备这两个文件如futura-48.fnt,futura-48.png)在组件栏找到图片字体组件拖入游戏场景;1)在右上通用属性栏找到图片栏,替换图片文件为futura-4

    7、8.png2)在特有属性栏找到Font URL栏,替换font文件为futura-48.fnt3)这样图片字体的标签已经配置完成,下面通过代码把这个文本字体的内容修改为ABCabc01234)打开代码编辑器,找到代码产生器,选择“设置对象文字”,找到该组件,设置文本内容,点击“产生代码”即可g) 进度条1)在组件栏找到进度条组件,拖入游戏场景2)找到特有属性,调整里面的数值和颜色,下面呈现的就是圆形和圆角矩形的效果3)通过点击按钮实现进度条设置数值30%A)打开代码编辑器,找到代码产生器,设置对象数值,找到进度条组件,设置数值,点击“产生代码”h) 定时器我们接着上面进度条开始做定时器,实现进

    8、度条每个一秒进度条增加10%1)在组件栏找到定时器组件,拖入游戏,在右上特有属性栏可以调整执行次数,延迟时长,时常类型,时长(执行事件间隔)2)事件栏有个onTimeout事件,这个事件就是每次循环时间到之后执行的函数,可以在这个里面填写逻辑代码(实现进度条每个一秒进度条增加10%)3)点击onTimeout事件,进入代码编辑器,找到代码产生器,设置对象数值,找到进度条组件,随意设置数值,产生代码!修改代码为:var me = this;var win = this.getWindow();window.percent = window.percent | 0;window.percent +

    9、= 10;win.find(“progressbar”).setValue(window.percent);i) 帧动画1)准备一序列帧动画如:2)在组件栏找到帧动画组件,拖入游戏场景3)找到特有属性,清除图片,选择准备好的图片,在弹框中按序选择上述所有帧4)点击分组管理,输入Group Name,按照动画的播放顺序点击序列帧图片,保存分组,这样这个动画就完成了!可以在特有属性里修改帧率和延时播放5)优化设置设置默认隐藏状态,点击按钮时只播放动画1次A)在该动画的通用属性里,反勾选“运行时可见”B)从按钮的onClick事件栏进入代码编辑器C)找到代码产生器:a.显示对象,找到组件动画,产生代

    10、码;b.播放动画,找到动画组件,自动会加载动画名称,产生代码;D)保存代码并点击预览,在预览的窗口里点击按钮,动画就播放了。j) 龙骨与spine龙骨动画包含三个文件,动画json,纹理json,纹理图片先准备一个龙骨动画的素材1)在组件栏找到龙骨动画组件,拖入到游戏场景2)找到特有属性,替换上述的三个文件,重新载入3)代码播放动画实现A)从按钮的onClick事件栏进入代码编辑器B)找到代码产生器,播放动画,找到动画组件,选择需要播放的动画名称,产生代码C)点击右上角 保存代码,再点击预览 ,在预览的窗口里点击按钮,动画就播放了。k) 音效在组件栏找到音效组件,在特有属性栏清除内置音效,选择

    11、需要导入的音频文件;音效一般需要触发事件,这里实现通过点击“按钮”播放音效从按钮onClick事件进入代码编辑器 找到代码产生器 找到播放的音效 产生代码并保存,在预览的窗口里点击“按钮”,音效就播放了l) 粒子兼容cocos2d粒子编辑器产生的粒子文件(包含plist和png两个文件)在组件栏找到粒子组件,拖入游戏场景,找到特有属性,点击“”的按钮替换粒子文件(plist文件和对应的png需在同一目录下);m) 场景1)场景新建:可以在游戏场景中点击左上角的“+”或者拖入场景组件2)场景切换实现点击按钮切换一个场景A)新建一个场景命名为gameSceneB)在场景中拖入一个按钮组件,通过按钮

    12、的onClick事件进入代码编辑器找到代码产生器,选择“关闭当前窗口并打开新窗口”,选择gameScene,产生代码;Hola Studio 基础教程 Part IIIHola Studio 相关功能支持介绍Actions游戏中通常会有移动组件到某个位置,或者变换透明度等,Hola Studio 可以通过action实现此功能(参数参考创建一个图片组件b,创建一个按钮a实现目标:点击按钮 让组件b延迟一秒之后移动到新x=300,y=300位置, 让组件旋转180度, 让组件渐隐消失1)从“按钮a”的onClick事件进入代码编辑器,用代码产生器找到“组件b”,产生代码2)修改代码,重新赋变量如

    13、varaaa = win.find(“aaa”);3)通过config1让组件延迟一秒之后移动到x=300,y=300,duration是使用时长(毫秒),delay是延迟时长(毫秒);1. var config1 =2. x:300,3. y:4. duration:1000,5. delay:10006. 4)通过config2让组件旋转180度,rotation为弧度1. var config2 =2. rotation:Math.PI,3. duration:4. 5)通过config3让组件渐隐消失1. var config3 =2. duration:3. opacity:6)组合

    14、三个config,并且让组件执行config1. config1.next = config2;2. config2.next = config3;3. aaa.animate(config1);7)预览游戏,点击bbb按钮,aaa就执行动作了完整代码如下:物理引擎本游戏引擎完美融合box2d,让box2d实现真正意义的可视化便捷操作1)实现一个物体从空中掉落到地上弹性碰撞A)地面:在组件列表找到方块刚体,拖入到游戏场景,拉长方块组件,在特有属性栏找到密度,修改为0,这样就可以模拟地面了;B)空中物体,同样的方法拖一个刚体,方形的或者圆形的均可;C)预览游戏2)点击按钮,实现地面上的物体有一个

    15、向上的速度以上面的demo为基础A)在场景中创建一个按钮B)通过按钮的onClick事件中,打开代码编辑器,找到代码产生器,设置对象速度C)设置x,y方向的速度(右和下为正数,左和上为负数),产生代码D)保存代码,预览,点击按钮,效果实现了!3)监控实现两个物体的碰撞事件A)再拖入一个刚体进入游戏场景,将两个刚体都放到地面之上B)然后修改按钮的代码,通过代码产生器,实现左边的刚体向右移动C)这样点击按钮左边的刚体就会撞向右边的刚体了D)刚体组件的onBeginContact是刚体受到碰撞的事件,可以在这个事件里写代监听事件代码管理代码管理有两种方式,如果是比较小的游戏,可以采取在场景befor

    16、eOpen的事件里预制一些游戏逻辑的函数,在需要的时候可以直接调用,也可以将游戏的业务逻辑封装成一个独立的js文件,再引入游戏中,游戏中就可以直接用了,具体细节看下面demoa) 场景beforeOpen里写入逻辑代码1)在游戏场景拖入一个按钮和一个图片,点击按钮事件,写入一个方法,该方法使得这个图片移动到x=300,y=300的位置2)打开游戏场景的beforeOpen事件,通过代码产生器找到这个组件,然后写一个方法让组件执行动作,代码如下1. var me =this;2. var win =this.getWindow();3. varimg=win.find(image);4. win

    17、dow.moveImg=function()5. varconfig=6. x:7. y:8. duration:9. ;10. img.animate(config);11. 如图:3)在按钮点击onClick事件里可以调用window,moveImg()方法,这样封装的业务逻辑就可以使用了b) 外部引入游戏逻辑代码业务逻辑同上1)点击任意一个事件进入代码编辑器,点击文件,新建,输入game.js2)编写游戏业务逻辑代码,如下(如下图):Game.init方法是初始化父组件win,需要在场景的beforeOpen函数里初始化然后再按钮点击的地方调用移动函数Game.moveImg()(如下图

    18、),这样就实现了上述一样的功能了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-handl

    19、er.js文件,这个是场景的所有事件入口,刚刚讲述的代码是在场景beforeOpen里,以这个事件入口处打断点,然后debug进入写的代码逻辑,2)如果代码是新建立的外部js,可以采用这个方式debug:找到storage下面的game.js文件右侧就是我们的代码部分了,可以将断点设在方法处,这样就可以debug了自适应该平台的自适应屏幕都是以宽度达到屏幕边界,高度等比缩放的适配方案,横屏建议使用通用安卓分辨率比例,竖屏建议采用iphone5分辨率比例分享在组件栏-扩展组件找到分享按钮,拖入游戏场景即可,如果想修改分享的分内容,只需要进入分享按钮的onClick事件里面修改就行了分享标题:sh

    20、areInfo.title(默认获取游戏名称)分享内容:shareInfo.desc(默认获取游戏描述)分享链接:shareInfo.link(默认获取当前链接)分享图标:shareInfo.appIcon(默认获取游戏icon)默认数据可以在菜单栏-选项-项目设置里找到统计游戏结束调用接口HolaSDK.gameOver(score, level, duration) score为当前分数 level为当前关卡 duration为游戏持续时长广告在组件栏-扩展组件找到广告按钮,拖入游戏场景即可,在需要展示广告的时候(比如通过按钮触发广告弹出),进入代码编辑器,找到代码产生器,启用对象,找到广

    21、告组件,产生代码。网络参考接口:多语言我们的游戏可能会发布为多语言版本,如何进行国际化设置?我们通过文本举例来说明,我们想让这个文本在中文环境下显示你好世界,英文环境下显示hello,worldA)拖入一个文本组件进入游戏场景B)在菜单栏找到-工具-国际化设置,点开就可以看到已经把游戏中的文本的内容提取出来了,我们可以在中文下把json的value的Label修改为你好世界,把英文下同样的地方修改为hello,world,保存一下就完成国际化了;C)如何通过代码的形式获取当前语言环境下对应的Label值呢?可以通过接口webappGetText 实现,代码如下:1. varstr=webappGetText(Label2. console.log(str)说明a) 选择组件按F1可以进入对应的文档b) 游戏路径及资源名称请选用英文及数字,方便转码及国际化设置


    注意事项

    本文(Hola Studio 基础教程Word格式.docx)为本站会员主动上传,冰豆网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对上载内容本身不做任何修改或编辑。 若此文所含内容侵犯了您的版权或隐私,请立即通知冰豆网(点击联系客服),我们立即给予删除!

    温馨提示:如果因为网速或其他原因下载失败请重新下载,重复下载不扣分。




    关于我们 - 网站声明 - 网站地图 - 资源地图 - 友情链接 - 网站客服 - 联系我们

    copyright@ 2008-2022 冰点文档网站版权所有

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

    收起
    展开