--- title: 8. 2Dワールド作り slug: world-sdk-guide-ja/3e4z-8 docTags: createdAt: 2025-10-22T07:24:00.194Z --- **もっと速く、もっと手軽にワールドを作れる2Dワールドを公開します。** 自分だけの背景画像とポータル接続だけで、素早く簡単にワールドを作ってリリースできます。 既存のビルドイットUnityプラグインプロジェクトに2D Worldパッケージをインストールして使用できます！ # 適用方法 :::::WorkflowBlock ::::WorkflowBlockItem Unity Hubでビルドイットプラグインフォルダを選択し、Openボタンを押してください。 :::hint{type="info"} 📘 **Note** もし初めての場合は、[1. インストール](docId\:KpG7FasTgN_3Gbp2Dp8Wk)に従ってビルドイットUnityプラグインを先にインストールし、基本操作を身につけてください。 ::: :::: :::WorkflowBlockItem ビルドイットプラグインプロジェクトが開いたら、上部の 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/Qw-PlGvQAVoE9MlYUOD8Y_1-3.png" size="76" 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/hipk9IVuFNxIHAHhf9zrb_1-6.png) ::: ::::: # 2Dワールド機能 ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/YqkBmMXIAfPOE-tL26L_d_2-0.png) - ビルドイットプラグインの**基本モジュール機能**を使用できます。 - ボイスチャット、クイックチャット、ジェスチャー、スクリーンショット/画面録画、ワードローブ、BGM機能を使用できます。 - **横/縦モード切替機能**を提供しています。 - **ローディング画面**を変更できます。 - マップの**背景**を変更できます。 - 好きなだけマップを追加し、**ポータル**を接続して創造的な空間を制作できます。 :::hint{type="success"} マップ数に制限はありませんが、ZEPETO Studioにリリースする際は、ビルドファイル容量が1GB以内で、最適化ガイドを逸脱しない数値である必要があります。 ::: - **BGM**を変更できます。 - 2Dワールドのため、3Dオブジェクト配置は雰囲気に合わないのでおすすめしません。 - 背景とポータル接続だけで素早く簡単にワールドを作ることが目的です。 # 2Dワールドを作る ## 2DWorldSceneの基本構成 - 基本的にローディング画面および2つのマップがポータルで接続されたサンプルが含まれています。 - 作業の利便性のため、**UnityエディタのSceneの2Dメニューをクリックしてください。** ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/7yPioZrDfcMnkofA-l3yx_2-0-1.png) ## ローディング画面 ::::WorkflowBlock :::WorkflowBlockItem - Managers > LoadingScreen オブジェクトをInspectorで有効化チェックすると、ローディング画面機能を使用できます。 - ローディング画像として使う画像をAssetsにドラッグして追加し、Texture Typeを Sprite(2D and UI) に変更してから Apply を押してください。 ::Image[]{src="https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/uVNCjOCgN-QAHRPdXrHsx_2-1.png" size="90" 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/4dNU_IqCsspMPt7GwuqGa_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/wW23pozxhr1pup4DqQv1U_2-editingmap1.png" size="92" width="2880" height="4554" position="center" darkWidth="2880" darkHeight="4554" showCaption="false"} ::: :::WorkflowBlockItem Border2D-Top をMoveツールで移動し、画像上の床境界部分に位置させてください。 ![](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/VDX5nLpsOwMnfa5rRbfjk_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/EezJmei78pezKcSPg5kWv_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/T3MwCCZQZfw86f1nzbwkw_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\:YS6zO0WwDusLtu_LT0ldK) セクションを参照してください。 ::: # 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 内で Scale を簡単に調整できます。 ![](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** を使用して、画像を水平・垂直方向に反転させることもできます。 ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/YHJuJ9kq2LrQCXFhOQt8V_image.png) ::: :::WorkflowBlockItem **Play** を押して、カスタム画像で作成した Sprite 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\:YS6zO0WwDusLtu_LT0ldK) セクションを参照してください。 ::: # 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**で、**配置したいBGの子要素**として配置したAdTeleport2Dオブジェクトを入れてください。 ::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を配置した後、**AdTeleport2D > Inspector > Zepeto Script > Destination** に生成した**空のGameObject**を入れてDestinationとして使用できます。 ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/Uy_ut_6pz8dv9YNv-PBuU_image.png) ::: :::: ::::: :::hint{type="danger"} **AdTeleport2Dオブジェクトのテスト**はUnityでは不可能で、モバイルで行う必要があります。**Zepeto Studio**にビルドファイルを登録して実施できます。 [4. ワールドをテストする](docId:3cs1Bqivmh_AyI7HSEhSA) ::: # 2Dワールド制作のヒント - 各マップのz座標はデフォルト値の100に固定し、x, y値を調整して配置する方法を推奨します。 - Sceneでマップが重なる場合、マルチプレイ時に別マップのプレイヤーが画面に見えることがあるため、下の例のように**マップ間の間隔**を空ける必要があります。 - AI生成画像を使用しても構いません。 - Zepeto Studioにリリースする際、AI画像であることをワールド説明に明記してください。 ::::hint{type="success"} 💡 **空間感のあるAI画像を生成するには、次のようなプロンプトを使ってみてください。** :::BlockQuote \[空間コンセプト]のシーン。 広く奥行きが感じられる構図で、カメラ視点が空間の内側へ自然に続く。中央または一点に視線が集まる遠近感（消失点）が強調された構図。床の反射光、空気中の霧や光の筋、影のコントラストによって現実的な空間の奥行きを表現。立体的な照明と写実的な質感が調和し、空間の雰囲気が生き生きと伝わる。シネマティックな構図と写実的な照明、ディテールのある質感表現。高解像度、深い遠近感、前後に自然にボケる焦点効果。 ::: :::: - 画像追加とポータル接続、BGMだけで、簡単に自分だけの空間を作ってみてください！