2022年12月1日木曜日

[作る]機能のご紹介 -その2:アクションを作る-

こんにちは、[e-Journey]開発担当です!

さて、以前の投稿で[作る]機能の前半部分をお伝えしました。

今回は後半部分、[e-Journey]を使ってツアーを組み立てていく部分を解説いたします。
かなり長くなるので、今回は「アクション」を作る部分に絞って解説します。

なお、各画面イメージは開発中のモノです。今後変更が入る可能性が高いこと、ご承知おきください。

[アクション]を作る

前回までのところで、作るツアーの全体ストーリーが出来上がっていると仮定します。
この説明は私が作った博多ツアーを題材に説明しております。前回はツアー作成に使う画像類をたくさん準備した、と言うところで終わっていたかと思います。
と言うわけでその続き。

全体のストーリーが出来上がったら、1つ1つのアクションから作って行くことをオススメします。


ログインして、ポータル画面から「作ってみる」⇒「アクションを作ってみる」へ進みます。

アクションの新規作成に進みます。

何も入力されていないまっさらなアクション作成画面が表示されます。
各項目を解説しましょう。

全てのアクション共通の設定

  1. アクションID
    このアクションを一意に決めるIDです。ご自身で覚えやすいIDを指定しましょう。
  2. 種別
    アクションの種類です。現時点では「テキスト」「画像」「AR」の3種類が選択できます。(今後はもっと増やしたいなー)
  3. 動作
    「未指定」「移動」「ナゾトキ」が有ります。「未指定」と「移動」は結果的に同じです。「ナゾトキ」を選択すると、問題文と回答を指定できるようになり、実際にプレイした参加者にはクイズが出題されることになります。当然正解しないと先のアクションへは進めません。
  4. アクション概要
    このアクションの概要を記載しましょう。この説明は実際のプレイ画面には表示されません。ご自身で管理しやすくするための項目です。
  5. バージョン
    アクションのバージョンです。アクションを何度か更新する場合に、何回更新したか解りやすくするための項目です。
  6. 価格
    現時点では利用しない項目です。将来的な機能拡張のために存在しています。
  7. Public/Private
    このアクションを一般公開するかしないかの選択です。「Public」にすると、他のユーザーもこのアクションを使ってツアーを作ることができます。「Private」にすると、自分のみこのアクションを利用できます。
  8. 説明用テキスト
    実際のプレイ画面に表示される文章です。「種別」で「テキスト」を選択した場合は、ここで入力した文章のみがプレイ画面に表示されます。「画像」や「AR」を選択した場合もこの文章を設定可能です。3項目あるので、自由に使ってください。
  9. 発生位置指定
    このアクションを特定の位置に入るまで発生させたくないときに利用します。「有り」を選択すると発生位置の座標を入力する項目が表示されます。地図も表示されるので、地図で地点を選択すると、その座標位置が自動的に入力されます。
    誤差も設定可能です(10m~100mの範囲)。ピンポイントで指定したい場合は小さく、大雑把に”だいたいこの辺”程度にしたいなら大きな値を指定してください。

種別で「テキスト」を選択した場合

テキストを選択した場合はここまでで完了です。
保存ボタンをクリックして、アクションを保存しましょう。

種別で「画像」を選択した場合

種別で「画像」を選択すると、以下の項目が設定できるようになります。
  1. 説明用画像
    画像を3つまで登録することができます。
    「説明用テキスト」と「説明用画像」はセットで表示されますので、1つ目の画像の説明を説明用テキスト1で、2つ目の画像の説明を説明用テキスト2で、と言うように設定できます。
    例えば実際のプレイ画面では以下のように表示されます。

    赤でくくった1の部分が、1つ目の画像と説明用テキスト1になります。
    青でくくった2の部分が、2つ目の画像と説明用テキスト2になります。
    うまく使い分けてみてくださいね。

種別で「AR」を指定した場合

ARはちょっとメンドクサイです(笑)

  1. マーカー起動/GPS起動
    その名の通り、ARオブジェクトをどうやって表示するか?の指定です。
    「マーカー起動」の場合は、マーカーと呼ばれる特殊な画像をデバイスのカメラが捉えた時に、マーカーの位置にARオブジェクトを表示させます。
    マーカーとはこんな↓やつです。

    こちらのサイトから誰でも作成できます。⇒ AR.js Marker Training
    紙に印刷して現地に貼り付けておくなどして使います。サイネージディスプレイに表示しておくのも良いかも知れませんね!
    「GPS起動」にすると座標位置を指定する画面が表示されます。

    緯度・経度で位置を指定します。実際にプレイすると、ツアー参加者のデバイスがその座標位置(付近)に来た時にARオブジェクトが表示されることになります。
    位置は直接打ち込んでも良いし、図のように地図から選択してもOKです。
    認識距離を指定すると、座標位置からどれだけ離れた位置からARオブジェクトを表示するか?を指定できます。値を小さくすると、その場所に近づくまでARオブジェクトは表示されません。値を大きくすると、多少離れていてもARオブジェクトが表示されます(ただし指定した座標位置から離れた分だけ小さく表示されます)。
    GPS起動で一点気を付けておくことは、デバイスの性能に左右される、と言う事です。GPSの精度やディスプレイの表示能力、本体の処理能力などによって、ARオブジェクトが表示されやすい/され難いなどの違いが出ます。
  2. テキスト/画像
    表示するARオブジェクトの種類を指定します。



    「テキスト」を選択すると、「AR表示テキスト」に表示させたい文字を指定できます。現時点では半角英数字のみ指定できます。例えば、”ある特定の場所に行くと秘密のパスワードが表示される”みたいな使い方ができますね。
    注意点としては、表示される向きが有ります。ARオブジェクトは初期値では北から南を向いて存在しています。テキストオブジェクトは正面から見ないと表示されません。プレイ画面ではARオブジェクトを回転させる機能も有りますが、テキストは裏からは見えない点をご承知おきください。
    「画像」を選択すると、ARオブジェクトとして表示させたい画像を指定できます。


    ARを使う場合、こっちの方が利用頻度高いのかな? マーカーをカメラで捉えたり、ある特定の場所で画像が表示されるなどの演出ができます。
    こちらも注意点が有りまして、裏側から見ると画像が反転されて表示されます。まぁ、そりゃそうだ、って話ですが(笑)
    さらにもう一点。マーカーを使う場合ですが、基本的にマーカー上のARオブジェクトは上から見ることになります。e-Journeyで扱える画像は2D画像のみです。従って、そのままだと”机に立てた薄っぺらい紙を上から見ている”状態になりますので、そこに画像が有るのか無いのか解らない状態になります。


    この場合、後述の「ARオブジェクトの回転(X軸)」を-90°にすると、正面を向いて見える状態になります。奥側へパタンと倒すイメージですね。


  3. ARサイズ
    読んで字のごとく、表示するARオブジェクトのサイズを指定します。基本的には初期値のままで良いと思いますが、実際動かしてみて調整してください。
  4. ARオブジェクトの高度
    その空間のどの高さに存在させるか?の指定です。正直、あまり変わらないので初期値のままで良いと思います(説明が雑
  5. ARオブジェクトの回転(X軸)
    縦回転です。X軸なのに縦?と思うかもしれませんが、そう言うものです。物体に横方向から(X軸)棒を刺して回転させてみてください。縦方向に回転しますよね? バームクーヘン焼いているイメージです。(ボキャブラリー...)
    ARの画像指定で説明したのがコレです。マーカーの場合は-90°固定で良いと思います。GPS起動の場合は、どのような演出をするかによります。普通に正面を向いた状態でテキストや画像を表示したいなら0、上から覗きこませたい(地面を見させる)ならマイナスの数値、逆ならプラスの数値です。お金の画像を準備して、地面を見たらお金が落ちていた!なんて演出もできそうですね。あ、なんかそれ楽しそう(笑)
  6. ARオブジェクトの回転(Y軸)
    こっちは横回転です。ケバブ焼いているイメージ...(ボキャブラリーが貧困ですいません
    Y軸回転についてはプレイ画面でも回転機能が有りますので、あまりシビアに考えないでも良いかと思います。

作ったら保存

作ったら保存しましょう。


今作ったアクション情報がサーバーに保存されます。間違って「元に戻す」をやると、ここまでの作業が水の泡ですので、注意してください。

終わったら「完了」なり「メニューに戻る」なりで、アクションの作成画面を終わらせてください。


これで1つのアクションが完成です。

サンプル:画像のアクションの例

それでは、参考までにサンプルをお見せしたいと思います。
私が作成した博多のツアーで、道案内をしているアクションをお見せします。

アクション作成画面

まずはアクション作成画面から行ってみましょうか。
縦に長いので、画像をクリックして拡大して見てください。画像アクションで3枚の画像を使っております。そしてそれぞれに対して説明文を設けております。
さて、これが実際のプレイ画面ではどのように表示されるか。

実際のプレイ画面

こんな感じでツアー参加者の画面に表示されます。説明用テキストと説明用画像がそれぞれ対応して表示されているのが解りますね。

このような感じで必要なアクションを作りこんでいきます。
e-Journeyの作業の中では、アクションを作る部分が一番大変だと思いますが、クリエイターの創意工夫が現れる部分ですので頑張ってください。
ARアクションも、様々な制約等が有りますが、慣れてしまえば簡単に作れますので、まずは簡単なアクション作成からトライするとよろしいかと思います。

さて今回は長くなってしまったのでここまで。
次回は、
  • ツアーの[ゴール]を作る
  • 作成したアクションをくっつけて[イベント]を作る
  • イベントをつなぎ合わせて[ツアー]を作る
と言うところまで解説しようと思います。

それではまた!

0 件のコメント:

コメントを投稿

法人様向けに限定公開始めました!

 こんにちわ、e-Journey開発担当です! またまた久々の投稿になってしまいました。申し訳ございません。 なんで? UIをキレイに整備しなおしていたからです。もともと、何となく思い付きで作り始めてしまったこともあり、コンセプトは良いとしても見た目がよろしくありませんでした。 ...