【WordPressプラグイン】ワールドアップロード機能について

Vma plus 株式会社

2024年9月13日 02:25

こんにちは！
Vma plus株式会社です。

この記事は、2024年9月13日にリリースされた、WordPressプラグイン「Vma plus Station」PRO版で利用可能な、ワールドのアップロード機能を活用するためのマニュアル記事です。

オリジナルのワールドを作るためのテンプレートの概要や、作ったワールドをプラグインにアップロードするまでの手順を詳しくご紹介していきます！

ワールドアップロード機能について

ワールドアップロード機能は、WordPressでメタバースが作れるプラグイン「Vma plus Station」PRO版で利用することができる機能です。

Vma plusがあらかじめ用意しているテンプレートを使ってオリジナルのワールドを作り、プラグインにアップロードすることで、ご自身のWordPress上に自分で作ったワールドのメタバース空間を作ることができます。

プラグインにアップロードすることができるワールドは、テンプレートとして提供されているPlayCanvasのプロジェクトを使って作られたワールドのみとなっており、ご自身のWordPress上に自分で作ったワールドのメタバース空間を作るには、PlayCanvasのアカウントが必要となります。

📒ワールドアップロード機能　まとめ
●　PRO版で利用できる
●　WordPress上に自分で作ったワールドのメタバース空間を作れる
●　あらかじめ用意されているPlayCanvasのテンプレートプロジェクトを複製して作ったワールドを、プラグインにアップロードする作業が必要
●　PlayCanvasのアカウントが必要

ワールドアップロードの手順

事前準備
ディレクトリ構成の確認
テスト実行
自分で用意したワールドのインポート
プラグインにアップロードするワールドをエクスポート
PRO版のプラグインへアップロード

事前準備

✅PlayCanvasのアカウントの準備

前述のとおり、ワールドアップロード機能を使うには、PlayCanvasという3Dコンテンツをブラウザ上で実行することができるゲームエンジンを使ったワールドのカスタマイズが必要になるので、PlayCanvasのアカウントを用意してください。

💡PlayCanvasのアカウントを持っていない方は、以下の公式サイトで作成することができます。
　PlayCanvas公式サイト：https://playcanvas.com/

✅テンプレートプロジェクトを複製し、自分用の新規プロジェクトを作成する

１．PlayCanvasにログインする

まず、PlayCanvasの公式サイトにアクセスし、アカウントにログインします。
　　ログインはこちらから：https://login.playcanvas.com/

２．テンプレートプロジェクトをフォーク*する

*…フォーク
既存のプロジェクトを複製して新しいプロジェクトを作成できる便利機能のこと。

（１）テンプレートとなるPlayCanvasのプロジェクトページにアクセスします。
テンプレートプロジェクト：https://playcanvas.com/project/1246843/overview/wordpresstemplate

（２）PlayCanvasにログインした状態で、ページ上部にある「Fork」ボタンをクリックします。

※未ログインの状態だと「Fork」ボタンはクリックできません。
※PlayCanvasではPublicのプロジェクトをフォーク（コピー）して作り始めることができます。

（３）「プロジェクト名」を入力するウィンドウが表示されたら、わかりやすい名前を入力し、「FORK」ボタンを押してプロジェクトを複製します。

３．編集画面を確認する

「EDITOR」ボタンをクリックしてプロジェクトの編集画面が確認できれば複製完了です。

ディレクトリ構成の確認

ディレクトリ構成を確認するには、シーンの編集画面の左側にある「Code Editor」メニューをクリックします。

テンプレートプロジェクトのディレクトリ構成は以下の通りです。

/
├CoreProject/ ←編集不可
└UserFiles/
　└SceneTemplateAssets/
　　├Assets/
　　├Materials/
　　├SkyBox/
　　├Resources/
　　├Template/
　　└Textures/

本テンプレートでは変更可能なディレクトリと、変更不可なディレクトリが明確に分かれています。

「CoreProject」配下のディレクトリには、本プロジェクトのコアとなるスクリプトやアセットが含まれており、「CoreProject」配下のディレクトリに変更を加えてしまうと、予期しない動作が起こる可能性がありますので、編集はしないでください。

「UserFiles」配下のディレクトリのみを更新するようお願いいたします。

テスト実行

PlayCanvasでは、ブラウザ上で、編集したワールドのテスト実行をすることができます。

テンプレートをフォーク（複製して新しいプロジェクトを作成）してすぐの段階でも動作は可能です。

✅PlayCanvasで自分が作ったワールドをテスト実行するための手順

１．PlayCanvasにログインする

ログイン済みの場合はスキップしてください。

２．プロジェクトを開く

フォークしたプロジェクト詳細画面の「EDITOR」ボタンをクリックしてプロジェクトの編集画面を開きます。

３．シーン*を選択する

*…シーン
3Dコンテンツやゲームの中で使われる空間を定義しているもので、PlayCanvasの中で3Dコンテンツを使ったゲームやアプリの「世界」を作る場所です。

（１）プロジェクトの編集画面上にシーン一覧が表示されるので、テスト実行を行う場合は、「Initialisation」シーンをクリックします。

（２）選んだ「Initialisation」シーンがロードされて、シーンの編集画面が表示されます。

４．テスト実行する

（１）シーンが正しく表示されたら、画面右上にある「Launch」ボタンをクリックします。

（２）別のタブまたはウィンドウで、ワールドが実行されます。この画面で、ワールドの動きを確認したり、プレイしてテストすることができます。

５．テスト結果を確認する

フォークしてすぐのテスト実行の場合は、メタバース空間に入れればテスト完了です。

それ以外の場合は、テスト実行画面（メタバース空間）で動きを確認し、問題があればPlayCanvasの編集画面に戻って修正を行います。

必要に応じてテスト実行を繰り返しながら修正の反映確認をしてみてください。

自分で用意したワールドのインポート

✅インポートするワールドを準備

ワールドのファイル形式としては、GLB、FBX、COLLADA、OBJなどが使用できますが、PlayCanvasではGLB形式が推奨されています。

まずは、これらの形式でワールドのファイルを用意しましょう。

本マニュアル記事では、上記の形式でワールドの作成はできているものとして手順を紹介していきます。

✅ワールドをPlayCanvasへインポートする

１．PlayCanvasにログインする

ログイン済みの場合はスキップしてください。

２．プロジェクトを開く

フォークしたプロジェクト詳細画面の「EDITOR」ボタンをクリックしてプロジェクトの編集画面を開きます。

３．シーンを選択する

（１）プロジェクトの編集画面上にシーン一覧が表示されるので、「SceneTemplate1」シーンをクリックします。

（２）選んだ「SceneTemplate1」シーンがロードされて、シーンの編集画面が表示されます。

４．用意したワールドのファイル（GLBなど）をインポート

（１）画面中央下部「Assets」パネル内の「UserFiles」 > 「SceneTemplateAssets」 > 「Assets」フォルダに、用意したワールドのファイルをドラッグアンドドロップします。

（２）インポートすると、PlayCanvasが自動的にそのワールドに対応するTemplateファイルを「Assets」フォルダの中に生成してくれます。

✅ワールドを配置する

1つ前の手順で自動生成されたTemplateファイルを「Hierarchy」上にドラッグアンドドロップしてシーンに配置します。

これで、ワールドがシーンに表示されます。

✅コライダーを設定する

１．配置したワールドのオブジェクト（床、壁、天井など）に合わせて、衝突判定用の「Collision*」を作成します。

*…Collision（コリジョン）
オブジェクト同士の衝突を検出し、それに応じた動作を行うためのもの。

（１）「HIERARCHY」に追加したオブジェクトの中のから、「Collision（当たり判定）」を設定したいオブジェクトをクリックして選択し、「ENTITY」パネルの「＋ADD COMPONENT」ボタンをクリックします。

（２）表示されたメニュー一覧の「Physics」をクリック → 「Collision」をクリックします。

（３）「Type」プルダウンリストの中から設定したいコリジョンメッシュ*を選択することで、「Collision」を有効にすることができます。

*…コリジョンメッシュ
ゲーム内の物体同士がぶつかったり接触したりするのを検出するための「当たり判定」を設定するためのものです。
例えば、キャラクターや建物などの複雑な形のオブジェクトがあるとします。そのままの形で当たり判定を取ると計算が重くなってしまうため、コリジョンメッシュというシンプルな形（箱、球、カプセル、平面など）を使って当たり判定を簡略化します。

コリジョンメッシュの種類には以下のようなものがあります：
・Box（ボックス）: 四角い箱の形。机や箱など、四角いものに使います。
・Sphere（スフィア）: 球の形。ボールなど丸いものに使います。
・Capsule（カプセル）: カプセルの形。キャラクターの体のように縦に長いものに使います。
・Plane（プレーン）: 平面。床や壁のように平らなものに使います。
・Mesh（メッシュ）: 複雑な形のモデルに対応するコリジョン。モデルの形をそのまま使いますが、計算が重くなるので、特に必要なときだけ使います。

（４）各パラメーターの指定方法についての説明はここでは省きますが、正確な当たり判定を行うため、各コリジョンメッシュに応じて特定のパラメーターを指定してください。

２．「Collision（当たり判定）」を付けだけでは物体同士の衝突などは機能してくれないため、さらにオブジェクトに「RigidBody*」コンポーネント*を追加して、物理挙動が適用されるようにします。

*…RigidBody（リジッドボディ）
ゲームの中で物体を「現実っぽく」動かすための機能です。この機能を使うと、物体が重力で落ちたり、他の物体とぶつかったり、跳ね返ったりするようにできます。つまり、物理のルールに従って物体を動かすためのものです。

リジッドボディには3つの種類があります：
・Static（静的）: これは動かないものです。例えば、地面や壁のように、その場から動かず、他の物がぶつかっても自分は動きません。
・Dynamic（動的）: これは動くものです。重力で落ちたり、何かにぶつかると跳ね返ったりします。たとえば、ボールや箱のようなものです。
・Kinematic（運動学的）: これは、自分で動かすものです。重力の影響を受けず、自分でスクリプト（プログラム）を使って動かします。例えば、プレイヤーが操作するキャラクターに使われます。

*…コンポーネント
オブジェクトに機能を持たせるための部品のようなものです。
これには、オブジェクトを動かしたり、音を鳴らしたりするものや、特定の処理を実行するためのスクリプトも含まれます。

（１）「HIERARCHY」に追加したオブジェクトの中のから、「RigidBody」を設定したいオブジェクトをクリックして選択し、「ENTITY」パネルの「＋ADD COMPONENT」ボタンをクリックします。

（２）表示されたメニュー一覧の「Physics」をクリック → 「RigidBody」をクリックします。

（３）「Type」プルダウンリストの中から設定したい物理タイプを選択することで、「RigidBody」を有効にすることができます。

（４）各パラメーターの指定方法についての説明はここでは省きますが、オブジェクトの動きや衝突の挙動を細かくコントロールしたい場合は、「RigidBody」のタイプに応じて各プロパティ値を指定してください。

３．床のオブジェクトには、「ground」タグを付けておきましょう。これにより、後でアバターが正しく立つようになります。

（１）「HIERARCHY」に追加したオブジェクトの中のから、床のオブジェクトをクリックして選択し、「ENTITY」パネル＞「Tags」入力欄に「ground」と入力しEnterを押します。

（２）「ground」タグが追加されます。

✅ポスターの配置

「Vma plus Station」プラグインで作れるメタバース空間には、複数のポスター（リンク付き画像）を配置することができます。

無償版・PRO版どちらもポスター画像を配置でき、配置できるポスター画像の枚数はワールドによって異なります。

⚠️ポスター配置後のテスト実行について
前述した「テスト実行」では、ポスターは表示されません。ポスターはWordPressのプラグインから画像を設定した後に表示されます。

⚠️ポスターの表示について
ポスターは再生モードでは表示されません。プラグインへアップロード後に、データがある場合のみ表示され、それ以外の場合は非表示になります。

１．ポスターが管理されている場所を確認する

（１）プロジェクト詳細画面の「EDITOR」ボタンをクリックしてプロジェクトの編集画面を開き、シーン一覧から「SceneTemplate1」シーンをクリックします。

（２）「SceneTemplate1」シーンの編集画面が表示されたら、左側の「Hierarchy*」リストを開きます。

*…Hierarchy（ヒエラルキー）
編集画面左側にあるリストで、プロジェクトの中の全ての「物」（オブジェクト）がツリー状に並んでいます。ここでオブジェクトの配置や構造を確認できます。

（３）「Root」＞「ModalScreens」オブジェクトの「posterController」コンポーネントがポスターを管理しているスクリプトです。「ModalScreens」オブジェクト配下の「1」～「6」と採番されたオブジェクトが、ポスターのオブジェクトです。

２．ポスターを増やす

（１）「ModalScreens」ディレクトリの中にある既存のポスターオブジェクトを右クリックし、「Duplicate」または「コピー」を選んで、新しいポスターを作ります。

（２）コピーしたポスターの名前をわかりやすく変更します（ここではわかりやすいように連番の名称にしています）。

オブジェクトの名前はオブジェクトをダブルクリックまたはオブジェクトをクリックすると表示される「ENTITY」パネルからも変更が可能です。

（３）作成した新しいポスターを、好きな場所にドラッグして配置します。3D空間上でポスターの位置や大きさを調整してください。

（４）「Hierarchy」パネルで「ModalScreens」ディレクトリをクリックし、「ENTITY」パネルに表示される「posterController」内のプロパティを操作していきます。

（５）表示するポスターの最大枚数を設定する項目「maxPosterCount」の数値を、「ModalScreens」ディレクトリ配下に存在するポスターの枚数と同じ数値に設定します。

（６）「maxPosterCount」と同じく、ワールドに実際に配置するポスター枚数を設定する項目「postersArray」の数値も、「ModalScreens」ディレクトリ配下に存在するポスターの枚数と同じ数値に設定します。

（７）「postersArray」の数値を増やすと、新しくポスターを追加する要素項目が増えるので、「Hierarchy」ディレクトリ上で新しく作成したポスターをドラッグ＆ドロップでアタッチ（追加）します。

３．ポスターを削除する

（１）シーンの編集画面左側の「Hierarchy」パネルを開き、「ModalScreens」ディレクトリ内の削除したいポスターオブジェクトを右クリックし、「Delete」または「削除」を選んで削除します。

（２）これで、シーンから対象のポスターオブジェクトが消えます。

（３）ポスターを削除したら、「Hierarchy」パネルで「ModalScreens」ディレクトリをクリックし、「ENTITY」パネルに表示される「posterController」内のプロパティを操作していきます。

（４）表示するポスターの最大枚数を設定する項目「maxPosterCount」の数値を、「ModalScreens」ディレクトリ配下に現在残っているポスターの枚数と同じ数値に設定します。

（５）「maxPosterCount」と同じく、ワールドに実際に配置するポスター枚数を設定する項目「postersArray」の数値も、「ModalScreens」ディレクトリ配下に現在残っているポスターの枚数と同じ数値に設定します。

✅スポーン位置の調整

１．「Hierarchy」上の「SpawnPoint」を開始時にアバターをスポーン*させたい場所に設置します。

*…スポーン
ゲーム開発においてキャラクターやアイテムなどのオブジェクトを特定の場所に生成（出現）させること

（１）「HIERARCHEY」上の「SpawnPoint」オブジェクトをクリックして選択し、「ENTITY」の各プロパティ値を調整します。

２．アバターの向きを任意の方向に回転させます。

（１）１．の手順（スポーン位置の調整）と同様に、「ENTITY」の各プロパティ値を調整してください。

✅テスト実行

本マニュアルの「テスト実行」を参考に、動作が確認できれば完了です。

プラグインにアップロードするワールドをエクスポート

ここまでの手順に沿って作成したオリジナルのワールドをプラグインにアップロードするために、ワールドを作成したPlayCanvasのプロジェクトをZip形式でエクスポートします。

エクスポートするにあたり、まずはワールドをプラグインにアップロードする際に必要となるファイルをご紹介します。

⚠️これからご紹介するファイルが含まれていないと、WordPressでのプラグイン管理画面でうまくワールドを適用できない可能性があるため、エクスポート前によくご確認ください。

✅プラグインにアップロードするプロジェクトに必要なファイル

プラグインへアップロードする際に必要なファイルは３つあります。

３つのファイルはすべて、テンプレートプロジェクトの「UserFiles」 > 「SceneTemplateAssets」 > 「Resourses」配下に配置します。

１．world-setting.json

●　ポスターの数を定義しているファイル
●　このファイルをWordPressで読み込み、ワールドの設定画面で表示するポスター入力フォームの数を決定する。
●　ファイルは以下のような構成 ↓

{"posterNum": [配置しているポスターの数]}

２．[world名].png | jpg | jpeg ※

●　ワールドのサムネイル用画像
●　推奨解像度：横512px ×縦512
●　この画像をWordPressのワールド選択時のサムネイル画像として表示する。
●　プラグインにアップロードしなくても特にワールド内の動作には影響しない。
●　ただし、WordPressのワールド選択時のサムネイル画像は弊社の用意したデフォルト画像となる。