JS/Canvas Tutorial2
0 likes199 views
サークル向けゲーム開発講座(第2回)で使用したスライドです。 HTML5 CanvasとJavaScriptを用いたシューティングゲームの作り方を解説します。
JS/Canvas Tutorial2
- 2. 講座の準備 > 講座資料 - ここ(https://github.com/tamamu/js_tutorial) > 質問用Slack - ここ(https://mca-dev.slack.com/)
- 4. Canvasをレイヤーとして使う > ちょっとだけCSSのお勉強 - index.htmlの<style>の部分がCSS > #idでそのidを持つ要素に適用 - ：の左側が属性名、右側が値 > positionは要素の位置の基準を決める属性 値にabsoluteとすると絶対位置への配置となる (他にrelative=相対位置などがある)
- 5. Canvasをレイヤーとして使う > z-indexは重ね合わせの順番を決める属性 - 数字が小さいほど下で、大きいほど上に重ねられる > 今回はbgを下に、gameを上に重ねる
- 6. 連想配列(ハッシュテーブル) > 配列変数の各要素を区別出来るように名前を付けて管理する変数 > C言語で言う構造体みたいなもの > JSではクラスもこれの一種 > 作り方 - var hoge = {a: 0, b: 1, c: 2} > 使い方 - hoge.b :=> 1
- 7. 画像の読み込み > JSで画像を読み込むには最低でも2手順踏まなければならない - var hoge = new Image(); - hoge.src = "画像へのパス"; > 今回はそれをまとめて関数化する(1手順で済むね！) > コールバック関数の説明は後ほど
- 8. drawImage > 画像をcanvasに描く関数 > さらに言えば、canvasの一部をcanvasに拡大・縮小コピーする関数 > 使い方は3種類(主に使うのは2種類) - drawImage(image,dx, dy) - imageを座標(dx, dy)にコピー - drawImage(image,sx, sy, sw, sh, dx, dy, dw, dh) - imageの座標(sx, sy)から(sx+sw, sy+sh)までの矩形を - 座標(dx, dy)に幅dw, 高さdhでコピー > 前者は1枚絵、後者はスプライトシートに使う - imageをctxと勘違いしないように！！
- 9. FPSの管理 > FPS(Frame Per Second) > 1秒間に画面を更新する回数 > 一般的なゲームだと60fpsだが、今回は30fps > requestAnimationFrameはfpsを良い感じに保ってくれる > それだけだと心もとないので30fpsになるよう調整する処理を入れ てる - if(new Date() - lastDraw > 1000/30) - 現在時刻 - 最終更新時刻が 1/30 秒を上回ったら更新
- 10. 当たり判定 > 点と矩形の当たり判定はそのまま - 矩形の内部に点があれば当たったとみなす > 円同士の当たり判定は数学Ⅱの復習 - 画像はここのを使わせてもらいました
- 11. 次回 へ続 く