--- title: 8. Créer un monde 2D slug: world-sdk-guide-fr/3e4z-8 docTags: createdAt: 2025-10-22T07:24:00.194Z --- **Nous présentons un Monde 2D qui vous permet de créer des mondes plus rapidement et plus facilement.** Vous pouvez créer et lancer un monde rapidement et simplement, rien qu'avec vos propres images de fond et des connexions par portails. Il suffit d'installer le package 2D World dans votre projet Build it Unity Plugin existant pour commencer ! # Méthode d'application :::::WorkflowBlock ::::WorkflowBlockItem Dans Unity Hub, sélectionnez le dossier du plugin Build it et cliquez sur le bouton Open. :::hint{type="info"} 📘 **Note** Si c'est votre première fois, veuillez suivre le [1. Installation](docId\:K4cQ_Ef3TJsjuUKr_e19q) pour installer d'abord le plugin Build it Unity et vous familiariser avec les commandes de base. ::: :::: :::WorkflowBlockItem Une fois le projet du plugin Build it ouvert, allez dans le menu supérieur ZEPETO > Buildit Plugin Package Manager > et sélectionnez 2D World. ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/Vpgq8BeKVviYZbckASkvV-20260114-134122.png) ::: :::WorkflowBlockItem Cliquez sur Import pour importer tous les composants. ::Image[]{src="https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/O5QLPW_Cl-IQUtemS-hCH_1-3.png" size="78" width="2880" height="4864" position="center" darkWidth="2880" darkHeight="4864" showCaption="false"} ::: :::WorkflowBlockItem Une fois l'étape 3 terminée, le dossier Assets > Zepeto 2D World a été créé. ::Image[]{src="https://api.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-cliquez sur le fichier 2DWorldScene situé dans le dossier pour l'ouvrir. ::: :::WorkflowBlockItem Après vous être connecté à votre compte en haut, activez le serveur multijoueur (On) et appuyez sur le bouton Play pour tester votre monde 2D. ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/81zYbwxM_gLo8LRgaKaJc_1-6.png) ::: ::::: # Fonctionnalités du Monde 2D ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/_hcWGxYbDnYzUZiPIQeJK_2-0.png) - Vous pouvez utiliser les **fonctions modules de base** du plugin Build it. - Chat vocal, chat rapide, gestes, capture d'écran/enregistrement vidéo, garde-robe et musique de fond (BGM). - Propose une **fonction de conversion mode Paysage/Portrait**. - Possibilité de modifier l'**écran de chargement**. - Possibilité de modifier l'**arrière-plan** de la carte. - Ajoutez autant de cartes que vous le souhaitez et connectez-les avec des **portails** pour créer un espace créatif. :::hint{type="success"} Il n'y a pas de limite au nombre de cartes, mais lors de la publication sur ZEPETO Studio, la taille du fichier de build doit être inférieure à 1 Go et respecter les indicateurs du guide d'optimisation. ::: - Possibilité de modifier la **musique de fond**. - Comme il s'agit d'un monde 2D, l'ajout d'objets 3D n'est pas recommandé car cela peut paraître inadapté. - L'objectif est de créer un monde rapidement et facilement via l'arrière-plan et les connexions de portails. # Créer un monde 2D ## Configuration de base de 2DWorldScene - Par défaut, un exemple incluant un écran de chargement et deux cartes connectées par portails est fourni. - Pour faciliter votre travail, **cliquez sur le menu 2D de la Scene dans l'éditeur Unity.** ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/EWXQWiRH3HsB14U2lLB_r_2-0-1.png) ## Écran de chargement ::::WorkflowBlock :::WorkflowBlockItem - En cochant l'activation de l'objet Managers > LoadingScreen dans l'Inspector, vous pouvez utiliser la fonction d'écran de chargement. - Glissez l'image que vous souhaitez utiliser comme écran de chargement dans Assets, changez le Texture Type en Sprite (2D and UI), puis cliquez sur Apply. ::Image[]{src="https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/sdQ88p1hcHmlEhhszno-J_2-1.png" size="84" width="507" height="567" position="center" darkWidth="507" darkHeight="567" showCaption="false"} ::: :::WorkflowBlockItem Sélectionnez Managers > LoadingScreen > Image. ::: :::WorkflowBlockItem Faites glisser l'image de chargement que vous venez d'ajouter dans la propriété SourceImage de l'objet Image pour la modifier. ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/7GK0mWpoogFTsEMDxdrZw_2-3.png) ::: :::WorkflowBlockItem Sélectionnez Managers > LoadingScreen > Text(TMP). ::: :::WorkflowBlockItem Rédigez votre texte de chargement dans la section TextMeshPro-Text(UI). Si vous ne souhaitez pas de texte, vous pouvez laisser le champ vide. ::: :::WorkflowBlockItem Managers > LoadingScreen > Delay After Ready représente le temps (en secondes) pendant lequel l'écran de chargement reste affiché après la création du personnage ZEPETO. La valeur par défaut est **0.1**. ::: :::: ## Modifier la vitesse de déplacement du personnage - **Managers** : permet de régler la vitesse de déplacement du personnage. - **Run Speed** : règle la vitesse de course. - **Walk Speed** : règle la vitesse de marche. :::hint{type="danger"} La **fonction de saut** n'est **pas disponible** dans le monde 2D. ::: # Modifier la carte Vous pouvez modifier l'image de fond, les portails, la zone de déplacement du personnage, la musique de fond et le titre de la carte. ## Modifier l'image de fond :::::WorkflowBlock :::WorkflowBlockItem Sélectionnez l'objet ZEPETO2D\_BG dans la Hierarchy. - **Sprite Renderer > Sprite :** glissez l'image souhaitée pour changer le fond. - **Rebuild Borders2D :** si vous avez changé l'image, vous **devez** cliquer sur ce bouton. Il générera un **BoxCollider2d** (zone de déplacement) adapté à la taille de l'image sur les bordures extérieures. ::Image[]{src="https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/gR4CoeUx4FdCscr4ewvz6_2-editingmap1.png" size="92" width="2880" height="4554" position="center" darkWidth="2880" darkHeight="4554" showCaption="false"} ::: :::WorkflowBlockItem Déplacez le Border2D-Top avec l'outil Move pour le positionner à la limite du sol sur l'image. ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/27rDeh1DwieFge7mpNGFW_screenshot-2025-10-17-at-105523-am.png) Les autres Borders n'ont pas besoin d'être modifiés séparément. ::: ::::WorkflowBlockItem La taille de la carte est générée selon la taille de l'image originale, mais vous pouvez l'ajuster en saisissant des valeurs de Scale dans le Transform. ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/qxNG5Fho9_3mmfEwKeY-F_2-editingmap3.png) :::hint{type="success"} **Taille d'image originale recommandée :** 3400×1530px Il s'agit de la taille pour un fond 2D avec défilement horizontal. Même si votre taille diffère de celle recommandée, cela ne pose pas de problème pour la création du monde. ::: :::: ::::: ## Connecter les portails ::::WorkflowBlock :::WorkflowBlockItem Sélectionnez l'objet ZEPETO2D\_BG dans la Hierarchy. - **Linked Portal Obj :** lorsque le personnage entre dans la zone du Box Collider du portail, celui-ci s'active. En cliquant sur le bouton, le personnage est transporté vers la destination liée. Glissez le portail de destination pour l'ajouter. - **Interact Button Text :** texte qui apparaîtra sur le bouton du portail. Si aucun portail n'est lié, le texte ne s'affichera pas. - **Show Map Title Toast :** si coché, le titre de la carte (Map Title) s'affichera lors du passage du portail. - **Map Title :** le texte du nom de la carte. ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/Rt3Ss8ixcNUZTQcNcNHtV_screenshot-2025-10-22-at-64026-pm.png) ::: :::WorkflowBlockItem Vous pouvez créer des portails supplémentaires via ZEPETO2D\_BG > Create Portal2D(Child). ::Image[]{src="https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/6BlL9-1hQr5whd6LgVDd0_2-connectpt-2.png" size="88" width="2880" height="4554" position="center" darkWidth="2880" darkHeight="4554" showCaption="false"} ::: :::: ## Modifier la musique de fond (BGM) ::::WorkflowBlock :::WorkflowBlockItem Sélectionnez l'objet ZEPETO2D\_BG > BGM dans la Hierarchy. ::: :::WorkflowBlockItem Faites glisser la musique de votre choix dans le BGM Audio Source pour la modifier. Vous pouvez configurer une musique différente pour chaque carte. ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/H_n5JV0sYKO0RMmE7iIwX_bgm-2.png) ::: :::: ## Modifier l'UI du titre de la carte - Modifiez les valeurs de position du Rect Transform de Managers > UIToolbar > MapTitleToast pour ajuster l'endroit où le titre apparaît. - Dans Managers > UIToolbar > MapTilteToast > Background, vous pouvez modifier la couleur (Color) ou utiliser une image personnalisée, et ajuster le Rect Transform pour modifier la taille de la zone de fond. - Sélectionnez Managers > UIToolbar > MapTilteToast > Background > Text(TMP) pour changer la Font Size (taille de police) et la Vertex Color (couleur du texte). ## Ajouter une carte - Cliquez sur ZEPETO 2D > Create BG en haut de l'écran pour ajouter une nouvelle carte. ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/w-39qN0Zq0Uk3nsFQAMwm_.png) - Pour la nouvelle carte ajoutée, modifiez l'image et connectez les portails de la même manière. # Ajouter un NPC Dans un monde 2D, vous pouvez utiliser des **NPC avec lesquels vous pouvez discuter**. ::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 Vous pouvez modifier le NPC placé dans la scène de base ou cliquer sur **ZEPETO 2D > Create ZepetoNPC** dans le menu supérieur pour ajouter un Zepeto NPC. ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/KO4lJbKaj7xRKqx8i7EjI_image.png) ::: ::::WorkflowBlockItem Dans la **Hierarchy**, sélectionnez le ZepetoNPC créé. - **Zepeto ID** : Entrez l'ID du compte ZEPETO à utiliser. - **Npc Name** : Entrez le nom du NPC à afficher à l'écran. - **Dialogue ID** : Entrez le Dialogue ID à utiliser. :::hint{type="info"} Le **Dialogue ID** est une valeur unique pour un Dialogue créé avec le **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** Pour plus de détails sur les paramètres de dialogue, veuillez consulter la section [Configurer les dialogues des NPC](docId\:M3GK6jESzFTN0TOqf_J8A). ::: # Ajouter un Sprite NPC ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/_j-Y7mNfZ9CUlKzjAvZhV_image.png) Avec la fonctionnalité **Sprite NPC**, vous pouvez transformer n'importe quelle image personnalisée importée en NPC. ::::WorkflowBlock :::WorkflowBlockItem Sélectionnez **ZEPETO 2D > Create SpriteNPC** dans le menu supérieur. ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/phf1h1qjSjEwJXiFrMQ-g_image.png) ::: :::WorkflowBlockItem Dans la **Hierarchy**, sélectionnez le SpriteNPC créé. - **Sprite** : Vous pouvez définir le Sprite qui sera utilisé comme NPC. ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/197Jn67lR-iWQvcvifjWj_image.png) ::: :::WorkflowBlockItem Ajoutez l'image que vous souhaitez utiliser comme NPC dans le panneau **Project**. - Veuillez utiliser une image PNG avec un arrière-plan transparent. - Taille d'image recommandée : 720\*720 - Même si ce n'est pas la taille recommandée, vous pourrez facilement ajuster sa taille dans Unity lors de vos tests. ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/rerV7n-oASPHaDCiD8atN_image.png) ::: :::WorkflowBlockItem Sélectionnez l'image importée et changez son **Inspector > Texture Type** en **Sprite (2D and UI)**. - Cliquez sur Apply en bas pour appliquer vos modifications. ::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 Modifiez l'**Inspector > Sprite Renderer > Sprite** du Sprite NPC par le Sprite que vous venez d'importer. - Si vous souhaitez ajuster la taille du NPC, essayez de modifier les valeurs de **Transform > Scale > X, Y**. - Vous pouvez retourner l'image horizontalement ou verticalement en utilisant **Inspector > Sprite Renderer > Flip**. ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/YHJuJ9kq2LrQCXFhOQt8V_image.png) ::: :::WorkflowBlockItem Appuyez sur **Play** pour vérifier que votre Sprite NPC personnalisé s'affiche correctement. - Si vous avez besoin d'ajuster la distance d'interaction, sélectionnez le Sprite NPC à modifier et ajustez les valeurs de **Inspector > Box Collider > Size > X, Y, Z**. ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/dlFo4qJrXbXahnyGWP21Y_image.png) ::: :::: :::hint{type="danger"} Assurez-vous de **placer les NPC de manière à ce qu'ils ne se chevauchent pas** avec des portails ou d'autres NPC. ::: :::hint{type="info"} 📘 **Note** Pour plus de détails sur les paramètres de dialogue, veuillez consulter la section [Configurer les dialogues des NPC](docId\:M3GK6jESzFTN0TOqf_J8A). ::: # Placer un AD Teleport 2D Vous pouvez générer des revenus dans votre monde 2D en plaçant des objets **AD Teleport 2D**. - Proposez un téléporteur qui ne fonctionne qu'après le visionnage d'une publicité par l'utilisateur pour allier divertissement et revenus. - L'objet AD Teleport2D fonctionne de la même manière que l'objet Advertisement classique, mais il est exclusivement réservé au monde 2D. :::::WorkflowBlock :::WorkflowBlockItem Sélectionnez l'objet **AdTeleport2D** dans **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 Glissez-le à l'endroit souhaité dans la **Scene**. ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/GDy5-l-8m_hY9xkHLhe5t-20260115-023126.png) ::: :::WorkflowBlockItem Dans la **Hierarchy**, placez l'objet AdTeleport2D en tant que **sous-élément du fond (BG)** souhaité. ::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 Placez l'objet **AdTeleport2D > Destination** à l'endroit où vous souhaitez que l'utilisateur arrive. ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/AE04kc705hpH5AmOCz-9p_image.png) :::hint{type="success"} - Si vous souhaitez placer la destination sur un autre fond (BG), créez un GameObject vide sous ce fond, puis assignez-le dans **AdTeleport2D > Inspector > Zepeto Script > Destination**. ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/Uy_ut_6pz8dv9YNv-PBuU_image.png) ::: :::: ::::: :::hint{type="danger"} **Le test de l'objet AdTeleport2D** n'est pas possible dans Unity et doit être effectué sur mobile. Vous pouvez le faire en enregistrant votre fichier de build sur **Zepeto Studio**. [4. Testez votre monde](docId\:KtKsfutOi7pkHlroZ3BDn) ::: # Astuces de création pour le monde 2D - Pour chaque carte, il est recommandé de fixer la coordonnée Z à sa valeur par défaut de 100 et d'ajuster uniquement les valeurs X et Y pour le placement. - Si les cartes se chevauchent dans la Scene, les joueurs d'une autre carte pourraient être visibles en mode multijoueur. Il est donc nécessaire de laisser un **espace entre les cartes**, comme dans l'exemple ci-dessous. - L'utilisation d'images générées par IA est autorisée. - Lors de la publication sur ZEPETO Studio, veuillez préciser dans la description du monde qu'il s'agit d'images IA. ::::hint{type="success"} 💡 **Pour générer des images IA avec une sensation d'espace, essayez d'utiliser le prompt suivant :** :::BlockQuote Une scène de \[concept de l'espace]. Une composition large avec une sensation de profondeur, où le point de vue de la caméra s'étend naturellement vers l'intérieur de l'espace. Composition accentuant la perspective (point de fuite) convergeant vers le centre ou un point précis. Expression d'une profondeur spatiale réaliste via les reflets au sol, de la brume ou des faisceaux de lumière dans l'air, et des contrastes d'ombres. L'atmosphère de l'espace est transmise de manière vivante grâce à un éclairage tridimensionnel et des textures réalistes. Composition cinématographique, éclairage réaliste et rendu détaillé des textures. Haute résolution, perspective profonde, avec un effet de flou naturel sur l'avant et l'arrière-plan. ::: :::: - Créez votre propre espace simplement en ajoutant des images, en connectant des portails et en ajoutant de la musique de fond !