Client
1. About the game engine
In March 15, when we started preparing for the H5 game, the first problem encountered was the engine selection problem.
There were 3 main 2d engines on the market: Egrets Egret,layabox and Cocos2d-js.
On the one hand, because I used cocos2d-x (c + +) for more than a year of hand-tour client, so it is natural to choose the Cocos2d-js. On the other hand, there are not many successful projects on the market at that time. Two other engines.
Every version of the Cocos Engine is updated, and we will be testing the first time in our game.
If you find that the game has significantly improved performance on your Android phone, we will upgrade with the engine version. Standing on the shoulders of giants, we can do more with less.
From the v3.5 of March 15, to the v3.8 of September 15, to the November 15 v3.9, until the recent July 16 v3.12. We have updated the game Engine 3 times altogether!
Ps:js-tests inside the OpenGL test until v3.12 in the Android real machine can see the effect of the operation, tears!
2. About data encryption and communication protocols
Because it is a strong connected game, it can only be websocket. Because our original hands swam before the client and server were tcpsocket, the content of the transmission was SHA1 encrypted custom formatted binary data.
So the first difficulty of the project is how to use JS to implement the binary encoding and decoding of JSON strings, as well as SHA1 encryption and decryption.
TODO: It's not necessary to encrypt and encode each line up and down, which can cause excessive CPU pressure on the client and server side. Only need to protect some important events (such as login, recharge, coin deduction, etc.) can!
The first demo of the game is done, the test on the line, the problem is: some Android phone's default browser does not support websocket!
At first, my solution was relatively simple and rude, not supported on the cue: "Your mobile browser does not support WebSocket, please change Chrome browser!" "
The market says it can't accept: Real players are running! In addition to the company's testers, no one will be dedicated to download a browser in order to play a H5 game! Besides the browser, there are and QQ, how to break?
The final solution is to change the communication layer from WebSocket to websocket+http dual protocol, which is externally encapsulated into net. The business layer's call to WebSocket is changed to a call to net.
NET default connection WebSocket, if not supported, automatically switches to HTTP long polling. Whether it is websocket or HTTP, the transmitted content is the previously encrypted binary data.
Although the long polling of HTTP will be stuck in real-time battles, better than nothing, at least this part of the player can enter the game, can play a single copy, and other systems. Don't get in because you don't support websocket!
According to our data analysis statistics, this part of the player actually has 10%. Users may be imported from different channels, this value will be different! And as time goes on, this proportion should be less and fewer!
PS: Android phones that do not support websocket, as annoying as IE6, are hindering the development of productivity, will be eliminated by history!
3. About Android and
China's market situation is that H5 games must consider Android phones, must consider and QQ these two channels of communication. It is unwise and irresponsible for the company to focus only on PC browser development and Apple phone testing.
The development of the time can be debugged with a PC browser, but before the release must be in the Android phone inside, open the game to see if there is compatibility issues, and confirm the smoothness.
If both the PC and the iphone can run to 50~60 frames, but Android has only 10 frames, it has to make a trade-off between image size and animation effects.
Our standard is to ensure that the game is opened inside the Android terminal, with a minimum of 25 frames.
This April's browser kernel automatically upgraded from WebKit to Blink, which is a major boon to H5 's entire industry!
I think, egrets, Layabox and cocos2d, including unity, unreal, these game engine of contention, now, are in contention for VR and 3D, but ultimately to see who the best of all the Android full coverage support, who will eventually occupy China and even the global market!
4. About music and audio playback
The Cocos2d-js engine comes with a bug and cannot play more than one music at the same time cocosdension. And in the low-end Android inside, the sound quality will become worse (like a broken gong as hair)
Our solution is to introduce third-party howler.js
5. About resource sub-scene loading
Cocos2d-js default resource.js inside, all the resources are inside an array, so the preload must all be loaded to enter the game! At the beginning of the development, this is no problem.
But later, as the system increases, resource files are more and more, for the first time players to play the game, because the browser does not buffer, need to load all, in the WiFi environment will need to wait more than 1 minutes, which will lead to a large number of new players lost!
Our solution is to load the resources in a sub-scenario. In Resource.js, the resources are divided into n groups by scene, and each time a scene is loaded, only the resources in the corresponding array are preloaded.
6. About JSON file compression
With the development of the game, more and more scenes, CCS generated JSON files are more and more, at the same time a variety of maps, goods, props, rewards and other data, the corresponding JSON file content more and more, file size is getting bigger!
Finally, when the game was released, it was found that there were 70 scene JSON files, totaling 1.3M. There are 27 configuration JSON files, with a total of 755K. Wait for these dozens of files to load the time is not short!
Workaround, with the introduction of third-party jszip, multiple JSON files can be combined into a single zip with a file size of only 8% of the original.
Wrote a python script, the CCS and configs two directory of the JSON file first into a row, and then jszip packaged into 2 Zip files, the game starts with Jszip loading the two zip, extracted json into the global array inside.
Then the cc.loader.loadJson of the engine is changed, and the package JSON file is specially processed (without an additional HTTP request, which is taken directly from the global array)
With 5, 6 of these two steps of optimization, now novice in the first loading page only need to wait 4 seconds to enter the game.
7. With regard to confusion
Cocos encapsulates Google's confusing compilation script, but there's a hole in it: After adding the--advance parameter, all variable names are confused, including the object's intrinsic function name and variable.
The solution is to precede the function or variable that you do not want to confuse (object{} exposes public functions and variables and the functions of the referenced third-party library) with a line:
/** @expose */
Note: Do not xxx.yyy and xxx[' yyy '] mixed use! Otherwise add/** @expose * * Also useless, must be all unified into one of the wording!
8. About the online release process and CDN cache
1) Local run publish.sh: Local obfuscation compilation, local test publish/html5/index.html is normal
2) Local run oline_t1.sh: Generate version number according to the current time, the PUBLISH/HTML5 directory of res and game.min.js and index.html inside the relative path are changed to HTTP://CDN domain name/version number of the file address,
After the res and game.min.js are added to the version number, upload the CDN server. Update the test suit T1 index.html, notify the test!
3) Run online_s1.sh locally: Update the index.html on the formal service S1. Finished publishing.
Description
1) Both client and server programmers are MAC development environments, each with a complete set of front-and back-end gaming environments. Local development, local debugging, no problem after submitting code through GIT to the company intranet Git server. This can maximize the cooperation of many people at the same time, do not affect the development progress!
2) because the CDN adds the time version number, each time the release is effective immediately, does not need to wait for the cache to expire. There is no worry about multiple people releasing their own code to cover each other. You can see the effect immediately after the step, greatly improve the production efficiency. With CDN space for efficiency, very cost-effective!
3) Python's fab package is a good thing, you can remotely log on to the server to execute shell commands to implement local one-click Publishing. No need to use git hooks on the server for automatic publishing!
9. Connection disconnection (WebSocket)
1) The client has a heartbeat upstream every 58 seconds, keeping a link to the server
2) multi-label browser when switching tab or browser into the background or broken network, will cause heartbeat failure
3) determine if Net.isconnect () is true each time the client sends an upstream. If False, the upstream event and data are saved, then re-connected, then logged in again, and the saved upstream events and data are sent. These are all in the background, if the re-connect failed to pop-up prompts, click Confirm after the page refresh.
10. About the operator's domain hijacking and mobile JS plus pop-up ads
Operator bullying, China is also a "legal" country, in addition to HTTPS, there is no other way!
We chose Wosign SSL, a single domain of 4888 yuan a year http://www.wosign.com/price.htm
"Game Address"
1. Win three cards: chess H5 Game (horizontal version)
http://www.v1h5.com/games/game_loading/online.html?gameNo=1070&serverNo=1&gameid=2864
2. Bumper car: Real-time online multiplayer athletic casual H5 game (vertical version)
http://www.v1h5.com/games/game_loading/online.html?gameNo=1104&serverNo=s2&gameid=3897
H5 games developed those pit (a) client
