Your SlideShare is downloading. ×
0
JavaScriptによるゲーム開発
     ~ゲーム開発初心者による
          弾幕ゲーム開発~




             2009/3/7
               Pascal
もくじ
    JavaScriptとは?
●




    JavaScriptによるゲーム開発
●




    Demo
●




    まとめ
●
自己紹介
    ハンドルネームは紅月(twitterは@koduki)
●


           mixiとかではpascalを名乗ることも
       –


    四月から東京に就職するギリギリ大学院生
●




    「ブロ...
あれ?
自己紹介
    ハンドルネームは紅月(twitterは@koduki)
●


           mixiとかではpascalを名乗ることも
       –


    四月から東京に就職するギリギリ大学院生
●




    「ブロ...
C言語は?
実はCは苦手です>_<
    C言語何それ? おいしいの?
●


          学校の演習+αの知識しかないです
      –

          ポインタとかメモリ管理とか忘れました
      –


    ずいぶん前にPS...
参加者の多くが良く参加する
    掲示板の調査
参加者の多くが良く参加する
    掲示板の調査
参加者の多くが良く参加する
    掲示板の調査




70%以上がC使い
超
アウェイ
orz
という分けで発表してみる
    発表すれば話すネタがあるから、壁の花になら
●

    んはず!

    せっかくなので、みんなが興味ありそうな弾幕
●

    シューティングをJavaScriptで実装する話とか



    ゲーム...
JavaScriptとは?
    主にWebブラウザで利用されるスクリプト言語
●


         プラグインとか対話環境とかブラウザ以外も
     –


    Webページに動きを付けるために使う
●




    オブジェク...
なんでJavaScript?
    ブラウザがあればどこでも動く
●


         Win/Mac/Linuxは当然OK
     –

         理論的にはケータイやiPhone, DSやWiiでも><
     –


 ...
JavaScriptの特徴
    プロトタイプベースのオブジェクト指向
●


         クラスは無いけど、3大機能はちゃんとサポー
     –
          ト

    動的型付け言語
●




    関数もオブジェク...
でも
JavaScriptっ
    て
遅くね?
No
最近は
速いよ>_<
JavaScriptのパフォーマンス
    Webアプリの進化によるニーズで、ここ1〜2年
●

    で十数倍から数十倍の高速化

    JITも実装されてかなり速い
●




    流石にCよりは劣るけど、実用的なレベル
●


...
JavaScriptのパフォーマンス
お約束のフィボナッチベンチCのコード)

#include <time.h>
#include <stdio.h>
int fib(int n){ return (n < 2) ? n : fib(n-2)...
JavaScriptのパフォーマンス
お約束のフィボナッチベンチ(Javaのコード)

public class Fib {
  static int fib(int n){ return (n < 2) ? n:fib(n-2) + fib(...
JavaScriptのパフォーマンス
お約束のフィボナッチベンチ(JavaScriptの
コード)
var fib = function(n) { return (n < 2) ? n : fib(n-2) + fib(n-1);
var r ...
JavaScriptのパフォーマンス
  お約束のフィボナッチベンチ(結果)
  4

3.5

  3

2.5

  2
                                            実行時間


1.5

  1...
JavaScriptまとめ
    JavaScriptはオブジェクト指向言語
●




    動的型付けだから型宣言は不要
●




    クロージャがあるのでコールバックとか簡単
●




    結構速い
●
JavaScriptによるゲーム開発
描画するための3つの方法
    DOMを直接操作する
●




    SVG/VRMLを利用する
●




    Canvasを利用する
●
描画するための3つの方法
    DOMを直接操作する
●




    SVG/VRMLを利用する
●




    Canvasを利用する
●
Cavas
    HTMLでベクタ画像を作成するための仕様
●




    HTML5からサポート
●


          Firefox3, Safariではサポート済み(IEもライブ
      –
            ラリで...
円を描く
<html>
 <head>
  <title>JS Game Sample</title>
  <meta content=quot;text/html; charset=utf-8quot; http-equiv=quot;Con...
円を描く(抜粋)

function init(){
  var canvas = document.getElementById(quot;canvasquot;).getContext(quot;2dquot;);
  // 色の指定
  ...
円を動かす
    ループにはsetInterval関数を使う
●




    コールバック関数を指定したミリ秒間隔で実行
●




    イベントなので非同期
●




    60FPSならこんな感じのコード
●




    ...
画像を表示する
    drawImageメソッドによるラスタ画像の貼付け
●




    ブラウザで開けるフォーマットならOK(bmp,
●

    png, jpgなど)

    var img = new Image();
   ...
音を鳴らす
    JS単体で音を鳴らすのは難しい
●




    JavaAppletやFlashを経由して音を鳴らす方が
●

    無難

    一応、embedタグで可能だけどパフォーマンス
●

    が悪い上に、細かい制御...
音を鳴らす

function play(url){
  // Embedタグを作成
  var embed = document.createElement(quot;embedquot;);
  embed.setAttribute(quo...
カーソルで操作する
    addEventListenerでイベントを登録する
●




    イベント時の処理はコールバック関数で記述
●
カーソルで操作する

var x = y = 0;

var img = new Image();
img.src = quot;sprite.pngquot;;

document.addEventListener(quot;keydownq...
弾幕風の描画
    弾幕に重要な三角関数もちゃんと使える
●




    var img = new Image(); img.src = quot;ball.pngquot;;

    var arc = 0; r = 1;
    ...
ちょっとオブジェクト指向っぽく
    オブジェクト単位で責任を分ける

    System
●




    Sprite
●


            Player
        –

            Enamy
     ...
Systemオブジェクト
    ゲームシステムに対応するオブジェクト
●




    cavasやイベント等のシステム全体を管理
●




    System.canvas
●


           HTMLのcanvasのwra...
Systemオブジェクト
    System.update()
●


           setIntervalによってループする関数。
       –

           bindされたイベントやSpriteの動作、衝突判
   ...
updateメソッド
;
 // 全てのspriteに対しての処理.
  System.sprites.forEach(function(x){
      // 動作の更新
      x.update();
      // 衝突判定
  ...
Spriteオブジェクト
    画面に描画されるオブジェクト
●




    x, y, height, width, enableの基本プロパティ
●




    update, draw, collisionの基本メソッド
●

...
Spriteの派生オブジェクト
    Player
●


           プレイヤとなるオブジェクト。
       –

           カーソルでの操作を受け付ける。
       –


    Enemy
●


   ...
Demo
JSによるメリット/デメリット
    JSで書くメリット
●


         Webブラウザのみで動作する
     –

         オブジェクト指向をはじめ言語機能が強力なので
     –
           書きやすい
...
まとめ
    JSでのゲーム開発は音を鳴らさなければ十分可
●

    能

    今回は当たり判定の処理とかベタなアルゴリズ
●

    ムを使ってるから、もう少し速くできるかも?

    SDLで開発した時と大きくは変わらなかった...
みんなもJSで
  ゲームを
作ってみよう!
Upcoming SlideShare
Loading in...5
×

JavaScriptによるゲーム開発

16,511

Published on

第一回ソフトウェア技術研究会開催の発表資料。
JSで弾幕シューティング的なゲームに挑戦してみた。

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
16,511
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
23
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "JavaScriptによるゲーム開発"

  1. 1. JavaScriptによるゲーム開発 ~ゲーム開発初心者による      弾幕ゲーム開発~ 2009/3/7 Pascal
  2. 2. もくじ JavaScriptとは? ● JavaScriptによるゲーム開発 ● Demo ● まとめ ●
  3. 3. 自己紹介 ハンドルネームは紅月(twitterは@koduki) ● mixiとかではpascalを名乗ることも – 四月から東京に就職するギリギリ大学院生 ● 「ブログなんだよもん」ってBlogで、主にプロ ● グラム関係の話を書いてます。 得意な言語はJava, JavaScript, Ruby ● 最近、Scalaとか関数型言語を勉強中! ●
  4. 4. あれ?
  5. 5. 自己紹介 ハンドルネームは紅月(twitterは@koduki) ● mixiとかではpascalを名乗ることも – 四月から東京に就職するギリギリ大学院生 ● 「ブログなんだよもん」ってBlogで、主にプロ ● グラム関係の話を書いてます。 得意な言語はJava, JavaScript, Ruby ● 最近、Scalaとか関数型言語を勉強中! ●
  6. 6. C言語は?
  7. 7. 実はCは苦手です>_< C言語何それ? おいしいの? ● 学校の演習+αの知識しかないです – ポインタとかメモリ管理とか忘れました – ずいぶん前にPSPでスネーク書いたのが最後 ● この前、Hello Wold書いたら3回コンパイルエ ● ラーした(ぉ
  8. 8. 参加者の多くが良く参加する 掲示板の調査
  9. 9. 参加者の多くが良く参加する 掲示板の調査
  10. 10. 参加者の多くが良く参加する 掲示板の調査 70%以上がC使い
  11. 11.
  12. 12. アウェイ
  13. 13. orz
  14. 14. という分けで発表してみる 発表すれば話すネタがあるから、壁の花になら ● んはず! せっかくなので、みんなが興味ありそうな弾幕 ● シューティングをJavaScriptで実装する話とか ゲーム作り自体久しぶりだけどね! ● しかも、弾幕シューティングとかほとんどした ● こと無いけどね><
  15. 15. JavaScriptとは? 主にWebブラウザで利用されるスクリプト言語 ● プラグインとか対話環境とかブラウザ以外も – Webページに動きを付けるために使う ● オブジェクト指向言語だけど、関数型的な書き ● 方も出来て最近注目!
  16. 16. なんでJavaScript? ブラウザがあればどこでも動く ● Win/Mac/Linuxは当然OK – 理論的にはケータイやiPhone, DSやWiiでも>< – HTMLを使えば、描画や文字入力も簡単 ● WWWとの連携が得意 ● 言語が強力(ガベージコレクション、オブジェ ● クト指向、連想配列、クロージャ...etc)
  17. 17. JavaScriptの特徴 プロトタイプベースのオブジェクト指向 ● クラスは無いけど、3大機能はちゃんとサポー – ト 動的型付け言語 ● 関数もオブジェクト(関数ポインタの偉い奴) ● 文字列を実行コードに変更できるeval関数 ● 組み込み型が割りと強力 ● 配列リテラルが線形List(動的配列) – 連想配列(HashTable)のサポート –
  18. 18. でも
  19. 19. JavaScriptっ て
  20. 20. 遅くね?
  21. 21. No
  22. 22. 最近は 速いよ>_<
  23. 23. JavaScriptのパフォーマンス Webアプリの進化によるニーズで、ここ1〜2年 ● で十数倍から数十倍の高速化 JITも実装されてかなり速い ● 流石にCよりは劣るけど、実用的なレベル ● でも、描画とかマルチメディア周りは遅いです ● o..rz
  24. 24. JavaScriptのパフォーマンス お約束のフィボナッチベンチCのコード) #include <time.h> #include <stdio.h> int fib(int n){ return (n < 2) ? n : fib(n-2) + fib(n-1); } int main(){ int i=0; double r = 100000; for (i=0;i<3;i++){ clock_t start,end; start = clock(); fib(39); end = clock(); double t = (double)(end-start)/CLOCKS_PER_SEC; if (t <= r) r = t; } printf(quot;%.2fnquot;, r); }
  25. 25. JavaScriptのパフォーマンス お約束のフィボナッチベンチ(Javaのコード) public class Fib { static int fib(int n){ return (n < 2) ? n:fib(n-2) + fib(n-1); } public static void main(String[] args) { long r = Long.MAX_VALUE; for(int i=0;i<3;i++){ long s = System.currentTimeMillis(); fib(39); long t = System.currentTimeMillis() - s; if(t <= r) r = t; } System.out.println(r / 1000.0); } }
  26. 26. JavaScriptのパフォーマンス お約束のフィボナッチベンチ(JavaScriptの コード) var fib = function(n) { return (n < 2) ? n : fib(n-2) + fib(n-1); var r = 10000; for(i=0; i<3; i++){ start = new Date(); fib(39); var r = new Date() - start; } document.write(r);
  27. 27. JavaScriptのパフォーマンス お約束のフィボナッチベンチ(結果) 4 3.5 3 2.5 2 実行時間 1.5 1 0.5 0 cc -O0 cc -O3 java javascript
  28. 28. JavaScriptまとめ JavaScriptはオブジェクト指向言語 ● 動的型付けだから型宣言は不要 ● クロージャがあるのでコールバックとか簡単 ● 結構速い ●
  29. 29. JavaScriptによるゲーム開発
  30. 30. 描画するための3つの方法 DOMを直接操作する ● SVG/VRMLを利用する ● Canvasを利用する ●
  31. 31. 描画するための3つの方法 DOMを直接操作する ● SVG/VRMLを利用する ● Canvasを利用する ●
  32. 32. Cavas HTMLでベクタ画像を作成するための仕様 ● HTML5からサポート ● Firefox3, Safariではサポート済み(IEもライブ – ラリで対応化) ラスタ画像も表示できる ● 高速(チューニングの関係か今はDOMの方が ● 速いこともorz) 比較的従来のゲーム開発に近い開発スタイル ●
  33. 33. 円を描く <html> <head> <title>JS Game Sample</title> <meta content=quot;text/html; charset=utf-8quot; http-equiv=quot;Content-Typequot;/> <script type=quot;text/javascriptquot;> function init(){ var canvas = document.getElementById(quot;canvasquot;).getContext(quot;2dquot;); canvas.fillStyle = quot;#ff0000quot;; canvas.beginPath(); canvas.arc(100, 100, 50, 0, Math.PI * 2, true); canvas.closePath(); canvas.fill(); } </script> </head> <body onLoad=quot;init()quot;> <canvas id=quot;canvasquot; width=quot;380quot; height=quot;450quot; style=quot;border:medium solid #000000quot; /> </body> </html>
  34. 34. 円を描く(抜粋) function init(){ var canvas = document.getElementById(quot;canvasquot;).getContext(quot;2dquot;); // 色の指定 canvas.fillStyle = quot;#ff0000quot;; // 図形を描く canvas.beginPath(); canvas.arc(100, 100, 50, 0, Math.PI * 2, true); canvas.closePath(); // 描画 canvas.fill(); }
  35. 35. 円を動かす ループにはsetInterval関数を使う ● コールバック関数を指定したミリ秒間隔で実行 ● イベントなので非同期 ● 60FPSならこんな感じのコード ● var x = y = 0; setInterval(function(){ canvas.clearRect(0, 0, 380, 450); drawCircle(x+=5, y+=5); }, 60 / 1000);
  36. 36. 画像を表示する drawImageメソッドによるラスタ画像の貼付け ● ブラウザで開けるフォーマットならOK(bmp, ● png, jpgなど) var img = new Image(); img.src = quot;sprite.pngquot;; var x = y = 0; setInterval(function(){ canvas.clearRect(0, 0, 380, 450); canvas.drawImage(img, x+=5, y+=5); }, 60 / 1000);
  37. 37. 音を鳴らす JS単体で音を鳴らすのは難しい ● JavaAppletやFlashを経由して音を鳴らす方が ● 無難 一応、embedタグで可能だけどパフォーマンス ● が悪い上に、細かい制御がきかない
  38. 38. 音を鳴らす function play(url){ // Embedタグを作成 var embed = document.createElement(quot;embedquot;); embed.setAttribute(quot;srcquot;, url); embed.setAttribute(quot;hiddenquot;, true); embed.setAttribute(quot;autostartquot;, true); embed.setAttribute(quot;loopquot;, true); // 表示しているHTMLにEmbedタグを埋め込む document.body.appendChild(embed); } play(quot;bgm1.wavquot;);
  39. 39. カーソルで操作する addEventListenerでイベントを登録する ● イベント時の処理はコールバック関数で記述 ●
  40. 40. カーソルで操作する var x = y = 0; var img = new Image(); img.src = quot;sprite.pngquot;; document.addEventListener(quot;keydownquot;, function(e){ if (e.keyCode == 39) x+=10; else if(e.keyCode == 37) x-=10; }, false); setInterval(function(){ canvas.clearRect(0, 0, 380, 450); canvas.drawImage(img, x, y); }, 60/1000);
  41. 41. 弾幕風の描画 弾幕に重要な三角関数もちゃんと使える ● var img = new Image(); img.src = quot;ball.pngquot;; var arc = 0; r = 1; var x = 190;y = 225; setInterval(function(){ canvas.drawImage(img, x + r*Math.sin(arc), y + r*Math.cos(arc)); arc += 1; r += 5; }, 60/1000);
  42. 42. ちょっとオブジェクト指向っぽく オブジェクト単位で責任を分ける System ● Sprite ● Player – Enamy – Shot –
  43. 43. Systemオブジェクト ゲームシステムに対応するオブジェクト ● cavasやイベント等のシステム全体を管理 ● System.canvas ● HTMLのcanvasのwrapperオブジェクト。 – draw, clear等のメソッドを持つ System.sprites ● Spriteオブジェクトの配列 –
  44. 44. Systemオブジェクト System.update() ● setIntervalによってループする関数。 – bindされたイベントやSpriteの動作、衝突判 – 定、Spriteの描画 System.bind(ボタン名, コールバック関数) ● keydown/keyupのwrapper関数 – ゲームでよく使う「あるボタンを押しているイ – ベント」をサポート
  45. 45. updateメソッド ;  // 全てのspriteに対しての処理. System.sprites.forEach(function(x){ // 動作の更新 x.update(); // 衝突判定 System.sprites.filter(isCollision) .forEach(function(y){ x.collision(y); y.collision(x); }); // 描画 x.draw(); });
  46. 46. Spriteオブジェクト 画面に描画されるオブジェクト ● x, y, height, width, enableの基本プロパティ ● update, draw, collisionの基本メソッド ● 描画や衝突したときの処理はSprite自身でやる ●
  47. 47. Spriteの派生オブジェクト Player ● プレイヤとなるオブジェクト。 – カーソルでの操作を受け付ける。 – Enemy ● 敵オブジェクト – updateに記述したルーチンの通りに動作 – Shot ● 弾丸オブジェクト – 基本的にはEnemyと同じ –
  48. 48. Demo
  49. 49. JSによるメリット/デメリット JSで書くメリット ● Webブラウザのみで動作する – オブジェクト指向をはじめ言語機能が強力なので – 書きやすい evalで弾幕情報とかを動的に実験できる – JSで書くデメリット ● 描画が少し重い – Soundがとても重い – 実行速度/描画速度が環境依存(IEがとても遅い) – ジョイパッドの対応とか謎 –
  50. 50. まとめ JSでのゲーム開発は音を鳴らさなければ十分可 ● 能 今回は当たり判定の処理とかベタなアルゴリズ ● ムを使ってるから、もう少し速くできるかも? SDLで開発した時と大きくは変わらなかった。 ● 開発自体は比較的簡単 ●
  51. 51. みんなもJSで ゲームを 作ってみよう!
  1. A particular slide catching your eye?

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

×