クイックスタート

スタジオプロジェクトの作成

1. スタジオ・プロジェクトを開始するには、ワークスペース・ページから **"Start a new Project "**ボタンをクリックします。

StartNewProject](/images/console-workspace-start-project.jpg)。

2. ワークスペースがプロプランの場合、プロジェクトタイプを選択する必要があります。 スタジオ**を選択してください:

StartNewProject](/images/studio/new-project-studio.png)。

3. **テンプレートを選択します: 新しいプロジェクトを開くと、ゲーム指向やAR指向のテンプレートを含む、いくつかのプロジェクト テンプレートが表示されます。 これらの プロジェクトテンプレートは、さまざまな機能を紹介し、 独自のアセットを入れ替えることで簡単に変更できます。 利用可能なテンプレートのいずれかを使用してプロジェクトを作成するか、Empty テンプレートからプロジェクトを作成します。

スタジオテンプレートピッカー](/images/studio/studio-template-picker.png)

プロジェクトに必要なものがすべて読み込まれたら、制作を開始できます。

インターフェイスのナビゲーション

警告

**同じプロジェクトの複数のタブを同時に開いていると、ビルドプロセス中に 予期せぬ問題を引き起こす可能性があります。 潜在的な問題を避けるために、プロジェクトの1つのタブだけが一度に 、アクティブになるようにしてください。

Studioは、数多くの異なるツールやビューで構成されたリッチなエディタインターフェイスを特徴としており、 、それぞれプロジェクト開発時に必要不可欠なものです。

以下のセクションでは、Studio エディターの主なインターフェイス要素を紹介し、基本的な機能を にハイライトしています。

スタジオ・インターフェース1](/images/studio/studio-navigate-interface.png)

スタジオインターフェース2](/images/studio/studio-navigate-editor.png)

ヒエラルキー

空間に含まれるエンティティやオブジェクトを表示し、それらの入れ子を変更する。 オブジェクトをクリックして階層内の別の位置にドラッグすると、再ペアレントまたは アンペアレントできます。 右クリックで オブジェクトを複製または削除。 スペースに新しいオブジェクトを追加します。 さまざまなオブジェクトの検索とフィルタリング。

スタジオ階層](/images/studio/studio-navigate-hierarchy.png)

資産

ファイル＆アセットは左下のパネルから管理できます。 独自の3Dモデル、2D画像、オーディオ ファイル、カスタムスクリプトなどをアップロードできます。 フォルダを作成し、ファイルをドラッグして配置を再編成します。 、アセットをビューポートまたは階層にドラッグ＆ドロップして、エンティティをシーンに追加することもできます。 GLB/GLTFフォーマットの3Dモジュールの使用と最適化については、Your 3D Models on Web をご覧ください。

スタジオアセット](/images/studio/studio-navigate-assets.png)

ビューポート

空間にオブジェクトや照明を追加、配置、更新、操作する。 下部のパースペクティブ ギズモを使用して、シーンのビューを変更し、ライティングとシャドウの可視性を変更し、 オルソグラフィックビューからパースペクティブビューに切り替えます。 上部のツールバーを使って、 選択したオブジェクトの位置、回転、スケールを変更したり、編集を元に戻したりやり直したりします。

スタジオビューポート](/images/studio/studio-navigate-viewport.png)

ビューポート・ナビゲーション・ショートカット

関数	キーボードショートカット
カメラ軌道	左クリック+ドラッグ
カメラパン	右クリック+ドラッグ、右クリック+ドラッグ、中クリック+ドラッグ
カメラズーム	スクロールホイール
選択オブジェクトにフォーカス	F
翻訳する	W
回転	E
スケール	R
UIレイヤーの非表示/表示	⌘\
オブジェクトの削除	削除
重複	⌘D
コピーオブジェクト	⌘C
オブジェクトの貼り付け	⌘V
元に戻す	⌘Z
やり直し	⌘⇧Z, ⌘Y

シミュレーター＆プレビューリンク

シミュレーター

シーンを再生しようとすると、シミュレーターのインスタンスが接続されます。 あなたのビューポートはリモートで 、シミュレータで起こっているプレイバックを反映します。 、再生中にスポーンされたオブジェクトやプロシージャルオブジェクトが空間階層に表示されます。 スペース内のエンティティに編集を加え、 、クライアントビューに即座に反映されます。 Spaceの設定で、「Persist Changes while in Play Mode」をオンにしている場合、プレー状態が 切断された後も、その変更は持続されます。 現在接続中のクライアントはプラグアイコンで表示されます。

シミュレータ1](/images/studio/studio-navigate-simulator1.png)

シミュレーター2](/images/studio/studio-navigate-simulator2.png)

また、シミュレーターでは、Studioにいながらにして、さまざまなデバイスのビューポート・サイズや、 シミュレートされた実環境で、プロジェクトの変更をテストし、確認することができます。 シミュレーターは、収録済みのARシーケンス・コレクションに加え、 8th Wall AR Engineをリアルタイムで実行することで動作する。 シミュレーターのインスタンスはいくつでも開くことができ、 さまざまなシナリオでプロジェクトの変更をテストすることができます。 シミュレーターには数多くの再生コントロールと便利な機能がある :

• プレイバー、スクラバー、イン/アウトハンドル: ループ・ポイントを設定し、選択したシーケンスの を細かくコントロールできる。
• Recenterボタン（右下）: カメラ映像を原点に戻します。 注: Recenter は、シーケンスがループするたびに、また新しいシーケンスが選択されるたびに、 呼び出される。
• 更新ボタン（右上）: ページを更新し、キャッシュされたコンテンツを保持します。 SHIFTを押しながら 、更新ボタンをクリックすると、キャッシュされたコンテンツを無視して完全なリロードが実行されます。

プレビューリンク

リンク/QRコードで 、モバイル、デスクトップ、ヘッドセットデバイス、または別のブラウザウィンドウでプロジェクトを即座にプレビューできます。

シミュレータプレビュー](/images/studio/studio-navigate-preview-links.png)

ライブ・プレビューの使用

• クラウド エディタ]ウィンドウの上部で、[新しいデバイスを接続]ボタンをクリックします。
• モバイル機器でQRコードをスキャンするとウェブブラウザが開き、 WebARプロジェクトのライブプレビューを見ることができます。 または、QRコードをクリックして、現在のブラウザで新しいタブを開きます。
• ページがロードされると、プロジェクトがWeb ARを使用している場合、モーションセンサーと オリエンテーションセンサー（一部のデバイス）、カメラ（すべてのデバイス）へのアクセスを求めるプロンプトが表示されます。 Allow for all permission プロンプトをクリックします。 プロジェクトの非公開開発URLに移動します。
• 注: クラウド エディタ内に表示される「プレビュー」QRコードは、クラウド エディタでアクティブに作業している間、開発者が使用するためだけの一時的な1回限りの使用QRコードです（ ）。 このQRコードは、 、非公開の開発用URLにアクセスする。 あなたの作品を他の人と共有するには、 、以下の「プロジェクトの公開」のセクションをご覧ください。
• ヘッドセットアイコンをクリックして、ヘッドセットデバイス用のリンクを生成します。

tip

複数のデバイスでプロジェクトをテストすることで、 、さまざまな画面サイズやプラットフォームで一貫したエクスペリエンスをユーザーに提供できます。

ツールバー起動

しかし、 開発の重要な段階は、手動でプロジェクトをビルドし、変更をコミットとしてランディングし、 プロジェクトを公開することでマークできます。

スタジオ起動ツールバー](/images/studio/studio-navigate-launch-toolbar.png)

**ビルドBuildをクリックすると、作業が保存され、プロジェクトの新しいクラウドビルドが開始されます。

着陸または同期: 変更に満足したら、更新されたコードを Studio* の統合ソース管理（ ）に取り込みます。 Studioウィンドウの右上にあるLandをクリックします。 ボタンは緑色になり、 、プロジェクトにまだソースコントロールにランディングされていない変更があることを示します。 "Sync"（同期）は、あなたのプロジェクトが、ソース コントロールにある最新のランディングされた変更と最新でないことを示します（例: 別のチームメンバーがプロジェクトの変更をソースコントロールにランディングした）。

**公開する: 最後のステップは、8th Wallの ビルトインホスティングを使用して、更新されランディングされたプロジェクトコードを公開することです。 Publicでは、インターネット上の誰でもがプロジェクトを公開閲覧できる。 ステージング パスコードを持っている人は、あなたのプロジェクトを見ることができます。

スタジオパブリッシュ](/images/studio/studio-navigate-publish.png)

プロジェクトを公開する準備ができたら、説明文とカバー画像が必要です。 パブリッシングの流れやプロジェクトの一般公開については、 Publishing Section in general 8th Wall Documentation をご覧ください。

インスペクター＆スペース設定

オブジェクト固有のコンポーネントを表示および設定し、エディタ全体の設定を調整します。

一般設定

オブジェクトが選択されていない場合は、プロジェクトの一般設定が表示されます。

スタジオ総合設定](/images/studio/studio-navigate-general-settings.png)

スペース設定

スカイボックスをスタイリッシュに スカイボックスは、ジオメトリを超えた世界（ ）がどのように見えるかを示す、シーン全体のラッパーです。 プロジェクトがAR互換デバイスでARを使用するように設定されている場合、 （XRを参照）スカイボックスはレンダリングされません。

ソース管理

プロジェクトの異なるバージョンと変更履歴を管理します。 新しいクライアントを作成すると、プロジェクトの新しい バージョンが作成されます。これは、メインの バージョンに影響を与えずに変更をテストするのに便利です。 また、 Project History 機能を選択することで、プロジェクトの過去の Landed Change の履歴にアクセスすることができます。

入力

入力マネージャを使用して、 キーボード、ゲームパッド操作、トラックパッド、タッチスクリーン操作など、さまざまなデバイス入力で動作するエクスペリエンスを設定します。 イベントアクションを作成し、 、異なる入力へのマッピング（またはバインディング）を設定します。 インプットシステムについてもっと知る

コードエディター

明暗モード、キーバインド、コード保存設定など、さまざまなユーザビリティ設定を選択できます。

プレイモード

ライブシンク設定をオンにしている場合、 シミュレーターまたはライブプレビューを切断しても、エディターで行った変更は保持されます。 この設定をオフにすると、 エディターで編集を行い、その編集がシミュレーターに反映されるのを見ることはできますが、 シミュレーターを切断すると、その編集は保存されません。 シミュレータの詳細については、 Simulator セクションを参照してください。 Persist Changesはデフォルトで 。

インスペクター

エンティティとそのコンポーネントを検査し、構成する。 Key Conceptで、エンティティとコンポーネントについて詳しく説明しています。

デフォルトでは、すべてのエンティティは、Inspector に Transform コンポーネントを表示します。 例えば、プリミティブは、ジオメトリの形状設定、マテリアル、テクスチャなどの 設定可能なオプションを持つメッシュコンポーネントを表示します。

コンポーネントの追加

新規コンポーネント」ボタンを使ってコンポーネントを追加できます。 Studioには、Physics、Lighting、Audio、Animationsなど、いくつかのタイプの組み込みコンポーネント（ ）があります。 カスタムコンポーネント も追加できます - カスタムコンポーネントの詳細. 一度セットアップすると、カスタム・コンポーネントがカスタム・カテゴリーに表示されます。 コンポーネントを削除するには、3つの点をクリックします。

StudioNewComponent](/images/studio/studio-navigate-adding-a-component.png)。

コンソール

プロジェクトのビルドアクションとランタイムをデバッグする。 デバッグ・モードは、 ロギング、パフォーマンス情報、および強化されたビジュアライゼーションをデバイス上で直接提供する、Studio の高度な機能です。

スタジオコンソール](/images/studio/studio-navigate-console.png)

コードエディター

第8回ウォール・コード・エディターは、開発者がウェブベースのXRコンテンツを作成、共同作業、 公開するためのコーディング・ツール一式を備えています。 当社の強力なIDEには、コードエディタ、統合ソース管理、 コミット履歴、ライブプレビュー、ワイヤレスリモートデバッグ、グローバルCDN上のプッシュボタンホスティングが含まれます。 その他のコードエディター機能は以下の通り:

• インテリセンス
• コマンドパレット
• コード・ピーク
• 明るい／暗いテーマ

スタジオエディター](/images/studio/studio-navigate-editor.png)

モジュール

8th Wallモジュールは、プロジェクトの開発効率を飛躍的に高めるために設計された強力な8th Wall機能です。 8th Wallモジュールにより、ワークスペース内でコンポーネント (コード、アセット、ファイル) を保存して再利用したり、8th Wallで作成したモジュールを検索してプロジェクトにインポートすることができます。

第8ウォールモジュールについて詳しくはこちら。

ランディングページ・モジュール

ファイルブラウザの隣にモジュールというタブがあります。 、基本的なEmptyプロジェクトを含む各サンプルプロジェクトには、"Landing Page "モジュールが付属しています。 一般的なモジュールについての詳細は、 8th Wall Modules overviewをご覧ください。

スタジオランディングページモジュール](/images/studio/studio-navigate-landing-page.png)

ランディングページはモジュールコンフィギュレーターでカスタマイズ可能です。 すべてのランディングページテンプレートは、 、様々なレイアウト、改良されたQRコードデザイン、主要メディアのサポート 、ブランディングと教育のために最適化されています。

ランディングページは、ユーザーがどのようなデバイスを使用していても、有意義な体験ができるようにします。 これらは、Web ARエクスペリエンスに直接アクセスすることが許可されていない、またはできないデバイス上に表示されます。

ランディングページはお客様の設定にインテリジェントに適応します。 例えば、こうだ:

:::tipデバイス間で一貫した体験を保証するため、すべてのプロジェクトでランディングページモジュールを使用することをお勧めします。 :::