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