游戏地图 (Game Map)

游戏地图 (Game Map) 是一种极具吸引力的游戏化内容类型。它允许您在自定义地图（图片或纯色背景）上布置关卡节点，并通过路径将它们连接起来。通过设置解锁条件（如分数、时间、前置任务），您可以轻松构建出充满挑战感的“闯关式”课程或自由探索的学习世界。

Sam 的笔记

游戏地图 (Game Map) 无疑是 H5P 组件库中最为复杂且强大的工具之一。它的挑战不仅在于您需要熟练掌握各类基础 H5P 组件（如互动视频、测验等）的制作，更在于要求创作者具备深度的游戏化思维 (Gamification Thinking)。

在开始之前，请意识到您不仅是在编排课程，更是在设计一次“探险”。如何规划学习路径？如何通过规则平衡挑战与成就感？这些设计层面的思考将决定内容的成败。这是一次从“教师”到“游戏设计师”的角色跨越，准备好接受挑战了吗？

本教程目标

1. 了解游戏地图的核心机制：关卡、路径与解锁规则
2. 掌握地图背景设置与复合内容节点的创建
3. 学会利用高级访问限制 (Restrictions) 设计个性化的学习路径

第一次使用课灵？

请先注册并登录课灵账号(可以使用微信登录)，在工作区点击"创建"，并选择『游戏地图 (Game Map)』开始创作。

注册/登录

何时使用游戏地图

1. 游戏化课程 (Gamified Course)：将枯燥的练习转化为“打怪升级”的闯关体验，提升学生参与度。
2. 情境化探索 (Contextual Exploration)：在特定的视觉背景（如世界地图、人体结构图、设备面板）上通过热点呈现知识。
3. 非线性叙事 (Non-linear Storytelling)：设计多条路径分支，让学习者根据选择进入不同的剧情或任务。
4. 自适应学习 (Adaptive Learning)：利用限制规则，根据学生的表现开放不同的补救或拓展关卡。

前置知识

Game Map (游戏地图) 本质上是一个用于组织内容的容器。它的强大之处在于能够通过路径和关卡将其他 H5P 内容类型串联起来。 因此，要充分利用此组件，建议您先熟悉各类基础组件（如 交互式视频、课程演示、各类测验等）的使用方法。本教程将侧重于如何创建地图路径及设置通关规则，而非讲解子组件的具体配置。

教程示例

下面是一个名为"混合语法闯关大冒险"的地图示例，演示了如何通过游戏化的方式组织学习任务。

互动示例：点击地图上的关卡点开始挑战，只有完成前置任务才能解锁后续关卡

快速复制示例

• 点击 这里➜ 将示例复制到你的课灵工作区
• 在打开的页面点击"复制" (注意：请确保已登录课灵账号，否则无法复制)
• 随后在生成的副本中点击"编辑"
• 即可查看并操作本教程所示的设置。

创建游戏地图：分步指南

步骤 1：创建新内容

1. 在课灵工作区点击「创建」，进入 H5P 编辑器
2. 在内容类型列表中选择 『游戏地图』 或搜索 Game Map
3. 进入编辑界面开始配置

从 H5P 内容类型列表中选择『游戏地图』

步骤 2：设置标题与引导页

在开始绘制地图前，建议先设置内容的元数据和欢迎界面，这将是学习者看到的第一印象：

• 标题 (Title)：输入内容的名称（例如 "混合语法闯关大冒险"）。此标题将用于系统搜索、报表和版权信息，是必填项。
• 显示标题屏幕 (Show title screen)：勾选此项，为地图添加一个引导封面。
  • 介绍 (Introduction)：填写简短的欢迎语或游戏目标，例如 "运用您的语法知识回答问题才能解锁进入游戏地图的下一个阶段"。
  • 标题屏幕媒介 (Title Screen Medium)：您可以上传一张 图片 (Image) 或 视频 (Video) 作为封面背景。这能显著提升内容的吸引力。

配置标题、介绍文案及封面背景图

步骤 3：设置地图背景

在编辑器的 "步骤 1 背景" 标签页中，您可以定义地图的视觉基础：

• 背景图片 (Background Image)：上传一张高分辨率图片作为地图底图（如虚构地图、楼层平面图）。
  • 编辑版权：上传后，请点击 "编辑版权 (Edit copyright)" 填写图片来源信息，这是教育资源开发的良好习惯。
• 背景颜色 (Background Color)：设置地图的底色。
  • 如果您不上传背景图片，此颜色将直接作为纯色地图背景。
  • 建议选择与图片色调协调的颜色，以免图片加载失败时显得突兀。

设置背景图片与背景颜色；注意填写版权信息

步骤 4：添加关卡

在编辑器的 "步骤 2 游戏地图" 标签页中的左上角工具栏中，点击相应的图标即可将关卡添加到地图中心，然后将其拖动到目标位置。

• 添加普通关卡（图标：✪）：

  • 普通关卡 (Standard Stage)：最常用的类型，用于承载教学内容。
  • 单一内容：直接关联一个标准的 H5P 内容（如互动视频、测验、课程演示等）。
  • 复合内容：类似于 Column，允许在一个关卡中垂直堆叠多个 H5P 内容，形成一个完整的学习单元。

• 添加特殊关卡（图标：♥）：

  • 特殊关卡 (Special Stage)：提供非教学内容的特殊功能节点，支持以下四种类型：
    • 结束 (Finish)：标记游戏的终点。
    • 额外生命 (Extra Life)：给予玩家额外的生命值（需配合生命值限制规则使用）。
    • 额外时间 (Extra Time)：增加游戏倒计时（需配合时间限制规则使用）。
    • 链接到外部内容 (Link to external content)：设置一个 URL，点击后跳转到外部网页。

添加普通关卡或特殊关卡

配置关卡详情

当您添加或双击一个关卡后，将进入详细配置面板，主要包含四个部分：

1. 关卡标签与位置 (Label & Position)：
   • 设置关卡的名称（如 "Level 1: 基础语法"）。
   • 起点关卡设置 (Start Stage)：勾选此项，将该关卡设为游戏的起点。若未设置，系统可能会随机选择一个无前置条件的关卡作为起点。

设置关卡名称和起点关卡

2. 关卡限制 (Restrictions)：
   • 时间限制 (Time Limit)：
     • 时间限制 (秒)：设置完成该关卡的最大允许时间。超时后练习将自动关闭并重置（若开启生命值系统则扣除一命）。
     • 超时警告 (秒)：可选设置，在倒计时剩余多少秒时播放紧迫的警告音效。
   • 访问限制 (Access Restrictions)：
     • 这是控制游戏流程的核心，支持任意或所有条件的组合逻辑。
     • 限制条件类型：
       • 总分 (Total Score)：当前累计分数必须大于/小于/等于某值。
       • 关卡分数 (Stage Score)：特定关卡的得分必须满足条件。
       • 关卡进度 (Stage Progress)：基于特定关卡的状态进行判断。可选状态包括：未开始 (Not started)、已开始 (Seen)、已完成 (Completed)、成功完成 (Cleared)。
       • 时间 (Date/Time)：仅在特定日期或时间段内开放。

设置时间限制警告与复杂的访问解锁条件

3. 关卡内容 (Content)：
   • 在此处选择并配置该关卡承载的具体 H5P 内容。
   • Game Map 支持非常广泛的内容类型（多达 20+ 种），涵盖了从基础的 文本 (Text)、图片 (Image) 到复杂的 互动视频 (Interactive Video)、课程演示 (Course Presentation) 以及各类测验题型。
   • 您可以选择 单一内容 或 复合内容（堆叠多个组件）。

为关卡添加互动内容，支持多种类型

4. 连接的关卡 (Neighbors)：
   • 勾选其他关卡，建立路径连接。
   • 这是构建地图网络结构的关键步骤。被勾选的关卡将与当前关卡产生连线，代表玩家可以从当前位置移动到那里。

为关卡设置连接的其他关卡，构建地图网络

步骤 5：游戏设置

在完成地图构建后，您可以在底部的设置区域对游戏的整体规则和表现进行详细配置。这部分主要分为四个设置分区：结束屏幕、视觉设置、音频设置和行为设置。

1. 结束屏幕

自定义游戏结束时的反馈画面，包含以下三个可配置项：

• 挑战失败，请重新尝试：
  • 消息：设置当玩家未能通过游戏（例如生命值耗尽或超时）时显示的提示文本。
  • 结束屏幕媒体：支持上传图片或视频来增强视觉效果。若图片仅用于装饰，请勾选"仅作为装饰用"以优化无障碍体验。
• 恭喜你，挑战成功！：
  • 消息 (用户成功)：设置当玩家成功到达终点关卡时显示的祝贺文本。
  • 结束屏幕媒体 (用户成功)：同样支持添加图片或视频作为通关奖励画面。
• 总体反馈：
  • 自定义分数范围：点击"添加范围"按钮，根据玩家获得的最终得分（百分比）提供差异化的评价。
  • 均匀分布：使用此按钮可自动平均分配分数段。
  • 示例：您可以设置 0%-60% 显示"继续努力"，61%-100% 显示"做得真棒"。

2. 视觉设置

在这里，您可以自定义地图的视觉风格，包括关卡状态颜色和路径样式：

• 关卡颜色设置 (Stage Color Settings)：

  • 自定义状态颜色：您可以分别为普通关卡（Standard）、待解锁关卡（Locked）和已通过关卡（Cleared）设置不同的背景颜色，以配合地图的整体色调。
  • 显示分数星星 (Show Score Stars)：选择星星的显示时机，可选 从不 (Never)、悬停时 (On hover) 或 始终 (Always)。注意：没有评分任务的关卡将不会显示星星。

• 路径设置 (Path Settings)：

  • 显示路径 (Show path)：勾选后将在地图上显示连接线。
  • 风格设置：
    • 颜色：分别设置路径颜色（未走过）和已清除路径颜色（已走过）。
    • 样式：调整路径宽度（如中等）和路径样式，支持 实线 (Solid)、点虚线 (Dotted)、横虚线 (Dashed) 和 双线 (Double)。

3. 音频设置

沉浸感是游戏地图的关键。您可以为地图添加音频，并赋予学习者更多的控制权。这部分主要分为背景音乐和事件设置：

• 背景音乐 (Background Music)：

  • 上传音乐：添加循环播放的背景音乐，营造游戏氛围。
  • 在用户做练习时静音：强烈建议勾选此项。当用户打开关卡内的互动内容（如视频或测验）时，背景音乐会自动暂停，避免干扰学习。

• 事件设置 (Event Settings)：

  • 您可以为游戏中的各种交互事件设置特定的反馈音效，增强互动感。
  • 可配置事件包括：点击锁定的关卡、解锁关卡、打开/关闭练习、获得/失去生命、游戏结束、超时警告以及答题反馈（满分/非满分）等。
  • 全局反馈：这些音效设置是全局生效的，确保了整个游戏体验的一致性。

4. 行为设置

这里控制游戏的核心规则和地图的探索机制，分为游戏机制和地图漫游规则：

• 游戏机制 (Game Mechanics)：
  • 生命 (Lives)：设置玩家的初始生命值。留空则为无限生命。当玩家在关卡中未通过或超时时，将失去一条生命；若玩家访问了提供"额外生命"的特殊关卡，则可增加生命值。生命耗尽则游戏结束。
  • 全局时间限制 (Global Time Limit)：设置整个游戏的倒计时（秒）。超时则游戏立即结束。
  • 完赛得分 (Completion Score)：设置通关所需的最低分数。这意味着用户不必完美完成所有练习也能赢得游戏。
  • 功能按钮：决定是否向用户显示 "重试" 和 "显示解决方案" 按钮。

• 地图漫游规则 (Map Settings)：
  • 自由漫游 (Roaming Mode)：定义玩家解锁新关卡的逻辑。
    • 自由漫游：无限制，可随意访问所有关卡。
    • 完成以解锁：完成当前关卡后，解锁相邻关卡。
    • 成功通关以解锁：当前关卡必须达到及格标准，才能解锁相邻关卡。
    • 注意：即使在"自由漫游"模式下，您在单个关卡上设置的特定访问限制（如需达到特定分数解锁）依然生效。
  • 关卡可见范围 (Stage Visibility)：控制地图的"迷雾"效果。
    • 可以看到所有关卡：地图全开，所有关卡始终可见。
    • 所有未锁定的关卡及其邻居：仅显示已探索区域及下一步可达的关卡。
    • 仅未锁定的关卡：视野最受限，仅显示当前可玩关卡。
  • 显示关卡标签：设置鼠标悬停时是否显示关卡名称。

步骤 6：保存与预览

点击 『保存并关闭』 生成完整内容。

交互说明

• 状态栏 (Status Bar)：位于地图顶部，显示关键游戏信息。

  • 生命值 (Hearts)：显示剩余生命数（如 ♥ 3）。
  • 关卡进度 (Stages)：显示已解锁/总关卡数（如 ○ 3/13）。
  • 总分 (Score)：显示当前得分/总分（如 ★ 2/18）。
  • 功能按钮：包括静音、音量设置（齿轮图标）、结束游戏（旗帜图标，点击后无论当前得分多少将立即结束游戏并显示结果）和全屏模式。

• 地图互动：

  • 关卡图标：
    • 红色锁形图标：表示该关卡尚未解锁，不可访问。
    • 绿色对勾图标：表示该关卡已成功完成。
    • 带圆环的图标：表示当前可访问但未完成的关卡。
    • 星级显示：关卡上方会显示已获得的星星数量（最高 3 星）。
  • 鼠标悬停：移动鼠标到关卡上，会显示关卡标题和简短说明。

• 游戏流程：

  • 挑战失败：如果生命耗尽或超时，会弹出"挑战失败"画面，并提供"显示正确答案"或"重新开始"选项。
  • 音量控制：点击顶部的齿轮图标，可分别调节音乐音量（背景音乐）和音效音量（点击声、反馈声）。

答题界面、失败反馈与音量调节面板

优化与可访问性

• 图像无障碍：对于纯装饰性的背景图或结束画面图片，请务必勾选 "仅作为装饰用"，避免干扰屏幕阅读器用户。
• 多重视觉提示：GameMap 自动使用不同形状的图标（锁、对勾、圆环）来区分状态，这有助于色盲用户识别，无需仅依赖颜色（红/绿）。
• 键盘导航：确保地图上的所有关卡都能通过键盘（Tab 键）访问和激活（Enter/Space 键）。
• 音频替代：虽然音频能增强体验，但请确保核心反馈不仅仅依赖声音（例如超时警告），应配合视觉提示。

专家建议

• 故事化包装：充分利用 标题屏幕 和 结束屏幕 讲述一个完整的故事背景（如"寻宝"或"太空探险"），让枯燥的练习变成有意义的任务。
• 差异化路径设计：利用分支路径设计不同难度的路线。例如，设计一条高风险高回报的"捷径"（题目更难但步数少）和一条稳健的"常规路线"。
• 平衡挑战与技能：生命值系统能增加紧张感，但过少的生命值会导致挫败感。建议在地图中段设置提供 "额外生命" 的特殊关卡，作为奖励机制。
• 合理利用限制条件：在自由漫游模式下，利用 访问限制 (Restrictions)（如"必须先完成关卡A"）来引导学习顺序，避免学生迷失方向。
• 组件选择建议：
  • 若需章节化整合多种互动组件，优先选择『互动书 (Interactive Book)』。
  • 需要线性讲解并配合测验或媒体时，考虑『课程演示 (Course Presentation)』。
  • 若强调探索性、非线性路径和游戏化激励，『游戏地图』是最佳选择。
• 移动端适配优化：由于手机屏幕较小，建议在设计背景图时避免过于密集的路线。保持关卡之间的间距，以免手指触控时误触。同时，尽量使用复合内容来承载复杂知识点，因为它们在移动端会以全屏模态框展示，体验更佳。