最初のプロジェクト

小さな AR シーンを約 10 分でつくって公開します。スマートフォンを絵に向けると 3D オブジェクトが現れ、タップすると上に上がります。

もっと大きなプロジェクトも、同じ手順でつくります。

1. プロジェクトをつくる

arclip.design にサインインして、プロジェクトをつくります。Studio が、空のスペースとシーン 1 つと一緒に開きます。

2. シーンが表示されるタイミングを決める

シーンにはそれぞれトリガーがあります。トリガーとは、シーンを表示させるきっかけのことです。

1. 左側のレールで Scenes を開きます。
2. シーンを選択します。
3. トリガーを Image に設定します。
4. 印刷する絵、または別の画面に表示する絵をアップロードします。
5. 絵の実際の幅を入力します。AR Clip はこの値を使って、コンテンツを正しい大きさで表示します。

選べるトリガーは次のとおりです。

トリガー	シーンが表示されるタイミング
3D	すぐに表示。AR なしで、テストに便利
Image	アップロードした絵をカメラがとらえたとき
QR	QR コードが読み取られたとき
Surface	見る人が床やテーブルに置いたとき
Face	顔が検出されたとき
360°	パノラマの環境が開いたとき

事前にスキャンした現実の場所にコンテンツを固定するには、Surface を選び、Use VPS をオンにします。VPS シーンを参照してください。

細かい模様のある絵を使う

写真はトラッキングしやすい絵です。白地にフラットなロゴだけの絵は、カメラが手がかりにできるものがないので向きません。解像度よりも、コントラストと不規則な細部のほうが大切です。

3. オブジェクトを追加する

Layers & assets を開き、モデルをキャンバスにドラッグします。または上部バーの + を押して、キューブなどの基本図形を追加します。

選択したオブジェクトの横に出るツールバーで、移動、回転、拡大縮小ができます。グリッドはプロジェクトの単位を使うので、1 メートルのキューブは、実際の絵の横でも幅 1 メートルになります。

4. マテリアルを設定する

1. オブジェクトを選択したまま、右側のパネルで Material を探します。
2. マテリアルスロットをクリックします。Edit material パネルが開きます。
3. タイプは Standard のままにします。色を設定し、次に粗さ（Roughness）を設定します。

見た目をいちばん大きく変えるのは粗さです。布や石なら高く、磨いた金属なら低くします。

5. タップに反応させる

タップすると、オブジェクトが上に上がるようにします。まず上げた位置をステートとして保存し、次にイベントからそのステートに切り替えます。

1. オブジェクトを選択したまま、States コンポーネントを追加します。最初のステートには、今のままのオブジェクトが保存されます。
2. add state をクリックします。新しいステートが選択された状態になります。オブジェクトを 0.2 m 上に動かします。
3. もう一度最初のステートをクリックします。オブジェクトが元の位置に戻ります。
4. Events コンポーネントを追加します。イベントがすでに 1 つあり、トリガーは Press on the object になっています。
5. イベントをクリックして開きます。On click or tap の下で + add action をクリックし、Set state を選びます。
6. State で 2 番目のステートを選びます。Duration を 400 ms にします。

これで、コードなしのインタラクションが完成です。

音を加える

イベントには、音を鳴らすステップがありません。タップで音を鳴らすには、パッチを使います。パッチの Play sound ノードは、実行されるたびに音声ファイルを再生します → Patch editor

編集中は何も動きません

エディタはシーンを表示しますが、ロジックは実行しません。作業中のアニメーションが邪魔にならないようにするためです。試すには Preview を押します。

6. プレビュー

Preview を押すと、見る人と同じ状態でプロジェクトを確認できます。タップと動きを確かめましょう。

絵を使うシーンは、スマートフォンでプレビューし、印刷した絵に向けて確認してください。パソコンでは、斜めから見てもトラッキングが保たれるかどうかがわかりません。調整が必要になるのは、たいていその部分です。

7. 公開する

上部バーの Publish を押します。プロジェクトが、誰でも開けるリンクになります。アドレスは自動で用意されます。独自ドメインをプロジェクト設定で接続することもできます。

変更するたびに、もう一度公開してください。見る人に表示されるのは最後に公開したバージョンで、作業中のものではありません。

次に読むもの

やりたいこと	読むページ
各パネルの役割を知りたい	インターフェース
大きなプロジェクトを整理したい	シーンとスペース
タイムラインで動きを組み立てたい	Animation
値や条件を使ってロジックをつくりたい	Patch editor
ボタンやスコア表示を追加したい	UI editor
エンジンの動きのしくみを知りたい	Creators Engine

---

次へ： インターフェース — Studio のパネル、バー、ボタンがそれぞれ何をするかを説明します。