Box2DWebを触ってみよう

Box2DWebを触ってみようとにかく動くものを！

自己紹介

自己紹介

Twitter: @tututen

PythonとかC言語を主に使用

CodeJP 2014でショートコーディングの出題しました

http://jsfiddle.net/29o6bwe7/7/

python -c "exec('try:import SimpleHTTPServer as m\nexcept:import http.server as m');m.test(HandlerClass=m.SimpleHTTPRequestHandler)"

https://github.com/jsakamoto/MarkdownPresenter

Box2DWebとは

Box2DWebとは

JavaScriptで動く物理演算ライブラリ

ActionScriptのBox2DFlash 2.1a のコードをJavaScriptで書きなおしたもの

2011年6月以降更新が滞ってる

準備

http://box2dweb-doc.rtfd.org

ここのページの「準備」→「スケルトンコード」をコピペしましょう

index.htmlを見てみよう

何も出ません！

初期化を書こう

Worldの初期化

800px

600px

800px 約27px

20px

600px

800px 約27px

20px

600px 約9.8px/s^2

debug表示の設定

床の設置

Body

Fixture

Shape

Body

Body.b2_staticBody

Body.b2_dynamicBody

Fixture

density(密度)

friction(摩擦係数)

restitution(反発係数)

Shape

b2.PolygonShape

b2.CircleShape

run関数

init関数

Demo

Demo

うっすら緑の板

オブジェクトを置こう

（円形編）

円形オブジェクト作成

r

(x, y)

dynamicBody

Circle

円形オブジェクト設置

Demo

オブジェクトを置こう

（長方形編）

長方形オブジェクト作成

w

(x, y)

dynamicBody

Polygon

h

長方形オブジェクト設置

Demo

イベント駆動で

オブジェクト配置

HTMLにボタン設置

Random関数

「円形」ボタンイベント追加

「四角形」ボタンイベント追加

x座標：Random

出現イメージ

イベント駆動で

オブジェクト削除

HTMLにボタン設置

リセット関数

Body

World

BodyBody

BodyBodyBody

…

Body

World

BodyBody

BodyBodyBody

Delete

…

DeleteDelete

Body

WorldBody

Body

Delete

…

DeleteDelete

オブジェクトに

画像をはりつける

適当な画像準備

ディレクトリ構造

画像読み込み

UserDataの使用

動的オブジェクトの座標取得

SlideX

SlideY

Canvasの原点に動かす

Canvasの原点に動かす

Canvasを回す

Image描画（座標は左上）

Canvasを元の角度に戻す

Canvasを元の位置に戻す

SlideX

SlideY

ハンズオンは

以上となります

投げ銭は

＋Node.jsで動いてます

投げ銭のPRを

お待ちしております！

対戦しましょ？

対戦しましょ？ご静聴ありがとうございました

Presented By momo_*(@tututen)