ボイゲとかChrome拡張を作った話

f:id:Tsukina_7mochi:20191125140014p:plain


 

 

こんばんは。月餅です。今回はボイゲ Advent Calendar 2019 に参加したのでボイゲを作った話とかをしようと思います。

2048 Voiceroid

f:id:Tsukina_7mochi:20191125142727p:plain

ジャムに投稿したゲーム1つ目です。かの有名なゲーム 2048 をボイロでデザインしたものです。

開発にはenchant.jsを使っています。enchant自体そこまで使い慣れていなかったので結構苦戦することになりました。 細かいネタを入れたり隠しゲームをつけたりと色々やりたいことはできたので満足です。

総評

プレイ数はそこそこ多く成功だったと言えるでしょう。

良い点として挙げられるのは、主にスマホ向けのインタラクティブなデザイン(フリック操作時の矢印のオーバーレイ)、エフェクトの充実です。タッチデバイスでのプレイ数が多いと予想される公開場所ではなかったためどれほど影響があったかは分かりませんが。

改善点として上げられるのは、UIとボリュームです。説明画面のUIが乏しかったと思っています。また2048というゲームはもともと有名であり、本作品はそれをデザインし直しただけにとどまっているため、クリアするまで楽しませるには至らなかった可能性が高いと思っています。

2048 voiceroid をプレイ

自分の昔のドット絵を見るとうーんってなりますね...

Kotonoha Underground

f:id:Tsukina_7mochi:20191125142730p:plain

2つ目に投稿したゲームです。琴葉姉妹が地下世界を駆け抜ける、ランナー系のアクションゲームです。こちらはゲームジャムでitch.ioに投稿したあと、RPGアツマールにも投稿しました。

(タイトル画面の絵は違いますが) 琴葉姉妹のグラフィックは手巻さんに描いて頂きました。可愛すぎるので下のリンクから遊んでください (ダイマ) 。

このゲームは、ライブラリ等を一切使わずに制作しました。というのは、enchantやakashicなどの"スプライト"の概念を使うよりも簡単に制作できると踏んだからです。結果としては判定処理がものすごく大変になったのでおすすめはしません。それでも描画処理とかがかなり自由に出来るので、雰囲気作りなどには向いています。

Kotonoha Underground をプレイ(RPGアツマール)

難易度の調整

速度の上昇具合、距離で切り替わるオブジェクトの出現テーブル、白箱破砕の仕様など、ステルスアップデートも含めてかなり調整しています。それでもまだ調整の余地はありそうです。

タッチデバイス向けの改修

このゲームではタイトルでタッチ操作をしたとき、タッチデバイス向けの操作ボタンを配置するようになっています。初期はフリック入力という、PC操作に対して明らかに不利な設定だったのですが、RPGアツマールに投稿する前に改善してよかったな、とつくづく感じています。

グラフィックのアップデート

一度グラフィック関連をアップデートしています。画面に対して下向に動くパーティクルに加えてゲーム内での空気中のパーティクルを実装したり、背景の鉄塔などの構造物に対してレイヤー順に明度の操作(空気遠近法)を適用したりしています。 本当はパースペクティブを考えなければいけないのですが面倒なので零点透視の疑似3Dです。

操作性などの向上

前述のグラフィックアップデートで若干動作が重くなったのを受けて軽量モード(ほぼ従来の描画)を実装しました。同時にタッチデバイス用のジャンプボタン/ダッシュボタンの配置入れ替えにも対応しました。

総評

itch.io、PRGアツマール、特に後者での反響が大きく、成功だったと言えるでしょう。

良い点として上げられるのは、キャラクターデザインやBGMなどのリソース、ゲームの単純さと継続性の兼ね合い、アップデートの回数です。 ゲームのバランスの調整もあり、シンプルなルールながら1ゲーム内の途中で飽きるということは少なかったと予想されます。「無限に究められるゲーム」というのは昔から作りたかったものでもあります。

改善点として挙げられるのは、演出と広告です。 ゲームを通して演出が乏しいです。最低限のパーティクルなどはありますが、全体的に演出が足りていないと感じられます。 また、初期のタイトル画面は暗く魅力に欠けるものであり、広告として良いものではなかったと言えます。

ここからおまけ

Twitter Voiceroid Extension

f:id:Tsukina_7mochi:20191125142724p:plain


Twitterの画面上にVOICEROIDのキャラクターを配置するGoogle Chrome拡張機能です。本当はデスクトップに配置するのを作りたかったのですが、技術的な問題でブラウザ上になりました。Twitter以外でも表示するようにしても良かったのですが、多分邪魔になるのでTwitterの画面左下に表示するようにしました。

この拡張機能を入れると、左下にボイロが表示されます。アニメーションで動いたり、瞬きしたり、放っておくと寝たり、クリックすると反応したりします。実質ボイゲ(殴

ちなみにキャラクターを動かす部分自体は150行程度で実装できました。規模が大きくないのもありますが。もともとは1つの拡張機能だったのですが、プラグインという形で分離して、キャラクターを切り替えれるようにしています。その分離が一番大変でしたね... (下図: 拡張機能のメッセージパッシングの概念図)

f:id:Tsukina_7mochi:20191125142722p:plain

細かい話をしだすとキリが無くなるので、拡張機能の話はここで終わります。拡張機能はそのうち公開します。

ボイゲを作ろう

おまけその2です。ボイゲを作ったことがない方向けの話を少しだけ。ボイゲを作ろう(直球)。ゲームを作るのは難しいと感じるかもしれないです。確かに1人で作るのは結構大変です。プログラミングからリソースの作成、プロジェクトの管理など、小規模でもやることがたくさんあります。

しかし、開発に関わることは難しくなかったりします。ゲームの企画やグラフィック、音楽、テストプレイ、広報など得意なことを活かしてゲームに関わることができます。プログラムは書けてもデザインできない人 (私とか) にとってはそのような参加はとてもありがたく、ゲームのクオリティの向上にも繋がります。

要するにどういうことかと言うと、悪いことを言わないからボイゲのDiscord鯖に入ろう。

discord.gg

ここまで長い文章を読んでいただきありがとうございました。