スマホ向けCanvasゲームの作り方

JavaScript ゲーム製作勉強会 Vol.2で話した内容になります

3年以上前 にアップロード

(2011年08月24日)

「スマホ向けCanvasゲームの作り方」の内容

  1. スマホ向けCanvasゲームの作り方 chikathreesix
  2. 自己紹介 近澤良(chikathreesix) フロントエンドエンジニア JavaScript, Flash, HTML/CSS, Objective-C等 蒙古タンメン中本 / メタル
  3. DeNAでは
  4. FPゲームをどんどんSP化してます!
  5. タイトル 海賊トレジャー ・海戦 ・サルベージ ・ボス戦 ・おさんぽ ・オシャレリン 住み着き妖精セトルリン
  6. スマホブラウザゲームを作る!
  7. 方法として CSS3を駆使する Canvasを駆使する
  8. CSS3を駆使する メリット - 簡単 - GPUアクセラレーション - 3Dも使える デメリット - アニメーションの経過点取れない
  9. Canvasを駆使する メリット - 自由度高い デメリット - 面倒 - CSS3程のパフォーマンスは出ない
  10. CSS3向き シンプルなアニメーション HTMLベースで作れるもの
  11. Canvas向き 複雑なアニメーションが複数ある 衝突判定などが必要なアクションゲーム
  12. 今日はCanvasの話
  13. Canvasとは?
  14. 画像描画のための HTML要素
  15. Canvas基礎 HTML <canvas id="canvas" width="320" height="416"></canvas> JavaScript var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.drawImage(hogeImg, 0, 0);
  16. Canvas基礎 移動 ctx.drawImage(hogeImg, x, y); ctx.translate(x, y); ctx.drawImage(hogeImg, 0, 0); 拡大•縮小 ctx.drawImage(hogeImg, 0, 0, hogeImg.width * 2, hogeImg.height * 2); ctx.scale(2,2); ctx.drawImage(hogeImg, 0, 0);
  17. Canvas基礎 回転 ctx.rotate(90 * Math.PI / 180); ctx.drawImage(hogeImg, x, y); save / restore ctx.save(); //拡大、移動、回転などを行う ctx.drawImage(hogeImg, 0, 0); ctx.restore();
  18. Canvasゲーム基礎 ループを一つ作り、前回の描画をクリアしたのち、新しい描画を行う setInterval(function(){ ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(hogeImg, x, y); }, 1000 / 60); この処理が一秒間に何度行われるか → FPS (Frame Per Seconds)
  19. setInterval setInteval / setTimeoutの間隔は信用できない setInterval(function(){ //一秒以上かかる処理 }, 30); → 次の呼び出しは1秒以上後
  20. 端末によってメインのループが呼ばれる間隔が異なる
  21. Canvasパフォーマンス
  22. Canvasパフォーマンス
  23. iPhone4遅い
  24. iPhone4 Canvas APIを叩く部分は早い 実際にディスプレイに描画する部分が重い
  25. iPhone4 パフォーマンスはFPSで計測する setInterval(function(){ ctx.clearRect(0, 0, canvas.width, canvas.height); //ここから for(var i = 0; i < 10; i++){ ctx.drawImage(hogeImg, x, y); } //ここまでは早い }, 1000 / 60); →パフォーマンスはFPSで計測する
  26. 各端末でパフォーマンスを出すには細心の注意が必要
  27. Canvas高速化
  28. Canvas高速化 drawImageで拡大は重い var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.drawImage(hogeImg, 0, 0, hogeImg.width * 2, hogeImg.height * 2);
  29. Canvas高速化 drawImageで拡大は重い、縮小は問題ない
  30. Canvas高速化 拡大されている画像を使った方が軽い
  31. Canvas高速化 拡大時のパフォーマンス差が顕著
  32. Canvas高速化 どうしても拡大したい場合、canvasに一度描画してそれをdrawImageする var tcanvas = document.createElement('canvas'); tcanvas.width = img.width * 2; tcanvas.height = img.height * 2; var tctx = canvas.getContext('2d'); tctx.drawImage(img, 0, 0, img.width * 2, img.height * 2); setInterval(function(){ ctx.drawImage(tcanvas, 0, 0); }, 1000 / 60);
  33. Canvas高速化 座標に小数を用いない Math.floor(0.001) → ~~(0.001)
  34. マルチデバイスへの対応
  35. マルチデバイス 対応したいOSは今のところiOSとAndroid 両者ともブラウザはWebkitベース
  36. 基本的な挙動は同じ ですが、、
  37. Android CanvasにおけるAndroid2.1のバグが致命的 Android2.1におけるCanvasのバグが致命的
  38. iPhone
  39. Android2.1
  40. Android2.1 drawImageすると基本的に座標やサイズがscreen.width / 320倍される → 横幅480pxだと1.5倍される scaleは二回適応されてしまう rotateとtranslateはもはや意味不明
  41. 回転はあきらめる
  42. アニメーション
  43. フレームベース var dist = 30; var id; function run(){ this.x += (dist - this.x) / 3; if(dist - this.x < 0.01){ clearInterval(id); } } id = setInterval(run, 100); ※xプロパティに値を代入するとx座標が変わるという想定
  44. フレームベース setInterval/setTimeout内でプロパティを目標値に向かって足していく FPS依存 環境によってアニメーションの速度が変わってしまう
  45. どの環境でも 同じ速度を保つには
  46. タイムベース setInterval / setTimeout内で経過時間を取得して、適切な値を設定する 描画が間引かれる 体感的な速度はどの環境でも保たれる
  47. タイムベース var startTime = Date.now(); //開始時間 var startX = this.x; //初期値 var distX = 30; //目標値 var duration = 1500; //所要時間 var id; function run(){ var currentTime = Date.now(); //現在時刻を取得 var progress = (currentTime - startTime) / duration; //進捗度合い this.x = (distX - startX) * progress + startX; //変化量に進捗をかける if(this.x >= distX){ //目標値に到達したら終了 clearInterval(id); } } id = setInterval(run, 10);
  48. Canvasフレームワーク
  49. Canvasフレームワーク AS3ライク 表示ツリー イベント伝播モデル アニメーション(単一アニメーション、キーフレームアニメーション)
  50. Demo
  51. ご清聴ありがとうございました

このスライドを共有する

  • このエントリーをはてなブックマークに追加
↑