プログラミング初心者向けにオススメな『P5.js』を使った
プログラミング実況動画、第３弾です。今回ラストです。
前回までの記事はこちら。
今回の動画はこちら。
今回は大きく3つの内容を扱っています。
- リファクタリング
- ゲームオーバー
- 当たり判定
プロセッシング簡単なゲーム実況 リファクタリング
プログラムはよくもわるくも自由に書けてしまうので、
書き続けていくにつれどうしても、
どんどんどんどん複雑になってきます。
書いた本人ですら、どこに何を書いたやら、という状態になってしまうことも。
ぐちゃぐちゃなコードのことを『スパゲティコード』と読んだりします。
表面上の動作はそのままにしつつも、
裏側のスパゲティなコードを少しずつ紐解いて、
整理整頓して、読みやすく、数ヶ月経った後からでも思い出せるような状態にすることを、
『リファクタリング』と読んだりします。
『リファクタリング』・・コードを整理整頓すること
『リファクタリング』の内容はたくさんあるのですが、
代表的なところだとこのあたりかと思います。
- 変数名・関数名を意味がわかる名前にする
- 変数名は名詞、関数名は名詞+動詞
- 配列なら複数形にする
- 1つの関数を行数を短めに(スクロールしないで見れるくらい)
- 関数が増えてきたらクラスに分ける(クラスのサイズ感も気にしつつ)
- if, else文はできるだけelseは使わない
- if 文の中のif文はできるだけ少なく
- 関数のコメントは簡潔に(インプットとアウトプットくらい)
高度な書き方というよりも、
とにかくわかりやすい、
第3者が見ても読みやすいコードを書くという意識が大切になってきます。
プロセッシング簡単なゲーム実況 ゲームオーバー
『リファクタリング』をやった後に『ゲームオーバー』の処理を。
今回のゲームオーバーの方法は大きく2つあって、
- 画面下にあたったらゲームオーバー
- ブロックにあたったらゲームオーバー
まずは簡単な1の方から。
今回の画面(キャンバス)はY軸が600になっているので、
600より多いかどうかという判定をかけて、
プレイヤーが生きているかどうかをチェックしています。
function playerIsAlive(entity) {
// プレイヤーの位置が生存圏内なら true を返す。
// 600 は画面の下端
return entity.y < 600;
}
この関数名がわかりやすくていいですよね。
drawGameoverScreen() という関数名で、
ゲームオーバー画面も簡単につくれています。
Ctrl + F を押して、関数名を検索する練習もしておくといいかなと思います。
あとは、
スペスミスがあるとうまく動かないので、
スペルミスがないように、最初は慎重にコードを書いていくといいかなと思います。
英語をやっておくとスペルミスに気付きやすくなったりします。
プログラミング実況 当たり判定
当たり判定の実装方法はいろいろあるようですが、最も簡単な方法で。
自分のキャラクターの半径とブロックの半径を足して、
大きかったらOK
少なかったら当たっている、ということになります。
entitiesAreColliding という関数を作っていますが、
コメントの書き方含め、勉強になる書き方だなぁと思います。
/**
* 2つのエンティティが衝突しているかどうかをチェックする
*
* @param entityA 衝突しているかどうかを確認したいエンティティ
* @param entityB 同上
* @param collisionXDistance 衝突しないギリギリのx距離
* @param collisionYDistance 衝突しないギリギリのy距離
* @returns 衝突していたら `true` そうでなければ `false` を返す
*/
function entitiesAreColliding(
entityA,
entityB,
collisionXDistance,
collisionYDistance
) {
// xとy、いずれかの距離が十分開いていたら、衝突していないので false を返す
let currentXDistance = abs(entityA.x - entityB.x); // 現在のx距離
if (collisionXDistance <= currentXDistance) return false;
let currentYDistance = abs(entityA.y - entityB.y); // 現在のy距離
if (collisionYDistance <= currentYDistance) return false;
return true; // ここまで来たら、x方向でもy方向でも重なっているので true
}
動画の中で間違えていたのですが、
絶対値は、abstract(アブストラクト)ではなくてabsolute(アブソリュート)でした。。
動画を再アップするか一瞬だけ迷ったんですが、
再エンコーディングは1時間くらいかかってしまうので、
それよりも追加動画をもりもりあげようということでこのままでいくことに。
プログラミング実況 編集時間を減らす
動画をアップするものの、なかなか再生回数が伸びず、
何か足りないところないだろうかとググりにググり、
改善できそうな箇所が2箇所ありました。
- 動画の数
- 動画のクオリティ(明るさ・テンション)
顔出し動画に切り替えてからまだ6本ということで、
まだまだ全然足りないと。
まずは最低30本、最低50本を目標にあげ続ける必要があるようで。
編集にかける時間を少し減らして、動画の数を増やしていこうと思い、
この動画から編集にかける時間を少し落としています。
プロセッシング簡単なゲーム実況 明るさとテンション
次は明るさ。
動画の顔が若干暗いかなぁと奥さんに聞くと、うん、暗いと。
ということで早速ググってリングライトポチり。
ついでに発信内容も再考し、python、数学をメインにもっていこうかなぁと。
とはいえ常にPDCA回して改善していきますよって。— 世界のアオキ🥑プログラミング×生涯学習×熊本 (@aoki_monpro) February 9, 2020
動画の顔が若干くらいかなぁと奥さんに聞くと、うん、暗いと。
ということで早速ググってリングライトポチり。
やっぱり暗いよりは明るいほうがいいよね、ということで早速ポチりました。
購入した『リングライト』はこちら。
三脚付きの大きめの『リングライト』もあったんですが、
机の上に置く前提なら小さくてもいいかなということでこのサイズに。
どうやらメイクアップの動画などに使われるようですが、
多少でも明るく見えるなら御の字ということで。
テンションについて、
朝4時からテンションをあげるというのはなかなか難しいところではあるのですが、
見ている側的にはそんなん関係ないよなぁということで、
ちょっとずつでも、普段の会話に近くなるよう、喋りまくらないとなぁと思っております。
プロセッシング簡単なゲーム実況 とにかく継続あるのみ
今後もよりよいプログラミング動画を上げていきたいと思っていますので、
ぜひぜひチャンネル登録をお願いできればと思います。
この記事へのコメントはありません。