sample: DragDealer
※Control Linksから操作が可能ですが、Mouse Dragでも上下左右にスライド移動できます。
参照：
DragDealer.js
そういえば、旅館「多田屋」のサイトは美麗ですよね。あちらはバリバリのFlashなので、これをjsでやるとしたら大変だろうなと。
2011年9月11日日曜日
背景画像でスライド遊び
ブリューゲル作品：「ネーデルランドの諺」でスライドのように動かしたら面白かったので記載します。
sample: DragDealer
※Control Linksから操作が可能ですが、Mouse Dragでも上下左右にスライド移動できます。
参照：
DragDealer.js
そういえば、旅館「多田屋」のサイトは美麗ですよね。あちらはバリバリのFlashなので、これをjsでやるとしたら大変だろうなと。
sample: DragDealer
※Control Linksから操作が可能ですが、Mouse Dragでも上下左右にスライド移動できます。
参照：
DragDealer.js
そういえば、旅館「多田屋」のサイトは美麗ですよね。あちらはバリバリのFlashなので、これをjsでやるとしたら大変だろうなと。
2011年7月30日土曜日
javascriptで4次Runge-Kutta法
ルンゲ＝クッタ法（Runge-Kutta method）は、数値解析において常微分方程式の近似解を求める方法。
今回は、ルンゲクッタ法のサンプルをJavaScriptで作って動かしてみました。
EpidemiologyのSIRモデルのプログラムを見ていて、ここでもルンゲクッタを使用していたので、一度触っておいて損はなかろうと思いまして。
SIRモデルはウィルスの感染過程を”感染の可能性のある者”・”感染した者”・”感染の可能性の無い者（免疫できた or 隔離された or 亡くなった）”に３区分し、それぞれの状態遷移をプログラムで可視化したようなものです。
これをメディアのクチコミの影響力に当てはめたりできるかな…という前置きからの本エントリ。
ルンゲクッタ法を弄ってみた図は下記な具合です。
図１：Tmax=30, dt=0.01の場合
図２：Tmax=30, dt=0.05の場合
図３：Tmax=30, dt=0.1の場合
図４：Tmax=30, dt=0.5の場合
参照サイトにはRunge-Kutta法よりざっくりとした精度のEuler法との比較もあります。
図を見て見る限り、目の細かさのパラメータdtが細ければ理論値に近い値が算出されますね。
・ルンゲ＝クッタ法（Runge-Kutta method）
・Excelでルンゲクッタ法
・gnuplotで微分方程式を解く
2011年7月5日火曜日
JavaScriptでKalmanFilter
hirabayashiさんのRubyカルマンフィルターをJavaScriptに換えてみました。
カルマンフィルターの概要はWikipediaにて。
ざっくりとした認識では、定時間感覚でぶれて出力される値を、そのぶれ幅から以降の予測出力値を算出するというもの…らしいです。
動くサンプルは下記URLに置いておきます。
http://sandbox4yoshi.appspot.com/KalmanFilter.html
門外漢ではありますが、制御工学って面白い分野だなぁと。
カルマンフィルターの概要はWikipediaにて。
ざっくりとした認識では、定時間感覚でぶれて出力される値を、そのぶれ幅から以降の予測出力値を算出するというもの…らしいです。
動くサンプルは下記URLに置いておきます。
http://sandbox4yoshi.appspot.com/KalmanFilter.html
門外漢ではありますが、制御工学って面白い分野だなぁと。
2011年5月22日日曜日
「JavaScript ゲーム製作勉強会 Vol.1」参加ログ
巷で話題の9leap凄いですね、未来の若手プログラマの腕試しできる場を提供するという視点が素敵です。
KAYACさんがjsdo.itでブラウザ上のjavascript実行環境を提供した先行例に継ぎ、実行環境＆ユーザ・製作者相互評価機能＆ゲーム開発ライブラリenchant.jsまで合わせて用意されるという至れり尽せりっぷり。
と、9leap礼賛はまたの機会として、5月15日(日)開催の「JavaScript ゲーム製作勉強会 Vol.1」へ行ってきました。
場所は毎度お世話になっています大森ニフティさん。
土日大工で何つくろうの前に選択肢を広げたいという欲があったので、今回のイベントは素材集めとしても非常に有意義なものでした。
以下、毎度ながら自分用メモ残します。
***
司会・講演者：@hakoberaさん
ゲームの構成要素
・Soft Realtime 時間遷移
・Interactive プレイヤー
・Agent Based アイテム・オブジェクトの相互作用
・Computer Simulation
コンピュータ内の新世界
独自時間軸、登場人物、ルール
・３DCG
・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
パフォーマンス
３G回線
作ってみて…
農園の様子
アニメーション表現
（Canvas/Sprite Imageで位置ずらしパラパラ漫画）
320*386px
８FPS(@iphone4
iphone3GS > 4（Retina対応で描画パフォ落ちる） > iphone3(HWスペックつらい)
１Mapに30〜40オブジェクト数
11〜40KB/枚
トータル300〜400KB
通信
XHR
遊んでもらえるものは作れそう…
描画
３GのHW性能…チューニング次第
Retina対応…難度高い（データ量で解像度きつい
wi-fiならさくさく
３G回線でもそこそこ
電車内移動中つらい
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人以上のエミュレート
・２〜５人くらいで誰かが一時的にサーバ立ててゲームするのが良い
・パケット量を削減してないと4人でも６Mbps消費
ブラウザ＋Kinect＋HMDを使って、すごい没入感世界が大掛かりな機材なし、体験共有できる
※SecondLifeでは視覚以外の体験もあれば良かった
以上がLTメモです。
二部ハッカソンは私都合により参加できませんでした、残念…。
司会・講演者：@hakoberaさん
ゲームの構成要素
・Soft Realtime 時間遷移
・Interactive プレイヤー
・Agent Based アイテム・オブジェクトの相互作用
・Computer Simulation
コンピュータ内の新世界
独自時間軸、登場人物、ルール
・３DCG
・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
パフォーマンス
３G回線
作ってみて…
農園の様子
アニメーション表現
（Canvas/Sprite Imageで位置ずらしパラパラ漫画）
320*386px
８FPS(@iphone4
iphone3GS > 4（Retina対応で描画パフォ落ちる） > iphone3(HWスペックつらい)
１Mapに30〜40オブジェクト数
11〜40KB/枚
トータル300〜400KB
通信
XHR
遊んでもらえるものは作れそう…
描画
３GのHW性能…チューニング次第
Retina対応…難度高い（データ量で解像度きつい
wi-fiならさくさく
３G回線でもそこそこ
電車内移動中つらい
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人以上のエミュレート
・２〜５人くらいで誰かが一時的にサーバ立ててゲームするのが良い
・パケット量を削減してないと4人でも６Mbps消費
ブラウザ＋Kinect＋HMDを使って、すごい没入感世界が大掛かりな機材なし、体験共有できる
※SecondLifeでは視覚以外の体験もあれば良かった
以上がLTメモです。
二部ハッカソンは私都合により参加できませんでした、残念…。
2010年11月18日木曜日
RingoJSインストール周辺メモ
Antが入ってる状態からのメモ@ MacOSX 10.5。
antのパスが通っているかは、ターミナルで確認。
ant -version
基本的なインストールは本家サイトを参照しつつ、その前後で起きたエラーと対処について書きます。
【インストール時のエラーと対処】
ant jarコマンドを打ち忘れると出るエラー。
ターミナルから、git cloneまたはダウンロードしてきたringojsディレクトリ直下で
ant jar
すると、ringojs/build/classesにクラスが生成される。
・ERROR②:"java.io.FileNotFoundException: Can't find file admin/create"
或るサイトを参照してターミナルでアプリ作成コマンドを
bin/ringo admin/create
と打つも、上記エラー。
正解は
bin/ringo-admin create
の様子、バージョンの違い？
【アプリ起動】
・デモアプリ起動
インストールしたringojsディレクトリ直下で、
インストールしたringojsディレクトリ直下で、
bin/ringo apps/demo/main.js
のコマンド叩くとjettyが起動して、http://localhost:8080/でアプリが見れます。・パッケージのインストール（GitであればUserID/RepositoryNameで良いとの公式サイトに…例：ringo-admin install robi42/ringo-hibernate）
上記installコマンド叩くも、ERROR③：”JavaException: java.util.zip.ZipException: error in opening zip file (ringo/zip.js#16)”発生。
zip.jsの16行目と調査リンク先を見る限り、Path周辺が問題の様子…
けれども、コマンド打たなくてもパッケージのインストールはできる(※参照)ようなので、
git clone git://github.com/hns/ringo-cometd.git
でローカルに落としたpackageを、ringojs/packageディレクトリにコピー
その後、ringoコマンドでパッケージ内のmain.jsを叩けば、起動します。
bin/ringo packages/ringo-cometd/app/main.js
・アプリ作成ヘルプは
bin/ringo-admin create -h
・Google App Engine の雛型作成は
bin/ringo-admin create -a
たしかにスケルトンが出来上がってます。
GoogleAppEngineに載せるところは未テスト。
【参照】
・RingoJS Home
・GAE deploy 参照動画
・Comet 参照動画
2008年3月19日水曜日
"Google Co-op"体験記
"Google Co-op" from here.
非常に簡便に"オリジナル検索エンジン"を作成＆設置できる機能です。。
JavaScript部分のコードをcopy&pasteすれば設置完了。手順は下記URL。
http://www.ajaxtower.jp/googlecoop/create/index.html
みたところ、日本語での検索結果を絞り出そうとする自作エンジンはまだ少ない様子。
絞り出す‥というのも、抽出対象のWebサイトのURLを列挙して、その中から検索語を抽出するところからの着想。
検索の効率を考えると、いかに雑音(ブログなどの断片的なものや信憑性の疑わしいもの)を除くかは、大きな課題と考えてたので、これは凄いサービスですね。
ただ、対象URLを増やせば、情報量の規模が大きくなる一方、欲しい情報にたどり着く効率はUp or Down??など、考える余地もあるかも。
あと、"検索フォームを備えているサイトのそれ"と"Google Co-op"の検索では、抽出結果が異なる様子。
これは面白いかな、と。
以降、検索結果をXMLでも吐き出せるなら、既存のRSSサービスと連動できるかな‥と調査中。。
非常に簡便に"オリジナル検索エンジン"を作成＆設置できる機能です。。
JavaScript部分のコードをcopy&pasteすれば設置完了。手順は下記URL。
http://www.ajaxtower.jp/googlecoop/create/index.html
みたところ、日本語での検索結果を絞り出そうとする自作エンジンはまだ少ない様子。
絞り出す‥というのも、抽出対象のWebサイトのURLを列挙して、その中から検索語を抽出するところからの着想。
検索の効率を考えると、いかに雑音(ブログなどの断片的なものや信憑性の疑わしいもの)を除くかは、大きな課題と考えてたので、これは凄いサービスですね。
ただ、対象URLを増やせば、情報量の規模が大きくなる一方、欲しい情報にたどり着く効率はUp or Down??など、考える余地もあるかも。
あと、"検索フォームを備えているサイトのそれ"と"Google Co-op"の検索では、抽出結果が異なる様子。
これは面白いかな、と。
以降、検索結果をXMLでも吐き出せるなら、既存のRSSサービスと連動できるかな‥と調査中。。
登録:
コメント (Atom)