Early in the project met Xiao Heng game is finally completed, it is tough for a while I thought I could relax a little full, but the planning, operational requirements, they think that adding a very "simple" and important functions: beginners guide .
Recall the year, the feeling when received this task is sweating hands and feet, the dark days of faint, dull moon, the game code already face a thousand wounds, complex logic, did not know how to start? Even more difficult is the game itself and function demand is not stable, the boss just might be an idea to change, change, change ..., how can I do?
In such a situation must be difficult circumstances, need to remain calm, after bitter experience, I began to develop guidance function, continue to accumulate in the process of doing, prepared a set of profiles, programmable guide frame, then pay to other developers or planners to make a specific guide content, really it is: "What does not kill you makes you stronger" .
The difficulty of achieving beginners guide
Usually difficult to achieve beginners guide is that it is closely related to the current requirements, functional, and even a little less normal processes are a dead end, take a look at the following guide novice in the end there are those pain points.
Pain points in the development of
- Boot code needs to be inserted in the normal flow, the flow disturbance;
- Increase the boot code will affect the original code logic, difficult to maintain and increase costs;
- Changes in demand will lead to interface or substantially revised guidance function, or even re-production;
- Rectangular region corresponding to the finger tips positioned trouble, can not simply use a fixed location and size of the rectangle;
- Code written guide is also very difficult and requires planning - high level of cooperation between programs.
Desired programming experience
After the difficulties and disadvantages of the traditional learned in boot production process, I have been thinking there is no better way to achieve, programmatic guidance function in my heart hope to have the following:
- Boot function code, the code can not be mixed in the normal game logic potentially disastrous, should be separated; (unbearable elegant code is disrupted relentless, more difficult to endure poor get fragmented code)
- UI interface occurs only simple displacement, Size size, node level adjustment, with no need to modify the boot code;
- Positioning guide UI rectangular area should be as simple as possible, different screen sizes can be adaptive;
- Best able to do the planning staff can be made part of the process since the guide;
- In steer clear demand, the game features normally the case, making a routine step guide should be very quick.
Here is what I use embedded on Cocos Creator official demo-ui engineering guide Case presentation:
demo experience Address:
http://game.ixuexie.com/godGuide
Here's a video demonstration:
https://www.bilibili.com/video/av60001770/
Framework Key
Guide demo operation, use the following control configuration JSON:
module.exports = {
name: '进入商店',
debug: true,
autorun: true,
steps: [
{
desc: '文本提示',
command: { cmd: 'text', args: ['欢迎体验Shawn的新手引导框架', '本案例演示：\n1.文本提示指令\n2.手指定位指令\n3.自动执行引导\n4.点击操作录像', '首先，请点击首页按钮'] },
},
{
desc: '点击主界面主页按钮',
command: { cmd: 'finger', args: 'Home > main_btns > btn_home'},
delayTime: 0.5,
},
{
desc: '文本提示',
command: { cmd: 'text', args: '点击主界面设置按钮' }
},
{
desc: '点击主界面设置按钮',
command: { cmd: 'finger', args: 'Home > main_btns > btn_setting'},
},
{
desc: '文本提示',
command: { cmd: 'text', args: '点击主界面商店按钮' }
},
}Key arrangement is the array project steps, wherein the boot is a description desc steps, mainly used for debugging, command a bootstrap, a finger is implemented here instruction command: finger, the latter is an instruction args parameter by the CSS selector concept, I am here simply to achieve a method of obtaining a node called: locator .
Locator
Concept locator point, in fact it is very simple, as shown below:
You might think, cc.find engine provided to get the code as follows:
cc.find('Canvas/Home/lower/main_btns/layout/btn_home')Node path string may be precisely positioned to btn_home nodes, but in actual use will feel cumbersome:
- String is too long, error-prone;
- Node name, change the hierarchy node path string becomes ineffective, easy to accidental injury.
In order to express more simple and reliable path, it introduced the two positioning symbols:
/: 右斜杠，代表1级子节点（与cc.find相同）
>: 大于符号，表示1~n级子节点The above btn_home node locators may be changed
godGuide.find('Canvas > btn_home');If we default start retrieved from Canvas node can also be directly written as follows:
godGuide.find('btn_home');Canvas from this node layers traversing, want to improve the efficiency of retrieval node can read:
godGuide.find('Home > main_btns > btn_home');If you have the same name node in the scene, you can also use the '>'symbols to solve, but can not have the same level of the same name node (if you need to check it).
Automated Guided
Guide testing inefficiency, as with guide configurable, can it automatically to enforce it? See the following video:
https://v.qq.com/x/page/v3017l51xep.html
Xiao Heng earliest only in the browser implements simulate mouse clicks, and later extended to the native App can also be used. Automatic guide facilitates testing and verification of the boot process.
Recording Process
The core of the guide is to obtain the target node, we handwriting node locator (path a simplified expression node) node acquired. If you implement a feature, we click on the node path next record, it can automatically generate the boot process it? Then it automatically play out?
Epilogue
Beginners guide has been open source framework, and supports the latest version of the Cocos Creator 2.2.0 under, Github offer warehouse address:
https://github.com/ShawnZhang2015/GodGuide
The original is not easy, if you feel helpful, please point a praise it!
