奥会津只見 イラスト美術館 雪まつりに関連したコンテンツを作って公開しよう
何かしらの方法でWebARを体験してもらうコンテンツの制作を目指しました。
今回の１人ハッカソン概要のおさらい
- 2022年2月第2週の週末 只見ふるさとの雪まつり
概要：本来只見ふるさとの雪まつりが開催される予定だった2月に合わせて公開を目指す1人ハッカソン。当初の目標は、お〜いお茶ランド 茶畑のひみつ編のようなWebARのイメージで、このサイトのミニ雪像報告記事を要素として取り入れることでした。（「ミニ雪像2019」の記事一覧（2019年の報告記事））
結果報告
大胆すぎるくらい期限オーバーとなりましたが、WebARの開発環境の構築とコンテンツ公開の方法に目途が立ってきたため、ここで結果発表とします。画面サイズ/アスペクト比/端末のブラウザ等で表示や制約が異なることを学べたのは大きかったです。また、ARに限らず、Web上でインタラクティブに動く3D表現そのものに興味があることに、今更ながら気づきました。
１。雪まつりにちなんだものを作る。
➡︎作りました。ミニ雪像記事は要素にできませんでしたが、雪像をテーマに作ったものがあります。
２。WebARを取り入れる。
➡︎取り入れました。
３。どこかのサイトで公開する。
➡︎ZapWorksにアップロード＆公開して試せました。
ただ、イメージトラッキングを使用したことや、各種端末・ブラウザの対応など、一般公開にはハードルが高いです。モニタや端末を用意して、イベントブースで使用したいと思います。WebARに関しては別途録画しました。
４。前回の１人ハッカソンで作成した2Dのすごろくも公開する。（前回保留分）
➡︎公開しました。
元々サポートはしていないものの、前段階ではスマートフォンでもプレイできたのですが、現在は手持ちのiPhoneではサイトが表示されず、Androidはリロードすれば表示されるような状態です。Unityのバージョンをあげてビルドし直したらどうなるかも試してみたいと思います。
制作時はまだ画面サイズなどを意識していなかったので、今回、アスペクト比によってサイコロが切れるのを直したかったのですが、設定を変えるとアンカーを付けている(？)キャラクターが、色々なところに動いてしまうので、今回は断念しました、
ゲームをする際の注意点：
只見周遊すごろく
スマートフォンでは表示されない場合があります。PCの画面サイズにより、右端中央にあるサイコロが切れてしまう方は、フルスクリーン表示をお試しいただくか、可能であれば画像が切れたままのサイコロでお試しください。プレイをしている様子は、後述の動画でご覧いただけます。
ダンスバトル
GRANT ACCESS ボタンをクリックしてのアクセス許可が必要となります。
ドラッグして動かせる物体が１つありますが、動作に制限を設けていないため、画面からはみ出してどこかへ消えてしまったり、また、その物体との接触によって、STARTボタンやDANCE BATTLEの文字が動いたりすることがあります。破壊的な操作にも興味がございましたらお試しください。
各ゲームの説明：
雪像づくり
今後のミニ雪像の記事に繋げるため、「雪像づくり」をテーマに考えたゲームです。左側にいる緑色の耳の白い犬がシロちゃんです。クリックすると、２匹とも雪玉を投げますが、奥のシロちゃんは雪玉を投げるだけで、雪像づくりはしません。会場の小物類はBlenderで作りました。
只見周遊すごろく
一人でも遊べます。只見町の名所などのイラストを使い、町の紹介や名所に関する会話を楽しみながら遊べるゲームを目指して作りました。イベント会場やブースに置いて、来場者の方々とのコミュニケーションを取りやすくするようなアイテムを想定しました。右側のサイコロをクリックすると、サイコロの目の数だけチャちゃん（茶色の犬）とシロちゃん（白い犬）が只見の各所を進みます。毎回チャちゃんが先行なのもあり、チャちゃんが先にゴールすることが多いです。
ダンスバトル
一人でも遊べます。雪まつり会場で行われる、様々な参加型の催し物の１つとして雪上ダンスバトルを想定して作りました。左側のオニちゃん、右側のシロちゃんをクリックすると、ダンスバトルを始めます。また、周りの応援団（青や緑の物体）をクリックして、オニちゃんやシロちゃんを応援したり、ドラッグして動かすこともできます。
各動画の説明：
雪像づくりの動画
3Dゲームの雪像づくりをプレイしている様子です。
ダンスバトルの動画
3Dゲームのダンスバトルをプレイしている様子です。
ふるさとの雪まつりダンスバトル会場
3DゲームのダンスバトルをWebAR用にしたものを、スマートフォンでプレイしている様子です。
各動画の説明：
只見周遊すごろく
2Dゲームの只見周遊すごろくをプレイしているようです。チャちゃんが勝つことが多いため、シロちゃんが勝つ場面をご覧になりたい方向けに、シロの勝ちですバージョンもご用意しました。
説明：
WebARのイメージトラッキングの学習目的で作りました。スマートフォンで、実際に実装したサイトのQRコードを読み取り、画像（この場合、赤と青の魔法陣）にスマートフォンのカメラをかざすと、ダンスバトル会場が再現されます。イメージトラッキングと言って、イメージ（画像：この場合、印刷した魔法陣）が手元にあるのが条件になります。今回ここでは試せませんが、今後イベントなどで使用しようと思います。
