HTML5游戏开发工具实践(一)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wangnan8015/article/details/49071405

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

Orion2工具主要模块包括:
场景编辑模块,可编辑单元均为插件模块,可方便通过插件SDK进行扩展;目前包括精灵、文字、九宫格、Tile地图、光照、键盘、鼠标、触摸屏等输入设备插件、数组、字典、XML、WebStorage等数据存储插件
screenshot
动画帧编辑模块
screenshot
图形化脚本编辑模块,采用事件-动作机制,适合顶层逻辑实现;脚本API可通过插件进行扩展;也可以将已有的js代码封装为插件模块导入;
screenshot
工程发布模块
screenshot
插件管理模块:
screenshot
素材库管理模块:
screenshot
另外,规划中尚未实现的模块还包括:粒子特效编辑模块、UI界面编辑模块和插件工程生成模块。

(目前工具还正在不断完善中,插件库也在不断扩充)
下面就介绍一下,使用Orion工具开发一个简单的H5飞行射击游戏Demo的主要过程(游戏素材是东拼西凑)
游戏包含2个界面场景:开始界面和游戏场景
screenshot
screenshot
(1)开始界面开发
游戏场景设计功能与大多游戏编辑类似,这里不做太多介绍,主要介绍脚本设计部分。首先新建一个场景Start,排放好背景图片和“开始游戏”文字
screenshot
开始界面的功能比较简单,在界面中用户点击屏幕(或点击鼠标)就进入游戏界面。下面开始脚本设计:
a) 居中显示:在进入场景时,将屏幕中心移动到场景的中心位置。
screenshot
b) 文字闪烁:在每1秒中,前0.3秒隐藏StartGame文字,后0.7秒显示文字。
screenshot
c) 输入处理:当按下空格键、鼠标点击(在PC设备上使用鼠标输入模拟触摸输入)或触摸屏幕任意位置时进入游戏场景TMallCity。
screenshot
这样开始界面就制作完成了。通过预览可以看到
screenshot

(2)游戏场景开发
与前面类型,首先排放好背景图片,然后向场景中添加玩家飞机、敌机、子弹和爆炸动画等对象。
screenshot
每个游戏精灵的设计包含以下几个方面:
(1)动画序列,例如玩家飞机包含正常飞行、向左倾斜和向右倾斜3个动画序列。
screenshot
玩家飞机需要与子弹进行碰撞检测,因此需要定义动画帧的碰撞网格
screenshot
(2)行为,例如玩家飞机必须始终在场景边界内,进行需要给玩家飞机添加“Bound”行为,确保飞机不会跑到场景之外;
screenshot
当场景设计开之后,开始脚本设计(跟前面比,就有些复杂),这里挑一部分介绍:
a)场景初始化:将视口移动到场景底部,初始化得分变量和StartTime(进入场景的逻辑时间)。
screenshot
b)玩家飞机控制:用鼠标控制飞机在场景中移动;当飞机向左移动,播放向左倾斜动画;反之,向右运动播放向右倾斜动画。松开鼠标后,飞机恢复到缺省动画。
screenshot
c)玩家自动开火:当敌机出现在视口中并且位于玩家上方时,则每0.1秒发射1个子弹,子弹直线向上运动;否则,停止发射子弹。
screenshot
d)子弹碰撞处理:玩家子弹碰上敌机,敌机血量减1,得1分;敌机血量为0,则播放爆炸动画,得50分;玩家碰上敌机子弹,血量减10;所有子弹发射碰撞,播放子弹爆炸动画。
screenshot

下面是整个脚本的画面
screenshot

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

最终游戏画面为
screenshot

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

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页