どもども！平社員の龍ちゃんです。今回は簡単なゲーム作成に関するパーツ作りを進めていきたいと思います。ここでは、ブロック崩しのバーを移動させるプログラム・玉の跳ね返りを実装していこうと思います。このプログラムは、ゲームの形態を変えてもロジックの使い回しが可能です。プログラムの基本的な部分は、前回までの2つの記事を利用して構築していきます。
ソースは動かしてもらったほうがいいので、環境は手元にあると良いです。環境構築はこちらで紹介しています。もしオンラインでソースをいじりたい場合は、こちらから。
それでは始めていきましょう。
バーの横移動
ここでは、バーの動きを移動させるプログラムを紹介します。
完成品と動き
今回の完成品コードとGIFです。
ソースコード解説
ソースの解説としては、基本的な動きと動きの制限と言った2つの工程に分割して解説します。
基本形の動き
ここでは、箱を動かすことに注目してコーディングをしていきます。矢印キーを入力すると四角の座標を変化させることで箱が移動します。キーボードの入力を受け付けるプログラムは、前回のStep.1で解説しています。以下が挙動のGIFとコードになります。
このソースで注目してほしい点は、箱が画面外にでても入力し続けることで画面外に出すことができる点です。基本的に画面外に行けることはバグの温床になるので、大体のゲームではいけませんよね。あえてその要素を残す理由はないので、次の節で制限をかけるプログラムについて解説をします。
動きの制限
ここでは、箱の動きに制限をかけるプログラムと制限掛けるために必要な知識について解説します。まず、制限を掛けるプログラムは以下のプログラムです。
この条件式を利用して移動に制限を掛けています。条件式の部分に注目してください。画面より左側に出た場合と右側に出た場合の条件がそれぞれ用意されています。条件の部分で「x」に値を足したり引いたりしています。これは、四角の描画モードという「rectMode」という命令が関係しています。四角を描画する「rect」では「座標・高さ・長さ」を指定します。「rectMode」を使用するとそれぞれのパラメータの表示モードを変更することができます。口で説明するのが難しいので下の図を見てください。今回は「CENTER」の描画モードを使用しています。
「CENTER」の描画モードで四角を描画した場合、四角の右端と左端の座標を計算すると青丸と緑丸の座標になります。
この条件によって移動の制限を実現することになります。ここで注意点が一点あります。この条件式を試しに四角を描画する「rect」の下部分に書くと描画によっては四角が瞬間移動します。これは、描画した後に座標が変わるため生じます。なるべく先に座標の計算を行い、描画は最後に行うというイメージを持つことが大切です。
玉の跳ね返り
ここでは、玉の跳ね返りプログラムを紹介します。
完成品とコード
今回解説するコードとGIFになります。単純にボールを横向きに跳ね返させたいと思います。第一のサンプルコードではボールの速度は変わることなく、一定の速度で跳ね返ることを想定しています。プログラムの構造としては、基本である「setup/draw」に加えて「moveElipse」という関数があります。ボールの移動から跳ね返りの判定はすべて「moveElipse」内にあります。
ソースコード解説
今回特に注目している部分としては、ボールの動きの作り方の部分になります。ボールの動きを作成する際の同僚との会話を再現したのでとりあえず読んでみてください。
これでピンと来た人は、高校の物理学を真面目にやったんだな～と思います。高校の物理が好きな人だったら笑うんでしょうね。僕は物理学の先生とはお茶友達でしたけど、物理学自体は余り好きではなかったので「うるせぇ！」って言っときました。
補足のために入れておきますね。スカラーとは物理学で力をベクトル空間で表現した際、方向を持たない力の大きさのみのことを指します。はい！難しいこと書きました。まぁ戦闘力だと思ってください。戦闘力が方向性を持ったら狂気になるみたいなもので、Speedが方向性を持ったら速度になるんです。プログラム上で方向と力を別々で管理することで、コード量を減らしたりデバックをやりやすくしたりします。今回は、右方向を「1」で左方向を「-1」で表現しました。行数で言うところの20行目ですね。
表現としては、方向に関係するdirectionの変数に-1をかけることで方向転換を行っています。イメージとしては以下の図になります。
跳ね返りの判定は前章の「動きの制限」でのプログラムをチューニングしたものなので、そちらを参照してください。
おまけ
今回は、玉の挙動のみだったのでおまけとして、球の速度をランダムに縦横無尽に動かすサンプルを作成してみます。コード自体は変数を追加して条件も複製ですので簡単です。このように玉を動かすことで画面内四方に跳ね返るサンプルが完成しました。画面下側で跳ね返った場合、玉が落ちたと仮定し、ユーザが操作できるバーにあたった際y方向に跳ね返るプログラムを追加することでブロック崩しの基本的な部分が完成するかと思います。
終わりに
お疲れ様です。今回は、バーの移動とたまの跳ね返りプログラムを作成しました。今回紹介した要素を組み合わせて簡単なゲームを作成することができます。
次回の記事に関しては、現在考案中です。エフェクト系からゲーム作成に関するまで色々紹介することがありますね。
それではいいプログラミングライフを！
