8. 2Dワールド作り

もっと速く、もっと手軽にワールドを作れる2dワールドを公開します。 自分だけの背景画像とポータル接続だけで、素早く簡単にワールドを作ってリリースできます。 既存のビルドイットunityプラグインプロジェクトに2d worldパッケージをインストールして使用できます！ 適用方法 unity hubでビルドイットプラグインフォルダを選択し、openボタンを押してください。 📘 note もし初めての場合は、 docid\ kpg7fastgn 3gbp2dp8wk に従ってビルドイットunityプラグインを先にインストールし、基本操作を身につけてください。 ビルドイットプラグインプロジェクトが開いたら、上部の zepeto > buildit plugin package manager > 2d world を選択してください。 importを押して、すべての構成要素を取り込んでください。 3番の手順を完了すると、assets > zepeto 2d world フォルダが作成されます。 フォルダ内にある 2dworldscene ファイルをダブルクリックして開いてください。 上部でアカウントにログイン後、マルチプレイサーバーをonにして、playボタンを押すと2dワールドをプレイできます。 2dワールド機能 ビルドイットプラグインの 基本モジュール機能 を使用できます。 ボイスチャット、クイックチャット、ジェスチャー、スクリーンショット/画面録画、ワードローブ、bgm機能を使用できます。 横/縦モード切替機能 を提供しています。 ローディング画面 を変更できます。 マップの 背景 を変更できます。 好きなだけマップを追加し、 ポータル を接続して創造的な空間を制作できます。 マップ数に制限はありませんが、zepeto studioにリリースする際は、ビルドファイル容量が1gb以内で、最適化ガイドを逸脱しない数値である必要があります。 bgm を変更できます。 2dワールドのため、3dオブジェクト配置は雰囲気に合わないのでおすすめしません。 背景とポータル接続だけで素早く簡単にワールドを作ることが目的です。 2dワールドを作る 2dworldsceneの基本構成 基本的にローディング画面および2つのマップがポータルで接続されたサンプルが含まれています。 作業の利便性のため、 unityエディタのsceneの2dメニューをクリックしてください。 ローディング画面 managers > loadingscreen オブジェクトをinspectorで有効化チェックすると、ローディング画面機能を使用できます。 ローディング画像として使う画像をassetsにドラッグして追加し、texture typeを sprite(2d and ui) に変更してから apply を押してください。 managers > loadingscreen > image を選択してください。 先ほど追加したローディング画像をドラッグして、imageオブジェクトの sourceimage プロパティに入れるとローディング画像が変更されます。 managers > loadingscreen > text(tmp) を選択してください。 textmeshpro text(ui) 部分にローディングテキストを入力してください。テキストが不要なら空欄のままでも構いません。 managers > loadingscreen > delay after ready は、zepetoキャラクター生成後にローディング画面が維持される時間（秒）を示します。デフォルト値は 0 1 です。 キャラクター移動速度を変更する managers ：キャラクターの移動速度を調整できます。 run speed ：キャラクターの走る速度を調整できます。 walk speed ：キャラクターの歩く速度を調整できます。 ジャンプ機能 は2dワールドでは 使用できません。 マップを修正する マップの背景画像変更、ポータル変更、キャラクター移動可能エリア変更、bgm変更、マップタイトル変更ができます。 背景画像を変更する hierarchyで zepeto2d bg オブジェクトを選択してください。 sprite renderer > sprite： 任意の画像をドラッグして背景を変更できます。 rebuild borders2d： 画像を変更した場合は 必ず このボタンをクリックしてください。画像サイズに合わせて外枠の移動可能エリアである boxcollider2d を生成 します。 border2d top をmoveツールで移動し、画像上の床境界部分に位置させてください。 他のborderは別途修正しなくても構いません。 マップサイズは元画像サイズに合わせて生成されますが、transformのscale値を入力して希望の大きさに調整できます。 推奨元画像サイズ： 3400×1530px 横スクロール可能な2d背景画像サイズです。推奨サイズと異なっていてもワールド制作には問題ありません。 ポータルを接続する hierarchyで zepeto2d bg オブジェクトを選択してください。 linked portal obj： キャラクターがポータルのbox collider領域内に入るとポータルが有効化され、ボタンをクリックすると接続先へ移動します。目的地ポータルをドラッグして追加してください。 interact button text： ポータルボタンに表示されるテキストです。接続されたポータルがない場合はテキストが表示されません。 show map title toast： チェックするとポータル移動時に入力したmap titleが表示されます。 map title： 名前テキストです。 zepeto2d bg > create portal2d(child) から追加ポータルを生成できます。 bgmを変更する hierarchyで zepeto2d bg > bgm オブジェクトを選択してください。 bgm audio source に任意の音楽をドラッグして変更してください。 マップごとに異なるbgmを設定できます。 マップタイトル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 を押して新しいマップを追加できます。 新しく追加したマップも同じ方法で画像を変更し、ポータルを接続してください。 npcを追加する 2dワールドでは、 会話できるnpc を使用できます。 サンプルシーンに配置されたnpcを修正するか、上部の zepeto 2d > create zepetonpc を押してzepeto npcを追加してください。 hierarchy で生成されたzepetonpcを選択してください。 zepeto id ：使用するzepetoアカウントidを入力してください。 npc name ：画面に表示されるnpcの名前を入力してください。 dialogue id ：使用するdialogue idを入力してください。 dialogue id は npc dialogue editor で作成したdialogueの固有値です。詳細は下の npc dialogueを設定する をご確認ください。 sprite npcを追加する sprite npc 機能で、直接追加した画像をnpcにできます。 上部の zepeto 2d > create spritenpc を選択してください。 hierarchy で生成されたspritenpcを選択してください。 sprite ：npcとして使用するspriteを設定できます。 npcとして使いたい画像を project に入れてください。 背景がないpng形式の画像を使用してください。 推奨画像サイズ 720 720 推奨サイズでなくても、テストを通じてunity上でサイズを調整できます。 取り込んだ画像を選択し、 inspector > texture type を sprite (2d and ui) に変更してください。 変更後、下部のapplyを押して変更を適用できます。 sprite npcの inspector > sprite renderer > sprite を取り込んだspriteに変更してください。 npcのサイズを変更したい場合は、 transform > scale > x, y 値を変更してみてください。 inspector > sprite renderer > flip で画像をx、y方向に反転して使用できます。 play でカスタム画像で作成したsprite npcが正しく表示されるか確認してください。 npcとの相互作用距離を調整したい場合は、変更したいsprite npcを選択し、 inspector > box collider > size > x, y, z値 を調整してみてください。 npc がポータルや他のnpcと 重ならないように配置 してください。 npc dialogueを設定する 新しい npc dialogue system を活用すれば、自分だけのワールドにさらに楽しく生き生きとしたnpcを追加することができます！ 単答型の会話を超え、ユーザーの選択肢によって物語が続く 会話の連続性 を実装でき、 多言語対応（localization） を通じて全世界のグローバルユーザーとコミュニケーションをとる没入感のある会話システムを構築することができます。 このシステムは、クリエイターが会話を簡単に構成し適用できるように、 dialogue editor 、 dialogue helper 、 npc (zepetonpc component) の3つの核心要素で構成されています。 1\ dialogue helperを活用する dialogue helper は、ダイアログ生成とnpcの割り当てを支援する中央制御ポイント（central control point）です。上部メニューの zepeto 2d > npc dialogue helper を選択してウィンドウを開いてください。 npcフィールド ：sceneで現在選択されているnpcを表示します。 zepetonpc componentを持つgameobjectを選択すると自動的に更新されます。（自動更新されない場合は、 refresh をクリックしてください。） dialogueフィールド ：現在割り当てられているダイアログを表示し、クリックするとダイアログアセット（node graph asset）を割り当てることができる選択ウィンドウが表示されます。 exportボタン ：ダイアログ設定後、2dワールドのランタイムで使用できるようにデータを変換して抽出します。アセット修正後は必ずこのボタンを押す必要があります。 dialogueフォルダ ：すべてのダイアログアセットが保存されているフォルダを開きます。 create new ：新しいダイアログアセットを作成します。 2\ dialogue graph editor（ノードエディタ）を活用する dialogue helper で create new をクリックするか、ダイアログアセットを開くと、 dialogue graph editor が表示されます。 このエディタは、視覚的なノード（node）接続を通じて複雑な会話のフローを直感的にデザインできるツールです。 核心ノード（node）の種類 start node ：会話が始まる進入点です。（グラフごとに1つだけ存在する必要があります。） npc node ：npcのセリフとプレイヤーの応答（選択肢）を入力する核心ノードです。 what the npc says ：npcが画面に出力するセリフを入力します。 answer options ：プレイヤーが選択できる回答を複数追加して、会話を分岐（branching）させることができます。 end node ：会話が終わる地点を表します。プレイヤーがこのノードに接続された選択肢を選ぶと、会話が終了します。 グラフの編集および接続 ダイアログキャンバスで次のような方法でノードを作成し、接続することができます。 キャンバスの空白部分を 右クリック して新しいノードを作成（ create node ）したり、既存のノードをコピーおよび削除できます。 選択肢（answer options）右側の outputポート をドラッグして、次のノードの inputポート に接続すると、会話のフロー（flow）が完成します。 tips ナビゲーション画面は次のような方法で移動できます： マウスホイール を押したままドラッグ option(mac) / windowsキー + マウス左ボタンをドラッグ 多言語（localization）対応設定 inspectorウィンドウ設定 ：作成したダイアログアセット（node graph asset）をクリックし、inspectorウィンドウを見ると、サポートする言語（english, korean, japanese など）にチェックを入れることができます。 エディタツールバーの活用 ：エディタウィンドウ左上の language selector（言語セレクタ） で言語を切り替えながら、各言語に合わせた翻訳テキストを直接入力することができます。 3\ 新しいnpc dialogueを作成する ダイアログを作成する dialogue helper ウィンドウで create new をクリックします。 自動的に開く dialogue editor で、ノード（npcのセリフ）とプレイヤーの応答（選択肢）を自由に編集して会話ノードを構成してください。 npcを指定する hierarchyウィンドウで、ダイアログを追加するnpcオブジェクトをクリックします。 inspectorウィンドウで、該当オブジェクトに zepetonpc componentがあるか確認してください。 npc dialogue helperの「npc」項目に、会話を適用するnpcを割り当てます。 ダイアログの割り当ておよびexport dialogue helperの dialogueフィールド をクリックして、作成したダイアログアセットを接続します。 適用が完了したら、インゲームで動作するように export ボタンをクリックしてください。 inspectorの最終チェック 該当npcのinspectorウィンドウ（ zepetonpc component）で設定が正しいか確認します。 npc ：該当するnpcアセットが正しいか確認します。 dialogue id ：選択したダイアログアセットとdialogue idの文字列が一致しているか確認します。 tips 同じnpcダイアログアセットを複数のnpcに簡単に再利用できます。 作業したセリフの内容が実際のゲームに正常に反映されるように、ダイアログを修正した後は こまめにexport を行ってください。 faq ダイアログが画面に表示されない場合： exportを行ったか、dialogue panelとdialogue idがinspectorに正確に入力されているか確認してください。 ツールでnpc情報が変わらない場合： dialogue helperウィンドウで refresh ボタンを押すか、hierarchyでnpcを再度クリックしてみてください。 ad teleport 2dを配置する ad teleport 2d オブジェクトを配置して、2dワールドでも収益を得ることができます。 ユーザーが広告視聴しないと動作しないteleportを通じて、自作ワールドで楽しさと収益を一緒に得てみてください。 ad teleport2d オブジェクトは、既存のadvertisementオブジェクトと同様に動作する2dワールド専用オブジェクトです。 build it asset browser > 2d の adteleport2d オブジェクトを選択してください。 scene で好きな位置にドラッグして配置してください。 hierachy で、 配置したいbgの子要素 として配置したadteleport2dオブジェクトを入れてください。 到着地点にしたい位置に adteleport2d > destination オブジェクトを配置してください。 到着地点を別のbgに配置したい場合は、該当bgの子に空のgameobjectを配置した後、 adteleport2d > inspector > zepeto script > destination に生成した 空のgameobject を入れてdestinationとして使用できます。 adteleport2dオブジェクトのテスト はunityでは不可能で、モバイルで行う必要があります。 zepeto studio にビルドファイルを登録して実施できます。 docid 3cs1bqivmh ayi7hsehsa 2dワールド制作のヒント 各マップのz座標はデフォルト値の100に固定し、x, y値を調整して配置する方法を推奨します。 sceneでマップが重なる場合、マルチプレイ時に別マップのプレイヤーが画面に見えることがあるため、下の例のように マップ間の間隔 を空ける必要があります。 ai生成画像を使用しても構いません。 zepeto studioにリリースする際、ai画像であることをワールド説明に明記してください。 💡 空間感のあるai画像を生成するには、次のようなプロンプトを使ってみてください。 \[空間コンセプト]のシーン。 広く奥行きが感じられる構図で、カメラ視点が空間の内側へ自然に続く。中央または一点に視線が集まる遠近感（消失点）が強調された構図。床の反射光、空気中の霧や光の筋、影のコントラストによって現実的な空間の奥行きを表現。立体的な照明と写実的な質感が調和し、空間の雰囲気が生き生きと伝わる。シネマティックな構図と写実的な照明、ディテールのある質感表現。高解像度、深い遠近感、前後に自然にボケる焦点効果。 画像追加とポータル接続、bgmだけで、簡単に自分だけの空間を作ってみてください！