一文掌握游戏引导的实现思路

作者: 代码咖啡 | 来源:发表于2021-08-05 13:22 被阅读0次

一年多以前写了两篇从零开始设计游戏引导框架，第二篇写完后，发现写不下去了。游戏引擎形形色色，语言多种多样，如果继续写下去发现并不具有通用性，所以中断了。现在，引导的代码经过多个项目的打磨，有了一定的改进，想着简单分享一下引导的实现思路吧！
本文以Lua代码作为样例，重在思路分享，其他语言亦可实现。

1. 引导认知

1.1 引导分类

引导的分类可分为新手引导、触发式引导、任务前往引导。

1）新手引导

新注册的账号进入游戏后，出现立绘对话、交代游戏背景、告知玩家基础操作的引导，称为新手引导。一般新手引导持续至玩家可以自由操作时结束。

2）触发式引导

玩家自由操作过程中，因达到某种条件而触发的引导，称为触发式引导。大多数情况下，触发式引导会随着新系统的开启。

3）任务前往引导

点击任务前往按钮后，出现手指引导玩家按照任务实现流程去操作的过程，称为任务前往引导。

1.2 组别和步骤

1）组别

为方便后续内容达成统一认知，在此将一个个不同功能作用的引导以组别进行区分。比如：一进入游戏即出现的新手引导、英雄升星引导、文字版的抽卡引导等，每一个引导特定功能的引导都是一个组别。

2）步骤

在一个引导组别里，每一步引导的操作都成为步骤，比如：引导点击一个按钮、出现一个立绘对话、出现一个高亮框等，都是引导的步骤。

1.3 触发条件与触发点

触发条件和触发点，是引导组别的概念。
举个例子，文字版里有一个抽卡引导，条件是玩家通关1-4。那么对于抽卡这个组别的引导，通关1-4就是它的触发条件，而触发点就是每一个关卡通关那一刻。通俗来讲就是：

触发点：
什么时候判断

触发条件：
判断是否满足条件

1.4 操作

操作是引导步骤的概念。
举个例子，文字版抽卡引导的步骤流程是：

出现立绘对话，告知玩家“招仙台”系统已开启
点击主界面“道场”页签
点击“招仙台”按钮
提示免费单抽
点击“单抽”按钮

上面的每一个步骤都是操作。

操作根据表现形式可分为如下几类：

点击
拖动
立绘对话
提示文本
效果（高亮框等）

1.5 保存点

保存点的作用：为保证引导在玩家中途退出重进时依然能从中断点恢复。保存点需要上传记录到服务端。

结合以上几点，我们建立起对引导的认知：
在某个 触发点 ，判断某个组别的引导满足 触发条件 ，于是一个步骤一个步骤地引导玩家去完成最基础的系统流程的操作，并且支持退出游戏重进时能从中途的 保存点 恢复并继续引导。

2. 引导的配表

引导的配表可分为：guide_group表、guide_step表、guide_text表。

2.1 guide_group配表

guide_group表，主要控制某个组别的引导要不要触发，具体配置如下：

ID	说明	起始步骤	触发条件	优先级
_id	_stepId	_triggerCond	_priority
I		I	[S	I
1	初始的新手引导		101	0
2	抽卡引导	201	{"scene":"MainScene","form":"","missionId":100004}	1

2.2 guide_step配表

guide_step表，主要控制在某个组别的引导触发时，每一步操作具体是什么。相同组别引导的步骤ID连续，且ID不为100的倍数。具体配置如下：

ID	说明	操作	数值	其他参数	保存步骤
_id		_action	_val	_param	_saveId
H		I	I	S	I
201	立绘对话	30001	1002		202
202	点击“道场”页签	10001	1		0
203	点击“招仙台”按钮	10002	1		0
204	提示免费单抽	40001	1002	{"form_show":105,"form":105,"node":"_btnLotteryOne","dir":"top"}	0
205	点击“单抽”按钮后关闭提示	10003	0	{"form":105,"node":"_btnLotteryOne"}	100

_action说明：

10000+：点击
10001 点击主界面的页签，val 表示第几个页签
10002 点击某个系统入口，val 表示哪个系统
10003 按照代码变量名找到按钮进行点击

20000+：拖拽
...

30000+：立绘对话
30001 普通立绘对话

40000+：文本提示
40001 普通文本提示

_val说明：

不同_action，对应_val表意不同

10001 主界面第几个页签
10002 表示系统ID枚举

30000+ 表示立绘对话的文本ID，从guide_text表里读取
40000+ 表示文本提示的文本ID，从guide_text表里读取

_param说明：

一些无法通过_val单个值表意的参数，用_param表意。使用Json字符串配置，扩展性较好，自由度大，可根据需求任意定义。

form_show 某个界面打开的时候执行操作，数值为：界面ID枚举
form 执行当前操作需要在哪个界面，数值为：界面ID枚举
node 关联某个node，通常与form配合使用，旨在找到目标节点，与不同_action关联，表意不同，与点击关联，表示点击哪个按钮；与提示文本关联，表示文本框依附于哪个UI控件
dir 表示文本框依附在UI控件的哪个方位，数值可以是："top"、"bottom"、"left"、"right"
...

_saveId说明：

在当前操作结束时，将_saveId保存到服务器，下次断线重连时，从保存点继续引导

0 不设置保存点，不做任何操作
100 将当前引导保存点去掉，标记当前组别引导已完成
其他保存该步骤ID到服务器

2.3 guide_text表

guide_text表，主要配置立绘对话、文本提示等操作的一些文本内容。具体配置如下：

ID	说明	文本内容	参数
_id		_textSid	_param
I		D	S
1001	立绘对话	招仙台已开启，请道友移步入内，招募仙士。	{"role_index":1,"role_id":1}
1002	文本提示	每隔一段时间都会获得一次免费召唤机会

_param说明：

role_index 立绘的位置，1：左，2：中，3：右
role_id 立绘角色ID

2.4 程序与策划的配合

1）添加新的引导时

策划出一份引导流程文档，程序根据负责添加引导的逻辑配表：guide_group、guide_step，策划配置负责配置引导的文案：guide_text。

2）修改引导时

如果仅涉及引导文案修改时，策划只需要维护guide_text表即可，如果仅涉及文案增删，策划也可在了解引导配表逻辑的基础上，维护guide_step表；
如果涉及逻辑改动，需要程序配合策划进行改表，程序负责guide_group、guide_step，策划负责guide_text。

可有效规避策划和程序改一份表，影响引导逻辑。

3. 引导代码的实现

根据：

在某个 触发点 ，判断某个组别的引导满足 触发条件 ，于是一个步骤一个步骤地引导玩家去完成最基础的系统流程的操作，并且支持退出游戏重进时能从中途的 保存点 恢复并继续引导。

代码需要实现的逻辑包括：

引导的触发
引导的操作
引导的保存点（结合在操作中）
引导步骤的连接（如何从当前步骤跳到下一步）

我们把引导的框架逻辑写在GuideMgr.lua里。

local M = class("GuideMgr")

function M.tryStart() end

function M.start(groupConfig) end

function M.step(stepId) end

function M.finish() end

function M.saveGuideStep(stepId) end

return M

3.1 引导的触发

引导的触发，可分为：触发总入口、触发条件判定和正式触发。

1）触发总入口

local M = class("GuideMgr")

...

-- 引导触发判定总入口
function M.tryStart()
    -- 引导禁用
    if M.isForbidGuide() then return end
    -- 正在引导，不触发判定
    if M.isGuiding() then return end
  
    -- 获取没有触发过的引导组别，判定是否满足触发条件
    local groupConfigs = M.getGroupConfigs()
    for i = 1, #groupConfigs do
        local config = groupConfigs[i]
        -- 如果满足触发条件
        if CondMgr.isConditionArrayMet(config._triggerCond) then
            -- 触发引导
            M.start(config)
            return true
        end
    end
end

-- 获取没有触发过的引导组别
function M.getGroupConfigs()
    local configs = M._groupConfigs
    if configs == nil then
        configs = {}
            
        for k, v in pairs(D._guideGroupConfig) do
            -- 取没有触发过的引导组别
            if not M.isFinished(k) then
                configs[#configs + 1] = v
            end
        end
    
        table.sort(configs, function(a, b) return a._priority < b._priority end)
        M._groupConfigs = configs
    end
    return configs
end

...

return M

2）条件判定

ID	说明	起始步骤	触发条件	优先级
_id		_stepId	_triggerCond	_priority
I		I	[S	I
2	抽卡引导	201	{"scene":"MainScene","form":"","missionId":100004}	1

local M = class("CondMgr")

...

--[[--
配表类型：[S
配表写法：{"form": 101, "hero_level": 20} | {"form":101, "vip_level":3}
在101界面，英雄等级达到20级或vip等级达到3级，触发引导

cond参数结构：
table数组
{
    {form = 101, hero_level = 20},
    {form = 101, vip_level = 3}
}

只要数组中其中一个条件满足即可
--]]--
function M.isConditionArrayMet(conds)
    for i = 1, #conds do
        if M.isConditionMet(conds[i]) then
            return true
        end
    end
    return false
end

function M.isConditionMet(cond)
    for k, v in pairs(cond) do
        if not M.CondCheck[k](v) then return false end
    end
    return true
end

M.CondCheck = {
    ["form"] = function(val)
        local form = Form.getTop()
        return form and form._id == val
    end,
    ["hero_level"] = function(val)
        local lv = P._playerHero:getOwnedHeroMaxLevel()
        return lv >= val
    end,
    ["vip_level"] = function(val)
        return P:vipLevel() >= val
    end
}

...

return M

3）触发引导

local M = class("GuideMgr")

...

function M.start(groupConfig)
    -- 如果有引导正在进行，结束所有引导，开始触发传入组别的引导
    M.finish()

    -- 保存当前正在触发的引导组别ID
    local groupId = groupConfig._id
    M.saveGuideGroup(groupId)
  
    local stepId = groupConfig._stepId
    M.saveGuideStep(stepId)
  
    -- 引导视图层准备工作
    M.prepareLayer()
  
    -- 开始当前引导组的第一步操作
    M._groupId = groupId
    M._stepId = stepId
    M.step(stepId)
end

-- 创建引导图层，后续的所有操作添加的元素都放在这里
function M.prepareLayer()
    local layer = M._layer
    if layer == nil then
        layer = class(nil, V).new(lc.CocosClass.ui_widget)
        layer:setContentSize(lc.ScrSize)
        lc.addChildToCenter(Scene._current, layer, V.ZOrder.guide)
        M._layer = layer

        layer:setTouchListener(function() end)
    end
end

function M.saveGuideGroup(groupId)
    -- TODO：保存到服务端
    ...
end

function M.saveGuideStep(stepId)
    -- TODO：保存到服务端
    ...
end

...

return M

3.2 引导的操作

引导的操作涉及：保存点逻辑、参数逻辑、具体操作（点击、对话等）。

1）引导步骤

local M = class("GuideMgr")

...

function M.step(stepId)
    -- 保证step在引导中执行（由M.start发起）
    if not M.isGuiding() then return end

    --[[--
    stepId不为空，表示开始当前步骤操作；
    stepId为空，表示在M._stepId基础上，进入下一步操作；
    --]]--
    if stepId == nil then
        stepId = M._stepId
 
        -- 在当前步骤结束，准备进入下一步时，记录当前步骤的保存点
        local stepConfig = D._guideStepConfig[stepId]
        local saveId = stepConfig._saveId
        if saveId then
            if saveId == 100 then
                M.setGroupFinished(M._groupId)
                M.saveGuideStep()

            elseif saveId > 0 then
                M.saveGuideStep(saveId)
            end
        end

        stepId = stepId + 1
    end
  
    -- 传入的步骤ID不存在，结束引导
    local config = D._guideStepConfig[stepId]
    if config == nil then
        M.finish()
        return
    end
  
    M._stepId = stepId

    -- 清除所有引导元素
    M.clearLayer()

    -- 根据步骤参数做相应处理
    -- （后面继续）
    ...
end

function M.isGuiding()
    return M._stepId and D._guideStepConfig[M._stepId]
end

-- 清理所有layer上的引导元素，包括手指、高亮、立绘对话等
function M.clearLayer()
    local layer = M._layer
    if layer == nil then return end

    layer:setSwallowTouches(true)
    layer:setTouchListener(function() end)

    M.removeFinger()
    M.removeDilog()
    M.removeTipText()
    ...
end

...

return M

2）参数处理

ID	操作	数值	其他参数	保存步骤
_id	_action	_val	_param	_saveId
H	I	I	S	I
204	40001	1002	{"form_show":105,"form":105,"node":"_btnLotteryOne","dir":"top"}	0
205	10003	0	{"form":105,"node":"_btnLotteryOne"}	100

local M = class("GuideMgr")

...

function M.step(stepId)
    ...
  
    -- （接上面的代码）
    local config = D._guideStepConfig[stepId]

    -- 根据步骤参数做相应处理
    local param = M.getStepParam(config)
    if param then
        -- 允许玩家自由点击
        if param.free_op then
            M._layer:setSwallowTouches(false)
        end

        M._waitParam = nil

        if param.delay then
            M._waitParam = V.scheduleCall(function() M.doAction() end, param.delay)

        elseif param.event then
            _, M._waitParam = lc.event.once(param.event, function() M.doAction() end)

            if not param.free_op then
                M._layer:setTouchListener(function()
                    -- 提示当前无法点击
                end)
            end
      
        elseif param.form_show then
            local form = Form.getTop()
            if form == nil or form._id ~= param.form_show or not form._isShown then
                _, M._waitParam = lc.event.on("form.show", function(form)
                    if form._id == param.form_show then M.doAction() end
                end)
            end
      
        elseif param.form_close then
            local form = Form.getTop()
            if form and form._id == param.form_close then
                _, M._waitParam = lc.event.on("form.close", function(formId)
                    if param.form_close == formId then M.doAction() end
                end)
            end
        end
    
        if M._waitParam == nil then
            M.doAction()
        end
    end
end

function M.getStepParam(stepConfig)
    stepConfig = stepConfig or D._guideStepConfig[M._stepId]
    return json.decode(stepConfig._param or "")
end

...

return M

3）执行操作

local M = class("GuideMgr")

...

function M.doAction()
    if not M.isGuiding() then return end
  
    local config = D._guideStepConfig[M._stepId]
    M._waitParam = nil
  
    local layer = M._layer
    layer:setSwallowTouches(true)
  
    local action = config._action
    if action == 0 then
        -- 执行下一步操作
        M.step()

    else
        local func = M.ActionFuncs[action]
        if func then
            if not func(config) then
                M.finish()
            end
  
        else
            -- 交给外部处理
            V.scheduleCall(function() lc.event.emit("guide.step", config) end, lc.FrameInterval)
        end
    end
end

M.Action = {
    click_main_tab = 10001,
    click_sys_entrance = 10002,
    click_by_name = 10003,
    ...
    dialog = 30001,
    ...
    tip_text = 40001,
    ...
}

M.ActionFuncs = {
    [M.Action.click_main_tab] = function(config)
        local index = config._val
        local tab = table.walk(Scene._curent, "_tabs", index)
        if tab and tab:isVisible() then
            M.addTouchFinger(tab)
            return true
        end
    end,
    [M.Action.click_sys_entrance] = function(config) ... end,
    [M.Action.click_by_name] = function(config) ... end,
  
    [M.Action.role_dialog] = function(config)
        local textConfig = D._guideTextConfig[config._val]
        M.addDialog(textConfig)
        return true
    end,
  
    [M.Action.tip_text] = function(config)
        local textConfig = D._guideTextConfig[config._val]
        M.addTipText(textConfid._textSid, config._param)
        return true
    end
}

...

return M

回顾：

10000+：点击
10001 点击主界面的页签，val 表示第几个页签
10002 点击某个系统入口，val 表示哪个系统
10003 按照代码变量名找到按钮进行点击

20000+：拖拽
...

30000+：立绘对话
30001 普通立绘对话

40000+：文本提示
40001 普通文本提示

3.3 引导的结束

引导的结束包括：引导数据处理、视图层移除、尝试继续触发下一组引导。所有逻辑囊括在GuideMgr.finish()方法里。

local M = class("GuideMgr")
...

function M.finish()
    -- 数据层
    M.saveGuideGroup()
    M.saveGuideStep()

    if M._groupId then
        M.setGroupFinished(M._groupId)
    end
  
    M._groupId = 0
    M._stepId = 0

    -- 视图层
    M.clearLayer()
    M.removeLayer()

    local param = M._waitParam
    if param then
        -- 移除事件监听
        if param._event then
            lc.event.remove(param)
        
        -- 移除延迟操作的定时器
        else
            param:unschedule()
        end
        M._waitParam = nil
    end
  
    -- 延迟一帧判断是否有新的引导可以触发
    V.scheduleCall(M.tryStart, lc.FrameInterval)
end

...

return M

3.4 步骤间的连接

步骤间的连接，也就是当前步骤如何跳到下一步骤，需要根据操作情景做特殊处理，这里以点击、立绘对话为例，做一下讲解。

1）点击

local M = class("GuideMgr")
...

function M.addTouchFinger(node, ...)
    ...
    node._lastListener = node._listener
    node._listener = M.fingerTouchListener
    ...
end

function M.fingerTouchListener(...)
    ...
    if node._lastListener then
        node._lastListener(...)
        node._listener = node._lastListener
    end
  
    -- 按钮点击后，执行下一步
    M.step()
    ...
end

...
return M

2）立绘对话、文本

点击屏幕任意位置，执行下一步引导操作。

local M = class("GuideMgr")
...

function M.addDialog()
    ...
  
    M._layer:setTouchListener(function()
        ...
        -- 设置layer点击事件
       M.step()
        ...
    end)
  
    ...
end

function M.addTipText()
    ...
  
    M._layer:setTouchListener(function()
        ...
        -- 设置layer点击事件
        M.step()
        ...
    end)
  
    ...
end

...
return M