ゲームフレームワークサンプル（画面遷移ワイプ#1）
ゲーム作りの進捗です。
とはいっても、特に具体的に作りたいものがあるわけではないので、アイデアが出たときのための、ゲームフレームワーク（ゲーム作成基盤）づくりについてです。
記事の最後に、動作を体験できるリンク等を置いています！触ってみてください！
画面遷移基盤を作成
どういうこと？
ゲームに限らず、業務システムの基本設計でも言われることですが、画面のあるシステム実装において「画面遷移」というものを決める必要があります。
例えば、PRGでよくあるのが、
「タイトル画面」⇒「セーブファイル選択画面」⇒「実際のゲーム画面」
といったもので、スーパーマリオなら、「マップ画面」で、遊んでみるステージを選択ののち、「ステージ画面」に遷移しますよね。
今回は、その枠組みとなる基盤を作ってみました。
なぜ取り組んだ？
理由は3つあります
どのゲームでも画面遷移はあるから
新規画面をゲームに組み込むコストを削減できるから
各画面ごとの移り変わりや初期化をスムーズに対応したかったから
特に2,３番目は、後から付け焼刃で対応しようとすると、結構めんどくさいです。😳
例えば、スーパーマリオのステージ画面を先に実装した場合、「ステージ選択画面に戻る」や「再度ステージ選択からステージ画面に遷移する」といった実装をする際、
ステージ選択画面に遷移するときに、今の画面を閉じる（止める）
次のステージ選択画面を開く（動かす）
またステージ画面に遷移する際、ステージ選択画面を開いて、またステージ画面を開く
この時、ステージ内の起動した仕掛けや、倒された敵、壊されたブロックを元に戻す（リセット）
といった動作を追加で実装しないといけないです。仕様としては当たり前ですが、考えることが多くて非常に面倒。
先に作った連鎖花火（https://note.com/yabon_gamer/n/n30ded96b6aa4）では、先にゲームプレイ画面から作ってしまったため、ここから「タイトル画面」や、その遷移を実装するのは正直やりたくないのです😅
ついでに遷移する際のちょっとかっこいいワイプ基盤も作成
どういうこと？
ゲームにはそれぞれ画面遷移があり、画面が移り変わることはわかったのですが、それらが実際に遷移するとき、どのような動き（見た目）になるでしょうか？いきなり「ぱっ」と、次の画面に変わりますか？
アニメをよく見る人や、動画編集をしたことある人なら良く分かるかと思いますが、
まず、現在の画面が少しずつ暗くなっていく。（フェードアウト）
真っ暗になる。
徐々に明るくする。この時すでに次の画面に遷移している。（フェードイン）
みたいな演出をイメージされることが多いのではないでしょうか。
今回の画面遷移の基盤づくりにおいて、この演出やその他の演出も作成してみました。
窓ガラスの汚れを拭き取るワイパーのように、今の画面を画面上から拭き取って新しい画面を表示させるもの。ということでこの演出を「ワイプ」と名付けています。✨🪟
なぜ取り組んだ？
かっこいいと思ったからです✨笑
画面遷移という、ゲームの本質とはちょっと離れた要素ですが、これに少しの工夫が入るだけで、かなりイケてる見た目になると思っています。😎
例えば、ヨッシーストーリー@任天堂や、オーディンスフィア＠アトラスxバニラフェアのような、絵本を舞台にしたようなゲームなら、ただ画面が移り変わるだけでなく、ページをめくるように画面遷移できたら、かなり雰囲気が出てきますよね。📜
せっかく自作ゲームを作るのだから、その細部にこだわった実装を手軽にできるようにしておきたいという思想が、常に出ています。
おわりに
画面遷移と遷移時のワイプを実装してみました。
このワイプについてはいろいろしたいことが山ほど残っているのですが、すべてやろうとすると切りがないし、そもそもどうやってコーディングすればできるかも解ってないことが多いので、追々作っていきます！
ゲームリンク
今回説明した、画面遷移のサンプルを体験いただけます！
ただしこちら、動作環境がPCのみとなっております😥
※スマホ版も並行して作っているので、できましたらお知らせします！
デモ内容
特定のキーを押すことで、今の背景画像から別の背景画像の画面に遷移します。ワイプ（画面遷移演出）はキー操作によって異なります。
操作方法
[Qキー]フェードイン・アウトワイプ
[Wキー]黒いカーテンで隠した後で開くワイプ
※↑←→↓キー押しながらで、カーテンの方向を変えられる[Eキー]画面の端から古い画面から新しい画面に塗り替えるワイプ
※↑←→↓キー押しながらで、塗り替え方向を変えられる[Rキー]紙芝居のように、古い画面を放り出して新しい画面を出すワイプ
↑←→↓キー押しながらで、放り出す方向を変えられる
斜め方向に放り出すことも可能