HackDay2017でWebVR迷路ゲームを開発して最優秀賞をいただいた話 #hackdayjp

IMG_2980

 

こんにちわこんばんわ。エンジニアのひかるです。
一昨年、去年と参加させていただいている HackDay2017 に今年も参加させていただきまして、
「まよいの墓」というWebVRゲームを開発しました!

今回の記事は当日の様子や簡単な作品紹介、感想になります!
後日、実際に実装を担当したメンバーが作品の技術解説記事をアップするみたいですよ。

 

HackDay2017 とは

e218f44c8692de688cafdc320c4f557f

公式HP: http://hackday.jp/

もはや説明は不要なのではないかと思いますが念のため。

Yahoo!JAPANさん主催の日本最大級ハッカソンイベントです。
開発テーマはフリーで、24時間ぶっ通しで開発するというワイルド刺激的なイベント!
24時間(開発時間)+ 作品発表時間や表彰式などもあるので、ほぼ丸二日間です。
今年はハッカソン以外にも謎解きライトニングけん玉なる体験コンテンツもあったみたいですよ。

 

 

参加の経緯

冒頭にも書きましたが、一昨年と去年も参加させていただき、今年で3回目の参加となりました。
過去の参加の様子は、こちらのブログ記事からどうぞ!

ワイルドで刺激的なHackを求めて24時間ぶっ続け開発の「Open Hack Day Japan 3」に参加してきました。 #openhackday

『HackDay2016』に参加してきました。 #hackdayjp

2015年にRICOH THETAの全天球写真・動画を見るための全天球ビデオ視聴インターフェース『FAI』を開発。

2016年には『ちくるちゃん』というサボり監視システムなるいたずらっ子を開発。

去年がちょっと悪ふざけが過ぎたので、今年はまた一昨年みたいな作品を作りたいな〜と思いつつ、チームメンバーを社内から募り、参加登録しました。

 

 

作品の企画

 

IMG_4332

企画の話の前に、今回のワイルドクレイジーチームメンバーの紹介だぜ!

代表・工作・プレゼン担当:ひかる(私。進捗を聞き続ける進捗おばさん。おつかいが下手。)
発案・設計・実装担当:よしだ(チーム最年長であり最年少のような見た目をもつプログラマー。二児の父。)
実装担当:かつみ(優しさ溢れるチームのお兄さん。HackDay当日の記憶はない。
実装担当:えんどう(現役学生で豊かな発想力を持つルーキー。当日は夕方ごろから参加という余裕を見せつける。)

4人ともプログラマーなのですが、私だけ開発には加わらず、工作や発表に集中しました。
実装担当のえんどう君は、現役学生のHackDay参加です!

さてさて、そんなチームメンバーで案だしのために居酒屋へ赴き、いわゆるチンチロハイボールで負け続け男前ジョッキを体に流し込み、泥酔しながら企画されたのが今回の「まよいの墓」というVRゲームです。
残念ながら私は男前ジョッキを掲げながら、「VRやりたいっす!VRやりたいっす!」と叫んでいたことしか覚えておりません。

 

と、一部はただの酔っ払いのようですが、発案者であるよしだ氏にはきちんとした理由があったみたいです。
以下よしだ氏からのお言葉。

技術シーズだとVRを使ってみたかったので、これを何かと組み合わせたかったのと、うちの上の子(小2)が迷路が好きすぎて、紙に迷路かきまくって、「パパやってー♡」っていっつも言ってくるんですけど、正月休みでカミさんの実家に帰った時に、親戚の子たちも集まってて、なんかレゴで迷路つくってたんですよね。
レゴで迷路つくるとか考えたこともなかったから、「へー」って思ってたんですけど、このつくった迷路を実際に動きまわれると楽しいかも?と思ったのです。
こどもも、ゴールしそうになると、よく迷路ぶっ壊してちょっかいかけてきてたんで、そういう要素もあるといいのかなーって。

IMG_4293

 

ちなみに、この作品の企画理由はHackDayが終わった数日後に初めて聞きました。

media-20170216

可愛いお子さんのために迷路ゲームを作るその心にチームメンバーも心を打たれました。

そんなこんなで事前準備をしつつ、当日に挑むのであります。

 

 

当日のこと

 

20170204_120513

なんと前日に私以外のメンバーがインフルなのではないかと思うぐらいの風邪でダウン
どうにか当日は参加できたものの、3人ともお腹にくるタイプの風邪らしく、ストッパを常備しトイレの位置を要確認。

そんな中、HackDay2017がスタートするのであります。

 

 

IMG_2938

「ハックタイム!」とおなじみの掛け声で開発スタートです!

 

開発時間

20170204_120530

去年に比べて、席や通路も広々としていて開発しやすい雰囲気です。

お弁当も、夜食や軽食もちょうど良い量で配布されて、運営スタッフさんの優しさが伝わってきます。。

 

20170204_194010

「ちょっとあのずっと画面に映ってるやつ、見てきた方がいいよ」と言われ見てみると、なんとモニターでずっと私のツイートが晒されているではありませんか。ナンデー!?

 

20170204_194022

しばらく晒され続けていました。はずかぴー!フォローしてー!

トイレの位置と空き状況を連絡し合いつつ、作品の方は開発終了ギリギリまで粘り、なんとか形になりました!
開発中のことはきっと後日の技術解説記事でまたピックアップされると思いますっ!

 

作品発表

開発時間が終了し、90秒のプレゼンタイムです。

 

IMG_4324

(壇上の舞台裏。緊張でカメラに気づかず硬直している私。ぐっとしてるかつみさんがかわいい。)

 

さてさて、私達が24時間で開発した「まよいの墓」はこちらになりますっ!

 

 

まよいの墓 – HackDay2017 #hackdayjp from Hikari Fukasawa

 

 

皆さんご存知のレゴブロックを使って迷路を作ると、レゴと同じ迷路がVRで遊べてしまうVR迷路ゲームです。

VRのHMDを装着して脱出しようとする人と、迷路を作ったり「ちょっかい」出す人に分かれて遊ぶことができますっ。
VR側の人はひたすらゴールを目指してVR内を動き回ってもらいます。

「ちょっかい」を出す人は、まず最初に迷路を作るのですが、VR側の人探索中でもレゴブロックを移動させて迷路の道をふさいだり「ちょっかい」を出すことができます。
(今回はちょっと24時間では間に合わず、途中の「ちょっかい」はiPadで操作しています。)

 

IMG_2971

「ちょっかい」を出す人の目の前には、VR側の人が今迷路のどこにいるのか、現在地が表示されている迷路の上空図画面があるので、その画面を確認しながら「ちょっかい」が出せますよ〜。

詳しい技術解説はまた後日!
WebVRで作成されたゲームなので、使用言語は、HTML, CSS, JavaScript とWebプログラマならではの技術を生かしてみました。

 

体験の様子

IMG_4327

プレゼン時間中と同時に、プレゼン会場の上(開発会場)では開発された作品の展示会が行われていました。
私たちの作品もたっくさんの方に体験していただけました!嬉しい!

本来多くのVRコンテンツは、HMDをつけている人しか楽しむことができず「今何見えてるのー?」と、つけていない人は何もできずにいることが多いかと思うのですが、
体験されている方々の反応を見ているとHMDをつけている人が「絶対なんかしてるでしょー!あー!道なくなったー!何してるのオーーー!」という全く逆のリアクションが見れてとても新鮮でした。
そして、狙い通りの、HMDをつけている人・つけていない人お互いが楽しめるコンテンツを作れてとっても嬉しいです。

 

 

審査発表

 

 

なんと。ありがたいことに最優秀賞という立派な賞をいただきました!!!
チームメンバーみんなが「もう帰ってもいいんじゃないか」という珍しく一致団結していた時の不意の発表でほんっっとうに驚きました。

当日はほかのチームの方の発表をあまり見れていなかったので、後日発表動画で全てのチームの発表を見させていただいたのですが、
全チームとも技術力・発想力等とてもレベルが高い作品が揃う中、素敵な賞をいただけて本当に心から喜んでおります。。みんな、帰らないでよかったよ。。

優勝トロフィーであるポリゴンローズを受け取る壇上にあがる前、「あのバラ、折れやすいから本当に気をつけてください!」とスタッフの方に念を押されて、持っている最中は気が気じゃなかったです。早く置かせて・・・!
副賞はシリコンバレーツアー!IT戦士の夢の地ですね!貴重な機会をいただけてもう本当に嬉しい。。

 

Image uploaded from iOS

大事に会社に持って帰りました。玄関に飾っております!

本当にありがとうございました!!!!

 

 

感想・まとめ

 

IMG_2977

最初はチームメンバーが風邪で倒れ参加できないんじゃないかと不安になり、
開発し始めると思ったより苦戦して時間までに間に合わないじゃないかと焦り
とにかく今年はいろいろバタバタしながらの参加でした。ドキドキしっぱなしでした。

作品では、作りきれなかったところもあるのですが、
一番のポイントの「みんなで楽しめる」というポイントは達成でき、かつ皆さまに楽しんでいただけてホッとしつつ、とっても嬉しく思っています。

改めて、参加されたチームの皆さま、皆様お疲れ様でした!!!!!!
そしてHackDay運営のYahoo!JAPANさま、ありがとうございました!!!!!!

 

IMG_2979

 

また次回も、ハックしに行きます!!

 

 

※記事内で使用している写真について何かありましたら @hico00 までご連絡ください。

ひかる