前回のエントリでsoket.ioにだいたい慣れたので、次は以前作ったEaselJSのスタディを少しいじって、soket.ioでつなぎタッチの可視化共有してみた。
今回作ってみた物を以下に置いておく。ただVPSサーバーの構成変更を行う予定なので、いつまでこの形でおいておくかは分からない。
できればiPhoneとmacとかiPhoneとiPadとかで見ていただけると、一方のタッチがリアルタイムに伝わる様が見えるだろう。もちろんブラウザウィンドウ2枚立ち上げでも何が起きるか把握できる。
canvas
Node.js[2]-EaselJSとsoket.ioでタッチ共有
EaselJS[1]-iPhone/iPad対応や画像など
今回はEaselJSをある程度いろいろといじってみた。
以下に作ってみた物を置いてある。
EaselJS Study 01
EaselJS Study 02
EaselJS[0]-スタートポイント作成
EaselJSはCANVASをactionscriptに似た感じで扱えるようにするjavascriptライブラリだ。
ライブラリの作者はフラッシュ開発者として有名なGrant Skinner氏である。またadobeのFlashプロダクトマネージャで、最近モバイルブラウザー向けFlash Player開発中止についての詳細説明をしていたMike Chambers氏も、その開発に協力しており、将来的にはフラッシュとの連携がありそうだと言われている。
つい先ごろ0.4が公開された。ここのところバージョンアップが無かったので開発が続くのか少々不安だったのだけど、これで継続することがはっきりとしたので、いじりはじめてみることにした。
今回はhello worldとプロジェクトのスタートポイント作成を行った。
canvasでサークル同士の衝突や壁面衝突。
今年の頭にちょくちょく書いていた canvasでのパーティクルシリーズだが、
最近またちょびちょびいじっているので、久方ぶりにブログに書いておく。
Read more »
壁面をずるずる。
今回もこれまでに続きcanvasでドット動かしてます。
滑りベクトルを使って、壁面を滑っていくようにしてみました。
マウスに向かってグリグリといく感じがちょいお気に入り。
参考にしたのは以下のサイトです。
その５ 反射ベクトルと壁ずりベクトル
Flashゲーム講座＆ASサンプル集【ベクトルを使ってみよう】
めり込み補正とかどうするかはまだ考え中。
その前にたぶんオブジェクト同士の衝突かなぁ。
canvasでhtml5Logoとかも衝突
こないだから引き続きcanvas + javascriptやってます。
今回は衝突と、あと旬なんでhtml5Logoを動かしたり。
Particle4 寒いし、雪のニュースをよく聞くしってことで白っぽくしてみた。
HTML5 LOGO 発表されたばかりなんで、とりあえずロゴを突っ込んでちょっと回転させてみたり。
方法的には、だいたい以下の通りです。
現在位置と次の位置の線分と衝突する線分との交差判定
↓
交差している場合、交差点を求める
↓
反射ベクトルを求め、交差点から反射
今回は、円の大きさとか速度ベクトルの残り分を
反射ベクトルの大きさに反映といったことはやっていないです。
ActionScriptだとhitTestで済む衝突判定ですが、 canvasには無いので、この辺を参考に、 平面幾何におけるベクトル演算 » 直線と線分 「線分の交差判定で」現在位置と次の位置の線分と衝突する線分を求め 「線分の交点計算」で交点を求める。
次に、この辺りを参考にしつつ その５ 反射ベクトルと壁ずりベクトル 衝突ラインの単位法線ベクトルと速度ベクトルから反射ベクトルを求めている。
だいたいこんな感じ。
次は滑りかな、その後オブジェクト同士の衝突あたりな気分です。
canvasでパーティクル
チビチビとcanvas + javascriptやってみています。
なんだか同じような動作ですが、それぞれ方法がすこしずつ違ってます。
このあたりの方法を一回ちゃんとやっておきたかった。
canvasでオブジェクトを動かす時のお作法的な部分はこちらを参考にした。
「ActionScript3.0アニメーション」のchp8 イージングとバネを参考に作成。
加速度と摩擦を使う。
scratchbrainのエントリを参考にjsへ移植したのだけど、該当エントリ消えちゃってますね。
「ゲーム開発のための数学・物理学入門」やASGFを参考に
2次元ベクトルライブラリ作成して、使用。
ベクトルの使い方は以下を参照。
こちらもベクトル使用だが、移動ベクトルと逆向きに作用する
摩擦ベクトル（正確には違うけど。）のようなものを導入。
引き続き、この手ので必要な跳ね返りとか滑りとかやってみる予定。