--- title: 8. Creating a 2D World slug: world-sdk-guide/3e4z-8 docTags: createdAt: 2025-10-22T07:24:00.194Z --- **We’re introducing a 2D World that lets you build worlds faster and more easily.** With only your own background image and portal connections, you can quickly and easily create and release a world. You can install and use the 2D World package in your existing Buildit Unity plugin project! # How to apply :::::WorkflowBlock ::::WorkflowBlockItem In Unity Hub, select the Buildit plugin folder and click the Open button. :::hint{type="info"} 📘 **Note** If this is your first time, follow [1. Installation](docId\:ZHTKs8qA9phgO1plx0wOx) to install the Buildit Unity plugin first and learn the basic controls. ::: :::: :::WorkflowBlockItem Once the Buildit plugin project is open, choose ZEPETO > Buildit at the top, then select Plugin Package Manager > 2D World. ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/Vpgq8BeKVviYZbckASkvV-20260114-134122.png) ::: :::WorkflowBlockItem Click Import to bring in all components. ::Image[]{src="https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/B6ZiT1SuuNp-5ImzLhqer_1-3.png" size="78" width="2880" height="4864" position="center" darkWidth="2880" darkHeight="4864" showCaption="false"} ::: :::WorkflowBlockItem After completing step 3, the Assets > Zepeto 2D World folder has been created. ::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 Double-click the 2DWorldScene file in the folder to open it. ::: :::WorkflowBlockItem After logging into your account at the top, turn the multiplayer server On, and press the Play button to play the 2D World. ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/p0XA0XSyv5qsp8JzbS6PV_1-6.png) ::: ::::: # 2D World features ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/-zA5MoPc3YHk3lXjfh3nV_2-0.png) - You can use the Buildit plugin’s **basic module features**. - You can use voice chat, quick chat, gestures, screenshots/screen recording, wardrobe, and BGM features. - **Landscape/portrait mode switching** is provided. - You can change the **loading screen**. - You can change the map **background**. - You can add as many maps as you want and connect them with **portals** to create a creative space. :::hint{type="success"} There is no limit to the number of maps, but when releasing to Zepeto Studio, the build file size must be within 1GB and the values must stay within the optimization guidelines. ::: - You can change the **background music (BGM)**. - Since this is a 2D world, placing 3D objects doesn’t fit well and is not recommended. - The goal is to make world creation fast and easy with only backgrounds and portal connections. # Creating a 2D World ## 2DWorldScene default setup - By default, an example is included with a loading screen and two maps connected by a portal. - For convenience while working, please click the **2D menu in the Unity Editor Scene.** ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/QXbnoA03TMKjrbMz1W932_2-0-1.png) ## Loading screen ::::WorkflowBlock :::WorkflowBlockItem - If you enable (check) the Managers > LoadingScreen object in the Inspector, you can use the loading screen feature. - Drag the image you want to use as the loading image into Assets, change Texture Type to Sprite(2D and UI), then click Apply. ::Image[]{src="https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/I76Ua97s05pITXR9XMs3h_2-1.png" size="84" width="507" height="567" position="center" darkWidth="507" darkHeight="567" showCaption="false"} ::: :::WorkflowBlockItem Select Managers > LoadingScreen > Image. ::: :::WorkflowBlockItem Drag the loading image you just added into the SourceImage property of the Image object to change the loading image. ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/Wzno6or6CJEKNDLnYUW21_2-3.png) ::: :::WorkflowBlockItem Select Managers > LoadingScreen > Text(TMP). ::: :::WorkflowBlockItem Enter the loading text in TextMeshPro-Text(UI). If you don’t want text, you can leave it blank. ::: :::WorkflowBlockItem Managers > LoadingScreen > Delay After Ready indicates how long (seconds) the loading screen remains after the Zepeto character is created. The default value is **0.1**. ::: :::: ## Changing character movement speed - **Managers** : You can adjust the character’s movement speed. - **Run Speed** : Adjusts the character’s running speed. - **Walk Speed** : Adjusts the character’s walking speed. :::hint{type="danger"} The **jump** feature **cannot be used** in a 2D world. ::: # Editing maps You can change the map background image, portals, character walkable area, BGM, and the map title. ## Changing the background image :::::WorkflowBlock :::WorkflowBlockItem In the Hierarchy, select the ZEPETO2D\_BG object. - **Sprite Renderer > Sprite :** Drag the image you want to change the background. - **Rebuild Borders2D :** If you changed the image, you **must** click this button. It will **generate a BoxCollider2d** as the walkable area border to match the image size. ::Image[]{src="https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/7FoVZ63SgenYMi8xLbF4K_2-editingmap1.png" size="92" width="2880" height="4554" position="center" darkWidth="2880" darkHeight="4554" showCaption="false"} ::: :::WorkflowBlockItem Move Border2D-Top with the Move tool and position it at the floor boundary area in the image. ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/27rDeh1DwieFge7mpNGFW_screenshot-2025-10-17-at-105523-am.png) You don’t need to modify the other Borders separately. ::: ::::WorkflowBlockItem The map size is created to match the original image size, but you can adjust it to the size you want by entering a Scale value in Transform. ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/d537xzDJN979wJHnCxDRB_2-editingmap3.png) :::hint{type="success"} **Recommended original image size :** 3400×1530px This is a horizontally scrolling 2D background image size. Even if your image size differs from the recommended size, it won’t prevent you from creating the world. ::: :::: ::::: ## Connecting portals ::::WorkflowBlock :::WorkflowBlockItem In the Hierarchy, select the ZEPETO2D\_BG object. - **Linked Portal Obj :** When the character enters the portal’s Box Collider area, the portal activates, and clicking the button moves to the linked destination. Drag and add the destination portal. - **Interact Button Text :** The text shown on the portal button. If there is no linked portal, the text will not appear. - **Show Map Title Toast :** If checked, the Map Title you entered will appear when moving via portal. - **Map Title :** Name text. ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/Rt3Ss8ixcNUZTQcNcNHtV_screenshot-2025-10-22-at-64026-pm.png) ::: :::WorkflowBlockItem You can create additional portals via ZEPETO2D\_BG > Create Portal2D(Child). ::Image[]{src="https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/N9AqYG9E48odMNvYhcPXw_2-connectpt-2.png" size="88" width="2880" height="4554" position="center" darkWidth="2880" darkHeight="4554" showCaption="false"} ::: :::: ## Changing BGM ::::WorkflowBlock :::WorkflowBlockItem In the Hierarchy, select the ZEPETO2D\_BG > BGM object. ::: :::WorkflowBlockItem Drag your desired music into the BGM Audio Source to change it. You can set different BGM for each map. ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/nHN5C1IFD113vXllNE2Rh_bgm-2.png) ::: :::: ## Editing the map title UI - You can change where the title appears by adjusting the Rect Transform position values of Managers > UIToolbar > MapTitleToast. - In Managers > UIToolbar > MapTilteToast>Background, you can change Color or use a custom image, and adjust the background area size by editing the Rect Transform values. - Select Managers > UIToolbar > MapTilteToast>Background>Text(TMP) to change the text color using Font Size and Vertex Color. ## Adding maps - Click ZEPETO 2D > Create BG at the top to add a new map. ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/w-39qN0Zq0Uk3nsFQAMwm_.png) - For newly added maps, change the image and connect portals in the same way. # Adding NPCs In a 2D world, you can use **NPCs you can talk with**. ::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 You can modify the NPC placed in the sample scene, or click **ZEPETO 2D > Create ZepetoNPC** from the top menu to add a Zepeto NPC. ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/KO4lJbKaj7xRKqx8i7EjI_image.png) ::: ::::WorkflowBlockItem In the **Hierarchy**, select the created ZepetoNPC. - **Zepeto ID** : Enter the ZEPETO account ID to use. - **Npc Name** : Enter the NPC's name to be displayed on the screen. - **Dialogue ID** : Enter the Dialogue ID to use. :::hint{type="info" indent="2"} The **Dialogue ID** is a unique value for a Dialogue created with the **NPC Dialogue Editor**. ::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** For more details on dialogue settings, please refer to [Setting up NPC Dialogue](docId\:V8odcg5MeOErjSTeP0P5J). ::: # Adding a Sprite NPC ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/_j-Y7mNfZ9CUlKzjAvZhV_image.png) With the **Sprite NPC** feature, you can turn any custom image you import into an NPC. ::::WorkflowBlock :::WorkflowBlockItem Select **ZEPETO 2D > Create SpriteNPC** from the top menu. ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/phf1h1qjSjEwJXiFrMQ-g_image.png) ::: :::WorkflowBlockItem In the **Hierarchy**, select the created SpriteNPC. - **Sprite**: You can set the Sprite to be used as the NPC. ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/197Jn67lR-iWQvcvifjWj_image.png) ::: :::WorkflowBlockItem Add the image you want to use as an NPC into the **Project** panel. - Please use a PNG image with a transparent background. - Recommended image size: 720\*720 - Even if it's not the recommended size, you can easily adjust the scale in Unity while testing. ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/rerV7n-oASPHaDCiD8atN_image.png) ::: :::WorkflowBlockItem Select the imported image and change its **Inspector > Texture Type** to **Sprite (2D and UI)**. - Click Apply at the bottom to save your changes. ::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 Change the Sprite NPC’s **Inspector > Sprite Renderer > Sprite** to your newly imported Sprite. - If you want to adjust the NPC's size, try tweaking the **Transform > Scale > X, Y** values. - You can flip the image horizontally or vertically using **Inspector > Sprite Renderer > Flip**. ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/YHJuJ9kq2LrQCXFhOQt8V_image.png) ::: :::WorkflowBlockItem Press **Play** to verify that your custom image Sprite NPC displays correctly. - If you need to adjust the interaction distance, select the Sprite NPC and tweak the **Inspector > Box Collider > Size > X, Y, Z values**. ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/dlFo4qJrXbXahnyGWP21Y_image.png) ::: :::: :::hint{type="danger"} Please make sure to **place NPCs so they do not overlap** with portals or other NPCs. ::: :::hint{type="info"} 📘 **Note** For more details on dialogue settings, please refer to [Setting up NPC Dialogue](docId\:V8odcg5MeOErjSTeP0P5J). ::: # Placing AD Teleport 2D You can also earn revenue in a 2D world by placing an **AD Teleport 2D** object. - Try earning revenue along with fun in your own world through a Teleport that only works when users watch an ad. - The AD Teleport2D object is a 2D world-specific object that works exactly the same as the existing Advertisement object. :::::WorkflowBlock :::WorkflowBlockItem Select the **AdTeleport2D** object in **Build it Asset Browser > 2D**. ::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 Drag and place it in the desired position in the **Scene**. ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/GDy5-l-8m_hY9xkHLhe5t-20260115-023126.png) ::: :::WorkflowBlockItem In the **Hierarchy**, place the AdTeleport2D object you want to use **under (as a child of) the BG** where you want it. ::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 Place the **AdTeleport2D > Destination** object at the position you want to use as the arrival point. ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/AE04kc705hpH5AmOCz-9p_image.png) :::hint{type="success"} - If you want to place the arrival point in a different BG, place an empty GameObject under that BG, then put the created **empty GameObject** into **AdTeleport2D > Inspector > Zepeto Script > Destination** to use it as the Destination. ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/Uy_ut_6pz8dv9YNv-PBuU_image.png) ::: :::: ::::: :::hint{type="danger"} Testing the **AdTeleport2D object** is not possible in Unity and must be done on mobile. You can do this by registering the build file in **Zepeto Studio**. [4. Test Your World](docId\:OlXXMKN3Q1CTEMgx-wVW3) ::: # 2D world production tips - We recommend keeping each map’s z coordinate fixed at the default value of 100 and adjusting x, y values to position them. - If maps overlap in the Scene, in multiplayer you may see players from other maps on screen, so you need to leave **space between maps** as shown below. - You may use AI-generated images. - When releasing to Zepeto Studio, please specify in the world description that the image is AI-generated. ::::hint{type="success"} 💡 **To generate an AI image with a sense of depth and space, try using the following prompt.** :::BlockQuote A scene of \[space concept]. With a wide, deep-feeling composition, the camera viewpoint naturally leads inward through the space. A composition emphasizing perspective (vanishing point) where the viewer’s gaze gathers toward the center or one point. Express realistic spatial depth through reflected light on the floor, haze or light beams in the air, and strong shadow contrast. Dimensional lighting and realistic material textures combine to vividly convey the atmosphere of the space. Cinematic composition and realistic lighting, detailed texture expression. High resolution, deep perspective, and a focus effect that naturally blurs from foreground to background. ::: :::: - Try creating your own space easily with just image additions, portal connections, and background music!