Posts tagged open source

Pong Applied Box2DFlex Physics Engine

0
1 year ago
by daniel in ,

I decided to learn by example and assigned myself the goal of building pong in box2d.

box2d is an overkill for pong , but what do you know, it’s damn easy.

the gist of it is :

  • layout
  • world setup
  • event handling

Full source code hosted in github Pong in Box2DFlex.

The layout

a SkinnablePhysicsContainer holding two border containers (named p1 and p2) which are the player bars and corelating p1Goal and p2Goal which will act as hit area for the ball graphics element (Ellipse).

Setting Up the World

when the application loads it maps all elements in the physics container to box2d bodies , in woldSetup method i specified different mapping types to components

The key thing you need to know is that you want  p1, p2 and the goals controls to be kinematic bodies so

  • they are not affected by collations and
  • they do not collide with each other
  • they affect dynamic bodies colliding into them

and an event handler onBodiesContact that triggers when two bodies collide .

Event Hadnling

onBodiesContact is triggered each time two bodies collide indie it i do a simple test to see which to bodies collided and triggers the respective indicator.

world_mouseMoveHandler is handling the translation of mouse position and movement of p2

var p2b:b2Body = worldUIContainer.getComponentBody(p2);
p2b.SetPosition(new b2Vec2(p2b.GetPosition().x,worldUIContainer.worldDef.meter(nextPos)));

Announcing Box2D Flex framework

2
1 year ago
by daniel in ,

Prefix

In a previous post demonstrating box2d integration with flex I made a promise (mainly to myself) to share the demo code. When I started to review with sharing in mind it looked cumbersome and overly verbose. So I started cranking on it fixing and straightening the code & architecture and step by step I realized that I’m creating a small Integration layer rather then a POC.

Announcing Box2DFlex

Box2DFlex framework allows you easely integrate box2d into flex framework using mxml. The framewok helps easy integration with flex and exposes box2d world for advanced manipulation.
  • extends SkinnableContainer uses flex component lifecycle model
  • uses regular MXML and AS flex components
  • supports complex shaped flex components (convex and concave) conversion to b2d shapes.
  • allows multiple worlds side by side

Getting Started

In order to play with Box2dFlex you will need flash builder 4 and Box2DFlex source which is hosted on GitHub.

and in four simple steps you should

  1. download the source code
  2. inport the Box2DFlex and Demos  projects into flash builder 4
  3. compile
  4. Play with the eamples in Box2Demos project

Building Your Own b2d World

  1. download the framework
  2. create a new project
  3. add refrence to <Box2DFlex dir>/Box2dFlexLib/bin/Box2DFlexLib.swc
  4. in your MXML add a new SkinnablePhysicsContainer
  5. set the container’s yGravity property to 10 and autoStartPhysicsEngine to true (yGravity=”10 autoStartPhysicsEngine=”true”)
  6. if you want your world to contains walls use setBoundries=”true” attribute
  7. place a button inside SkinnablePhysicsContainer and set it’s properties (width / height / label)
  8. run the project
Go to Top