ポケモン風ゲームを作ってみた その1

このポケモン風のゲームを作ってみた件について、製作の流れを書いてみようと思う

http://www.samenohada331100.shop/poke/

1.構想編 (1日目 / 3時間ぐらい考えた)

まずは、ゲームを作ろうと思った経緯と、最初に考えたことを書く。

きっかけは2020/11/21のこのツイートだ。

最初は好意的な印象を持ったが、tweetが埋もれていき、ほんとにやるつもりなのか疑いに変わり、一か月がたちなんだこいつって思った。

そして以下のようなコンセプトでゲームを作ろうと思った。

　a)このシーンを使う

　b)先に完成させてかみんぐすーん・・・をいじる

　c)本人を登場させていじる

とにかくいじりを最大化するにはどうすればいいか考えた結果、以下の仕様を目指すことにした。

　ⅰ)ポケモンの技と面接のよくあるアピールをつなげる

　ⅱ)面接の質問と技を見れば答えが想像つくような感じにする

　ⅲ)地雷っぽい技を置いて、間抜けな答えをさせて遊べるようにする

　ⅳ)爆弾とかシュートとかショットとかスプラっぽい技を生かす

ホルードの覚える技をスマホのメモ帳に挙げていき、面接や本人の話にどうつなげるか考えた。なかなかでてこなかった。ⅱにあてはまるようなものがなかなか厳しく、結局ぎり関連性があるって感じになってしまったし、数もそんなにでなかった。

2.仕事編

仕事に追われながらも、うんちしに行ったついでにスマホを出して考えたり、通話募集ツイートにいいねを押したりしてた。

3.ググり編(2日目 / 2時間)

とりあえずゲームをどう作ったらいいかわからなかったので、WEB上で動く条件でググってみたら、良さそうなのが出てきた。

初心者でも２時間でブラウザゲームを作ってWebにアップしよう！ | 作っちゃうおじさん制作記録

とりあえずjavascriptはスマホでも動くそうで、自分が趣味でやってきたC言語に近いし、動いてるゲームから自分の思った感じに作り替えろっていうスタンスがとっつき易かったのでこの記事に従って作ることにした。

4.メモリ買い編

しばらくパソコンをいじっていなかったためか、パソコンに付属していたウィルス対策ソフトの期限が切れていた。windowsに元から入っているウイルス対策ソフトに自動的に切り替わったのだが、メモリがめっちゃ食ってて使用率が90%近くになっていた。ダウンロード、インストールもままならない激重状態だったので、メモリを増設したら、ましになった。

5.画像集め編(3日目 / 4時間ぐらいかかった)

とりあえず、画像編集ソフトのGIMPを開いて、ツイートの画像からピカチュウとイーブイを切り抜いてみた。

切り抜いた部分は透明になってしまうので、周りの色で埋めて自然な感じにした。HPバーは透明で切り抜いて、後ろのレイヤーにHPバーを置くことにした。(HPバーそのものを伸び縮みさせるのはなんか難しそうに思えたので、減るときは単に左に動かすだけだけど隠れてるから縮んでるように見える感じになる)

以下の透過PNGをとりだした。 

・背景

・イーブイ

・ピカチュウ

・ホルード(ネットからとってきた)

・メッセージボックス

・技を表示するときのボックス。

6.とりあえずコードいじる編(4日目 / 3時間ぐらいかかった)

さっき紹介したたたき台のゲーム(キモイ象の絵が横から流れてくるのをタッチゲーム)

初心者でも２時間でブラウザゲームを作ってWebにアップしよう！ | 作っちゃうおじさん制作記録

 のコード を読んでみたが、正直よくわからんので、とっつき易いところから直していこうと思った。まずは、象のPNG画像をイーブイに置き換えてみた。これはそんなに難しくなくて、像のpngファイル名の文章が書かれているところを全部ivi.png(多分英語間違ってる)に差替えるだけだ。

次に、イーブイ画像の構文をコピペして、背景とピカチュウとメッセージボックスをいい感じの場所に配置してみた。これも大して難しくないが、配置をxy座標で指定しないといけないのでいい場所に置くには何度も「座標を指定→プログラム更新→配置をゲーム画面で確認→座標を再指定」を繰り返さないといけないので、めんどくさい。背景画像をペイントで開いてマウスポインターおけば座標出るじゃんって思ったけど、その時は思いつかなかった。

とりあえず、例のゲーム画面にイーブイが左から流れてくるよくわかんないやつができたので、「かみんぐすーん・・・」を添えた動画をfleetして寝た。

続き　かみんぐすーん・・・