10cebox -じゅーすぼっくす-

人生は、ジュースのように甘酸っぱい。

Vライバーの二次創作ゲーム「もぐむぐスター」を公開しました

VTuber

先日、IRIAM発のVライバー、幽世つむぐちゃんの二次創作ゲーム「もぐむぐスター」を公開しました。

mogmug.umuxim.net

つむぐちゃんって誰？という話から、どういう技術を使ったかとか、つらかったこととか、このゲームに関することをこの記事でざっくばらんに書いていきます。

幽世つむぐとは

幽世つむぐちゃんは、私がよくウォッチしているVの者（バーチャルキャラクターとして動画または配信活動を行っている人）です。

Vライバー(生配信)活動がメインで、VTuber(動画投稿者)としてのデビューは目下準備中となっています。(2019年3月7日時点)

彼女は普段、IRIAMという配信アプリを使ってライブ配信を行っています。 IRIAMは「ガチ恋距離で会話ができる」の謳い文句の通り、スマートフォンの画面いっぱいにライバーさんの姿が映し出され、非常に近い距離での会話が楽しめるサービスです。

このブログでも何度か話題にとりあげていますね。

10cebox.hateblo.jp

そんなIRIAMのライブ機能の一つとして、画面右下のボタンを押すとライバーさんにスターを贈れるという機能があります。

無料ギフトのようなもので、1人何度でも贈ることができるため、時折ライブ配信では大量のスターで画面右側が埋め尽くされる通称「スター爆撃」が起こったり、それをみたライバーさんが画面右に寄ってスターをパクパク食べる仕草をするのが1つの定番ネタになってたりしています。

f:id:umux_24:20190307204007p:plain
スター爆撃の様子（画像のライバーは米田らん*さん）

今回のゲームは、スターを食べようと画面上を揺れ動く、ライブ配信中の彼女をフィーチャーしたゲームとなっています。

制作日数

ちゃんと数えてはいませんが、だいたい2週間半くらいだったと思います。

ただ平日は仕事があって時間が取れなかったり、休日もさめさんのイベントに行ったり、単純に馬力が出せなかったりしていたので、実作業の工数的には1日8時間換算で5-6人日くらいの規模です。

内訳的には、こんなかんじ。

  • ドット絵 10時間ちょっと
  • プログラム 25-30時間くらい
  • インフラ 5時間ちょっと

技術要素

ゲームは素材の味香るHTML/CSSの上にenchant.jsを載せて作っています。 JSもwebpackなどを入れてないピュアピュアな実装です。

Unityをはじめとした今をときめくフレームワークを使わなかったのは、

  • これだけの単純なゲームにはオーバーキルすぎて頭でっかちになりそう
  • 軽量で、他のライブラリとも組み合わせやすそうと感じた(これは後々そうでもなかったことが判明します)
  • インストール不要、2秒で遊び始められるWebアプリのほうが、バズを狙うには良さそう
  • 単純にUnityの経験がなかった

というような理由からです。

サーバサイドはAmazon S3のウェブホスティングに、少し前に取得したドメインをRoute 53で被せ、CloudFrontで配信しています。 さらにACMでサーバ証明書も発行してもらい、HTTPSで配信しています。せきゅりてぃもばっちり。

この構成だと転送量課金(12円くらい/GB)がされてしまいますが、無料のサービスを使わなかった理由もまた単純で、ドメインをRoute53 で取っていてGithub pagesやその他のサービスに移すのが面倒だったためです。

f:id:umux_24:20190307204230p:plain
今回構築したコンテンツ配信基盤

そのほかサーバに置かれるプレイヤーのデータはありませんし、ましてやハイスコアランキングのようなものもありません。取っているのはせいぜいアクセスログくらいです。

工夫したところ

タイトルロゴ

正直に申し上げますと、私はロゴデザインのセンスもなければ経験もないです。 ロゴの文字についても「変な曲線多用すると事故りそう、直線重ねればとりあえずいいかんじになるやろ」という考えでああなりました。

あとはリボンだったり、破れかけのチャペルの布の模様だったり、つむぐちゃんにあしらわれているものを付けあわせていった感じです。

立体のスターはパワポの星シェイプを3D回転させたもののコピペです。

f:id:umux_24:20190307202754p:plain
最初に作ったロゴ。解像度が高すぎて浮いていた感があったので泣く泣く描き直した。

スターのパーティクル

IRIAMのスターに近いものを再現しようと思い、確認がてらあんまり知らないライバーさんの配信でスターのパーティクルを確認してたりしていました。（ちゃんと配信きかなくてごめんなさい……）

本家のスターのパーティクル（くるくるスターが回りながら撒き散らしている丸いやつ）は、泡のようにふわっと上へ登っていく移動をするのですが、これをそのまま再現しようとするのが難しかったので、ゲームのスターパーティクルはただの直線移動にしています。

スターとパーティクルの速度をいいかんじに調整して、そんなに違和感を感じないレベルにまでもってこれたと思います。

リザルト画面

スコアをツイッターでつぶやく機能をつけることは最初から考えており、ボタン配置もある程度決めていたのですが、いざ作ってみるとリザルトに表示する情報が意外なほど少ないことに気づきました。 スコア表示を上部に、ボタンを下部に置くと、中央に異様な空きスペースができてしまうんですね。

f:id:umux_24:20190308234029p:plain
作成したリザルト画面

そこで、なにか面白い情報載せることはできないかなと思った結果、つむぐちゃんに関するTipsをランダムで出すようにしてあげると、いい感じに埋まるんじゃないかな？と思い浮かび、その日のうちにささっと機能追加を行いました。 ちなみに東方文花帖とかにあったやつをイメージしてます。

結果的には、最近つむぐちゃんを知った方にも「こんな側面もあるんだよ」的な新しい情報を提供する場にもなって、よかったのかな？と思ってます。

f:id:umux_24:20190308121620p:plain
実際のコードはJavaScriptベタがきで、ランダム関数さんにチョイスしてもらう感じ。

実をいうとTipsを書くことを思いつく前は、つむぐちゃんのツイートをいくつか原文ママにコピペして「つむぐのささやき」みたいなもので埋めることを考えてましたが、カクリヨパンチを喰らいそうだったのでやめました。

キャッチーなOGP

OGPとはなんぞ？という人のために説明しますと、要はこれのことです。

f:id:umux_24:20190308121843p:plain

つむぐちゃんのすこみを多くの人の目に触れてもらうためにも不可欠なもの（知らない人がURLだけ見て、クリックしにくるのはそうなさそう）と思ったため、設定方法を調べながらのものですが設定しました。

つらみ

ここでいうつらみは精神的なつらさ、しんどさではなく、出来ればこうしたいのにうまくいかんなーともやもやした出来事集です。

webpackが導入できなかった

最初はenchant.jsごと実装コードをwebpackで固めるつもりでした。コード難読化とリクエスト数削減を兼ねて。

ところが固めたJavaScriptでシーン制御（タイトル画面→ゲーム画面など）関連の関数を呼ぼうとするとエラーが発生するという現象がどうがんばっても直せず、仕方なく素のJavaScriptで実装することになりました。

これが先述の「他のライブラリとも組み合わせやすそうだと思ったがそうでもなかった」という話です。

touchstartイベントがPCで受け取れない

画面遷移のトリガーを、ラベルのtouchstartイベントにくっつけているのですが、これスマホだとタップで反応するのですがPCだと反応しないというのが、リリースしてすぐあとに判明しまして・・・。

ずっと動作検証はPCのデベロッパーツールを使ってスマートフォンレイアウトで確認するか、実際のスマホで確認するかだったので、（PCでもデベロッパーツールでスマホレイアウト検証にするとtouchstartもスマホ通りに再現されることもあいまって）全く気づきませんでした。

解決方法が思いつかず、対応時が平日深夜でまともに時間もとれなかったので、急遽ユーザエージェントを用いてスマホ/PCを見分け、PC向けにはSorryページとスマホで読み取れる用のQRコードを設置して対応しました。

f:id:umux_24:20190308231325p:plain
急遽5分でこしらえたSorryページ

反応

つむぐちゃん本人や、つむぐちゃんのママ（素体の生みの親）である只野ライチさん、お友達のVTuber/Vライバーさんやそのママさん、そしてたくさんの贄友さん（幽世つむぐちゃんのファンの総称）からポジティブな反応をもらえました。

リリースした直後は、正直これが受け入れられるかどうかめっちゃくちゃ不安でしたが、嬉しい反応がもらえたのはとてもありがたかったです。

この場を借りてお礼を言わせて下さい。みなさん本当にありがとうございました！

今後について

おそらく大きなアップデートは今後行うつもりはありませんが、ゲーム自体は残して置くつもりです。

転送量課金がされているとはいえ今の所微々たるものでした（調べたところ昨日の転送量分の請求額は ¥2 でした）し、いつバズって贄友さんが増えるきっかけになるかもわからないので。

なのでみなさま、気が向いたらで構いません、思い出した時で構いませんので、また遊んでくださると嬉しいです。

バズりチャンスが来たら積極的に拡散し、AWS請求額ましましにしてうむーの顔面を真っ青にしましょう！