Pong Applied Box2DFlex Physics Engine

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.

[iframe src= width=840 height=440]

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).

[gist id=485641]

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 .

[gist id=485646]

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)));

[gist id=485710]

Announcing Box2D Flex framework


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

[iframe src="" width="640" height="480"]

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

Timezone shift in bootcamp

Another short one , each time i open my bootcamp or VM (parallels or fusions) i get different timezone for windows and osx.
both are configured correctly connected to the internet and updated from ntp server.

But the windows machine is persistently offsets by two hours. After some hunting around and some trial and error I found that the best and quickest solution is adding a new registry key to HKLM\SYSTEM\CurrentControlSet\Control\TimeZoneInformation\ named RealTimeIsUniversal typed REG_DWORD and set it’svalue to 1

[gist id=464413]

you can also patch your registry by downloading bootcamp clock registry update and running it on your windows machine.

Battling with Mac & PC in a local network

That’s a short one , I was banging my head for the last few months with a problem @ my home network.

I have a few computers all of which are connected via a router  and all see each other perfectly and can be accessed via IP or computer name.

All except one PC and Mac  which refused to see each other by computer name but could be accessed by IP.  But today I finally managed, after comparing the installed software on two PC’s I decided to try and uninstall Bonjour services from my PC to see if it impairs the connection , and luckily it did.

So if it happens to you  remove Bonjour services from PC

box2d flex integration

[kml_flashembed publishmethod="static" fversion="10.0.0" movie="/blog/wp-content/uploads/2010/04/Box2DFlex.swf" width="300" height="300" targetclass="flashmovie"]

Get Adobe Flash player


Besides collapsing the form you can also drag N drop the items to see collusion and gravity. code will follow soon .. I hope ..

Multitouch + 3D flash 10.1

I’ve compiled a POC of a 3D model controlled by multitouch events in flex (actually AIR 2.0).

In the application I use TransformGestureEvent dispatched from flash 10.1 player. unfortunately this is the only event fired in Mac and only in AIR mode – adobe it’s lame.

TransformGestureEvent event availability

Event Mac Air Mac Web Windows (Air+Web)
GestureEvent.GESTURE_PAN v
TransformGestureEvent.GESTURE_ROTATE v v
TransformGestureEvent.GESTURE_SWIPE v v
TransformGestureEvent.GESTURE_ZOOM v v

TouchEvent availability - windows only (and iPhone but i guess it’s not applicable any more)

Event Mac Air Mac Web Windows (Air+Web)
TouchEvent.TOUCH_END v
TouchEvent.TOUCH_MOVE v
TouchEvent.TOUCH_OUT v
TouchEvent.TOUCH_OVER v
TouchEvent.TOUCH_TAP v

the first version was a bit stale so I’ve added KineticMovementManager which adds a drift effect (like when scrolling an iPhone scroll) but it’s still a work in progress so don’t relay on it.

download source

download installer

[kml_flashembed publishmethod="static" fversion="8.0.0" movie="/blog/wp-content/uploads/2010/04/multitouch 3d take 2.swf" width="550" height="430" targetclass="flashmovie"]

Get Adobe Flash player


Web 2.0 Session at NDS

6a00e54fc0548f88340120a59ef596970c-800wiHi NDS architects,
Thanks for joining my web 2.0 seminar, I had a great time and hope you did as well.
You can find most of the presentation content in hebrew at my hebrew blog, seminar slides are linked bellow.

Session 1 – What is web 2.0 ?(pdf)

Session 2 – Software as a service (pdf)

Session 3 – Protocols (pdf)

Session 4 – Framework and tools (pdf)

I’ll end with some questions I didn’t know or didn’t have the time to elaborate on:

How effective are google ad words?

You can find info at AdWords site success stories section though it’s not exactly impartial , general statistics about online advertising and ROI can be found in grabstats which also includes links to the original reports.

Where can I find firefox & add-ins ?



Web Developer Toolbar

Remote Control (STB development)


Can Hadoop or F# parallelize my algorithms automatically ?

This question is divided into several parts :

1. Frameworks Hadoop and frameworks alike are prone to work in parallel but you (as the system architect or developer) need to identify the part that can be parallelized and pass it to the framework with the map and reduce functions

2. Languages F#, Scala and other functional languages parallelize your code automatically.

3. Functional constructs PLINQ and other functional constructs inside non funcional languages are not parallel by default, when they support parallel computation it’s usually with using an implicit directive such as myWorker.AsParallel = true;

What’s Yahoo WDK ?

Yahoo’s WDK is a widget development kit , what are widgets ? widgets are mini applications that are floating on your O/S desktop (in Windows they are called gadgets) you can see UI different examples in the following links mac dashboard ,windows gadgetsyahoo widgets. Widgets are very similar in nature to mashups (discussed in session 3) since they usually interact with an existing online service and have no data or logic of their own.  Back to WDK , WDK lets you develop widgets running on Yahoo’s runtime (which needs to be installed on the customer’s machine), it uses a familiar development UI Pattern of XML layout language and Javascript for interaction. Yahoo widgets can run on PC or TV devices though I haven’t come across an IPTV STB that runs WDK. You can read more about WDK at yahoo tv developers or review the development manual for code examples.

Thanks again for a great session,


WNYC Radiolab – the best podcast i know

28122_logo[1]This post is dedicated to the BEST podcast I have heared in  a very long time  WNYC Radiolab.

It’s a science show.

It’s a radio program broadcast in the US and also available via RSS.

It’s a brilliant show.

Seth Godin guarantees it will make you smarter and after a few shows I must agree with him IT WILL.

Their refreshing use of the medium won my heart and ears (and i think also some awards). If you have free listening time (commuting, exercising, you just have time or what not) I urge you to give them a try.

Subscribe RSSSubscribe iTunes

Go to Top