![](https://www.metapla.blog/wp-content/uploads/2024/03/e844ab44-28b1-473b-a469-1c935f819996-1-1024x585.webp)
前回は、PlayCanvasでのアカウント作成方法について学びました。
今回は、実際に「MyFirstProject」を使ってPlayCanvasの世界に足を踏み入れ、編集画面の基本を探ってみましょう。
PlayCanvasやUnityに馴染みのない方でも簡単に理解できるよう、詳細に解説していきます。
Let’s Goをクリックして始めよう
こちらの画像は前回の続きです。
まずは、「Let’s Go」ボタンをクリックして、PlayCanvasの編集画面にアクセスします。
前回作成したアカウントでログインしていれば、すぐに「MyFirstProject」が表示されるはずです。
![](https://playcanvas-ikki.com/wp-content/uploads/2023/03/43d975032a1bbe2cd2fcad8d12ee685c-1024x579.jpg)
編集画面の全体像
PlayCanvasの編集画面は、初めての方にも直感的に操作が可能です。
画面は大きく分けて4つのセクションに分かれています。
各セクションの概要を簡単に説明すると、以下のようになります。
![](https://playcanvas-ikki.com/wp-content/uploads/2023/03/1bf9e224647ac9ca484b3635135f8b32-1024x569.jpg)
オレンジの丸⇨チュートリアル説明
プレイキャンバスを最初に始めると各項目の説明等がオレンジの丸で表示されます。
オレンジ丸をクリックすると簡単な説明が表示されます。
これはぶっちゃけ無視しても大丈夫です。
このオレンジ丸が言っている事は今後100%理解できるようになるので、見ても見なくてもOK!
もちろん確認して進めたい人はオレンジ丸に従ってもOK!
![](https://playcanvas-ikki.com/wp-content/uploads/2023/03/f432bd3467f650562dcfbc5929d25711-1024x525.jpg)
ヒエラルキー: シーンの構造を理解する
左側の上部にオレンジの印と「HIERARCHY」の文字が書いてあります。
編集画面の左側に位置する「ヒエラルキー」は、現在のシーンに含まれるすべてのオブジェクトをリストアップします。
ここでは、シーン内のオブジェクト間の関係性を一目で把握し、選択や編集が行えます。
ここにはプロジェクトのシーンにあるものが表示されています。
![](https://playcanvas-ikki.com/wp-content/uploads/2023/03/cb91494a7934b13b6781d883587f55db-1024x615.jpg)
今はシーン上には
・camera
・lights
・ball
・platforms
・teleporters
が配置されている状態です。
ヒエラルキーはシーンに物を配置したり、その配置した物を編集したりするためにある感じです。
ちなみに今”ball”が選択されています。
選択された物はシーン上で「緑青赤の3本の矢印」と色が変わって表示されます。
ビューポート: 3D世界の窓
中央の大きな画面は「ビューポート」と呼ばれ、作成中の3Dシーンをリアルタイムで表示します。
![](https://playcanvas-ikki.com/wp-content/uploads/2023/03/6864ea5433e2bb6c3c46605f4d998dae-1024x662.jpg)
ここでは、オブジェクトの配置やシーンの視覚的な確認が可能です。
PlayCanvasの強力なリアルタイムレンダリング機能により、変更が即座にビューポートに反映されます。
このビューポートを使用してエンティティーの選択、配置、方向付けなど様々な編集を確認していきます。
ちなみに最上部にある家マーク、歯車マーク、main等々はのちほど説明します。
まずはざっくりと基本的なPLAYCANVASの編集画面の話から。
インスペクター: オブジェクトの詳細設定
画面の右側にある「インスペクター」では、ヒエラルキーやビューポートで選択したオブジェクトの詳細な設定を行うことができます。
![](https://playcanvas-ikki.com/wp-content/uploads/2023/03/fc83dfc7f84e82e5c0770c66b600f681-1024x673.jpg)
ENTITYのサイズや位置、角度などなど様々な設定をここで行います。
ちなみにENTITYは「物」的なニュアンスで覚えといてもらえれば。
Unityだと「オブジェクト」ですね。
インスペクターからは他にもCOLLISION(衝突判定)や、スクリプトのアタッチ、SOUND設定など 本当に様々な設定をここから行うことになります。
アセットフォルダ: プロジェクト資料の倉庫
画面の下部に位置する「アセットフォルダ」は、3Dモデル、テクスチャ、スクリプトなど、プロジェクトで使用するすべての資料を管理する場所です。新しいアセットの追加や既存アセットの編集、ヒエラルキーへの配置などが行えます。
![](https://playcanvas-ikki.com/wp-content/uploads/2023/03/a3330545606acac3d1b47476387de2bf-1024x608.jpg)
3Dモデルやテクスチャー、スクリプト、映像データ、音データ、など、プロジェクトで使うものは基本的に全てここに物おくことになります。
そしてここからヒエラルキーに配置したりもします。
またウインドウはドラッグでサイズを変えることができます。
使わない時は小さくし、使うときは大きくするなど作業をしやすいように変更してください。
Playcanvasは編集画面の配置変えができない!
Unityでは編集画面の各項目がwindowとなっていて、配置からサイズまで自由に色々変更できます。
しかしPlaycanvashではそのような機能はなく、編集画面はデフォルトの状態から変更はできません。
編集作業をしていると、左側のヒエラルキーと右側のインスペクターを、何度も往復する事が多々あります。
個人的にはヒエラルキーの隣にインスペクターを配置したいですが。。
その場合は仕方がないので、ブラウザのウィンドウそのものの横幅を狭くして、少しでもマウス移動の距離を短くするくらいしか対策はありません。。。
次回は、これらの基本的な概念を踏まえつつ、PlayCanvasでの具体的な操作方法について詳しく解説していきます。PlayCanvasを使ったゲーム開発や3Dプロジェクトの制作における無限の可能性を、一緒に探っていきましょう。
最後に
ここまでの解説を読んで頂きありがとうございます。
メタバースやバーチャル空間の制作について、
「それでもやはり専門的な知識がないと難しいのでは?」
と考えている方もいるかもしれません。
「メタバースやバーチャル空間制作を誰かに頼みたい」とご検討中の方は、まずはお気軽に「お問い合わせ」を通じて弊社までお話しいただければと思います。
弊社では、豊富な事例を基に、お客様一人ひとりのニーズに合わせた最適な提案を行っております。
バーチャル空間の制作を通じて、お客様のビジネスやプロジェクトに新たな価値をもたらすことが私たちの使命です。
プロジェクト管理から運用まで、トータルでサポートさせていただきます。
メタバースの世界で何を実現したいのか、どのような空間を創りたいのか、まずはお気軽に弊社までお話しいただければと思います。
それをもとに、お客様それぞれの想いを形にするお手伝いをいたします。
まずは小さな一歩からでも、私たちと一緒にメタバースでの可能性を探ってみませんか?
お問い合わせはこちらからどうぞ。あなたのビジョンをお聞かせください。共に新しい価値を創造し、未来のバーチャル空間を一緒に築き上げましょう。