• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
JavaScriptによるゲーム開発
 

JavaScriptによるゲーム開発

on

  • 20,091 views

第一回ソフトウェア技術研究会開催の発表資料。

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

Statistics

Views

Total Views
20,091
Views on SlideShare
19,975
Embed Views
116

Actions

Likes
3
Downloads
22
Comments
0

5 Embeds 116

http://www.slideshare.net 93
http://s.deeeki.com 16
http://us-w1.rockmelt.com 5
file:// 1
http://webcache.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    JavaScriptによるゲーム開発 JavaScriptによるゲーム開発 Presentation Transcript

    • JavaScriptによるゲーム開発 ~ゲーム開発初心者による      弾幕ゲーム開発~ 2009/3/7 Pascal
    • もくじ JavaScriptとは? ● JavaScriptによるゲーム開発 ● Demo ● まとめ ●
    • 自己紹介 ハンドルネームは紅月(twitterは@koduki) ● mixiとかではpascalを名乗ることも – 四月から東京に就職するギリギリ大学院生 ● 「ブログなんだよもん」ってBlogで、主にプロ ● グラム関係の話を書いてます。 得意な言語はJava, JavaScript, Ruby ● 最近、Scalaとか関数型言語を勉強中! ●
    • あれ?
    • 自己紹介 ハンドルネームは紅月(twitterは@koduki) ● mixiとかではpascalを名乗ることも – 四月から東京に就職するギリギリ大学院生 ● 「ブログなんだよもん」ってBlogで、主にプロ ● グラム関係の話を書いてます。 得意な言語はJava, JavaScript, Ruby ● 最近、Scalaとか関数型言語を勉強中! ●
    • C言語は?
    • 実はCは苦手です>_< C言語何それ? おいしいの? ● 学校の演習+αの知識しかないです – ポインタとかメモリ管理とか忘れました – ずいぶん前にPSPでスネーク書いたのが最後 ● この前、Hello Wold書いたら3回コンパイルエ ● ラーした(ぉ
    • 参加者の多くが良く参加する 掲示板の調査
    • 参加者の多くが良く参加する 掲示板の調査
    • 参加者の多くが良く参加する 掲示板の調査 70%以上がC使い
    • アウェイ
    • orz
    • という分けで発表してみる 発表すれば話すネタがあるから、壁の花になら ● んはず! せっかくなので、みんなが興味ありそうな弾幕 ● シューティングをJavaScriptで実装する話とか ゲーム作り自体久しぶりだけどね! ● しかも、弾幕シューティングとかほとんどした ● こと無いけどね><
    • JavaScriptとは? 主にWebブラウザで利用されるスクリプト言語 ● プラグインとか対話環境とかブラウザ以外も – Webページに動きを付けるために使う ● オブジェクト指向言語だけど、関数型的な書き ● 方も出来て最近注目!
    • なんでJavaScript? ブラウザがあればどこでも動く ● Win/Mac/Linuxは当然OK – 理論的にはケータイやiPhone, DSやWiiでも>< – HTMLを使えば、描画や文字入力も簡単 ● WWWとの連携が得意 ● 言語が強力(ガベージコレクション、オブジェ ● クト指向、連想配列、クロージャ...etc)
    • JavaScriptの特徴 プロトタイプベースのオブジェクト指向 ● クラスは無いけど、3大機能はちゃんとサポー – ト 動的型付け言語 ● 関数もオブジェクト(関数ポインタの偉い奴) ● 文字列を実行コードに変更できるeval関数 ● 組み込み型が割りと強力 ● 配列リテラルが線形List(動的配列) – 連想配列(HashTable)のサポート –
    • でも
    • JavaScriptっ て
    • 遅くね?
    • No
    • 最近は 速いよ>_<
    • JavaScriptのパフォーマンス Webアプリの進化によるニーズで、ここ1〜2年 ● で十数倍から数十倍の高速化 JITも実装されてかなり速い ● 流石にCよりは劣るけど、実用的なレベル ● でも、描画とかマルチメディア周りは遅いです ● o..rz
    • 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); }
    • 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); } }
    • 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);
    • JavaScriptのパフォーマンス お約束のフィボナッチベンチ(結果) 4 3.5 3 2.5 2 実行時間 1.5 1 0.5 0 cc -O0 cc -O3 java javascript
    • JavaScriptまとめ JavaScriptはオブジェクト指向言語 ● 動的型付けだから型宣言は不要 ● クロージャがあるのでコールバックとか簡単 ● 結構速い ●
    • JavaScriptによるゲーム開発
    • 描画するための3つの方法 DOMを直接操作する ● SVG/VRMLを利用する ● Canvasを利用する ●
    • 描画するための3つの方法 DOMを直接操作する ● SVG/VRMLを利用する ● Canvasを利用する ●
    • Cavas HTMLでベクタ画像を作成するための仕様 ● HTML5からサポート ● Firefox3, Safariではサポート済み(IEもライブ – ラリで対応化) ラスタ画像も表示できる ● 高速(チューニングの関係か今はDOMの方が ● 速いこともorz) 比較的従来のゲーム開発に近い開発スタイル ●
    • 円を描く <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>
    • 円を描く(抜粋) 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(); }
    • 円を動かす ループにはsetInterval関数を使う ● コールバック関数を指定したミリ秒間隔で実行 ● イベントなので非同期 ● 60FPSならこんな感じのコード ● var x = y = 0; setInterval(function(){ canvas.clearRect(0, 0, 380, 450); drawCircle(x+=5, y+=5); }, 60 / 1000);
    • 画像を表示する 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);
    • 音を鳴らす JS単体で音を鳴らすのは難しい ● JavaAppletやFlashを経由して音を鳴らす方が ● 無難 一応、embedタグで可能だけどパフォーマンス ● が悪い上に、細かい制御がきかない
    • 音を鳴らす 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;);
    • カーソルで操作する addEventListenerでイベントを登録する ● イベント時の処理はコールバック関数で記述 ●
    • カーソルで操作する 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);
    • 弾幕風の描画 弾幕に重要な三角関数もちゃんと使える ● 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);
    • ちょっとオブジェクト指向っぽく オブジェクト単位で責任を分ける System ● Sprite ● Player – Enamy – Shot –
    • Systemオブジェクト ゲームシステムに対応するオブジェクト ● cavasやイベント等のシステム全体を管理 ● System.canvas ● HTMLのcanvasのwrapperオブジェクト。 – draw, clear等のメソッドを持つ System.sprites ● Spriteオブジェクトの配列 –
    • Systemオブジェクト System.update() ● setIntervalによってループする関数。 – bindされたイベントやSpriteの動作、衝突判 – 定、Spriteの描画 System.bind(ボタン名, コールバック関数) ● keydown/keyupのwrapper関数 – ゲームでよく使う「あるボタンを押しているイ – ベント」をサポート
    • updateメソッド ;  // 全てのspriteに対しての処理. System.sprites.forEach(function(x){ // 動作の更新 x.update(); // 衝突判定 System.sprites.filter(isCollision) .forEach(function(y){ x.collision(y); y.collision(x); }); // 描画 x.draw(); });
    • Spriteオブジェクト 画面に描画されるオブジェクト ● x, y, height, width, enableの基本プロパティ ● update, draw, collisionの基本メソッド ● 描画や衝突したときの処理はSprite自身でやる ●
    • Spriteの派生オブジェクト Player ● プレイヤとなるオブジェクト。 – カーソルでの操作を受け付ける。 – Enemy ● 敵オブジェクト – updateに記述したルーチンの通りに動作 – Shot ● 弾丸オブジェクト – 基本的にはEnemyと同じ –
    • Demo
    • JSによるメリット/デメリット JSで書くメリット ● Webブラウザのみで動作する – オブジェクト指向をはじめ言語機能が強力なので – 書きやすい evalで弾幕情報とかを動的に実験できる – JSで書くデメリット ● 描画が少し重い – Soundがとても重い – 実行速度/描画速度が環境依存(IEがとても遅い) – ジョイパッドの対応とか謎 –
    • まとめ JSでのゲーム開発は音を鳴らさなければ十分可 ● 能 今回は当たり判定の処理とかベタなアルゴリズ ● ムを使ってるから、もう少し速くできるかも? SDLで開発した時と大きくは変わらなかった。 ● 開発自体は比較的簡単 ●
    • みんなもJSで ゲームを 作ってみよう!