AOYAMA Koji's PROGRAMMING BLOG

操作に応じてプレイヤーキャラクターを動かすプログラミング

2020/05/17

　緊急事態宣言が一部で解除されましたが、東京近郊はまだまだですね。 その中で動画を見る機会も増えて、 最近はアマゾンPrimeビデオで「ようこそ実力至上主義の教室へ」を見てプチハマり、Kindleで原作を読み漁り中です。 似た方向として「魔法科高校の劣等生」は以前から大好きなのですが、頭脳戦をしつつ最終的に主人公が無双するのが好きなんだと思います。 「賭ケグルイ」も同様かな。 あっ、この説明が違ったらスミマセン！個人の感想です！
　さてさて今回は、ゲームで最も重要とも言える処理、プレイヤーキャラクターを動かすプログラミングをしてみたいと思います。


ボールは勝手に動くようにしておきました


　まず最初にゲームスタートボタンを押してみてください。 何も手を加えていないときの、今回の記事で用意されているプログラムの挙動を確認してみましょう。
　プレイヤーキャラクターは超スーパーヒーローな英雄の絵を用意しました。 大事なことだから二回ずつ。(冗談ですヨ！)
　プレイヤーキャラクターは真ん中から動きませんが、「ゲームスタート」を押して、ボールが動き出せば成功です。

waiting...



操作されたときに呼ばれるプログラム


　上の白い枠は、プログラムが書けるようになっています。 今回の記事では操作された状態のときに、そのプログラムが実行されるようになっています。 まず「ストップ」を押して先程の動きを止めてから、
g.playerX += 12;

と枠内に書いて「ゲームスタート」を押してみてください。 このプログラムをコピーして枠内に貼り付ける方法でも大丈夫です。 ボールが初期位置に戻って移動を再開、それ以外はとりあえず何も起きなければ成功です！

操作は方法は色々と


　そして、プレイヤーキャラクターを動かすような操作をしてみてください。
　本記事で有効な操作は、ゲーム画面に見立てたグレーの部分でのスワイプ、マイスのドラッグ、 キーボードの[←][↑][↓][→]または[W][A][S][D]、およびゲームパッドの左ステックです。
　今回は、実は自分でもよくわかっていないことが多くてそれなりに試行錯誤したのですが、 HTML5で色々と作ることができて楽しいですね。 ただしInternet Explorer (IE)はやっぱりダメ…ってほどじゃないですが、ゲームパッドはIEだと取得できないっぽいです。

右へ動けば大成功


　どうでしょうか？何か操作したらプレイヤーが右へ動けば大成功です。

+=は変数に足す


　「+=」(プラスイコール)は、「変数+=値;」の形式で、変数に値を足す、加算するというものです。 変数はプログラミング用語で、値を入れておくための場所です。

g.playerXにプレイヤーキャラクターのX座標


　変数g.playerXにはプレイヤーキャラクターのX座標が入っています。 X座標とは横の位置です。 つまり、
g.playerX += 12;

　これは、プレイヤーキャラクターの横の位置を12だけ増やすことになります。 X座標は右の方が大きいので、増えれば右に動きます。

何をしても右へ


　今回のプログラムでは、左に動かそうと操作しても右に行ってしまいます。 感覚的には、左に移動させようと操作したら左に移動しそうなものなので不思議かも知れませんが、 それはそうプログラミングしたからなんです。 ちょっと気持ち悪いですよね！
　今のコンピューターは人間が間違えた指示をすると間違えた通りに実行します。 勝手に良い感じにはしてくれません。 つまりプログラマーは細かいところまですべての処理を記載しなければなりません。 正直面倒だと感じることもありますが、 ある程度プログラミングできるようになると勝手に動かれたら困るようになるので仕方がないしょう。 AI(人工知能)がもっと優秀な時代になればわかりませんけれどね。

左右に動かすプログラム


　というわけできちんと左右に動かしてみましょう。
　以下のプログラムを枠内に記載するかコピー＆貼り付けをして試してみてください。 どうでしょう？操作の通りに左右に動けば大成功です！
if ( g.playerDirX == "右" ) {
  g.playerX += 12;
}
if ( g.playerDirX == "左" ) {
  g.playerX -= 12;
}

ifは条件が合えば処理


　「if」(イフ)は以下の形式で記載します。
if ( 条件 ) {
  処理
}

　そして、まず条件を確認し、条件が満たされていると判定されれば「中の処理」を実施します。

g.playerDirXには左右に操作された方向が入っている


　変数g.playerDirXには左右の操作方向が入っていて、値は"右"、"左"、""のどれかです。

==は同じか判定


　「==」(イコールイコール)は、左右の値が同じかどうかを判定します。 つまり、
if ( g.playerDirX == "右" ) {
  処理
}

　というのは、変数g.playerDirXに"右"が入っていたら「中の処理」を実行する、という処理になります。

-=は変数から引く


　「-=」(マイナスイコール)は、「変数-=値;」の形式で、変数から値を引く、減算するというものです。 つまり
g.playerX -= 12;

　これは変数g.playerXから値を引くということです。 意味で言い換えると、プレイヤーを左に動かすということになりますね。
　以上を総合して、
if ( g.playerDirX == "右" ) {
  g.playerX += 12;
}
if ( g.playerDirX == "左" ) {
  g.playerX -= 12;
}

　これは、右に操作されていたらプレイヤーキャラクターを右へ動かし、 左に操作されていたら左に動かすプログラム、ということになります。

上下に


　次は以下のプログラムで上下に動かしてみましょう。
if ( g.playerDirY == "下" ) {
  g.playerY += 12;
}
if ( g.playerDirY == "上" ) {
  g.playerY -= 12;
}

g.playerYはプレイヤーキャラクターのY座標


　もうおわかりと思いますが、変数g.playerYにはプレイヤーキャラクターのY座標、上下の位置が入っています。 なお数学で習う座標と異なり、下の方が大きい値になりますので注意です。

g.playerDirYには"上"か"下"


　本記事では、変数g.playerDirYには上下の操作が反映されています。 値としては"上"、"下"、""のどれかです。

ボールとぶつかるとどうなる？！


　せっかく操作できるようになりましたので、ボールとぶつかってみましょう！ どうなりますか？
　…まあ結論から書きますと何も起きませんね。
　え？想定内ですか？ それはプログラムを熟知している方か、とてもセンスの良い方ですね。
　そうですね。 枠内のプログラムにも、この記事のプログラムにも何も書いていないので、何も起きないのです。 ボールにぶつかったときに何か起きるようにしたい場合は、その処理をするプログラムを書く必要があるということですね。 まあ、それはまた次回(以降)に。

まとめ


　今回のプログラムの全体を以下に書いておきます。 これで「ゲームスタート」を押して、上下左右に操作でき、斜めにも移動できれば大成功です。
if ( g.playerDirX == "右" ) {
  g.playerX += 12;
}
if ( g.playerDirX == "左" ) {
  g.playerX -= 12;
}
if ( g.playerDirY == "下" ) {
  g.playerY += 12;
}
if ( g.playerDirY == "上" ) {
  g.playerY -= 12;
}

　ボールとプレイヤーキャラクターがぶつかっても何も起きませんが、 自分のプログラムで動かしていると考えるとこれだけでも結構楽しいですよね(笑)

補足

・今回使用しているプログラミング言語はWeb業界で一般的に使われる「JavaScript」です。
・ゲームパッドの入力は上下と左右が逆になっている可能性がありますが、そのカスタマイズは今回は未対応です。 ・今回はわかりやすさ優先でg.playerDirXとg.playerDirYを用意しました。こうすると８方向の動きに制限されてしまいますが、アナログ入力をそのまま反映して微妙な斜めとかにも動かせる方がゲームとしてはベターでしょう。
・「if(g.playerDirX=="右")」は「if("右"===g.playerDirX」と書くべきかも知れませんが今回は変数を左辺に統一、比較もプログラミング言語で比較的多く使用されている==を使用しました。
カテゴリー：メガホンDEポン,プログラミング,JavaScript
著者プロフィール
青山公士(あおやま こうじ)
中学2年生からゲームプログラミングに明け暮れる。ゲーム開発者としての代表作に「スーパー桃太郎電鉄II」(ハドソン)メインプログラマー、[PR]『ドラゴンクエストX　オンライン』(スクウェア・エニックス)テクニカルディレクター/プロデューサーなどがある。[PR]「ドラゴンクエストXを支える技術」(技術評論社)著者。本ブログは今までの経験を活かしプログラミングが楽しいと感じる人が少しでも増えるようなものにしたい。 @kojibm
株式会社ロジック推し
推し情報を論理的にわかりやすく紹介することで「世の中をちょっと楽しく」をミッションに活動中。 HP X Instagram
privacy policy
ピックアップ
Loading...
最新記事
Loading...
関連記事
Loading...