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
NOSencha Touch
enchant.js
NOenchant.js
ライブラリ無しで   いきます!!
ライブラリなしだとこんな大変なのか!とか、ライブラリ無くても全然イケんじゃん!とか、を感じて貰えれば幸いです。
では目次へ
Agenda1. HTML5 Canvasで今回利用する技術紹介2. 実装内容のご紹介(ここメイン!!)3. Canvas de Shootingの課題4. 最後に
Agenda1. HTML5 Canvasで今回利用する技術紹介 Canvasの技術を4つ紹介します
1. Canvasの準備// Canvasエレメントを取得var canvas    = document.getElementById("myCanvas");// 描画命令を行う為のコンテキストを取得var ctx = canvas.get...
2. 色の指定// 塗りつぶしの色を指定ctx.fillStyle = "rgb(0,255,0)";   // 緑ctx.fillStyle = "rgb(255,255,0)"; // 黄ctx.fillStyle = "rgb(255,0...
3. 図形の描画と、画像の描画// 四角形の描画ctx.fillRect(posX, posY, width, height);// 画像の描画ctx.drawImage(imageObject, posX, posY);利用用途:ショットの描...
4. 描画内容のクリア// Canvas上の描画内容をクリアctx.clearRect(posX, posY , width, height);利用用途:MainLoopで再描画する時に使う
えっ!?これだけ?
はい!これだけです。
続いて、実装内容の紹介です
Agenda1. HTML5 Canvasで今回利用する技術紹介2. 実装内容のご紹介(ここメイン!!)3. Canvas de Shootingの課題4. 最後に
まずは初期処理です
1. 初期化処理// Canvasを取得var canvas    = document.getElementById("myCanvas");// Canvasの大きさを画面に合わせるcanvas.width = window.innerWi...
1. 初期化処理// 使う画像を、事前に読み込みますimg_plane = new Image();img_plane.src = "img/plane.png";img_plane.onload = function () {    // 読...
次にメインループです
2. MainLoopを開始する// 描画や当たり判定を行うMainLoopをつくるvar gameMainLoop = function () {    // 今回は、mainLoop内で再描画します    ctx.clearRect(0, ...
ここまでで、以下のような画面が出来ます    真っ暗です。でも動いてます。
自機を動かします
3. 自機を動かす ①// まずは自機を表すオブジェクトを作ります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/...
3. 自機を動かす ③// そしてメインループ内で、自機を描画しますvar gameMainLoop = function () {    // 自機を描画する    ctx.drawImage(plane.img, plane.posX,  ...
自機で攻撃してみます
4. 自機がショットを撃つ ①// 自機ショットを保持する配列を定義しますvar plane_balls = [];// 自機ショットは、以下のオブジェクト型と// しますvar ball = {  radius : 5, posX : 10,...
4. 自機がショットを撃つ ②// "K"ボタンが押されたら、ショットを生成document.onkeypress = function () { if (e.keyCode == 107/*K*/) {   var newBall = {  ...
4. 自機がショットを撃つ ③// mainLoop内で、speed分だけ移動させて描画するvar gameMainLoop = function () { for (var i = 0; i < plane_balls.length; i++...
これで自機を動かして、攻撃できるようになりました
次に、敵機を出現させます
5. 敵機を出現させる ①// まずは敵機を保持する配列を定義しますvar enemies = [];// 敵機は、以下のオブジェクト定義としますvar enemy = {  img : img, /* 今回は2種類の画像を使う */  pos...
5. 敵機を出現させる ②// 敵機はランダムに出現させますfunction createEnemy () {  var num =(Math.floor((Math.random()*100)%100);  if (num < 5) {   ...
5. 敵機を出現させる ③// MainLoop内でspeed分、左に移動させて描画var gameMainLoop = function () {  for (var i = 0; i < enemies.length; i++) {  va...
これで敵機が左に向かって、動くようになりました
当たり判定です
6.当たり判定を行う ①当たり判定は、物体と物体が重なったか、否かを判断します。重なっている場合には、2つの物体同士が当たっていると考えます。                  Hit!!
6.当たり判定を行う ②例えば自機ショットと敵機の当たり判定の場合を説明します。          x座標 = PosX+radius          y座標 = PosY            x座標 = PosX             ...
6.当たり判定を行う ③// ソースコードではこんな感じですvar b = plane_balls[i];var e = enemies[j];if ((b.posX + b.radius) >= e.posX    /* x 座標 */   ...
6. 当たり判定を行う ④// 最後にdeleteした要素をお掃除する// 例えば自機ショットの場合var new_plane_balls = [];for (var i = 0; i < plane_balls.length; i++) { ...
7.GameOver or GameClear ①// ボスを倒すか、自機が倒されたら終わりif (deadBoss() || deadSelf()) {    // mainLoopを終了させる    clearTimeout(timer);...
これでシューティングゲームができました(*゚▽゚)ノ
Agenda1. HTML5 Canvasで今回利用する技術紹介2. 実装内容のご紹介(ここメイン!!)3. Canvas de Shootingの課題4. 最後に
3. Canvas de Shootingの課題・JavaScriptの各種ブラウザ対応・ゲームプランニング(駆け引きの設定など)・Canvas 2Dの描画性能・課金方法
そして、最後に。
長時間のご清聴、ありがとうございました。ライブラリに依存しないゲーム制作の内容をお伝えしてきました。このプレゼンテーションから何か感じたものがあったら幸いです。実際のゲームやソースコードは、こちらにあります。ご興味あればご覧頂ければ幸いです。h...
HTML5って便利で面白くて、そして触りは簡単だと思います。これからもHTML5をたくさん触れていきたいと思います。その中で何か皆様のお役に立てる事が出来れば、良いなぁと感じる。今日はお時間頂きましてありがとうございました。          ...
Upcoming SlideShare
Loading in...5
×

Canvas de shooting 制作のポイント

6,359

Published on

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,359
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
7
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Canvas de shooting 制作のポイント

  1. 1. Canvas de Shootingからみる HTML5 Canvasを用いた ゲームの作り方~ HTML5 Canvas × JavaScript Development ~
  2. 2. まずは自己紹介します!名前とか: 宗定 洋平(@yoheiMune) YoheiM.NET(http://www.yoheim.net/)ブロガー趣味: テニス、プログラミング(最近は、HTML5,Objective-Cが中心)
  3. 3. 今日お話するネタはこちらです http://www.yoheim.net/labo/html5/canvasShooting.html
  4. 4. 今日お話するネタはこちらです"Canvas de Shooting"このゲームの作り方の解説を通して、HTML5でのゲーム制作する際の技術ポイントを少しでもお伝え出来ればと思います!
  5. 5. Sencha Touch
  6. 6. NOSencha Touch
  7. 7. enchant.js
  8. 8. NOenchant.js
  9. 9. ライブラリ無しで   いきます!!
  10. 10. ライブラリなしだとこんな大変なのか!とか、ライブラリ無くても全然イケんじゃん!とか、を感じて貰えれば幸いです。
  11. 11. では目次へ
  12. 12. Agenda1. HTML5 Canvasで今回利用する技術紹介2. 実装内容のご紹介(ここメイン!!)3. Canvas de Shootingの課題4. 最後に
  13. 13. Agenda1. HTML5 Canvasで今回利用する技術紹介 Canvasの技術を4つ紹介します
  14. 14. 1. Canvasの準備// Canvasエレメントを取得var canvas = document.getElementById("myCanvas");// 描画命令を行う為のコンテキストを取得var ctx = canvas.getContext("2d");
  15. 15. 2. 色の指定// 塗りつぶしの色を指定ctx.fillStyle = "rgb(0,255,0)"; // 緑ctx.fillStyle = "rgb(255,255,0)"; // 黄ctx.fillStyle = "rgb(255,0,0)"; // 青利用用途:壁色の指定、ショットの色の指定
  16. 16. 3. 図形の描画と、画像の描画// 四角形の描画ctx.fillRect(posX, posY, width, height);// 画像の描画ctx.drawImage(imageObject, posX, posY);利用用途:ショットの描画、自機や敵機の描画
  17. 17. 4. 描画内容のクリア// Canvas上の描画内容をクリアctx.clearRect(posX, posY , width, height);利用用途:MainLoopで再描画する時に使う
  18. 18. えっ!?これだけ?
  19. 19. はい!これだけです。
  20. 20. 続いて、実装内容の紹介です
  21. 21. Agenda1. HTML5 Canvasで今回利用する技術紹介2. 実装内容のご紹介(ここメイン!!)3. Canvas de Shootingの課題4. 最後に
  22. 22. まずは初期処理です
  23. 23. 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");
  24. 24. 1. 初期化処理// 使う画像を、事前に読み込みますimg_plane = new Image();img_plane.src = "img/plane.png";img_plane.onload = function () { // 読み込み終了した状態を保存 imageLoadDone = true;}
  25. 25. 次にメインループです
  26. 26. 2. MainLoopを開始する// 描画や当たり判定を行うMainLoopをつくるvar gameMainLoop = function () { // 今回は、mainLoop内で再描画します ctx.clearRect(0, 0, w, h);}// setIntervalでゲームを開始!var timer = setInterval(gameMainLoop, 50);
  27. 27. ここまでで、以下のような画面が出来ます 真っ暗です。でも動いてます。
  28. 28. 自機を動かします
  29. 29. 3. 自機を動かす ①// まずは自機を表すオブジェクトを作りますvar plane = { img : img_plane, posX : 10, posY : (h - img_plane.height) / 2, life : 3}
  30. 30. 3. 自機を動かす ②// 自機を動かす為に、keypressイベントを監視しますdocument.onkeypress = function (e) { // 例えば自機を上に動かす場合 if (e.keyCode == 101/*E*/) { plane.posY -= 5; }}
  31. 31. 3. 自機を動かす ③// そしてメインループ内で、自機を描画しますvar gameMainLoop = function () { // 自機を描画する ctx.drawImage(plane.img, plane.posX, plane.posY);}
  32. 32. 自機で攻撃してみます
  33. 33. 4. 自機がショットを撃つ ①// 自機ショットを保持する配列を定義しますvar plane_balls = [];// 自機ショットは、以下のオブジェクト型と// しますvar ball = { radius : 5, posX : 10, posY : 10, speed : 10}
  34. 34. 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); }}
  35. 35. 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); }}
  36. 36. これで自機を動かして、攻撃できるようになりました
  37. 37. 次に、敵機を出現させます
  38. 38. 5. 敵機を出現させる ①// まずは敵機を保持する配列を定義しますvar enemies = [];// 敵機は、以下のオブジェクト定義としますvar enemy = { img : img, /* 今回は2種類の画像を使う */ posX : x, posY : y, speed : s};
  39. 39. 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); }}
  40. 40. 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); }}
  41. 41. これで敵機が左に向かって、動くようになりました
  42. 42. 当たり判定です
  43. 43. 6.当たり判定を行う ①当たり判定は、物体と物体が重なったか、否かを判断します。重なっている場合には、2つの物体同士が当たっていると考えます。 Hit!!
  44. 44. 6.当たり判定を行う ②例えば自機ショットと敵機の当たり判定の場合を説明します。 x座標 = PosX+radius y座標 = PosY x座標 = PosX y座標 = PosY x座標 = PosX y座標 = PosY radius x座標 = PosX+radius y座標 = PosY+radius x座標 = PosX y座標 = PosY + img.height
  45. 45. 6.当たり判定を行う ③// ソースコードではこんな感じです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];}
  46. 46. 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;
  47. 47. 7.GameOver or GameClear ①// ボスを倒すか、自機が倒されたら終わりif (deadBoss() || deadSelf()) { // mainLoopを終了させる clearTimeout(timer); // メッセージを表示する if (deadBoss()) alert("CONGURATURATION!!"); else alert("GAME OVER");}
  48. 48. これでシューティングゲームができました(*゚▽゚)ノ
  49. 49. Agenda1. HTML5 Canvasで今回利用する技術紹介2. 実装内容のご紹介(ここメイン!!)3. Canvas de Shootingの課題4. 最後に
  50. 50. 3. Canvas de Shootingの課題・JavaScriptの各種ブラウザ対応・ゲームプランニング(駆け引きの設定など)・Canvas 2Dの描画性能・課金方法
  51. 51. そして、最後に。
  52. 52. 長時間のご清聴、ありがとうございました。ライブラリに依存しないゲーム制作の内容をお伝えしてきました。このプレゼンテーションから何か感じたものがあったら幸いです。実際のゲームやソースコードは、こちらにあります。ご興味あればご覧頂ければ幸いです。http://www.yoheim.net/labo/html5/canvasShooting.html
  53. 53. HTML5って便利で面白くて、そして触りは簡単だと思います。これからもHTML5をたくさん触れていきたいと思います。その中で何か皆様のお役に立てる事が出来れば、良いなぁと感じる。今日はお時間頂きましてありがとうございました。            Yohei Munesada
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×