8. Creating a 2D World

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 in unity hub, select the buildit plugin folder and click the open button 📘 note if this is your first time, follow docid\ zhtks8qa9phgo1plx0wox to install the buildit unity plugin first and learn the basic controls once the buildit plugin project is open, choose zepeto > buildit at the top, then select plugin package manager > 2d world click import to bring in all components after completing step 3, the assets > zepeto 2d world folder has been created double click the 2dworldscene file in the folder to open it after logging into your account at the top, turn the multiplayer server on, and press the play button to play the 2d world 2d world features 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 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 loading screen 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 select managers > loadingscreen > image drag the loading image you just added into the sourceimage property of the image object to change the loading image select managers > loadingscreen > text(tmp) enter the loading text in textmeshpro text(ui) if you don’t want text, you can leave it blank 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 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 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 move border2d top with the move tool and position it at the floor boundary area in the image you don’t need to modify the other borders separately 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 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 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 you can create additional portals via zepeto2d bg > create portal2d(child) changing bgm in the hierarchy, select the zepeto2d bg > bgm object drag your desired music into the bgm audio source to change it you can set different bgm for each map 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 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 edit the npc placed in the sample scene, or click zepeto 2d > create zepetonpc at the top to add a zepeto npc in the hierarchy , select the created zepetonpc zepeto id enter the zepeto account id to use npc name display name of the npc dialogue id enter the dialogue id to use dialogue id is the unique value of a dialogue created with the npc dialogue editor for details, check setting up npc dialogue below adding a sprite npc with the sprite npc feature, you can turn an imported image into an npc select zepeto 2d > create spritenpc at the top in the hierarchy , select the created spritenpc sprite you can set the sprite to be used as the npc add the image you want to use as an npc to the project use a png image with no background recommended image size 720 720 even if it’s not the recommended size, you can adjust the size in unity through testing select the imported image and change inspector > texture type > sprite (2d and ui) after changing, click apply at the bottom to apply the change change the sprite npc’s inspector > sprite renderer > sprite to the imported sprite if you want to change the npc’s size, try changing transform > scale > x, y values you can flip the image in the x and y directions using inspector > sprite renderer > flip press play to verify that the sprite npc made with your custom image displays properly if you want to adjust the interaction distance, select the sprite npc you want to change and adjust inspector > box collider > size > x, y, z values place npcs so they do not overlap with portals or other npcs setting up npc dialogue by utilizing the new npc dialogue system , you can add much more fun and lively npcs to your own world! going beyond simple short answer conversations, you can implement dialogue continuity where the story continues based on the user's choices, and build an immersive dialogue system that communicates with global users around the world through localization this system consists of three core elements to help creators easily configure and apply dialogue dialogue editor , dialogue helper , and npc (zepetonpc component) 1\ utilizing dialogue helper the dialogue helper is a central control point that helps create dialogues and assign npcs select zepeto 2d > npc dialogue helper from the top menu to open the window npc field displays the currently selected npc in the scene it automatically updates when you select a gameobject with the zepetonpc component (if it doesn't update automatically, click refresh ) dialogue field shows the currently assigned dialogue, and when clicked, a selection window appears where you can assign a dialogue asset (node graph asset) export button converts and extracts data so that it can be used in the 2d world runtime after configuring the dialogue you must click this button after modifying the asset dialogue folder opens the folder where all dialogue assets are stored create new creates a new dialogue asset 2\ utilizing dialogue graph editor (node editor) when you click create new in the dialogue helper or open a dialogue asset, the dialogue graph editor will appear this editor is a tool that allows you to intuitively design complex dialogue flows through visual node connections core node types start node the entry point where the dialogue begins (there must be exactly one per graph ) npc node the core node where you enter the npc's lines and the player's responses (choices) what the npc says write the dialogue the npc will output on the screen answer options you can add multiple answers the player can choose from to branch the dialogue end node represents the point where the dialogue ends when the player chooses an option connected to this node, the dialogue terminates editing and connecting the graph you can create and connect nodes on the dialogue canvas using the following methods you can right click on an empty space in the canvas to create a new node ( create node ), or copy and delete existing nodes drag the output port on the right side of the choices (answer options) and connect it to the input port of the next node to complete the dialogue flow tips you can navigate the screen using the following methods drag while holding down the mouse wheel option (mac) / windows key + left mouse button drag localization support settings inspector window settings click the created dialogue asset (node graph asset) and look at the inspector window to check the supported languages (english, korean, japanese, etc ) utilizing editor toolbar you can directly enter the translated text for each language by changing the language from the language selector at the top left of the editor window 3\ creating a new npc dialogue creating a dialogue click create new in the dialogue helper window in the dialogue editor that automatically opens, freely edit the nodes (npc lines) and player responses (choices) to configure the dialogue nodes assigning an npc click the npc object to add the dialogue to in the hierarchy window check if the object has a zepetonpc component in the inspector window assign the npc to apply the dialogue to in the 'npc' field of the npc dialogue helper assigning dialogue and export click the dialogue field in the dialogue helper and link the dialogue asset you just created once applied, click the export button so it can run in game final inspector check verify that the settings are correct in the npc's inspector window ( zepetonpc component) npc confirm that it is the correct npc asset dialogue id check that the string of the dialogue id matches the selected dialogue asset tips you can easily reuse the same npc dialogue asset for multiple npcs to ensure your dialogue changes are properly reflected in the actual game, please export frequently after modifying the dialogue faq when the dialogue doesn't appear on screen check if you proceeded with the export, and verify that the dialogue panel and dialogue id are correctly entered in the inspector when the npc information doesn't change in the tool press the refresh button in the dialogue helper window, or click the npc again in the hierarchy placing ad teleport 2d place an ad teleport 2d object to earn revenue in a 2d world as well 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 the same as the existing advertisement object select the adteleport2d object in build it asset browser > 2d drag and place it in the desired position in the scene in the hierarchy , place the adteleport2d object you want to use under (as a child of) the bg where you want it place the adteleport2d > destination object at the position you want to use as the arrival point 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 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 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 💡 to generate an ai image with a sense of depth and space, try using the following prompt 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!