つなぎごと。

クリエイター多数決システム裏側【演出編】

time 2017/11/29

クリエイター多数決システム裏側【演出編】

みなさん、こんにちは。
Takaです。

先日11月23日(木)、クリエイター200人祭り開催し、無事終了しました。
参加していただいたみなさま、ありがとうございました!

当日わたしはPeatixの受付をやっていたのですが、
あまり慣れていない+大人数って事もあり、ヒィヒィ言ってました^^;
会場案内とか適当になったかも知れず、大変申し訳なかったですが、そこはご愛嬌ということでご勘弁を。

さて、今回は、その中で、
わたしが開発担当していた「クリエイター多数決システム」について、みなさまにお話できれば。と思います。

長くなりそうなので、

  • 画面演出がどのように作られたかの「演出編」
  • 参加者との通信をどのように実現していたかの「通信編」

の二部に分けて、記事をまとめようかと思います。

クリエイター多数決システムとは?

クリエイター多数決システムとは、とある質問に対して、参加者にAかBかを選んでいただき、
会場の皆さんがどちらの方が多いかを集計して、その割合を目の前に表示するシステムです。

それによって、「あー。あるある。」「こっちの方が多いと思ってたけど、みんなは違うんだなー
と参加者の皆さんの緊張を解くアイスブレイク的な役割を果たすことを目的に作られました。

例えば、「からあげにレモンかける派?かけない派?」のような感じで、

参加者は「かける派」ならA 「かけない派」ならBを選択する。
一定時間経ったらカウントダウンが始まり、そのカウントダウン終了後、結果待ち画面に。
集計完了後に、結果画面で、結果が出る。というフローでできています。

上が、スクリーン上に表示されていた画面。
下が、参加者側がスマホで見ていた画面ですね。

どういう想いで作られたか

システム開発は、

  • 元システム開発者であり、イベント主催者でもある「カッシーさん(https://twitter.com/strive)」
  • クリエイター200人祭り実行委員長でありフロントエンドエンジニアでもある「みちおさん(https://twitter.com/michiochips)」
  • ゲーム開発に携わっているわたし

の3人で、どういう感じで作っていくか話し合ってました。

そこで出たのは、「やっぱり参加者の人に楽しんでもらいたいよね」ということ。

多数決の感想がいいね、よくないねとか感想伝えられるようにしたい(リアルタイムいいね)

どっちに投票しているのか反応あるようにしたい
とか、去年より参加者とのインタラクティブ性を高めて、演出面をパワーアップすべく開発していきました。

開発環境・使われている技術とか

主に開発には以下のような開発環境・技術を使いました。

■開発環境
– Visual Studio Code

■使用言語
– TypeScript

■使用ライブラリ
– createJS( https://createjs.com )
– particleJS( https://ics.media/entry/11172 )
– Webfontloader( https://github.com/typekit/webfontloader )

■使用フォント
ニコカフォント( http://nicofont.pupu.jp/nicoca.html )

 

画面の表示周りはすべて、createJSというライブラリを使って、作られています。

createJSは、描画・アニメーションなどのライブラリが組み合わさったライブラリ群で、
今回システムを作る上でもかなり楽ができました。

 

描画部分に、createJSのEASELJS
カウントダウン、ワカヤマくんの回転などのアニメーション演出部分に、TWEENJS
カウントダウンなどの音再生部分で、SOUNDJS
画像読み込み部分で、PRELOADJS
が使われています。

使用感も普段しているゲーム開発とほぼ感覚があまり変わらなかったので、かなりありがたかった。

投票した時の「good」「bad」とかの際に出た星とか、ハートの表示にparticleJSというパーティクルエフェクト
のライブラリを使っています。

パーティクルエフェクトは、プログラム上で制御するエフェクトで、
実際のゲームでも、炎とか煙とかを表現するのに使われていますね。

今回のエフェクトは公式が開発した「Particle Develop(http://ics-web.jp/projects/particle-develop/)」
というツールがあり、これを使うことで、みちおさんと分業を図ってました。

パラメーターがjsonとして吐き出されたので、それを読み込む仕組みを作る事で、
こちらはシステム開発に専念でき、かなり楽ができました。

苦労した点

最初、素のjavascript で開発していたのですが、ふだんC++、C#など
「クラスがある」+「型がある」言語での開発に慣れていたため、
javascriptは少々扱いづらい部分があり、そこが苦労しました。

どうしようか考えた結果、途中から上記の条件を満たすTypeScriptに言語を移しました。

それが結果的に開発スピードの向上にも繋がったかな。と思います。
クラスが使える + visual studio codeで補完が効くのが、やはりありがたかったです。
存在自体は知っていたので、もっと早めに使っておけばよかった。という反省もありますが^^;

まとめ

正直、このシステム、ちゃんと動くかどうか、正直本番まで心配でした。
当日は、受付にいながらこっそりとドアの所で見ていて、
多少不具合がありながらも、とりあえず動いてくれていたので、良かった!
と思いました。

自分ではそこまで大きな労力をかけたつもりはなかったのですが、
運営スタッフの人から、「去年から大幅パワーアップしていて、すごい!
プロの底力を見た!
とかお褒めの言葉をいただき、「あー。作ってよかったな。」と思っています。
交流会の時とかも、「クリエイター多数決システム、わたしが作りました」と人に伝えやすかったですし、
おかげでWEBでの実績もできました(^^)

「投票終了の演出、爆発させれば、より良かったかな」とか
「NEXT TOPICの演出(本番でちゃんと動いたのかしらw ) を黒背景かまして、もっとカットインっぽくすればかっこよかったな」とか

まだまだやりようはあったと思いますが、目的である、参加者に楽しんでもらう。はとりあえず達成できたかな。
と思います。

「演出編」に関しては、とりあえずここまで。
結構抽象的なので、具体的にあの演出のコードとかどうなっているの?
とかコメントで希望もらえれば、また追記します。

「通信編」もその内書こうと思っていますので、そちらもお楽しみに。

コメント

down

コメントする




プロフィール

Taka

Taka

「自分らしく輝く人生をプログラミングする」という理念で活動しているプログラマー。子供の頃からゲーム開発の仕事につきたくて、高校時代からプログラミングを学び始める。 今は過去、自分がいろいろと悩んだ経験からカウンセリングに興味を持ち始め、勉強中。 カウンセリング×プログラミングで、悩める人の力になれれば。と思って活動しています。 [詳細]

アーカイブ