特集 2020年4月14日

いまこそアマビエのゲームを作る

新型コロナウイルスが広がる中、何か社会に貢献したい。しかし、医療従事者でもなければ大した貯金もない私が社会に貢献できることは「外出せず家の中でじっとしている」ぐらいしかない。そこで、除災をもたらすといわれる妖怪「アマビエ」のゲームを作った。遊んでください。

※当記事は『デイリーポータルZをはげます会』の会員のみなさんにテストプレイの協力をしていただきました!

1992年三重生まれ、会社員。ゆるくまじめに過ごしています。ものすごく暇なときにへんな曲とへんなゲームを作ります。

前の記事:文字化けでよく出てくる漢字の意味を調べて愛でる

> 個人サイト ほりげー

音が出るので注意してください。

アマビエとは

アマビエとは江戸時代に出現したという半人半魚の妖怪であり、豊作や疫病を予言するといわれる。また、アマビエが「私の姿を描いた絵を人々に早々に見せよ。」と言ったことから、アマビエの姿を絵に描くことで除災になるとも伝えられる。

002.jpg
アマビエ。(Wikipediaより引用。)

新型コロナウイルス(COVID-19)が世界中で広がる中、日本では事態の収束を願い、アマビエの絵を描くツイートが増えている。もちろん、科学的根拠はまったくないが、それは分かっている。身も蓋もない言い方をすると、単純に外出自粛が続いて他にやることがないという背景もあると思う。こういうノリはインターネットの好きな部分だ。 

ゲームを作った

私もアマビエの絵を描いて社会に貢献したい。いや、もっといいことを考えた。アマビエのゲームを作るのだ。ゲームによってデジタル的にアマビエの姿を人々に見せることができるため、除災効果が期待される。もっと実用的な効果としては、このゲームが多くの人の暇つぶしとなり、家にこもるのを加速させ、外出自粛による感染防止が期待される。

前置きが長くなったが、アマビエのゲームを作ったので遊んでください。ページ冒頭にあります。

003.PNG
タイトル。アマビエを選び続けようという雑な指示が書かれている。

作ったのは、アマビエとアマエビを区別するゲームだ。たくさんの「アマエビ」が表示されている中、一個だけ「アマビエ」が表示される。そんな中でアマビエを2.6秒以内に選ぶというものだ。

004.PNG
最初は2個しか表示されないので簡単。
005.PNG
しだいに一度に表示される数が増え、難しくなる。それでも頑張って「アマビエ」を選び続けることで、背景のアマビエがどんどん大きくなっていく。
006.PNG
さらに、途中から「アマビエ」「アマエビ」がうっすらと透明になったり、放射状に移動したりする。妙な緊張感がある。
007.PNG
1回でも間違えて「アマエビ」を選択してしまうとゲームオーバー。
008.PNG
2.6秒以内に押さない場合もゲームオーバー。「おそい!」と怒られる。しんらつだ。

 

いったん広告です

アマビエのゲームができるまで

アマビエのゲームはとても簡単なもので、ミニゲームと言ったほうがいいかもしれない。それでも、イラスト、音楽、プログラミングといった様々な要素が組み合わさっている。せっかくなので、このゲームの製作過程について書いておきたい。

もともと私は「ほりげー」とよばれるミニゲームをいくつか作っている。今回もいつもの「ほりげー」と同じ作り方で作っていく。

まずは設計図である。といっても、ゲームの仕様をざっくりとイラストで描いたものである。どうせ自分しか読まないのでフォーマットもなにもない。ただのメモだ。

009.jpg
詳細は作りながら決めればいいし、実現困難な場合は仕様自体を変えればいい。一人でゲームを作るのは気楽だ。

つぎはイラストである。イラストは仮のイラストを使用して最後に差し替えるのでもよいが、ゲーム製作のモチベーションを高めるにはできるだけ早い段階から本物のイラストがあったほうがいい。

仕様書にも書いたが、今回必要なイラストは

  • 背景
  • アマビエ
  • アマエビ
  • ロゴ

の4つである。背景にはあまりこだわりがないのでフリー素材を使うことにする。アマビエとアマエビのイラストは重要なので力を入れたい。しかし私は絵が下手なので絵の上手い妻に描いてもらう。

010.jpg
外出自粛の休日、妻に30分ぐらいで絵を描いてもらった。

紙に色鉛筆で描いてもらった絵をスキャナで取り込み、背景削除ソフトで背景を消す。ペンタブは持っていないので必然的にアナログの温かみの感じられるイラストになる。

011.jpg
ロゴはスキャナで取り込み、ペイントソフトの色塗り機能でべた塗りする。

 

ちょっと面倒。プログラミング

イラストができたら次はプログラミングである。ゲームはプログラムで動いている。それを作るのがプログラミングである。今回はWebブラウザで遊べるゲームなので、cocos2d-JSとよばれるゲーム開発環境でプログラムを作る。簡単なゲームをさくっと作るのに向いている。

012.png

(実際のところcocos2d-JSはcocos2d-xに統合されているので、cocos2d-xをインストールした上でcocos2d-JSの機能を使います。)

そこまで有名じゃないかもしれないが、昔から使っており個人的になじみ深い。ここにサンプルプログラムの動かし方が解説されているので誰でも簡単に自作ゲームの沼に入ることができます。

仕様書の1つ1つの画面は、プログラムの中ではSceneと呼ばれるもので表現する。今回は、4つの画面を用意しているので、4つのSceneをプログラム上で作っていく。

013.png
例えば、時間切れの時に表示される画面はTimeOverSceneである。

画面を作ったら、あとは黙々と中身を作りこんでいく。代表的な機能を挙げると

  • スコアを表示し、更新する
  • 毎回、複数の「アマエビ」と1個の「アマビエ」を等間隔に表示する
  • 何回かに1回「アマエビ」の数を増やす
  • 一定時間がたつと時間切れにする
  • 「アマエビ」を押したらゲームオーバーにする
  • スコアに従い背景のアマビエを大きくする
  • 「アマエビ」「アマビエ」が少しずつ透明になるようにする
  • 「アマエビ」「アマビエ」を放射状に動かす

こんな感じ。酒を飲みながらこれらをうりゃ~っと作っていく。だいたい2時間ぐらいでできた。

014.jpg
ほろ酔いで行うプログラミングを「酔プログラミング」(すいぷろぐらみんぐ)と言います。いま私が名付けました。

ひととおり作り終えたら、何回も遊んでバグがないかをチェックする。また、ゲームの難易度を考慮し、パラメータを調整する。

015.gif
最初は制限時間を1.3秒にしていたが、あまりにも難しすぎたので2.6秒にした。逆に3秒だと簡単すぎる。

 

ゲームに癒しをもたらす、BGM作り。

ここまで来たらあとはBGMや音声を作るだけだ。まずは音声。今回は「アマビエ」を押すと「ビエ」という音声が流れ、「アマエビ」を押すと「エビ」という音声が流れる。こういうのはiPhoneの録音機能で録音し、波形編集ソフトでいじるのが早い。

016.PNG
これは「ビエ」の波形です。「ビエ」の声はほりです。

あとは一番大事なBGM。自作ゲームではBGMにはフリー音源が使われることが多いが、私は基本的に自作するようにしている。BGMはゲームの雰囲気を大きく変える重要な役割だからだ。

お風呂に入り、「アマビエっぽい曲、浮かべ~!」と思っていると、浮かんだ。浮かんだ曲のメロディやコード進行を風呂から上がってからギターやシンセサイザーで確認する。

017.jpg
風邪をひかないよう、ちゃんとパジャマに着替えてから音を取ります。

これをもとに作曲ソフトでドラム・ベース・ピアノなどを入力していく。

018.PNG
こういう作業は凝りだすと終わりがないので、割り切ることが重要だ。

1時間ちょっとでオケ(ボーカル無しの曲)ができた。ここにボーカルを入れる。しかし私は歌うのが下手なので、歌の上手い友人に歌ってもらう。私のゲームは基本的に周囲の協力なしでは成り立たない。

019.jpg
最近買った、ちょっといいマイク。大げさな箱に収められている。
020.JPG
設置するとレコーディングスタジオっぽい雰囲気がある。「スタジオほり」と呼んでいる。

スタジオほりは準備万端である。しかし、新型コロナウイルス撲滅を願うゲームの録音のために外出してもらっては本末転倒なので、友人には自身のスマホで録音してLINEで送ってもらうことにした。ちょっといいマイクは出番がなかった。

スマホで録音してもらった音源を作曲ソフトで取り込んで、音程や音量や音響効果をいじったら出来上がり。完成~。

せっかくなので、作った曲「アマビエビ」を聞いてください。(ゲーム中に流れるものと同じです。)

 

そしてBGMをゲームに取り込めば、ゲーム「アマビエビ」の完成である。

021.PNG
できた~。どんなものであれ、自分で作ったものが完成する瞬間は喜びが大きい。

 

いったん広告です

ライターやはげます会メンバーに遊んでもらう

当サイトのライターやデイリーポータルZをはげます会のメンバーたちにゲーム「アマビエビ」を遊んでもらい、オンラインで感想を貰った。

kansou1.png
ありがとうございます。

 

kansou2.png
ゲシュタルト崩壊を乗り越えた先にトランス状態がありますね。
kansou3.png
スマホが圧倒的に有利なゲームになっています。
kansou5.png
ゼロ災でいければと思います。
kansou6.png
これはゲームではなく詩(うた)だったんですね。

気を使ってくれたのかポジティブな意見が多いですが、よけいな深読みはせずポジティブにとらえていきます。

また、デイリーポータルZをはげます会のメンバーからは、「途中から曲の歌詞がチラついて集中力が切れました笑」「絵が大変かわいいです」などの感想をもらった。はげましてくれてありがとうございます。

いったん広告です

改善点を集める

せっかくなので、改善すべき点も聞いてみたところ、次のようなものが得られた。

  • 最初、何を押せばいいのか分からなかった
  • マナーモードでプレイすると「アマビエ」を押しても反応がないので押せているか分かりづらい
  • スコアに応じてアマビエランクが表示されると良い
  • 進行が楽になるアイテムがほしい

これを受け、再度プログラミングを行う。顧客の要望に迅速に適応していく。

022.PNG
初回は押す場所を丁寧に教えてあげる。
023.gif
「アマビエ」を押すと一瞬だけ小さいアマビエが出るようにした。これをミニビエと呼んでいる。
024.PNG
アマビエランク(称号)を表示するようにした。アマビエランクは11個あります。探してみてください。
025.PNG
20回目以降に4回連続で1秒以内に「アマビエ」を押すと、「ハイパービエモード」に切り替わり、しばらくの間「アマビエ」だけ大きく表示される。これで進行が楽になる。

できた。これで新「アマビエビ」の完成である。

 

大仏も建立しよう

暇つぶしでアマビエのゲームを作り、これが多くのプレイヤーの暇つぶしとなる。趣味の自作ゲームは、作り手と受け手の暇つぶしの連鎖だ。

そして、ゲーム「アマビエビ」よりもさらなる暇つぶし要素を持つ「ほりげー」が実はすでに存在する。「ビッグブッダ」だ。大仏建立の早さを競うという、大仏建立RTAゲームである。

026.jpg

数年前に作ったゲームであるが、疫病の流行る今こそバーチャルに大仏を建立して世に安寧をもたらそうではないか。

▽デイリーポータルZトップへ

デイリーポータルZのTwitterをフォローすると、あなたのタイムラインに「役には立たないけどなんかいい情報」がとどきます!

→→→  ←←←

デイリーポータルZを

 

▲デイリーポータルZトップへ バックナンバーいちらんへ
↓↓↓ここからまたトップページです↓↓↓

 

今日のみどころ