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 1 installation 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 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 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 the dialogue id is a unique value for a dialogue created with the npc dialogue editor 📘 note for more details on dialogue settings, please refer to setting up npc dialogue docid\ v8odcg5meoerjstep0p5j adding a sprite npc with the sprite npc feature, you can turn any custom image you import into an npc select zepeto 2d > create spritenpc from the top menu 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 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 select the imported image and change its inspector > texture type to sprite (2d and ui) click apply at the bottom to save your changes 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 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 please make sure to place npcs so they do not overlap with portals or other npcs 📘 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 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 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 💡 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!