作っちゃうおじさん制作記録ブラウザゲーム制作や暇つぶしに眺められる記事を書いています。綺麗なプログラムを組みたい・・・!はじめてシューティングゲーム作るとき、弾の挙動ってどう動かせばよいか悩まれる方も多いと思います。今回は、簡単な弾の挙動から始めて、最終的には「ターゲットの方向へ撃つ処理」をどのように計算するのかを説明します。ライブラリ:enchant.js)自分の使用予定の言語が違う場合でも、わかるように心がけているので、参考になれば幸いです。ページ下では、実際に動作しているプログラムとソースコードが閲覧できるようになっているので、理解の一助になれば幸いです。CodePen.0ソースコードを大きく見たい方は右上のCODEPENと書かれている部分をクリックしてください。CODEPENページにジャンプして編集することができます。左側のソースコードの数値を書き換えて、右下の「Rerun」ボタンを押すことで、弾の挙動を自由に変更することができます。}onenterframeは毎フレーム毎に行われる処理を記述するイベント処理です。(今回は30fpsなので、1/30[s]毎に中身の関数が処理されます。)createBullet()関数内で生成したbulletが毎フレーム毎にthis.y-=shotSpeedされています。これにより、毎フレームにshotSpeed分だけ上方向に進むことができます。bulletのy座標が毎フレームでマイナスされるので、上に進んでいくということですね。プログラムを本格的に理解したい人向けに、詳細説明を書きました。興味のある方は下の欄をクリックしてください。流し見したい方は流してください。左上が原点で、右方向がX方向、下方向がY方向になっています。画像処理ではこの座標系がよく使われています。下図にenchant.js特有の概念を説明します。今回enchant.jsは画像表示目的で使っています。今回は弾の挙動を知ることが目的なので、ざっくりとした説明にとどめます。この図を何となく見ておけば、後でソースコードを見るときに理解の一助になるかと思います。}bullet.radに移動角度を格納し、cos,sinによりx,yの移動量を決定しています。bulletの移動角度を設定しています。sprite.timeは毎フレーム毎に加算されます。shotIntervalは何フレーム毎に弾を生成するかを決めています。sprite.time/shotIntervalで発射された弾数が計算できるので、この値にrotateIntervalを掛け算することで、発射角度を弾数ごとに変更しています。移動角度this.radに対してMath.cos(this.rad)でX軸の移動量の単位ベクトルMath.sin(this.rad)でY軸の移動量の単位ベクトルを求めることができます。単位ベクトルとは「長さが1のベクトル」のことです。現在の座標値にこの単位ベクトルを足すと移動角度方向に1pxずれるということです。これがとても都合の良い話で、この単位ベクトルに移動量shotSpeedを掛け算することでshotSpeed[px]分だけ移動させることができます。//移動角度のsinがY軸移動方向shotSpeedの値を変更すれば、移動量を自由に調節できるので、とても便利です。}さて、本ページの目的、ターゲットに向けて発射する処理です。画面をクリックすると、ターゲットの位置を変更することができます。以下vectorはx,yを持つ連想配列と呼ばれるものです。連想配列は、まとまったデータを格納する時に使います。終点(target)-始点(発射元)でベクトルを求めることができます。y:target.y-sprite.y}ここで求めたvectorをMath.atan2関数に以下の順番で引数にすることで、目標方向の移動角度を計算することができます。bullet.rotation=Math.atan2(vector.y,vector.x);あとは、「移動角度を設定して打ち続ける」と同じく、sin,cosで移動量を決めたら終了です。これで一通りの説明が終わりました。以下パラメータを設定できます。回転とか透明度変更とか拡大縮小ができるので、そのあたりを上手く使って作りました。aは0~1で透明度設定あとは、enchant.jsの公式リファレンスを見たり、ググったりするといいです。おまけ以前、あほげーという一日でゲームを作るイベントで制作したシューティングゲームです。codeの使い方も解説しています。~ゲーム制作編~シナリオ付きゲームの作り方を、実際のプログラムを用いて説明します。シナリオの作り方も別記事に説明しています。記事を読むenchant.jsをページ内に拡大させないで表示させる方法【2017年最新版】つまりこのようなenchant.jsをWebページ内に貼る方法についてお話しします。この記事を読む前に、まずはプレイしてみてください。~恐怖でアクセス数増加大作戦~ホラーゲームの制作過程をまとめました。したら恐怖を与えることができるのか、実際に制作したゲームを紹介しつつ説明していきます。脚本作成術から引用した、「物語の基本テンプレ」を紹介します。...記事を読む初心者でも2時間でブラウザゲームを作ってWebにアップしよう!ブラウザゲーム制作に必要な最低限の知識を入れました。これを読んだらブラウザゲームが作れるようになる・・・かも!2時間ほどで基礎力が出来上がるような構成になっております。コメントをキャンセルメールアドレスが公開されることはありません。名前メールアドレスサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。