HTML5游戏开发工具实践（一）

在介绍Demo游戏制作之前，先简单介绍一下游戏制作使用的工具Orion2，这是一个图形化的HTML5编辑工具，目标是用来开发小游戏、互动电子书/杂志等方面的H5应用。

Orion2工具主要模块包括：
场景编辑模块，可编辑单元均为插件模块，可方便通过插件SDK进行扩展；目前包括精灵、文字、九宫格、Tile地图、光照、键盘、鼠标、触摸屏等输入设备插件、数组、字典、XML、WebStorage等数据存储插件

动画帧编辑模块

图形化脚本编辑模块，采用事件-动作机制，适合顶层逻辑实现；脚本API可通过插件进行扩展；也可以将已有的js代码封装为插件模块导入；

工程发布模块

插件管理模块：

素材库管理模块：

另外，规划中尚未实现的模块还包括：粒子特效编辑模块、UI界面编辑模块和插件工程生成模块。

(目前工具还正在不断完善中，插件库也在不断扩充）
下面就介绍一下，使用Orion工具开发一个简单的H5飞行射击游戏Demo的主要过程（游戏素材是东拼西凑）
游戏包含2个界面场景：开始界面和游戏场景

（1）开始界面开发
游戏场景设计功能与大多游戏编辑类似，这里不做太多介绍，主要介绍脚本设计部分。首先新建一个场景Start，排放好背景图片和“开始游戏”文字

开始界面的功能比较简单，在界面中用户点击屏幕（或点击鼠标）就进入游戏界面。下面开始脚本设计：
a) 居中显示：在进入场景时，将屏幕中心移动到场景的中心位置。

b) 文字闪烁：在每1秒中，前0.3秒隐藏StartGame文字，后0.7秒显示文字。

c) 输入处理：当按下空格键、鼠标点击（在PC设备上使用鼠标输入模拟触摸输入）或触摸屏幕任意位置时进入游戏场景TMallCity。

这样开始界面就制作完成了。通过预览可以看到

（2）游戏场景开发
与前面类型，首先排放好背景图片，然后向场景中添加玩家飞机、敌机、子弹和爆炸动画等对象。

每个游戏精灵的设计包含以下几个方面：
（1）动画序列，例如玩家飞机包含正常飞行、向左倾斜和向右倾斜3个动画序列。

玩家飞机需要与子弹进行碰撞检测，因此需要定义动画帧的碰撞网格

（2）行为，例如玩家飞机必须始终在场景边界内，进行需要给玩家飞机添加“Bound”行为，确保飞机不会跑到场景之外；

当场景设计开之后，开始脚本设计（跟前面比，就有些复杂），这里挑一部分介绍：
a）场景初始化：将视口移动到场景底部，初始化得分变量和StartTime（进入场景的逻辑时间）。

b）玩家飞机控制：用鼠标控制飞机在场景中移动；当飞机向左移动，播放向左倾斜动画；反之，向右运动播放向右倾斜动画。松开鼠标后，飞机恢复到缺省动画。

c）玩家自动开火：当敌机出现在视口中并且位于玩家上方时，则每0.1秒发射1个子弹，子弹直线向上运动；否则，停止发射子弹。

d）子弹碰撞处理：玩家子弹碰上敌机，敌机血量减1，得1分；敌机血量为0，则播放爆炸动画，得50分；玩家碰上敌机子弹，血量减10；所有子弹发射碰撞，播放子弹爆炸动画。

…
下面是整个脚本的画面

整个游戏设计好之后，通过发布模块，配置导出参数，例如缺省游戏视口大小，画面质量、是否启动WebGL等等, 导出到指定目录中

导出目录中内容如下

最终游戏画面为

工具源代码地址：
https://github.com/guobinnew/Orion2.git

HTML5游戏开发工具实践（一）相关推荐

html5游戏开发的五个最佳实践
HTML5是伟大的,因为它多才多艺的 - 它没有具体针对单一的平台.更重要的是,HTML5是无所不在的. 就我所知的,它在你的PC上,你的手机上,你的平板设备上,甚至在你的厨房电器上. 就凭HTML5 ...
HTML5 游戏开发快速提升
小册介绍 HTML5 是构建 Web 内容的一种语言描述方式,是最新的 HTML 标准,是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一.HTML5 是跨平台的,被设计为在不同类型 ...
HTML5游戏开发实战
<HTML5游戏开发实战> 基本信息原书名:HTML5 Games Development by Example: Beginner's Guide 作者: (美)Makzan 译者: ...
HTML5游戏开发(四)：飞机大战之显示场景和元素
<HTML5游戏开发>系列文章的目的有:一.以最小的成本去入门egret小项目开发,官方的教程一直都是面向中重型:二.egret可以非常轻量:三.egret相比PIXI.js和sprite ...
HTML5游戏开发高级教程 | Lynda教程中文字幕
HTML5游戏开发高级教程 | Lynda教程中文字幕 Advanced HTML5 Game Development 课程ID: 597988 时长: 2.3小时所属类别:Html 全部游戏开发 ...
七巧板平台html5游戏开发之初识物理引擎
七巧板平台html5游戏开发之初识物理引擎七巧板平台是用于Web App.中轻度HTML5游戏及富媒体类应用开发,集开发.运营于一体的平台.它基于HTML5技术开发,具有进入门槛极低.开发极简单.跨 ...
业界技术大牛答：html5游戏开发前景如何？
编者按:作为2014年游戏业界现象级事件之一,<围住神经猫>的蹿红也为Egret(白鹭)这款游戏引擎博来了关注.Egret(白鹭)是一款可以一次开发,分别部署在Android.IOS和WP ...
【Canvas】HTML5游戏开发的基本流程+P2.js物理引擎实战开发
<HTML5游戏开发的基本流程> * 1. HTML5的简述 * 2. HTML5游戏开发所需的环境与工具 * 2.1. 开发环境 * 2.1.1. 浏览器 * 2.1.2. 开发语言 * ...
HTML5游戏开发pdf
下载地址:网盘下载迈耶编著的<HTML5游戏开发>共10章,通过10个具体的游戏示例详细介绍HTML5的用法.每章都先列出相关的技术特性并给出了应用的描述,然后讨论了实现这个应用的关键需 ...

HTML5游戏开发工具实践（一）

HTML5游戏开发工具实践（一）相关推荐

最新文章

热门文章