エミリと申します😊

今日は、spark Ar hubを使ってインスタやFacebookで使えるフィルターを作る際に、Javascriptを使ってフィルター上に時刻を表示する方法を紹介します！

記事が少なく、さらに日本語の情報は少ないので書いてみました！

完成イメージ↓

※この記事は、ある程度spark ARを使ったことがある方向けです。
初めての方はこちらから↓
クリスマスの激盛れフィルターを作ろう！
spark ARの基本的な使い方から書いてあります！

#目次
1.spark AR側の準備 / scriptを用意する
2.scripting / scripting APIについて
3.実際に時間を表示する
4.おまけ　フォントに変更。

##1.spark AR側の準備

時刻を表示するためのオブジェクトを追加します。
時刻なので、textを使います。今回は2Dのものにしました

Add object > 2D Text

わかりやすくするために、time と名前を変更しておきます。（後で使うので、自分がわかるものにしておいてください。）

名前変更

続いて、scriptをお用意します。
今回は、Java Scriptでやります。Type Scriptでもできます！操作は同じで、コードの書き方が違うだけです。

Add Asset > Script > Jave Script

クリックすると、javascriptの新しいファイルができるので、リネームしてわかりやすくしておきましょう。
今回は以下のようにtime.jsとしておきました。

time.jsのファイルをダブルクリックすると、何かしらのアプリケーションが開いてコードを編集できます！
これで準備完了です💪💪

##2 scripting / scripting APIについて

ここで少しSpark AR hubにおけるscriptingとscripting API について話します。ただ真似して時間を表示できればよい！と言う方は次のステップに飛んでください！

公式サイトのlearn > scripting / scripting APIのところにいろいろ乗っているので興味がある方はこちらもみてみてください！
公式サイトへとぶ

###・モジュール
Java Script上でspark AR hubで使っているものをもろもろ使うためにmoduleをロードする必要があります。その際にrequireを使うので注意しましょう！

使えるモジュールは全てscripting APIのところに書いてあります！
今回は、DiagnosticsとSceneと言うモジュールが必要になります。（後にフォントのモジュールも使います。）
//必要なモジュールを使えるようにする。 const Diagnostics = require('Diagnostics'); const Scene = require('Scene');

###・プロパティとメソッド

それぞれのモジュールに対して使えるメソッドが決まっています。（メソッドがないものもあります。）

今回は、DiagnosticsのlogメソッドとSceneのrootプロパティを使います。
Diagnosticsのlogメソッドは、spark ARのコンソールに表示するときに使います
Diagnostics.log("hello");
このコードで、spark ARのコンソールにhelloと表示できます。

Sceneのrootプロパティは、セットしたオブジェクトを使うときに使います。（後のコードを参照。）

scriptingの基本的な使い方は、moduleをロードして、メソッドやプロパティ、クラスをつかって行けばなんでもできます！
結局公式ドキュメントに全てが詰まっています😊

##3 実際に時間を表示する

コメントアウトで説明を書いたのでここでは割愛します！
わからないところは一つ前のステップで説明しているので参考になるかと思います！

以上になります！

時間を表示するだけだとだいぶシンプルですが、周りに何かつけたり、アレンジし放題です！😊
何か不明点、補足した方が良いところがあったら教えてください！