Canvas de Shootingからみる

HTML5 Canvasを用いた

ゲームの作り方

~ HTML5 Canvas × JavaScript Development ~

まずは自己紹介します！

名前とか：　宗定 洋平（@yoheiMune）

　YoheiM.NET(http://www.yoheim.net/)ブロガー

趣味：　テニス、プログラミング（最近は、HTML5, Objective-Cが中心）

今日お話するネタはこちらです

http://www.yoheim.net/labo/html5/canvasShooting.html

"Canvas de Shooting" このゲームの作り方の解説を通して、

HTML5でのゲーム制作する際の技術ポイントを

少しでもお伝え出来ればと思います！

今日お話するネタはこちらです

Sencha Touch

Sencha TouchNO

enchant.js

enchant.jsNO

ライブラリ無しで　　　いきます！！

ライブラリなしだとこんな大変なのか！とか、 ライブラリ無くても全然イケんじゃん！とか、 を感じて貰えれば幸いです。

では目次へ

Agenda

1. HTML5 Canvasで今回利用する技術紹介

2. 実装内容のご紹介（ここメイン！！）

3. Canvas de Shootingの課題

4. 最後に

Agenda

1. HTML5 Canvasで今回利用する技術紹介

Canvasの技術を４つ紹介します

1. Canvasの準備

// Canvasエレメントを取得

var canvas = document.getElementById("myCanvas"); // 描画命令を行う為のコンテキストを取得

var ctx = canvas.getContext("2d");

2. 色の指定 // 塗りつぶしの色を指定

ctx.fillStyle = "rgb(0,255,0)"; // 緑 ctx.fillStyle = "rgb(255,255,0)"; // 黄 ctx.fillStyle = "rgb(255,0,0)"; // 青

利用用途：壁色の指定、ショットの色の指定

3. 図形の描画と、画像の描画

// 四角形の描画ctx.fillRect(posX, posY, width, height);

// 画像の描画ctx.drawImage(imageObject, posX, posY);

利用用途：ショットの描画、自機や敵機の描画

4. 描画内容のクリア

// Canvas上の描画内容をクリアctx.clearRect(posX, posY , width, height);

利用用途：MainLoopで再描画する時に使う

えっ！？これだけ？

はい！これだけです。

続いて、実装内容の紹介です

Agenda

1. HTML5 Canvasで今回利用する技術紹介

2. 実装内容のご紹介（ここメイン！！）

3. Canvas de Shootingの課題

4. 最後に

まずは初期処理です

1. 初期化処理

// Canvasを取得var canvas = document.getElementById("myCanvas");

// Canvasの大きさを画面に合わせる

canvas.width = window.innerWidth || 800;canvas.height = window.innerHeight * 0.95 || 400;

// contextを生成する

var ctx = canvas.getContext("2d");

1. 初期化処理

// 使う画像を、事前に読み込みますimg_plane = new Image();img_plane.src = "img/plane.png";img_plane.onload = function () {

// 読み込み終了した状態を保存

imageLoadDone = true;}

次にメインループです

// 描画や当たり判定を行うMainLoopをつくるvar gameMainLoop = function () { // 今回は、mainLoop内で再描画します

ctx.clearRect(0, 0, w, h);} // setIntervalでゲームを開始！

var timer = setInterval(gameMainLoop, 50);

2. MainLoopを開始する

ここまでで、

以下のような画面が出来ます

真っ暗です。でも動いてます。

自機を動かします

// まずは自機を表すオブジェクトを作ります

var plane = { img : img_plane, posX : 10, posY : (h - img_plane.height) / 2, life : 3}

3. 自機を動かす ①

// 自機を動かす為に、keypressイベントを監視しますdocument.onkeypress = function (e) { // 例えば自機を上に動かす場合

if (e.keyCode == 101/*E*/) { plane.posY -= 5; }}

3. 自機を動かす　②

// そしてメインループ内で、自機を描画します

var gameMainLoop = function () { // 自機を描画する ctx.drawImage(plane.img, plane.posX, plane.posY);}

3. 自機を動かす　③

自機で攻撃してみます

// 自機ショットを保持する配列を定義します

var plane_balls = []; // 自機ショットは、以下のオブジェクト型と

// します

var ball = { radius : 5, posX : 10, posY : 10, speed : 10}

4. 自機がショットを撃つ　①

// "K"ボタンが押されたら、ショットを生成

document.onkeypress = function () {

if (e.keyCode == 107/*K*/) { var newBall = { radius : 5, posX : plane.posX, posY : plane.posY, speed : 10 };

plane_balls.push(newBall); }}

4. 自機がショットを撃つ　②

// mainLoop内で、speed分だけ移動させて描画する

var gameMainLoop = function () { for (var i = 0; i < plane_balls.length; i++) {

var ball = plane_balls[i]; ball.posX += ball.speed; ctx.fillStyle = "rgba(200,0,0,1)"; ctx.fillRect(ball.posX, ball.posY, ball.radius, ball.radius); }}

4. 自機がショットを撃つ　③

これで自機を動かして、

攻撃できるようになりました

次に、敵機を出現させます

// まずは敵機を保持する配列を定義します

var enemies = []; // 敵機は、以下のオブジェクト定義とします

var enemy = { img : img, /* 今回は２種類の画像を使う */

posX : x, posY : y, speed : s};

5. 敵機を出現させる　①

// 敵機はランダムに出現させますfunction createEnemy () { var num =(Math.floor((Math.random()*100)%100); if (num < 5) { var s = num; var i = (num%2==0 ? imgE01 : imgE02); var y = canvasHeght * Math.random(); var x = canvasWidth; var enemy = {img:i, posX:x, posY:y, speed:s}; enemies.push(enemy); }}

5. 敵機を出現させる　②

// MainLoop内でspeed分、左に移動させて描画

var gameMainLoop = function () { for (var i = 0; i < enemies.length; i++) {

var enemy = enemies[i]; var enemy.posX -= enemy.speed;

ctx.drawImage(enemy.img, enemy.posX, enemy.posY); }}

5. 敵機を出現させる　③

これで敵機が左に向かって、

動くようになりました

当たり判定です

当たり判定は、物体と物体が重なったか、否かを判断します。重なっている場合には、2つの物体同士が当たっていると考えます。

6.当たり判定を行う　①

Hit!!

例えば自機ショットと敵機の当たり判定の場合を説明します。

6.当たり判定を行う　②

x座標 = PosXy座標 = PosY

radius

x座標 = PosX+radiusy座標 = PosY

x座標 = PosX+radiusy座標 = PosY+radius

x座標 = PosXy座標 = PosY

x座標 = PosXy座標 = PosY + img.height

// ソースコードではこんな感じですvar b = plane_balls[i];var e = enemies[j];

if ((b.posX + b.radius) >= e.posX /* x 座標 */

&& b.posY <= e.posY+e.img.width /* y座標下 */

&& b.posY >= e.posY) { /* y座標上 */

delete plane_balls[i]; delete enemies[j];}

6.当たり判定を行う　③

// 最後にdeleteした要素をお掃除する// 例えば自機ショットの場合

var new_plane_balls = [];

for (var i = 0; i < plane_balls.length; i++) { if (plane_balls[i]) new_plane_balls.push(plane_balls[i]);} plane_balls = new_plane_balls;

6. 当たり判定を行う　④

// ボスを倒すか、自機が倒されたら終わりif (deadBoss() || deadSelf()) { // mainLoopを終了させる

clearTimeout(timer); // メッセージを表示する

if (deadBoss()) alert("CONGURATURATION!!"); else alert("GAME OVER");}

7.GameOver or GameClear　①

これでシューティングゲームが

できました(*ﾟ▽ﾟ)ﾉ

Agenda

1. HTML5 Canvasで今回利用する技術紹介

2. 実装内容のご紹介（ここメイン！！）

3. Canvas de Shootingの課題

4. 最後に

3. Canvas de Shootingの課題

・JavaScriptの各種ブラウザ対応 ・ゲームプランニング（駆け引きの設定など） ・Canvas 2Dの描画性能 ・課金方法

そして、最後に。

長時間のご清聴、ありがとうございました。 ライブラリに依存しないゲーム制作の内容をお伝えしてきました。 このプレゼンテーションから何か感じたものがあったら幸いです。 実際のゲームやソースコードは、こちらにあります。ご興味あればご覧頂ければ幸いです。 http://www.yoheim.net/labo/html5/canvasShooting.html

HTML5って便利で面白くて、そして触りは簡単だと思います。 これからもHTML5をたくさん触れていきたいと思います。その中で何か皆様のお役に立てる事が出来れば、良いなぁと感じる。 今日はお時間頂きましてありがとうございました。 　　　　　　　　　　 　Yohei Munesada