本文へスキップ

インターフェイスの操作

警告

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

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

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

StudioInterface1

StudioInterface2

ヒエラルキー

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

StudioHierarchy

資産

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

StudioAssets

ビューポート

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

StudioViewport

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

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

シミュレーター

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

Simulator1

Simulator2

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

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

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

SimulatorPreview

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

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

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

ツールバー起動

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

StudioLaunchToolbar

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

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

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

StudioPublish

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

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

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

一般設定

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

StudioGeneralSettings

スペース設定

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

ソース管理

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

入力

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

コードエディター

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

プレイモード

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

インスペクター

エンティティとそのコンポーネントを検査し、構成する。 エンティティとそのコンポーネントを検査し、構成する。 エンティティとコンポーネントについては、 Key Conceptsを参照してください。

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

コンポーネントの追加

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

StudioNewComponent

コンソール

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

StudioConsole

コードエディター

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

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

StudioEditor

モジュール

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

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

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

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

StudioLandingPageModule

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

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

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

StudioLandingPageModuleExamples

チップ

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

:::