HolaStudio基础教程选编.docx

Hola Studio 基础教程 关于Hola Studio Hola Studio是全球首款基于浏览器的Html5在线游戏开发平台，开发者无需下载安装，打开 HYPERLINK / \o Hola Studio开发网页 Hola Studio开发网页即可开发游戏。游戏开发全程可视化操作，所见即所得，无论你是技术大咖还是新入行的小牛，通过本文档或者一个小时的视频学习都可以开发游戏。本开发平台完美解决可视化布局UI，从而让开发者更专注游戏逻辑，继而提升游戏开发效率。本开发平台融合了从设计，开发，预览，调试，发布，到集成分享，统计，广告的全部功能，真正实现从设计到变现的整套流程。 轻松上手，快速开发，让我们开始学习吧！ 界面介绍 用浏览器打开Hola Studio地址： HYPERLINK / /?注册登录账号 HolaStudio界面共分8个部分： a)菜单栏菜单栏主要包含的功能??对游戏的预览，发布，设置，帮助等。 b)布局栏布局栏主要包含功能是撤销，反撤销，截切，复制，左对齐，右对齐，上对齐，下对齐，居中对齐等。 c)组件栏组件栏囊括了大部分在游戏中的组件，直接将组件拖动到游戏场景中就可以使用。 d)树形视图树形视图包含了游戏中所有场景以及场景中的层级结构，可以复制，粘贴或者删除组件。 e)属性栏属性栏是开发者在游戏场景中选中的组件（或场景）的属性，包含层级，旋转角度，透明度，位置信息，大小等通用信息，开发者可以在文本框里调整数值。 f)事件栏事件栏是开发者在游戏场景中选中的组件（或场景）所对应的事件类型，比如场景可以监听到点击事件，屏幕滑动事件，初始化场景事件，打开场景事件等；组件可以监听到点击事件等。 g)游戏场景游戏场景就是游戏的布局和设计界面，开发者可以通过拖动需要的组件到游戏场景，比如图片，按钮，文字，声音等。 坐标系：向右x轴正向，向左x轴负向，向上y轴负向，向下y轴正向 组件锚点在左上角，可以通过锚点接口重新设置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）通过程序修改文本（例如，点