神経衰弱ゲーム制作記

2020年4月9日

昨日公開したゲーム「SPEED MEMORY」の開発について書いておきます。

ゲームのアイデア

最初のアイデアとしては神経衰弱を時間制限付きにしてランキングをつけるようにすることでした。

4枚から始まってどんどん枚数が増えていってどれだけペアを作れるか？みたいな感じにする予定でした。

ただ、そうすると枚数が増えてくると最初はまったくわからずいくつもめくらないといけないわけで、それは良くないんじゃないか？ってなってそこから「最初に一度すべて見せる」というアイデアが出てきたわけです。

最初にすべて見せることで神経衰弱だけどもデジタルだからできる新しいゲームになったと思います。

画面構成

上にスコアと残り時間が表示され、その下にカードが並ぶ形は最初から決まってました。ただカードの表示については4から始まって50枚100枚くらいまでやろうと思っていました。しかし、先に暗記する形になったことで無理だということが分かり24枚が最大になりました。

プログラムについて

カードについて

開発開始当初はカードは画像ではなくpixiのGraphicsでただの四角形を描いてました。シンプルなゲームなので画像を全く使わずにデータを軽くしようと思っていました。

ただ作っていて一つ大きな問題があって、Graphicsで描いた画像は中心の位置を変えるanchorという要素を持っていないため中心をずらすことができません。

これの何が問題かというと、カードをめくる演出は実は縮小を使っていて幅が縮むことでめくっているように見せかけています。この縮むときに中心の位置が左にあるか真ん中にあるかで見た目が全く違ってきます。

中心が左にある場合は画像が左に向かって縮みますが真ん中にある場合は真ん中に向かって両方が縮んでいるように見えます。めくるように見せたいので当然中心は真ん中にしたいわけです。

そのためにはやっぱりGraphicsではなくSpriteでやるべきということになり、だったら画像用意した方が良いということになりました。

またカードの表裏は裏面の画像が表示/非表示を切り替えることでそれっぽく見せてます。カードのscaleが０になったときに表示を切り替えています。

コールバックとかイベントとか

pixi.jsに乗り換えてからプログラムの書き方を変えていて、できるだけクラスごとにしっかり分けるようにしています。

ただ、そうするとこのクラスで処理が終わったあとあっちのクラスで処理してほしいことがあるわけで。もちろんそんなことは今までもあって、今まではグローバル変数にして使っていました。小さなゲームなので別にそれでも全然いいんですが、時と場合によってはコールバックやイベントを使っていった方が良いように思うようになってきました。

javascirptで書いているのだからこの辺のこともしっかり理解できるようになろうと最近思っています。ただこの書き方は少しプログラムが読みづらい気がして苦手意識があるんですけどね(^^;)