如何较为优雅地实现新手引导功能?

更新日期: 2019-11-04阅读: 1.9k标签: 功能

早期的项目中晓衡遇到游戏终于要完成了,辛苦了一阵满以为可以稍微放松一下了,但策划、运营要求,增加一个他们认为非常“简单”且重要的功能: 新手引导 。

回想起当年,接到这个任务时的感觉是手脚冒汗、天晕地暗、日月无光,游戏代码本来就千疮面孔,逻辑错综复杂,根本不知道该怎么下手?更困难的是,游戏本身功能和需求还不稳定,老板随便一个想法可能就会被改、改、改...,我该怎么办?

在这种情艰难的情况下一定要,需要保持冷静,在痛定思痛之后,我开始了引导功能的开发,在做的过程中不断积累,编写了一套配置式、可编程的引导框架,然后交给其他开发人员或策划人员做具体的引导内容,真的是: “杀不死你的会使你更强大” 。


实现新手引导的困难

通常实现新手引导的困难在于,它与当前需求、功能密切相关,而且稍有不甚连正常流程都走不通,下面一起看看新手引导到底有那些痛点。

开发中的痛点

  1. 需要在正常流程中插入引导代码,干扰流程;
  2. 引导代码的增加会影响原有代码逻辑,增加维护难和成本;
  3. 界面或需求的变化会导致引导功能大幅修改,甚至重新制作;
  4. 手指提示对应的矩形区定位麻烦,不能简单使用固定的位置和矩形大小;
  5. 编写引导的代码也很困难,需要策划—程序之间高度配合。

期望的编程体验

在了解到传统的引导制作过程中的难点与弊端后,一直在思考没有更好的实现方式,我心中的引导功能的编程方式希望有以下几点:

  1. 引导功能代码,不能混入正常游戏逻辑代码中,后患无穷,应尽量分离;(难以忍受优雅的代码被无情的打乱,更难忍受糟糕的代码被弄的支离破碎)
  2. 界面只发生简单的UI位移、Size大小、节点层次的调整,不需要修改具引导代码;
  3. 定位UI指引矩形区域应尽可能简单,能自适应不同的屏幕尺寸;
  4. 最好能做到策划人员都可以来制作部分流程引导;
  5. 在引导需求明确、游戏功能正常的情况下,制作一个常规的引导步骤应该非常快捷。

下面是我使用Cocos Creator 官方 demo-ui 工程上嵌入的引导案例演示:

这里有一个视频演示:https://www.bilibili.com/video/av60001770/


框架要点

演示中的引导操作,是使用下面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: '点击主界面商店按钮' }
        },
}

配置中的重点是 steps 数组项目,其中的 desc 是引导步骤的描述,主要用于调试,command是引导指令,这里实现的是一个手指指示指令:finger, 后面的args是指令参数,借助css中的选择器概念,我这里简单实现了一个节点获取的方法,称之为: 定位器 。

定位器

点定位器的概念,其实它非常简单,如下图所示:


你可能会想到,引擎提供的 cc.find 就搞定,代码如下:

cc.find('Canvas/Home/lower/main_btns/layout/btn_home')

节点路径字符串可以精确定位到 btn_home 节点,但在实际使用中时会感觉很繁琐:

  1. 字符串太长,容易出错;
  2. 节点名字、层级变化,节点路径字符串就失效了,容易被误伤。

为了使路径表达更简洁可靠,笔者引入了两个定位符号:

/: 右斜杠,代表1级子节点(与cc.find相同)
>: 大于符号,表示1~n级子节点

可以将上面btn_home节点的定位符改为

godGuide.find('Canvas > btn_home');

如果我们默认从Canvas节点开始检索,也可以直接写成下面这样:

godGuide.find('btn_home');

这样将从 Canvas 节点一层层开始遍历,想提高检索节点的效率可以改为:

godGuide.find('Home > main_btns > btn_home');

如果场景中有同名节点,也可以使用 '>' 符号解决,但同一层级不能有同名节点(如果你需要检查的话)。


自动引导

引导的测试工作效率低下,既然有了可配置的引导,能否让它自动去执行呢?看下面视频:https://v.qq.com/x/page/v3017l51xep.html

晓衡最早只是在浏览器上实现了鼠标的点击模拟,后来扩展到了原生App上也可以使用。 自动引导,可以方便对引导流程的测试和验证。


流程录制

引导的核心是获取目标节点,我们是通过手写节点定位器(一种简化的节点路径表达方式)获取节点。如果实现一个功能,记录下我们点击的节点路径,是否可以实现自动生成引导流程呢?然后再让它自动播放出来?


结语

新手引导框架已经开源,并且支持最新版本的 Cocos Creator 2.2.0 下,Github仓库地址献上:https://github.com/ShawnZhang2015/GodGuide

原文 http://www.cnblogs.com/creator-star/p/11800956.html


链接: https://fly63.com/article/detial/6273

vue实现打印功能的两种方法

通过npm 安装插件,安装 npm install vue-print-nb --save.如需通过链接地址打印:window.location.href = airway_bill; airway_bill为链接地址。如果内容打印不全,在打印操作时点击更多设置,然后设置缩放。

js简体繁体转换

繁体词库封装好的,直接就对应简体转换了, 本js用于客户在网站页面选择繁体中文或简体中文显示,默认是正常显示,即简繁体同时显示,本程序只在UTF8编码下测试过,不保证其他编码有效

js剪切板_Clipboard.js 使用

clipboard.js是一个用来设置剪切板的库,小巧无依赖,但用法有点诡异,必须依赖一个DOM元素,并且需要用户的点击操作才能实现功能

使用 css/less 动态更换主题色(换肤功能)

说起换肤功能,前端应该是非常熟悉了?一般来说换肤的需求分为几种:1. 纯前端,直接在页面前端通过点击自由切换限定的几种主题色,切换之后主题色变量存到本地浏览器

在react中实现打印功能

我们知道,window.print()可以调起打印功能,但是直接用window.print()如果直接打印的话,没有样式,而且默认打印的是整个网页的内容。解决的方法可以用iframe方式引入需要打印的区域,并把样式添加进去

JS将货币小写转换为大写

JS将货币小写转换为大写,/** 数字金额大写转换(可以处理整数,小数,负数) */ [零, 壹,贰,叁,肆,伍,陆,柒,捌,玖]

7个好用的TypeScript 新功能

在下面的例子中,要访问 address ,你必须遍历 data.customer.address,而且 data 或 customer 有可能是 undefined,所以通常使用 && 运算符或类似例子中的技巧遍历检查每个层次的定义。

javascript如何实现计时功能?

JavaScript中可以使用setInterval()方法实现计时功能,setInterval()方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

5个CSS新功能

在浏览器开始实现它们之前,CSS 新的功能通常需要经过长时间讨论之后,才在W3联盟的规范中定义。 有许多值得一提的 CSS 新功能,但是在本文中,我们重点介绍可以浏览器的稳定版中进行测试的五个功能:

Vue实现随机验证码功能

步骤1 创建一个名为identify.vue的子组件,步骤2 在子组件中进行注册和引用 ,步骤3 在主页面中使用子组件

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!