Upload
fumihito-yokoyama
View
301
Download
0
Embed Size (px)
DESCRIPTION
Ohotech 特盛 #11で発表したもの 別途資料: http://box2dweb-doc.rtfd.org
Citation preview
Box2DWebを触ってみよう
Box2DWebを触ってみようとにかく動くものを!
自己紹介
自己紹介
Twitter: @tututen
PythonとかC言語を主に使用
CodeJP 2014でショートコーディングの出題しました
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)