This is a repository of a famous game named "打飞机", it was extremely pervasive in Wechat platform last year. I implement it with MVC architecture based on Cocos2dx.
As we all know, MVC is popular in front-end development, since it allows the software to extend easily. However, in C++, or more precisely in Cocos2dx, MVC is not fully supported. This is because the primitive objective of Cocos2dx is to help developer build game easily, so it does not support MVC inside the game engine.
Let's recall the former process in implementing a game with Cocos2dx.
- Create a CCScene and run it.
- Create a CCLayer as the child of CCScene.
- Create CCSprite on the CCLayer.
- Define CCAction for the sprites.
- Collision detection of these sprites.
- CCLayer responds to the touch events.
- Do the corresponding actions.
This process is easy to use when the game scale is small. But if the logics in the game become complex, simple design like this is not acceptable any more. This is because CCLayer does TOO MUCH things, it is responsible for displaying, logic control, events handling and other issues. When game becomes complicated, the codes become lengthy and UGLY! Hence, in this respository, I try to implement the game with MVC.
Let's get started! The picture below show the MVC architecture I used in cocos2dx game.
As we can see in the picture, there are three types of elements in MVC, controller, view and model.
- Controller: the controller is reponsible for the game control, it acts as the key center in the game. Specifically, it handle events from View, pass them to models and control the running logic of the game.
- View: the view is reponsible for the game displaying, it receives refreshing events from model and update the sprites or actions in the game.
- Model: the models represent entity in the game. It receives control from controller and do corresponding actions. Also, the collision detection is implemented in models.
In this picture, the solid line means the strong connection and the dotted line means the weak connection. More precisely, in cocos2dx, the VIEW can be implemented by CCLayer, since it should receive the touch events and do the displaying.But how can it pass the touch events to CONTROLLER? In this game, I use delegate to achieve this. When the CONTROLLER initializes the VIEW and MODEL, it passes the delegate of itself to VIEW and the VIEW hence uses this delegate to pass events. The CONTROLLER has the instance pointer of VIEW and MODEL, it gets the status of both models and views and decide what to do. You may ask, then how can we build connection between MODEL and VIEW, since the VIEW should update the displaying when MODEL changes. I use CCNotificationCenter to achieve this. CCNotificationCenter and post notifications from the MODEL to the VIEW, it works efficiently.
By the way, when you open the project, it looks like this.
Of course, this is not the whole files in the game, but we can see that the classes are classified into three(four exactly) groups, Model, Controller and View. In this way, the structure of the game is more clear.
- Open proj.ios
- Double click the .xcodeproj
- Run the project in Xcode
- That's it
- Open proj.android
- Follow the steps in README step by step
- Get it work
* HTC Incredible S(G11)
* Android 4.0.4
* Resolution 480*800
This scene includes "开始游戏" and "退出游戏", of course we should press the former one.
In this play scene, when we crash one small enemy, we hear "boom" and get 1000 scores.
When we hit the big enemy, it does not crash immediately. But after hitten by enough bullets, it crashes, just the same as Weixin.
When we get a bomb, it appears on the left bottom of the scene. If we hit it, all the enemys in the scene will crash. :)
We got double laser in the game, which significantly boost our fire. But unfortunately, we are hitten by an enemy. Game over, good luck the next time.
That's all, enjoy it~