使用PureMVC和Cocos2d-JS构建游戏项目
2014-09-29 10:59
281 查看
木頭 2014-09-29 10:01:1369
次阅读
需求刀塔传奇手游中的场景切换非常灵活:玩家可以通过任务窗口跳转至其它界面,甚至可以通过角色界面中缺失的材料顺滕摸瓜进入关卡界面,然后通过战斗获得自己需要的物品,最后重新回到角色界面——之前打开的窗口依然在那里,就像你没有离开过一样。如果你无聊,可以从任务窗口一层又一层的周转于各个界面,然后在任意时刻都能回退到之前的场景,这种无限后退的能力非常有趣。然而手机的内存是有限的,如何组织程序,保存之前的“现场”则是一种考验。显然由cocos2d框架提供的基于Director/Scene的场景管理不足以直接实现这样的需求。
解决办法
我考虑使用MVC模式来构建这样的场景。查阅了一些资料,大体上有两种做法:
直接使用Cocos2d框架现有的组件(CCScene/CCLayer/CCNotification)来实现MVC,例如子龙山人的Cocos2d里面如何实现MVC系列;
使用一套完全独立的MVC框架,而将Cocos2d作为View层的实现。
我尝试了第一种方案,但是没有找到一种合适的方法组织Controller层。如果使用CCScene来作控制器,这在独立的场景下没什么问题。但要如何处理相关联的不同场景,则是个头疼的问题。此外CCScene受到CCDirector的管理,那么谁来控制CCDirector又是个大问题,于是无法实现灵活的场景切换。
对于第二种方案,在网络上的教程中并不多见,但却是一种非常好的思路。幸好在其它语言的开源项目中有许多可以学习的案例。其中PureMVC令我印象深刻:
PureMVC is a lightweight framework for creating applications based upon the classic Model, View and Controller concept.
就像它的名字一样,它是一个不含杂质的纯MVC框架实现。它最早是一个ActionScript项目。但由于它的纯粹性,很容易将它移植到其它主流语言中,于是有了各种语言的实现。
在拜读了PureMVC最佳实践后更是被它的理念所折服。我想如果能用它的javascript版本与Cocos2d-JS擦出火花,那真是太棒了。
PureMVC的Model/View/Controller都是单例,而具体的事务是由Proxy/Mediator/Command完成的,此外有一个Facade提供统一的接口给外部使用。它的内部由观察者模型实现所有消息的发送和接收。
Facade
程序的启动很容易,在Cocos2d-js框架加载完成后,在cc.game.run()中创建一个Facade对象,并编写一个StartupCommand完成Proxies和Mediators的初始化即可。接着由根Mediator完成第一个场景的载入。
View
Mediators负责维护视图组件,以及管理View和Model之间的消息路由。所以理所当然由它来料理Cocos2d-JS
每一个Mediator维护一个viewComponent——即具体的Cocos2d对象,在onRegister的时候创建并显示它;在onRemove的时候移除它。
我创建了一个DirectorMediator负责维护cc.director,用于管理其它SceneMediators的切换,以及一些跨场景的UI组件,例如网络连接标识等。当然,DirectorMediator不会被移除。
SceneMediators主要是一些场景级别的界面,由cc.Scene组成,它们可以包含其它的由cc.Layer组成的SubMediators——这里显然需要一个嵌套结构,于是我设计了一个NestMediator,它可以包含其它NestMediator。于是一个简单的场景树就形成了。
NestMediator提供一个push()接口将另外的SubNestMediator注册并加入到自己维护的Mediator栈中。而SubNestMediator可以使用NestMediator提供的pop()接口将自己弹出栈,以此实现“后退”功能:SceneMediators可以让DirectorMediator将自己push()/pop()实现场景的切换。
SceneMediators在切换后,重新注册自己维护的子Mediators栈,递归调用实现“恢复现场”工作。
由于Mediators的管理是独立于Cocos2d-js的,所以不会受到它的任何影响。“恢复现场”所需要的数据保存在各个Mediators,所以不会因为Cocos2d-js的组件被移除而丢失。至此得以实现与刀塔传奇类似的场景管理——甚至更加灵活,可以直接构造出任意场景树,并显示出来。
Model
Proxies负责管理游戏对象数据,及与服务器进行通讯。可以将不同Model的API封装到相应的Proxy中,并提供一些接口给控制器和视图调用。此外当数据变化时,推送相应的消息给控制器和视图。
Controller
Commands是控制器的主要执行者,用于创建Proxy/Mediator以及集中处理较复杂的逻辑。在实际项目中,由于手机网游的主要逻辑都在服务端,所以前端的控制器基本上被弱化,基本上Model和View的消息机制就足够承担大部分界面逻辑了。
总结
通过这次尝试,我发现将Cocos2d的职责限制在View层之后,它能更好更加专注地完成自己的任务。毕竟它诞生之初的使命就是实现对OpenGL的封装,以便提供一组友好的图形接口供游戏使用。使用外部的框架能够更系统地管理项目的其它部分,实现更复杂的需求。
P.S.
PureMVC.js的源码可以在这里获得。本文所涉及的其它源码用于商业项目不便公开,大家可以根据思路自由发挥。
来源网址:http://blog.mutoo.im/2014/09/build-a-game-with-puremvc-and-cocos2d-js.html
相关文章推荐
- 使用Node.js + Mongodb构建基于Cloud Foundry的项目
- 使用CoffeeScript+Browserify开发cocos2d-js游戏的体验
- 在Maven+Spring项目中使用Node.js的Gulp进行前端自动化构建
- 基于Node.js的JavaScript项目构建工具gulp的使用教程
- Cocos2d-JS项目之三:使用合图
- Cocos2d-X游戏【泰然网《跑酷》】JS到C++移植2:如何新建一个项目,引擎目录结构介绍
- 使用Cocos2d-JS制作游戏新手引导(一)
- Cocos2d-JS项目之二:cocostudio基础控件的使用
- 使用Cocos2d-JS制作游戏新手引导(三)源码篇
- 使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
- 使用vs创建cocos2d js项目
- 使用cocos2d-js制作游戏新的引导 (四)-应用篇
- 使用cocos2d-js制作游戏新手引导(二)
- Cocos2d-JS项目之三:使用合图
- 使用pureMVC构建简单的游戏demo
- 如何使用eclipse环境调试cocos2d js项目
- Cocos2d-js官方完整项目教程翻译:六、添加Chipmunk物理引擎在我们的游戏世界里
- 使用cocos2d-js制作游戏新手引导-源码篇(三)
- 使用COCOS2D-JS开发你的第一个游戏
- Cocos2d-JS 使用cocostudio创建游戏并用摇杆控制游戏实例