--- title: 8. 创建 2D 世界 slug: world-sdk-guide-ch/3e4z-8 docTags: createdAt: 2025-10-22T07:24:00.194Z --- **全新推出，让你更快速、更轻松地创建世界的 2D 世界。** 只需使用你自己的背景图片并连接传送门，就能快速、轻松地创建并发布世界。 可以在现有的 Buildit Unity 插件项目中安装 2D World 包来使用！ # 应用方法 :::::WorkflowBlock ::::WorkflowBlockItem 在 Unity Hub 中选择 Buildit 插件文件夹，然后点击 Open 按钮。 :::hint{type="info"} 📘 **Note** 如果是第一次使用，请先按照 [1. 安装](docId\:Dg0Mghu21eFsgB39C40ps) 安装 Buildit Unity 插件，并熟悉基本操作。 ::: :::: :::WorkflowBlockItem 打开 Buildit 插件项目后，在顶部选择 ZEPETO > Buildit Plugin Package Manager > 2D World。 ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/Vpgq8BeKVviYZbckASkvV-20260114-134122.png) ::: :::WorkflowBlockItem 点击 Import 导入所有组件。 ::Image[]{src="https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/unXhJm53c_yVMO478CNiw_1-3.png" size="78" width="2880" height="4864" position="center" darkWidth="2880" darkHeight="4864" showCaption="false"} ::: :::WorkflowBlockItem 完成第 3 步后，将生成 Assets > Zepeto 2D World 文件夹。 ::Image[]{src="https://app.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/whStBCTgCnRb1PrJB31dZ-20251022-081617.png" size="80" width="423" height="306" position="center" darkWidth="423" darkHeight="306" showCaption="false"} ::: :::WorkflowBlockItem 双击文件夹中的 2DWorldScene 文件将其打开。 ::: :::WorkflowBlockItem 在顶部登录账号后，将多人服务器设为 On，然后点击 Play 按钮即可游玩 2D 世界。 ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/onxYvSoVp29LpEC6BmSqj_1-6.png) ::: ::::: # 2D 世界功能 ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/VvwTehfn0Ozzf8qwFcE-3_2-0.png) - 可使用 Buildit 插件的 **基础模块功能**。 - 可使用语音聊天、快捷聊天、动作、截图/屏幕录制、衣橱、BGM 功能。 - 提供 **横屏/竖屏模式切换功能**。 - 可更改 **加载画面**。 - 可更改地图 **背景**。 - 可根据需要添加任意数量的地图，并通过 **传送门** 连接，制作富有创意的空间。 :::hint{type="success"} 地图数量没有限制，但在发布到 Zepeto Studio 时，构建文件容量需在 1GB 以内，并且数值不得超出优化指南范围。 ::: - 可更改 **背景音乐（BGM）**。 - 由于是 2D 世界，不推荐放置 3D 对象。 - 目标是仅通过背景与传送门连接，快速、轻松地创建世界。 # 创建 2D 世界 ## 2DWorldScene 基本构成 - 默认包含加载画面以及通过传送门连接的 2 个地图示例。 - 为了便于操作，请点击 **Unity 编辑器 Scene 的 2D 菜单**。 ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/Q74PwZ03J1-vLop07Ydy3_2-0-1.png) ## 加载画面 ::::WorkflowBlock :::WorkflowBlockItem - 在 Inspector 中勾选激活 Managers > LoadingScreen 对象即可使用加载画面功能。 - 将作为加载图像使用的图片拖入 Assets，将 Texture Type 更改为 Sprite(2D and UI)，然后点击 Apply。 ::Image[]{src="https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/Z6O1xlXVNWzwg9RaF9Z6z_2-1.png" size="84" width="507" height="567" position="center" darkWidth="507" darkHeight="567" showCaption="false"} ::: :::WorkflowBlockItem 选择 Managers > LoadingScreen > Image。 ::: :::WorkflowBlockItem 将刚添加的加载图片拖入 Image 对象的 SourceImage 属性中，即可更换加载图片。 ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/UsW_o84ZJOqF6y7hY3qNo_2-3.png) ::: :::WorkflowBlockItem 选择 Managers > LoadingScreen > Text(TMP)。 ::: :::WorkflowBlockItem 在 TextMeshPro-Text(UI) 中输入加载文本。如果不需要文本，也可以留空。 ::: :::WorkflowBlockItem Managers > LoadingScreen > Delay After Ready 表示 Zepeto 角色生成后加载画面继续显示的时间（秒）。默认值为 **0.1**。 ::: :::: ## 更改角色移动速度 - **Managers**：可调整角色的移动速度。 - **Run Speed**：调整角色奔跑速度。 - **Walk Speed**：调整角色行走速度。 :::hint{type="danger"} **跳跃功能** 在 2D 世界中 **无法使用。** ::: # 编辑地图 可以更改地图背景图片、传送门、角色可移动区域、BGM 以及地图标题。 ## 更改背景图片 :::::WorkflowBlock :::WorkflowBlockItem 在 Hierarchy 中选择 ZEPETO2D\_BG 对象。 - **Sprite Renderer > Sprite：** 拖入所需图片即可更换背景。 - **Rebuild Borders2D：** 更换图片后 **必须** 点击此按钮。系统会根据图片尺寸生成作为可移动区域外框的 **BoxCollider2d**。 ::Image[]{src="https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/ZJWpQHvGkSLofQrP0ZYz7_2-editingmap1.png" size="92" width="2880" height="4554" position="center" darkWidth="2880" darkHeight="4554" showCaption="false"} ::: :::WorkflowBlockItem 使用 Move 工具移动 Border2D-Top，使其位于图片中的地面边界位置。 ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/27rDeh1DwieFge7mpNGFW_screenshot-2025-10-17-at-105523-am.png) 其余 Border 无需单独修改。 ::: ::::WorkflowBlockItem 地图尺寸会根据原始图片大小生成，但可以通过输入 Transform 的 Scale 值调整为所需大小。 ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/jqM-VTO3tmv39gDxaOYDC_2-editingmap3.png) :::hint{type="success"} **推荐原始图片尺寸：** 3400×1530px 这是可横向滚动的 2D 背景图片尺寸。即使与推荐尺寸不同，也不会影响世界制作。 ::: :::: ::::: ## 连接传送门 ::::WorkflowBlock :::WorkflowBlockItem 在 Hierarchy 中选择 ZEPETO2D\_BG 对象。 - **Linked Portal Obj：** 当角色进入传送门的 Box Collider 区域时，传送门将被激活，点击按钮即可移动到连接的目的地。请拖拽目标传送门进行添加。 - **Interact Button Text：** 显示在传送门按钮上的文本。若未连接传送门，则不会显示文本。 - **Show Map Title Toast：** 勾选后，在通过传送门移动时会显示输入的 Map Title。 - **Map Title：** 名称文本。 ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/Rt3Ss8ixcNUZTQcNcNHtV_screenshot-2025-10-22-at-64026-pm.png) ::: :::WorkflowBlockItem 可通过 ZEPETO2D\_BG > Create Portal2D(Child) 创建额外的传送门。 ::Image[]{src="https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/jfcRsy0Pap2pbb8EXKIqa_2-connectpt-2.png" size="88" width="2880" height="4554" position="center" darkWidth="2880" darkHeight="4554" showCaption="false"} ::: :::: ## 更改 BGM ::::WorkflowBlock :::WorkflowBlockItem 在 Hierarchy 中选择 ZEPETO2D\_BG > BGM 对象。 ::: :::WorkflowBlockItem 将想要的音乐拖入 BGM Audio Source 即可更换。 可为每个地图设置不同的 BGM。 ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/oMIZTGwqEuogAG8W-G9sO_bgm-2.png) ::: :::: ## 修改地图标题 UI - 可通过修改 Managers > UIToolbar > MapTitleToast 的 Rect Transform 位置值来调整标题显示位置。 - 在 Managers > UIToolbar > MapTilteToast>Background 中可修改 Color 或使用自定义图片，并通过修改 Rect Transform 值调整背景区域大小。 - 选择 Managers > UIToolbar > MapTilteToast>Background>Text(TMP)，通过 Font Size 和 Vertex Color 更改文字颜色。 ## 添加地图 - 点击顶部的 ZEPETO 2D > Create BG 可添加新地图。 ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/w-39qN0Zq0Uk3nsFQAMwm_.png) - 新添加的地图也请按照相同方式更换图片并连接传送门。 # 添加 NPC 在 2D 世界中，您可以使用**能够进行对话的 NPC**。 ::Image[]{src="https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/AAqzSC_KUBis0tNVlC4lF_image.png" size="60" width="394" height="417" position="center" darkWidth="394" darkHeight="417" showCaption="false"} :::::WorkflowBlock :::WorkflowBlockItem 您可以修改示例场景中布置的 NPC，或者点击顶部的 **ZEPETO 2D > Create ZepetoNPC** 来添加 ZEPETO NPC。 ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/KO4lJbKaj7xRKqx8i7EjI_image.png) ::: ::::WorkflowBlockItem 在 **Hierarchy** 中选中生成的 ZepetoNPC。 - **Zepeto ID** : 输入要使用的 ZEPETO 账号 ID。 - **Npc Name** : 输入将在屏幕上显示的 NPC 名称。 - **Dialogue ID** : 输入要使用的 Dialogue ID。 :::hint{type="info" indent="2"} **Dialogue ID** 是通过 **NPC Dialogue Editor** 创建的 Dialogue 的唯一值。 ::Image[]{src="https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/n3JFM86L8byi-NOqWzpuR_screenshot-2026-03-30-at-34852apm.png" size="74" width="382" height="470" position="center" darkWidth="382" darkHeight="470" showCaption="false"} ::: :::: ::::: :::hint{type="info"} 📘 **Note** 有关 Dialogue 设置的内容，请参考 [ 设置 NPC Dialogue](docId\:cQva_7zbfiPnMVlpY46Y5)。 ::: # 添加 Sprite NPC ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/_j-Y7mNfZ9CUlKzjAvZhV_image.png) 使用 **Sprite NPC** 功能，可以将您导入的自定义图像制作成 NPC。 ::::WorkflowBlock :::WorkflowBlockItem 请选择顶部的 **ZEPETO 2D > Create SpriteNPC**。 ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/phf1h1qjSjEwJXiFrMQ-g_image.png) ::: :::WorkflowBlockItem 在 **Hierarchy** 中选中生成的 SpriteNPC。 - **Sprite** : 可以设置要作为 NPC 使用的 Sprite。 ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/197Jn67lR-iWQvcvifjWj_image.png) ::: :::WorkflowBlockItem 请将想作为 NPC 使用的图像放入 **Project** 面板中。 - 请使用背景透明的 PNG 格式图像。 - 推荐图像尺寸为 720\*720。 - 即使不是推荐尺寸，也可以在 Unity 中通过测试轻松调整大小。 ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/rerV7n-oASPHaDCiD8atN_image.png) ::: :::WorkflowBlockItem 选中导入的图像，将 **Inspector > Texture Type** 更改为 **Sprite (2D and UI)**。 - 更改后点击下方的 Apply 应用设置。 ::Image[]{src="https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/TQ-g928q-9EbLZV5By860_image.png" size="82" width="800" height="1850" position="center" darkWidth="800" darkHeight="1850" showCaption="false"} ::: :::WorkflowBlockItem 将 Sprite NPC 的 **Inspector > Sprite Renderer > Sprite** 更改为您刚导入的 Sprite。 - 如果想调整 NPC 的大小，尝试更改 **Transform > Scale > X, Y** 的值。 - 使用 **Inspector > Sprite Renderer > Flip** 可以沿 X、Y 方向翻转图像。 ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/YHJuJ9kq2LrQCXFhOQt8V_image.png) ::: :::WorkflowBlockItem 点击 **Play**，检查使用自定义图像制作的 Sprite NPC 是否显示正常。 - 如果需要调整与 NPC 的交互距离，请选中要更改的 Sprite NPC，并调整 **Inspector > Box Collider > Size > X, Y, Z 的值**。 ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/dlFo4qJrXbXahnyGWP21Y_image.png) ::: :::: :::hint{type="danger"} 放置时请注意**不要让 NPC 与传送门或其他 NPC 重叠**。 ::: :::hint{type="info"} 📘 **Note** 有关 Dialogue 设置的内容，请参考 [ 设置 NPC Dialogue](docId\:cQva_7zbfiPnMVlpY46Y5)。 ::: # 放置 AD Teleport 2D 放置 **AD Teleport 2D** 对象，即可在 2D 世界中获得收益。 - 通过仅在用户观看广告后才会生效的 Teleport，在自己创建的世界中同时获得乐趣与收益。 - AD Teleport2D 对象是与现有 Advertisement 对象相同机制的 2D 世界专用对象。 :::::WorkflowBlock :::WorkflowBlockItem 在 **Build it Asset Browser > 2D** 中选择 **AdTeleport2D** 对象。 ::Image[]{src="https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/AGkiZvouGRRZ3SEF5NXcg_image.png" size="70" width="389" height="591" position="center" darkWidth="389" darkHeight="591" showCaption="false"} ::: :::WorkflowBlockItem 在 **Scene** 中拖拽到想要的位置进行放置。 ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/GDy5-l-8m_hY9xkHLhe5t-20260115-023126.png) ::: :::WorkflowBlockItem 在 **Hierachy** 中，将放置的 AdTeleport2D 对象放入 **目标 BG 的子级** 下。 ::Image[]{src="https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/c2xGSSZx60PKuODjUd3GV_image.png" size="58" width="802" height="1592" position="center" darkWidth="802" darkHeight="1592" showCaption="false"} ::: ::::WorkflowBlockItem 在想要作为到达点的位置放置 **AdTeleport2D > Destination** 对象。 ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/AE04kc705hpH5AmOCz-9p_image.png) :::hint{type="success"} - 若想将到达点放置在其他 BG 中，可先在该 BG 下创建一个空的 GameObject，然后将该 **空 GameObject** 放入 **AdTeleport2D > Inspector > Zepeto Script > Destination** 作为 Destination 使用。 ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/Uy_ut_6pz8dv9YNv-PBuU_image.png) ::: :::: ::::: :::hint{type="danger"} **AdTeleport2D 对象的测试** 无法在 Unity 中进行，需在移动设备上测试。可通过将构建文件上传至 **Zepeto Studio** 来完成。 [4. 测试你的世界](docId:35VybCiTmnZ73VsGaZKUC) ::: # 2D 世界制作技巧 - 建议将每个地图的 z 坐标固定为默认值 100，并通过调整 x、y 值来进行布局。 - 若在 Scene 中地图重叠，多人模式下可能会看到其他地图的玩家，因此需要像下图示例一样 **保持地图之间的间距**。 ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/XP4tho7iFWgsH4DE-7cVx_final-tip.png) - 也可以使用 AI 生成的图片。 - 发布到 Zepeto Studio 时，请在世界说明中注明为 AI 图片。 ::::hint{type="success"} 💡 **若想生成具有空间感的 AI 图片，可尝试使用以下提示词。** :::BlockQuote \[空间概念]的场景。 构图宽广且富有纵深感，镜头视角自然延伸至空间内部。强调视线汇聚于中心或某一点的透视感（消失点）。通过地面的反射光、空气中的雾气或光束、阴影对比来表现真实的空间深度。立体的光照与写实的材质相结合，使空间氛围生动呈现。电影感构图与写实光照，细节丰富的材质表现。高分辨率、深度透视、前后景自然虚化的对焦效果。 ::: :::: - 仅通过添加图片、连接传送门和 BGM，就来轻松打造属于你自己的空间吧！