Reality ComposerによるAR体験の構築

(音楽)

(拍手) おはようございます 皆さん WWDCへようこそ 本日は Reality Composerを使った AR体験の構築についてお話しします 話をするのは 私 ミッシェルと 同僚のパウとアビです ARアプリケーション開発に どう活用できるか説明します Reality Composerを使って AR体験を設定する方法や Xcodeでアプリケーションに 取り込む方法を学べるはずです

まず Reality Composerとは何か？ もう知っていますね Reality Composerとは iOSデベロッパに向けた― 3DとARの開発支援ツールです すでに始めた方もいますね すばらしいARばかりでした Reality Composerが タグ付けされた投稿を見たんです 今後も続けてください

3Dに慣れていないと 3Dアプリケーションを開くのは 勇気がいることです ARを始めるのにも時間を要するでしょう でも Reality Composerを使えば プリビズやレイアウトが とても簡単に行えます ビルトインのコンテンツライブラリ あるいは 自分で作成した Usdzファイルを使用できます Usdzは Reality Composerで 読み込める― 3Dのファイルフォーマットです

一度レイアウトを行えば 簡単なインタラクションや アニメーションを追加できます コードを書く必要もありません 3Dを素早く作成することが可能です 最後に 作成したものをXcodeで アプリケーションに取り込みます

ARの構築において重要なこと それは 物理空間でどう感じるかです そして 対象デバイスで ユーザにどのように見えるかです Reality Composerは macOS iPhone iPadに対応し iOSで編集できます 通常の環境で開発を行ってから iOSで編集を行い その作業をiPadやiPhoneでも 継続できます

または iOSデバイスで開発を始めて 他に移行することも可能です

まず 私がシーンの構築を説明し パウがビヘイビアとフィジックスを 説明します その後 アビが アプリケーションを構築します

まずは シーンの構築です シーンとは何でしょう？ RealityKitとReality Composerの セッションで聞いた方もいますね シーンは４つのエンティティで 構成されます アンカー オブジェクト ビヘイビア 物理世界

各シーンには 必ずアンカーが１つ存在し プロジェクトを始める際に どんなシーンを構築するか聞かれます 例えば 部屋やステージや テーブルの上などであれば “水平”を選択します 壁であれば“垂直” 本や容器やカタログや 映画のポスターを増やす場合は “イメージ”を選択 セルフィーに使う眼鏡や帽子などは “フェイス”を選択します 複数のシーンがある場合も １つか２つのシーンから 始めれば十分です

今回は 水平を選択した例を紹介します こちらを見てください Reality Composerの画面です ARで見るのとまったく同じように メインビューポートに配置しています 右側のペインには 選択したすべてのプロパティと 設定オプションが表示されています ここでは 丸枠の中のテキストが 選択されているのが分かります オブジェクトかシーンを選択できます 次に進む前に iPad上でも 確認してみましょう このシーンを覚えておいてください 後ほど実施する チュートリアルで使用します 季節と太陽系のレッスンで ARを構築します

デモに移りましょう 本日は ３つのタイプの プロジェクトをお見せします 最初は入門編です

Reality Composerを使った ５つの基本事例を紹介します 恐らく数分で終わります 次に紹介するのは より複雑で 手間のかかる事例ですが コードを記述せず Reality Composerだけで作れます 例えば デベロッパでない方や 経験の浅い方でも 簡単に始めることができます 最後に 先ほどの季節のシーンを ARで構築します では 入門編から見ていきましょう どのように見えるか分かるように ARで表示します ５つの事例です プレイを押すと動きが見えます 皆さんに あいさつを 元気？ らせん状のものが回転しています 次に こちらに近づくと チェスの駒が揺れます

タップします (はじける音) 音がします (はじける音) 楽しい音です アニメーターの方であれば オリジナルのモデルを 作っているでしょう それを Reality Composerに 取り込めます タップダンスを踊らせることも可能です 他にも 用意された動きを オブジェクトにつけられます また この動きをオリジナルモデルに つけることも可能です

これがシーンです (拍手) 次は より複雑で凝った事例を お見せします 皆さん カメラが動いているのに お気付きですね このように２本の指を動かすだけで 画面が移動するので コンテンツを好きな方向に 変えられます “Platforms State of the Union”の セッションに登場した島です ここに手を加えます 今から作るのは 美術館の展示品や 観光センターにある ジオラマ模型のようなものです ARで見てみましょう プレイを押してスタートします

(波が打ち寄せる音) 波の音が聞こえます

ヘリコプターをタップします (ヘリコプターのプロペラ音) ロケーションの情報を得るために マーカーをタップすると それぞれの場所の情報が表示されます 次はこちらです

(ヘリコプターのプロペラ音) このシーンの作成ステップを紹介します

実は カスタムのコンテンツは あまり使っていません 島とヘリコプターのUsdzだけを作成して それをインポートしています 残りはコンテンツライブラリにある 豊富な素材から選びました テキスト 基本図形 このシーンでは マーカーに 基本図形を使いました ２つの素材をグループ化して 作成しています こちらはテキストです 通常 2D環境で仕事をしていて 写真やグラフを扱っている人も 多いと思います それらも もちろん Reality Composerで使えます 写真などの素材を取り込むには 先ほど見たライブラリの Picture Frameを使用します

では どのように動きをつけたのか お見せしましょう 右上の“ビヘイビア”を クリックします 先ほど見たビヘイビアの 一連の流れが確認できます 掲示されているアイテムが シーンの動きと連動しているのが 分かるでしょう “Look At”を選択すると カメラの方を向きます 最初に出てくるのは島だけなので それ以外のものは すべて隠しました その後 順番に出します 0.2秒後に ヘリコプターの テキストを出します そして ヘリコプターが登場 次に下からマーカーが出てきます プレビューで動きを 確認することも可能です

裏技を教えましょう ここに鳥がいますね

この鳥は 群れになって 島の周りを回るようにしました これは 実は鳥ではありません 基本図形を ただ組み合わせたものなのです ２つのカードを重ねて 飛んでいるように見せています 手間をかけなくても ２つのカードを組み合わせるだけで アニメーションを作成できます 通常 3Dで何かを作るには 膨大な時間を費やしますが これなら数秒です

Reality Composerを使うことで これらのものが コードの記述なしに作成できます ここで作成したファイルは 誰とでも簡単に共有でき Quick Look for ARで プレビューすることも可能です 以上です (拍手) では 季節と太陽系のレッスンに 移りましょう ３つの天体を追加します 太陽 月 地球です プレースホルダのオブジェクトを使って 描いていきます ここに太陽を置きます

次に これを複製します

地球を作りましょう

カメラを動かすので 少しズームアウトします この矢印をつかんで 地球を移動しましょう 次は 月を作るので もう一度 複製して この辺りに移動します

リング内をつかんで上に移動できます この辺りで いいですね 次に 月を縮小します リングをつかんで内側に寄せます

いいですね 少し近づけます ３つ完成しました リングを外側にドラッグして 太陽を拡大します

いいですね

３つのアイテムができました

テキストを追加するので コンテンツライブラリで テキストを選択します 位置が少し低いので 緑の矢印を上に引っ張ります スナッピング機能で 基面からポップアップして見えます 左上の磁石アイコンをオフにすると 自由に動きますが このまま前に移動します 太陽から50センチ程度 離します

いいですね 右側のペインを開いて テキストを変更します “Autumn”と入力します

このような要素を簡単に追加できます

ほぼ位置が決まりました 指で画面を触ると カメラが動き回ります

次に矢印を追加します

矢印の向きがズレているので カメラを動かします 基面上に緑のリングが見えます このリングはカメラと連動していて 常に作業したい場所にあります カメラを動かしたくない場合は 矢印をタップすると リングが太くなり固定されます では 回転させます スナッピング機能で 15度ずつ回転していますが 自由に動かすことも可能です このように 緑のリングは 常に水平面を移動します 今は 太陽と地球と “Autumn”のテキストの間に固定します

簡単に 好きな場所に 固定することができます 次に この矢印を少し変更します 磁石の隣にあるアイコンを使って 変更を加えます 見やすいように拡大しましょう ハンドルをつかんでドラッグします 高さを少し削りましょう 少し戻します

完璧です 次に 少し前に移動します

数分ですべて配置できました

今は それぞれの天体が 分かりづらいので カスタムUsdzをインポートします すでに配置は完了しているので オブジェクト上でタップして “リプレイス”を選択します ここで“太陽”をインポートしましょう

先ほどのオブジェクトと 同じ大きさと位置に 太陽が置換されました

地球も同様に置換します

手早くやります

完成です 次に 月は―

少しカスタマイズします マテリアルを選択して 好きな色にできますが ここでは無難にグレーを選択します

オブジェクトを装飾したい時は ダブルタップすると 周囲にフレームが現れます シーンを引きで見たい時は 基面上の好きな場所を ダブルタップします フレーム操作のショートカットも 左上にあります

ビヘイビアを追加する準備ができました 他にもいろいろ追加できますが 時間の関係で割愛します デモを終了する前に いくつか便利な機能をご紹介します 先ほど 置換を行いました すでに アニメーションなどの ビヘイビアを設定していた場合― それらは引き継がれます 新しいコンテンツと置換する際 時間を短縮することが可能です また 複数のシーンがある場合― 左上のScene Selectorから アクセスできます そこからシーンの追加も可能です

Xcodeでエンティティに 名前をつける方法は 後ほど詳しく説明します ここでは ペインを開いて 設定パネルに“太陽”と入力します

間違えて地球を 動かしてしまった場合は Undoで操作を取り消せます さらに 長押しするとRedoで やり直しも可能です Undoの前にやろうとしていた操作を もう一度実行できます

いいですね

作成したプロジェクトを 簡単に共有するには デバイス間でAirDropが使えます iOSで編集したものを 開発マシンとiOSデバイスで 簡単にやりとりできます

いいですね

ビヘイビアを追加する前段階まで シーンが完成しました Reality Composerを使って シーンの構築を行ってきました コンテンツライブラリを使って オブジェクトを配置し カスタムUsdzを挿入しました

次は ビヘイビアの追加に移ります では パウを迎えましょう (拍手) ミッシェル ありがとう

では コンテンツを 配置してきたシーンに いよいよ命を吹き込みます オブジェクトをタップしたら 音楽が鳴り 近づくと文字が現れるようにします Usdzアニメーションを 流すことも可能です それには Reality Composerの ビヘイビア機能を使います 始めます シーンを構成する４つの要素が アンカー オブジェクト ビヘイビア 物理世界です ビヘイビアの対象になるのは 同じシーンのオブジェクトだけです

詳しく見ていきましょう ビヘイビアを構成するのが トリガーとアクションシーケンスです アクションシーケンスは トリガーによって始まります 例えば レコードプレーヤーは タップすると音楽が流れ 同時に回転します この場合 ビヘイビアを作成し タップをトリガーとして 音楽と回転から成る アクションシーケンスを作ります

ビヘイビアを作成するには アクションシーケンスを始める トリガーを選択します 使用できるトリガーは５種類です

“Start”はシーンの開始と同時に 始まります

“Tap”は ユーザがオブジェクトを タップすると始まります

“Proximity”は オブジェクトとの距離を設定し カメラが その設定値より近づくと 始動します

“Collision”は ２つのオブジェクトを定義し その２つが衝突すると動き出します 最後が“Notification”です これはアプリケーションから プログラムで実行します 詳しくは 最後に説明します

まず アクションシーケンスです

アクションシーケンスを 変更する方法は３つ グループ ルーピング エクスクルーシブです まずは グループ

デフォルト設定では 連続的にアクションを起こします 複数のアクションを 同時に動かすことも可能です この場合 １が終了した直後に ２と３が同時に動き出します ４はグループ化されたアクションが 完了したら動きます

次に ループも可能です 例えば シーンの中で 音楽を流し続けたいとします その場合は 音楽のビヘイビアを作成し アクションをループ設定にします

最後は エクスクルーシブです アクションシーケンスに エクスクルーシブな設定を行えます

１度に１つのアクションだけを 動かします １つのエクスクルーシブな シーケンスが始まると 他のエクスクルーシブな シーケンスは止まります エクスクルーシブでないシーケンスは エクスクルーシブなシーケンスと 同時に動かすことも可能です

以上が概要になります 実際の動きを見ていきましょう

Visibility Actionsは アニメーションを使って オブジェクトを動かせます 例えば 基本的な動作である フェードインやフェードアウトです もっと楽しいものもあります 大きくなって 小さくなる アニメーションです

オブジェクトを所定の場所で 動かすことも可能です “Emphasis”では オブジェクトに さまざまな動きをつけられます 基本の飛び出す動きです こちらは もっと楽しい動きです

スピンや 他のオブジェクトの周りを 回ることも可能です Usdzのアセットがある場合は ボーンアニメーションを 使うこともできます

Move Actionsは オブジェクトの 変換 縮小 拡大 回転が可能です “Move By”は オブジェクトの 現在位置を元に動きます この場合は ２マス前に進んだあと 左に１マス進んでいます “Move To”は オブジェクトが 特定の位置に移動します これは 起点に戻るように 設定しています

“Look At”は オブジェクトの正面に カメラが来ます 馬が常に正面を向いていますね

アニメーションは以上です サウンドに移りましょう オーディオを追加する方法は ３つあります

“Play Sound”は 音がオブジェクトに連動します ここでは馬が音を立てています “Play Ambient”は シーンに合わせて音が鳴ります “Play Music”は シーンにかかわらず音が鳴ります

今からデモを行い― 先ほどのシーンに ビヘイビアを追加していきます こちらは 先ほどより 完成度の高いシーンです 月 地球 太陽があり そこに 太陽光線と季節が 書かれています

右上端にある“ビヘイビア”を クリックします

すでに ビヘイビアを設定しているので “プレイ”で確認します

現在 月も地球も太陽も 動いていません 太陽光線と季節のテキストが 順番に現れます 今から 月と地球と太陽に 新しいビヘイビアを設定します 新規作成から始めましょう

プラスマークを押すと 設定されたメニューが出てきます 今回は カスタムトリガーから始めます

まず アクションシーケンスを始める トリガーを選択します シーンがロードされる時に オブジェクトを動かしたいので ライブラリから “Scene Start”を選択します

アクションシーケンスが始まります 地球が太陽の周りを公転したあと 月が地球の周りを公転し 同時に地球と太陽を自転させます 公転から始めます

アクションライブラリで “Orbit”を選択します まず最初に アクションの対象物を定義します この場合 対象物は地球 中心点は 太陽になります

デュレーション 回転 整列 方向も ここで設定が可能です 反時計回りを選択します

アクションカードの“プレイ”で プレビューが可能です

速すぎますね シーンに合うように デュレーションを変更しましょう 20秒から始めます

変更して確認します これで良さそうですね 月の公転に移ります もう一度 ライブラリで “Orbit”を選択します アクションの対象物は月 中心点は 地球です

デュレーションは同じにします 物理的な正確さではなく シーンの見栄えを重視したいので 回転は４回を選択しようと思います 月は地球の周りを公転するので 月を軌道上に置くため“整列”を 選択します ここでも反時計回りです プレビューします 良さそうですね

では 公転は終了して 自転に移りましょう “Spin”を選択し 太陽から始めます

デュレーションは同じく20秒 回転は４回が良いと思います

同じく反時計回りを選択 ちょうど良い回転速度です

では 地球に最後のアクションを 設定しましょう

地球を選択し自転させます 同じデュレーション 太陽よりも回転数を多くしたいので 10回を選択してみます 同じく反時計回りです プレビューします　いいですね アクションシーケンスの設定が 完了したので 全体の動きを確認しましょう ヘッダにある“プレイ”で 確認できます

地球だけが動いています アクションシーケンスは 動作が順番に起こるからです 今は すべてを同時に動かしたいので 各カードをドラッグ＆ドロップで 重ね合わせます

４つのアクションをグループ化します 次に進みます ありがとう (拍手) “プレイ”を押して すべての動きを確認します 公転と自転が同時に起こり― 地球が通り過ぎる時に テキストが表示されます

いいですね (拍手) アジェンダに戻ります

インタラクションやビヘイビアを 簡単に取り込めました 次は フィジックスに移ります

リアルなAR体験を作り上げるには オブジェクトを現実世界に送りこみます 本物のように動かすのです それには Reality Composerの 高性能な物理エンジンが活用できます 見てみましょう

物理エンジンを使って作りました 球が重力によって降下しながら ピンにぶつかります 最後に 球が緑の板で跳ねると “WINNER!”と表示されます このシーンを作っていきましょう

物理シミュレーションを 実行する方法は３つです 豊富な素材により オブジェクトの動きを設定できます

フォースアクションと重力で 力のかかり具合を決定します コリジョントリガーと コリジョンシェイプで 衝突力学を物理シミュレーションに 取り入れられます まず “Materials”です ６種類の素材が用意されています シーンとオブジェクトに合わせて 選択します 例えば“Ice”を 素材に使った場合― オブジェクトが滑らかに動きます 一方“Rubber”は 弾むような動きをします

次は“Forces”です

シーンには 重力が設定されています 地球の重力値になっていますが 任意の値に変更可能です

フォースアクションで 最初の衝撃を与えます オブジェクトに与える 方角と速度を決定し ユーザがタップすると動き出す ビヘイビアを作成できます

オブジェクトの素材と力のかかり方が 決まったので 互いに衝突するようにします 物理シミュレーションは デフォルト設定になっていないので 衝突させたい場合は “Collide Option”を設定します 物理シミュレーションによって 動かしたい場合は “Simulate Option”を設定します これが Default Collides Simulates それぞれの動きです

(拍手) 衝突の動きは オブジェクトの形で決まります Reality Composerには ３種類の形があります 箱型 球形 カプセル 形によってオブジェクトの動きと 衝突の仕方が異なります

このようにトリガーを使って 球が板に衝突するビヘイビアを 作成できます ゲームに勝つと “WINNER!”が表示されます

フィジックスについては以上です 次は アビが登場し― アプリケーションの構築について 説明します (拍手) 皆さん お会いできて光栄です これまで Reality Composerを使って 見事な3D体験を作り上げ― 命を吹き込んできました 次は AR体験を アプリケーションに取り込みましょう

３つの方法があります まずはXcodeで― RealityKit ARや ゲームテンプレートを作成する方法 次は Reality Composerから 新規プロジェクトを作成する方法 最後は Reality Composerから ファイルをエクスポートし アプリケーションに移行する方法です

２つの基本ファイルを紹介します Reality Composer Projectと Reality Fileです Reality Composer Projectから 説明します これは Reality Composer用の プロジェクトファイルです RealityKit ARと ゲームテンプレートに含まれ Xcodeでのプレビューが可能です プロジェクトを自動的に Reality Fileとしてエクスポートします

Reality Composerの画面です Xcode 11でプロジェクトと 各シーンがプレビューできます 右上端の “Open in Reality Composer”を押すと Reality Composerが Xcodeで起動します

Xcodeのアプリケーションで プロジェクトを作成していれば 自動的にReality Fileが生成されます アプリケーションの中に組み込まれ 他のリソースと同様にアクセス可能です Reality Fileは アプリケーションや ARと連動する主要ファイルです レンダリングやシミュレーションに 必要なデータが含まれ RealityKitに最適化されます Reality Composerから エクスポートされるか あるいは Xcodeから 自動的にエクスポートされます

Reality Fileは アプリケーションから参照するか AR Quick Lookでプレビューできます AR Quick Lookについては 別のセッションをご覧ください

Reality Fileを深堀りします Reality Composerから エクスポートされているので 作成した各シーンが含まれています ここには ２つのシーン さらに 作成した各オブジェクトも 含まれています Reality Fileでは １つのシーンを 独立したアンカーとして捉えます ここには Reality Composerで設定した 水平アンカーの情報があります

Reality Fileの 最も難しい作業の１つが 文字列へのアクセスです Reality Composerにも Xcodeにも含まれています この作業をオブジェクトを扱うように 簡単にしたいと考え― コードジェネレーションを 使うことにしました コードジェネレーションは プロジェクトの構造を分析し アプリケーション内で利用できる オブジェクトを生成します ここでは Reality Composerで 太陽系のプロジェクトを作成したので そのオブジェクトファイルが 自動生成されています

作成されたAPIは 次の要素に適用されます シーン 名前をつけたエンティティ 通知アクション 通知トリガー 最後の２つは 後ほど説明します

まず コードジェネレーションで 実行するのは オブジェクトに名前をつけて コードでアクセスすることです 設定から“Configure”を開きます 例えば Usdzファイルをインポートして “太陽”と入力し コードでのアクセスに使います

Reality Composerのプロジェクトを オブジェクトに変換しましょう このプロジェクトのトップ階層は SolarSystem.swiftです シーンは“HasAnchoring”という エンティティになり ロードする時に シーンのアンカーに追加されます オブジェクトも すべてエンティティに変換され RealityKitでも 同じように作業が可能です さらに シーンをロードする方法が ２つあります 同期処理と非同期処理です

Reality Fileを同期してロードします 太陽系のプロジェクトを例に seasonsChapterをロードします 必要なコードは１行です “SolarSystem.loadSeasonsChapter” これでビューに追加できるアンカーが 返されます

次に seasonsChapterを 非同期でロードします “SolarSystem.loadSeasons ChapterAsync”と入力すると 結果が返されます 成功の場合は アンカーが表示されます 失敗の場合は エラーが表示されます

名前をつけたエンティティにも 簡単にアクセスできます 例えば“seasonsChapter.sun”で 呼び出せます Reality Composerで 名前をつけたエンティティも オブジェクトのように操作できます コードジェネレーションを使って １つにまとめることで ２行のコードだけで ARを読み込むことができます まず チャプターやシーンの読み込み 次に それをビューに追加 とても簡単です

(拍手) これが Xcodeの コードジェネレーションです Reality Fileに アクセスする方法もあります 例えば サーバからコンテンツを ダウンロードして アプリケーションに表示します そのために RealityKit APIがあります Reality Fileを 同期し ロードするには 最初にURLを取得する必要があります 次です

“Entity.loadAnchor”を使って リソースのURLと ロードしたいシーン名を渡します するとアンカーが返されます “Entity.load”を使うと アンカーの情報がなくても エンティティツリーをロードできます

次は 非同期でロードする方法です 先ほどと同じように リソースのURLを取得します “Entity.loadAnchorAsync”を使って URLとシーン名を渡し ロードのリクエストを受け取ります 統合されたフレームワークを使って 値を受け取ることが可能です そこに含まれるアンカーを ARのシーンに入力します

エンティティにアクセスするには “anchor.findEntity”を使います 例えば“太陽”“地球”“月”など オブジェクトの名前を渡します コードジェネレーションで RealityKitを使って ARをアプリケーションに 簡単に実装できます

次は ARコンテンツを アプリケーションに移行します Reality Composerで作成したAR体験を 実装する方法です ビルトインされた 便利なアクションがありますが 自分で作成できる 通知アクションも用意しました これは Reality Composerで設定する アクションです

他のアクションシーケンスと共に 呼び出され すべて同じ順番で シーケンスが配列されます 設定可能なクロージャがあるので アクションの定義が可能です コードジェネレーションを使うのと 同じように オブジェクトを経由して アクセスすることも可能です

通知アクションは ここで設定します

コードで使用できる識別子があり アクションを参照し カスタム実装を提供します

生成したオブジェクトの構造の中で アクションは エンティティと 並列に並んでいます ここには アクションと そのプロパティが存在します アクションの階層には 識別子のついた 複数のNotifyActionがあります “loadedAnchor.Actions”と アクション名でアクセス可能です アクションの配列も生成され Swiftのコレクションと同様に使えます フィルタや反復処理など Swiftの配列で可能な機能が すべて使えます

通知アクションを実装するには Alertアンカー経由でアクセスします ここでは“seasonsChapter.actions. displayEarthDetails”に続き― カスタムクロージャ “.onAction”を提供します その結果 Reality Composerで設定した ターゲットエンティティが返されます

一方 アクションシーケンスを 開始する方法も提供しています Scene Start や Proximityなどが 用意されていますが セグメントの選択やタップなど カスタムトリガーも実装できます ここで使用するのが 通知トリガーです これは Reality Composerに 設定されています 同一識別子を持つ アクションシーケンスを開始します

アプリケーションから設定します 通知アクションのようにアクセスできて コード名だけで エンティティのように動作します

通知トリガーは ビヘイビアの中に設定可能です ここでは識別子を “Show Gold Star”として コードに使用します

アクションと同じように エンティティと並びました

階層の中身を見ましょう

複数のNotificationTriggerが存在し それぞれReality Composerの 名前と識別子に対応しています ここにもフィルタや 反復処理が可能な配列があります “allNotifications”と呼ばれます

POSTメソッドを呼び出すと 通知トリガーが設定され アクションシーケンスが開始されます さらに オーバーライド設定を 有効にできます これはエンティティをコピーして そこだけにシーケンスを 呼び出す時に便利です このオーバーライドは 元の対象の名前をキーとして受け取り 新しい対象に渡します そのため 新しいエンティティだけが 対象となります

では Xcodeで確認しましょう

(拍手)

今出ているのは セッションの中で構築してきた― 太陽系のレッスンです ここに 天体の大きさを元に 第２チャプターを実行します アプリケーションは Xcode 11を使用し プロジェクトを読み込んでいます ARやゲームテンプレートを 新規作成するか Reality Composerのプロジェクトを ドラッグするだけです

プロジェクトを Xcodeでプレビューして Reality Composerで開きます

最初に概要を説明します このチャプターでは いくつかのエンティティを設定し それぞれに名前を与えています この星はSpecial Starという名で これをコードで使用します

ビヘイビアも設定されています 例えば 月がタップされると ステートを保存できます さらに 他のテキストはすべて隠して 月だけを表示します これらはグループ化され 同時に動作します

また 月がタップされたら 通知される設定にしています 地球と太陽にも同じ設定をしています シーン開始時に Look At Cameraが始動し それぞれのテキストが 常にカメラの方を向きます

また“Hide on Start”を設定し 特定のタイミング以外は 任意のエンティティを隠しています “Chapter Completed!”が一例です

後ほど コードをトリガーにした アクションシーケンスをお見せします 天体を相対的なサイズに拡大し― 同じサイズに戻します “Chapter Completed!”が表示され 地球の回転が始まると 他の天体は隠れます 通知トリガーによって アニメーションが登場し 金色の星が現れて回転し弾みます Xcodeに戻り 簡単に説明します とてもシンプルな 単一ビューアプリケーションです トップ階層にARViewがあります 次にサイズと詳細ビューを切り替える セグメントコントロール

次の“終了”ボタンで 生徒はレッスンを終えて チャプターを評価します 詳細ビューは 天体をタップした時の詳細情報

viewModelsは 詳細ビューに表示されるテキスト ローディングを始めるための アプリケーションロジック 読み込みます

コードジェネレーションを 使っているのが分かります プロジェクトは自動的に 実数オブジェクトに変換されるので SizeChapterの プロパティとして使用できます 例えば“SolarSystemLesson. SizeChapter”は実数型です では シーンをロードします コードも見ましょう SizeChapterを 非同期にロードしています

タップして起動するように loadedAnchorが与えられています それをシーンに追加します 後ほど SizeChapterを使うので プロパティに保存し NotifyActionsを設定して 準備しておきます 先に進みます 数行のコードでAR体験を実装し Reality Composerと 同じように動かします

ここには“Chapter Completed!”が 隠れています 天体をタップすると 表示されるテキストは 常にカメラの方向を向いています

太陽もです 数行のコードでプロジェクトを Xcodeに移行できました 次は 詳細ビューの表示です 太陽をタップした時には 表示されませんでした Xcodeに戻って Notify Actionsに書き込みます

Notify Actionsは 自動生成されるので すべてのアクション配列も得られます それらをフィルタにかけ 表示で始まるアクションを抽出します

このコードです

Notify Actionsを SizeChapter内に設定しているので Reality Composerにジャンプできます

月 地球 太陽です 各詳細が表示され コードでアクセスできます そこから表示で始まる アクションだけを抽出して 同じクロージャを設定します Xcodeに戻ります ここを見てください “sizeChapter.actions.allActions” フィルタをかけて Notify Actionから識別子を抽出し 表示で始まるか確認します すべての表示アクションで繰り返し 各プロパティに 同じクロージャを設定します ここでは 月には月 太陽には太陽と 通知の対象を定めます これで各ビューが表示されます 確認しましょう それぞれの天体をタップすると 異なるビューが現れます

始めます まず 月をタップします 通知アクションを設定し それらの通知を確認すると 画面下に 詳細情報が表示されます 地球なら地球の情報 太陽なら太陽の情報が現れます いい出来です 保存しているステートがあるので ３つすべてをタップします ３種類のアクションを呼び出し 右上端に“終了”ボタンを表示します ここで 通知トリガーを使って 相対的なサイズに拡大し 同じサイズに戻す動作を実行します セグメントコントロールの 右上端のボタンで設定します

Interface Builderで設定し 接続した― “segmentedControlValueChanged”で 実行が可能です

通知アクションをトリガーにして Reality Composerで設定した アクションシーケンスを始動できます

この部分で 各天体を 元のサイズに戻すことができます セグメントコントロールを選択すると 太陽を地球の相対的なサイズで 表示できます “scaleToRelativeSizes”の シーケンスを実行します

最後に Interface Builderで設定した “終了”ボタンをタップします

すると“Chapter Completed!”が 現れます Reality Composerに ３種類の通知トリガーを設定したので すべてのシーケンスが作動します コンテンツが徐々に消えて―

小さな地球と月が回り始めます

最後に“Chapter Completed!”が 登場します

アプリケーションで確認しましょう

ご覧ください Reality Composerの設定どおりに 動作しています 地球と太陽の前で サイズコントロールをタップします 地球に比べると 太陽がいかに大きいか分かります

サイズを戻します 右上端のボタンをタップして レッスンを終了します コンテンツが消えると “Chapter Completed!”が現れ― 地球と月が回っています 通知トリガーと通知アクションを 簡単に作成して アプリケーションにARを 実装できました 最後は オーバーライドについてです アプリケーションステートを使って コンテンツを表示します レッスンの達成度を 星を使って評価しましょう

今日は すばらしいレッスンだったので ３つ星にします 先ほど ステートを保存した― ビューの詳細を呼び出すメソッドを ここで使います

コードを簡単に説明します まず Reality Composerで設定した 星にアクセスします

これです

“Special Star”と入力し Xcodeで開きます 次に“showGoldStar”のシーケンスを 始動させると 最初の星が表示されます ３つ星を表示したいので デモが終了した2.5秒後くらいに 星のクローンを作成します 位置は右上に配置したいと思います シーンに追加しましょう 次に“post overrides”を使って シーケンスの最初の対象に渡し さらに 新しい対象となる “rightStar”に渡します 左側の星も同じようにするため 再度コピーして それを左下に配置します シーンに追加して 最初の名前をオーバーライドし シーケンスの対象となる “leftStar”に渡します アプリケーションを起動して ３つ星を確認しましょう 設定した星は１つですが アプリケーションロジックで実行します

今までのレッスンを確認します

終了しました

“Chapter Completed!”に続き 星が現れます 続いて ２つ目の星 そして ３つ目の星も現れました (拍手)

ARをアプリケーションに 簡単に実装できました まず 通知アクションで カスタム実装を提供し その後 通知トリガーを使い アクションシーケンスを始動しました

本日の総括です Reality Composerのモジュールを使って すばらしいAR体験を作成しました 球体や立方体がありました 次に ビヘイビアと インタラクションを使って―

命を吹き込みました 最後に コードジェネレーションと 高度な統合機能により AR体験をアプリケーションに 取り込みました 本日は 様々なAR体験を 構築してきました 今後 Reality Composerを活用し すばらしいARアプリケーションを 作成してください 関連するセッションや ラボも開催されます 質問のある方は お気軽に参加ください 引き続き WWDCをお楽しみください (拍手)