Box2DJSを使った落書きアプリ作りました

JavaScript Box2D

以前Flashで作って絶賛放置中だったクレヨンフィジックスっぽい何かなんだけど、ぼけぼけしてるうちにドメイン名(physicsketch.com)まで期限切れ。

あれをいまさらどうこうする気にもならないので、ここは一つBox2DJS使って作り直してChrome Experimentsにでも投稿しようかな。先人のExperimentsを見る限りChromeならBox2DJSもわりと使いものになるみたいだし。

とか思ったのでやってみた。

Firefoxでも動かないことはないけどかなり重い。IEは動きがクソ重い上に細かい部分がなんか微妙。てことでやっぱChrome推奨。

Chrome Experimentsに投稿しようと思ったらYoutubeのURL入れる欄があったのでScreencastも作ってみた。

いやしかしChrome、というかV8、すごいね実際。こんな重そうなJSがわりと使い物になってるもんな。

・・・

以下、一応アプリの使い方。図形のドラッグはタイマーを止めてからじゃないとできなかったり、図形の固定の前に選択しておかないと駄目だったり、自分が言うのもなんだけど結構わかりづらい。

タイマー開始・停止	右上のStop TimerかStart Timerボタンを押してください
線を引く	キャンバスでドラッグしてください。始点と終点が十分離れていればただの線になります
詰まった図形を描く	キャンバスでドラッグしてください。始点と終点が近ければ中の詰まった図形になります。凸型の多角形じゃないと衝突判定がおかしくなるので注意
衝突範囲を見る	Show Physical Bodyボタンを押してください
図形を選択する	図形をクリックしてください。画面右にインスペクタが開いて表示位置などが確認できます
図形を固定する	固定したい図形を選択し、タイマーを停止した状態で、図形上の固定したい場所をクリックしてください
図形を連結する	タイマーを停止した状態で図形を移動して一部を重ね、どちらかを選択して重なっている部分をクリックしてください
図形を移動する	固定したい図形を選択し、タイマーを停止した状態で、図形をドラッグしてください
図形を削除する	削除したい図形を選択して、Deleteボタンを押してください

WinでChrome入れてる人はよかったら試してみてください。うわさによるとMacでもSafari4なら快適らしい。

スクリーンキャストの撮り方

Tips

上のスクリーンキャストだけど、Youtubeはswfを受け付けてくれないのでWink使えなくて、いろんなアプリDLしたり試したりすげぇたいへん。Winkで撮ったswfをどうにか変換しようとしてあきらめたり、アプリ入れたり消したり結局何時間もかかった。

とても馬鹿馬鹿しかったので次回同じことを繰り返さないためにメモ。ちょくちょくスクリーンキャストを撮ることがあるなら、ちゃんとしたツール買っちゃったほうがいいと思う。

あ、フォーマットがswfでもいいなら上に書いてる通りWink使えばいいと思う。今回のメモはYoutube用の動画作成が目的ということで、フォーマットはMP4。

使うツールは以下。

Display2AVIでAVI形式のスクリーンキャスト作って、DVD MP4変換でMP4に変換する。

注意点は以下。

Display2AVIは320x240以上のサイズだとロゴが入っちゃうみたいだけど、スクリーンキャストならその最小サイズでも問題なし
DVD MP4変換はフリー版だと最大5分しか変換できず、5分以下の動画はその半分しか変換してくれない。AVIを撮るときに2分半以内に撮りたい処理を収めて、その時間と同じだけ無駄な動画を後半に納めておく

以上。