TwitterがXになる、というニュースを聞いて、これをいじってゲームにできないかなぁと試行錯誤すること数日、ちょっとしたゲームができました。
ゲームになるまでのちょっとした思考の顛末を、メモしておきます。
TwitterがXに…？嫌やなぁ。
自分も、仕事しながら常時SafariのタブにTwitterがあるくらいのツイ廃なので、ブラウザ左上の鳥のマークがXに変わったのは結構ショックでした。
と同時に、鳥とXをモチーフになんかゲームになりそうな予感がして、どうやったら形になるか、ぼんやりとかんがえていたところ、「選別」というキーワードが浮かびました。
コアアイデア「選別」
鳥とXを選別する。この時点でも、どっちが正解というふうにはしないでおこうと思ってた気がします。
選別するのに最適なステージは何かと考えてみたところ、ベルトコンベアを思いつきました。これなら、自分を描く必要もないし、選別の意図もわかりやすい。
最初は、上から流れてくるのを仕分けるようなイメージで画面ラフを作ってみたんですが、選別している動きがどうも思いつきません。そこで、横から流れてくるように変えました。
横にすると、ベルトコンベアのアニメーションにビット演算のパターンアニメーションが使えます。
サンプルコード：https://github.com/kadoyan/PICO-8-Carts/blob/main/bitwise.p8
そしてできた状態がこれ。いらないものは落ちて消えていきます。
卵が流れてくるのは、最初から何がくるか見えていたら簡単すぎるのと、Twitterのデフォルトアイコンをイメージしてのこと。
ベルトコンベアは、ビット演算だけでアニメーションさせていて、座標的には1pxも動いていません。
どうやって選別する？
ベースとなる絵ができたところで、ここからどうやって「選別」するか検討しました。
最初に思いついたのは、右側にもう一つコンベアか橋を用意して、必要なものだけ右に通すというアイデアです。
しかし、これだと次々と流れてくる卵に対応するには、橋を出すアニメーションを相当早くする必要があります。見た目にも忙しない割に、ゲームが右端のちょっとした所だけで完結してしまうので、ダイナミックさがありません。
そこで、今度は上からマジックハンドみたいなもので取り上げるようにしてはどうか？と考えました。絵的にも派手になるし、結果もわかりやすい。
そこで作ってみたのがこれ。ついでに、卵が割れるアニメーションも追加しています。
しかしこれだと、マジックハンドの移動距離が長すぎて、行って戻ってと次々にくる卵に対応しきれません。
新アイデア「吸引」
もう少し考えて思いついたのが「吸引」でした。
仕事で精密に小さい部品をエアーで吸引して拾い上げるロボットアームを見たことがあり、そこからの発想です。これなら、アニメーションさせることなく、連続してアイテムを拾い上げることができます。
この段階では、基本的な動きだけ実装しています。
ゲームとしての体裁を考える
ここまで作って、なんかゲームになりそうな予感が実感に変わってきました。
この時点で、だいたいゴールが決まりました。
- Xでも鳥でもどっちを取ってもいい
- それぞれ取った数でEのおっさんのメッセージが変わる
これだけです。
コードをいじりながら、デザインも修正していきます。
吸い込みに動きがないので、パイプにOn/Offランプを設置。吸い込み中の空気を表すアニメーションも追加。
パイプの下のガイドがうるさいので、色を控えめに。
インジケーターが邪魔すぎたので、サイズを小さく。位置も変更。
吸引判定と見た目が合わなかったので、吸引パイプの口を大きく。
その他レイアウトの微調整。
そして、シーン切り替えをできるようにしてタイトル画面を作成。
Eのおっさんの上のスペースに、メッセージが出せるようになりました。
このあと、リザルト画面用にセリフなどを書き、一通り完成。
やり残し
またBGMがありません。
なんとか音楽は用意したい。
あと、Eのおっさんの顔アニメーションができるようスプライトは用意してあるんですが、コードがまだなので、結果に合わせたアニメーションや口パクを設定したい。
そこまでやったら終了とします。
ぜひ遊んでみてください。