巷で話題の9leap凄いですね、未来の若手プログラマの腕試しできる場を提供するという視点が素敵です。
KAYACさんがjsdo.itでブラウザ上のjavascript実行環境を提供した先行例に継ぎ、実行環境&ユーザ・製作者相互評価機能&ゲーム開発ライブラリenchant.jsまで合わせて用意されるという至れり尽せりっぷり。
と、9leap礼賛はまたの機会として、5月15日(日)開催の「JavaScript ゲーム製作勉強会 Vol.1」へ行ってきました。
場所は毎度お世話になっています大森ニフティさん。
土日大工で何つくろうの前に選択肢を広げたいという欲があったので、今回のイベントは素材集めとしても非常に有意義なものでした。
以下、毎度ながら自分用メモ残します。
***
司会・講演者:@hakoberaさん
ゲームの構成要素
・Soft Realtime 時間遷移
・Interactive プレイヤー
・Agent Based アイテム・オブジェクトの相互作用
・Computer Simulation
コンピュータ内の新世界
独自時間軸、登場人物、ルール
・3DCG
・AI
・物理演算
・Agent間通信
・UI設計
・巨大NW
JS利点
・動的型付け
・プロトタイプベース
GoogleChrome V8
ブラウザベンダ間で
V8/nitro/spider monkey..
かつての数十倍速度に
考慮すべきポイント
・Logic
・Graphic Canvas/WebGL/SVG/DOM
・Sound
・Movie
・NW
・Input
用途に合わせた仕組み選び
・DOM
・Canvas/WebGL
参照:SVG Girl
15 flameならリアルタイムでもいける
管理すべき項目
・タイムライン
・入力系
・シーン
・リソース
・イベント
・描画
・サウンド
参照:アクアリウム
JSの死角
ハードウェア非サポート
ジョイパッド等も
カメラ
StreamAPI
Audio API/音鳴らす制御系は地味,互換性ない
(Chrom:web audio api/ FF:AUdio data api)
スマホ
audio鳴らすと全画面再生になってしまう
PCよりCPU貧弱
iPad2はPCより描写10倍遅い…
→GPU描写なら早いが、Canvasでは遅い
コーデック問題(audio
MP3
Ogg
(video
H264
Ogg Theora
WebM
PCだけならFlashに絞るのも有り。
IE9 XPでは動かない
IE6,7,8 Canvas動かない
Chrome Web Storeみたいに割り切りとか。(Google I/O
Game Loop
初期化してGameFrame書き換え
1秒間繰り返しFPS
C言語なら…
function main(){
init();
while(alive){
var key = getInput();
processInput(key);
move();
draw();
}
exit();
}
JSなら
function main(){
init();
setIntarval(function(){
var key = getInput();
processInput(key);
move();
draw();
},2000);
}
window.addEventListner('keydown',KeyManager.keydown)
でgame.js呼び出し
timer = setInterval(mainloop,INTERVAL)
反復
→X
↓
Y
(上に進める際は、v*(-1))
myloop内で当たり判定等…実装
300行ほどで簡単なゲームも実現!
巷のJSライブラリ
enchant.js
Canvas
sc
lime
easel
imapct
WebGL
GLGE
Three.js
データ駆動開発
ライブラリ
組み込みスクリプト
Unity
Server Side JS
Node.js
GWT
Javaで書いて、JSにコンパイル
参照:playwebgl/games/Quake2
JSでの実務現場レポート
講演者:@souさん
web app /game engineer
実務
Flash 動かん…
HTML5で開発しなおす
農園ホッコリーナ for iOS
mbgeの女性人気No1
DeNA@スマフォ
海外
Bandit Nation(CSS3
Pirate Nation
国内
怪盗ロワイヤル…
海賊トレジャー
農園ホッコリーナ
アクション部はCanvasで
忍者ロワイヤル
ngCore(フレームワーク名
JavaScript
クロスプラットフォーム
農園ホッコリーナ for iOS
iphone
パフォーマンス
3G回線
作ってみて…
農園の様子
アニメーション表現
(Canvas/Sprite Imageで位置ずらしパラパラ漫画)
320*386px
8FPS(@iphone4
iphone3GS > 4(Retina対応で描画パフォ落ちる) > iphone3(HWスペックつらい)
1Mapに30〜40オブジェクト数
11〜40KB/枚
トータル300〜400KB
通信
XHR
遊んでもらえるものは作れそう…
描画
3GのHW性能…チューニング次第
Retina対応…難度高い(データ量で解像度きつい
wi-fiならさくさく
3G回線でもそこそこ
電車内移動中つらい
XD(クロスドメイン)通信ハンドリング
XHR2待ち
JSONPでは待機ビジーで通信こける
通信
サイズ減らす
読み込まない工夫が必要
キャッシュ技術使えば…
HTML5で使えるキャッシュ
・Application Cache …魔人ウォーズ(最初にすべてDLする場合有効だが、個別DL系は厳しい
・local Storage(2.5MB ドメインに対して上限
・sessionStorege(2.5MB
・WebGL SQL Databese(5-50MB
Retina対応
解像度4倍
データ量2倍強
iphone4 描画性能で限界
高解像度対応はいずれ通る道
BMPデータをオンラインで←つらい
キャッシュ、データ保持強化
データフォーマット(ベクターで受け取るとか、SVGでCancasレンダリング、SWFが適当?
SWF→JSコンパイル系ライブラリなら使える?
新しいテーマ
WebGL
XHR2,etc
画像ファイル系:ガラケー→スマホへ圧縮
「玉転がしゲームで学ぶUnity入門」
講演者:@nakamura001さん
ヒエラルキーブロック
・画面表示される
プロジェクトブロック
カメラビューブロック
GameObject作成
マテリアル作成
作成後、ヒエラルキーブロックへD&D
Floor 色変更
ライト追加(デフォでは無いので
Player
玉を作成
Player Material
Projectに画像ファイルをProjectブロックへD&D
で、Playerに追加で反映される
Main CameraのInspecterのPosition変更
Projectで
JS/C#/BooScript(pythonっぽい?)
選んでPlayerActionと変名(PlayAction.js)
スクリプト:
var x = Input.GetAxis("Horizontal)*Time.deltaTime*power; …(※deltatime処理オチ等への遅延時間
玉転がし…なので物理エンジンを使おう
Player選択後、CreateObjで→CommponentのPhysics選択
右クリック→Import packageからでも可能
JSを変更
rigidBody.AddForce(x,0,z)として物理エンジンのパラメータを与える
Fireのボタン操作でY軸にAddForceしてジャンプ機能追加
HierarcyにCubeを追加”Goal”と命名
ProjectでGoalMateialとしてパラメータいじって、Hierarcyの”Goal”CubeにD&D
GUI Textを追加
名前をGame Clearとして
Projectで、JS追加”GoalAction”
var player: GameObject;
var gameClear: GameObject;
function Start(){
player = GameObject.Find("Player);
gameClear = GameObject.Find("GameClear");
gameClear.active = false;//初めは隠す
}
sendMessage()で他オブジェクト内の関数をCall可能
X360 Kinect hacks
「KinectどうしのNW対戦」
講演者:@ndruger
利用技術
node.js
websocket(少ない帯域で通信&Server Push可能
webgl(OpenGL ES2.0がブラウザで使用可能
VR920(HMD)…映像&地磁気センサーで見ている方向取得可能
Kinect…モノヒトの位置トレースできる
リモートNode.js
Webブラウザ(WebGL描画
ローカルNode.js
TCP
顔の向き(iWear SDKアプリ
部位のXYZ(OpenNlアプリ
使用ライブラリ
Sence.js(WebGLライブラリ,Tree構造でわかりやすい
glMatrix.js(3Dの演算、手の伸縮・角度計算
Node.js(サーバ、クライアントの各Player計算
Sochet.IO(WebSocketのラッピング、WebSocket未対応のAndroidへの操作対応
Kinect+ブラウザの未来(妄想で
ブラウザの機能としての規格化
・簡単導入→規格化
Scene.jsのObject変換が手軽になる
・誰でも容易に何かを触ったりできる
フィードバック用の安価なハードウェア広まる
→物体を触れる装置の普及、振動を起こす等も
ダミープレイヤー
(一旦動いて撮影したデータ再生による
CPU使用量からKinectゲーム(30fps)をMMOとしてやるのは厳しい
3人以上のエミュレート
・2〜5人くらいで誰かが一時的にサーバ立ててゲームするのが良い
・パケット量を削減してないと4人でも6Mbps消費
ブラウザ+Kinect+HMDを使って、すごい没入感世界が大掛かりな機材なし、体験共有できる
※SecondLifeでは視覚以外の体験もあれば良かった
以上がLTメモです。
二部ハッカソンは私都合により参加できませんでした、残念…。
司会・講演者:@hakoberaさん
ゲームの構成要素
・Soft Realtime 時間遷移
・Interactive プレイヤー
・Agent Based アイテム・オブジェクトの相互作用
・Computer Simulation
コンピュータ内の新世界
独自時間軸、登場人物、ルール
・3DCG
・AI
・物理演算
・Agent間通信
・UI設計
・巨大NW
JS利点
・動的型付け
・プロトタイプベース
GoogleChrome V8
ブラウザベンダ間で
V8/nitro/spider monkey..
かつての数十倍速度に
考慮すべきポイント
・Logic
・Graphic Canvas/WebGL/SVG/DOM
・Sound
・Movie
・NW
・Input
用途に合わせた仕組み選び
・DOM
・Canvas/WebGL
参照:SVG Girl
15 flameならリアルタイムでもいける
管理すべき項目
・タイムライン
・入力系
・シーン
・リソース
・イベント
・描画
・サウンド
参照:アクアリウム
JSの死角
ハードウェア非サポート
ジョイパッド等も
カメラ
StreamAPI
Audio API/音鳴らす制御系は地味,互換性ない
(Chrom:web audio api/ FF:AUdio data api)
スマホ
audio鳴らすと全画面再生になってしまう
PCよりCPU貧弱
iPad2はPCより描写10倍遅い…
→GPU描写なら早いが、Canvasでは遅い
コーデック問題(audio
MP3
Ogg
(video
H264
Ogg Theora
WebM
PCだけならFlashに絞るのも有り。
IE9 XPでは動かない
IE6,7,8 Canvas動かない
Chrome Web Storeみたいに割り切りとか。(Google I/O
Game Loop
初期化してGameFrame書き換え
1秒間繰り返しFPS
C言語なら…
function main(){
init();
while(alive){
var key = getInput();
processInput(key);
move();
draw();
}
exit();
}
JSなら
function main(){
init();
setIntarval(function(){
var key = getInput();
processInput(key);
move();
draw();
},2000);
}
window.addEventListner('keydown',KeyManager.keydown)
でgame.js呼び出し
timer = setInterval(mainloop,INTERVAL)
反復
→X
↓
Y
(上に進める際は、v*(-1))
myloop内で当たり判定等…実装
300行ほどで簡単なゲームも実現!
巷のJSライブラリ
enchant.js
Canvas
sc
lime
easel
imapct
WebGL
GLGE
Three.js
データ駆動開発
ライブラリ
組み込みスクリプト
Unity
Server Side JS
Node.js
GWT
Javaで書いて、JSにコンパイル
参照:playwebgl/games/Quake2
JSでの実務現場レポート
講演者:@souさん
web app /game engineer
実務
Flash 動かん…
HTML5で開発しなおす
農園ホッコリーナ for iOS
mbgeの女性人気No1
DeNA@スマフォ
海外
Bandit Nation(CSS3
Pirate Nation
国内
怪盗ロワイヤル…
海賊トレジャー
農園ホッコリーナ
アクション部はCanvasで
忍者ロワイヤル
ngCore(フレームワーク名
JavaScript
クロスプラットフォーム
農園ホッコリーナ for iOS
iphone
パフォーマンス
3G回線
作ってみて…
農園の様子
アニメーション表現
(Canvas/Sprite Imageで位置ずらしパラパラ漫画)
320*386px
8FPS(@iphone4
iphone3GS > 4(Retina対応で描画パフォ落ちる) > iphone3(HWスペックつらい)
1Mapに30〜40オブジェクト数
11〜40KB/枚
トータル300〜400KB
通信
XHR
遊んでもらえるものは作れそう…
描画
3GのHW性能…チューニング次第
Retina対応…難度高い(データ量で解像度きつい
wi-fiならさくさく
3G回線でもそこそこ
電車内移動中つらい
XD(クロスドメイン)通信ハンドリング
XHR2待ち
JSONPでは待機ビジーで通信こける
通信
サイズ減らす
読み込まない工夫が必要
キャッシュ技術使えば…
HTML5で使えるキャッシュ
・Application Cache …魔人ウォーズ(最初にすべてDLする場合有効だが、個別DL系は厳しい
・local Storage(2.5MB ドメインに対して上限
・sessionStorege(2.5MB
・WebGL SQL Databese(5-50MB
Retina対応
解像度4倍
データ量2倍強
iphone4 描画性能で限界
高解像度対応はいずれ通る道
BMPデータをオンラインで←つらい
キャッシュ、データ保持強化
データフォーマット(ベクターで受け取るとか、SVGでCancasレンダリング、SWFが適当?
SWF→JSコンパイル系ライブラリなら使える?
新しいテーマ
WebGL
XHR2,etc
画像ファイル系:ガラケー→スマホへ圧縮
「玉転がしゲームで学ぶUnity入門」
講演者:@nakamura001さん
ヒエラルキーブロック
・画面表示される
プロジェクトブロック
カメラビューブロック
GameObject作成
マテリアル作成
作成後、ヒエラルキーブロックへD&D
Floor 色変更
ライト追加(デフォでは無いので
Player
玉を作成
Player Material
Projectに画像ファイルをProjectブロックへD&D
で、Playerに追加で反映される
Main CameraのInspecterのPosition変更
Projectで
JS/C#/BooScript(pythonっぽい?)
選んでPlayerActionと変名(PlayAction.js)
スクリプト:
var x = Input.GetAxis("Horizontal)*Time.deltaTime*power; …(※deltatime処理オチ等への遅延時間
玉転がし…なので物理エンジンを使おう
Player選択後、CreateObjで→CommponentのPhysics選択
右クリック→Import packageからでも可能
JSを変更
rigidBody.AddForce(x,0,z)として物理エンジンのパラメータを与える
Fireのボタン操作でY軸にAddForceしてジャンプ機能追加
HierarcyにCubeを追加”Goal”と命名
ProjectでGoalMateialとしてパラメータいじって、Hierarcyの”Goal”CubeにD&D
GUI Textを追加
名前をGame Clearとして
Projectで、JS追加”GoalAction”
var player: GameObject;
var gameClear: GameObject;
function Start(){
player = GameObject.Find("Player);
gameClear = GameObject.Find("GameClear");
gameClear.active = false;//初めは隠す
}
sendMessage()で他オブジェクト内の関数をCall可能
X360 Kinect hacks
「KinectどうしのNW対戦」
講演者:@ndruger
利用技術
node.js
websocket(少ない帯域で通信&Server Push可能
webgl(OpenGL ES2.0がブラウザで使用可能
VR920(HMD)…映像&地磁気センサーで見ている方向取得可能
Kinect…モノヒトの位置トレースできる
リモートNode.js
Webブラウザ(WebGL描画
ローカルNode.js
TCP
顔の向き(iWear SDKアプリ
部位のXYZ(OpenNlアプリ
使用ライブラリ
Sence.js(WebGLライブラリ,Tree構造でわかりやすい
glMatrix.js(3Dの演算、手の伸縮・角度計算
Node.js(サーバ、クライアントの各Player計算
Sochet.IO(WebSocketのラッピング、WebSocket未対応のAndroidへの操作対応
Kinect+ブラウザの未来(妄想で
ブラウザの機能としての規格化
・簡単導入→規格化
Scene.jsのObject変換が手軽になる
・誰でも容易に何かを触ったりできる
フィードバック用の安価なハードウェア広まる
→物体を触れる装置の普及、振動を起こす等も
ダミープレイヤー
(一旦動いて撮影したデータ再生による
CPU使用量からKinectゲーム(30fps)をMMOとしてやるのは厳しい
3人以上のエミュレート
・2〜5人くらいで誰かが一時的にサーバ立ててゲームするのが良い
・パケット量を削減してないと4人でも6Mbps消費
ブラウザ+Kinect+HMDを使って、すごい没入感世界が大掛かりな機材なし、体験共有できる
※SecondLifeでは視覚以外の体験もあれば良かった
以上がLTメモです。
二部ハッカソンは私都合により参加できませんでした、残念…。