JavaScriptによるゲーム開発

JavaScriptによるゲーム開発
～ゲーム開発初心者による
　　　　　弾幕ゲーム開発～

2009/3/7
Pascal

もくじ
JavaScriptとは？
●

●

Demo
●

まとめ
●

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

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

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

「ブログなんだよもん」ってBlogで、主にプロ
●

グラム関係の話を書いてます。

得意な言語はJava, JavaScript, Ruby
●

最近、Scalaとか関数型言語を勉強中！
●

実はCは苦手です＞_＜
C言語何それ？　おいしいの？
●

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

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

ずいぶん前にPSPでスネーク書いたのが最後
●

この前、Hello Wold書いたら3回コンパイルエ
●

ラーした（ぉ

参加者の多くが良く参加する
掲示板の調査

参加者の多くが良く参加する
掲示板の調査

７０％以上がC使い

という分けで発表してみる
発表すれば話すネタがあるから、壁の花になら
●

んはず！

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

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

ゲーム作り自体久しぶりだけどね！
●

しかも、弾幕シューティングとかほとんどした
●

こと無いけどね＞＜

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

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

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

オブジェクト指向言語だけど、関数型的な書き
●

方も出来て最近注目！

なんでJavaScript？
ブラウザがあればどこでも動く
●

Win/Mac/Linuxは当然OK
–

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

HTMLを使えば、描画や文字入力も簡単
●

WWWとの連携が得意
●

言語が強力（ガベージコレクション、オブジェ
●

クト指向、連想配列、クロージャ...etc）

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

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

動的型付け言語
●

関数もオブジェクト（関数ポインタの偉い奴）
●

文字列を実行コードに変更できるeval関数
●

組み込み型が割りと強力
●

配列リテラルが線形List(動的配列)
–

連想配列(HashTable)のサポート
–

JavaScriptのパフォーマンス
Webアプリの進化によるニーズで、ここ1〜2年
●

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

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

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

でも、描画とかマルチメディア周りは遅いです
●

o..rz

お約束のフィボナッチベンチ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);
}

お約束のフィボナッチベンチ（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の
コード）
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);

お約束のフィボナッチベンチ（結果）
4

3.5

3

2.5

2
実行時間

1.5

1

0.5

0
cc -O0 cc -O3 java javascript

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

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

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

結構速い
●

描画するための３つの方法
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;
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);

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;
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と同じ
–

JSによるメリット／デメリット
JSで書くメリット
●

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

オブジェクト指向をはじめ言語機能が強力なので
–
書きやすい
evalで弾幕情報とかを動的に実験できる
–

JSで書くデメリット
●

描画が少し重い
–

Soundがとても重い
–

実行速度／描画速度が環境依存(IEがとても遅い)
–

ジョイパッドの対応とか謎
–

まとめ
JSでのゲーム開発は音を鳴らさなければ十分可
●

能

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

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

SDLで開発した時と大きくは変わらなかった。
●

開発自体は比較的簡単
●

みんなもJSで
ゲームを
作ってみよう！

JavaScriptによるゲーム開発

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Mehr von Hiroaki NAKADA

Mehr von Hiroaki NAKADA (9)

JavaScriptによるゲーム開発