Seth Ladd's Blog

Sponsor: Register today for New Game, the conference for HTML5 game developers . Learn from Mozilla, Opera, Google, Spil, Bocoup, Mandreel, Subsonic, Gamesalad, EA, Zynga, and others at this intimate and technically rich conference. Join us for two days of content from developers building HTML5 games today. Nov 1-2, 2011 in San Francisco. Register now ! Good news, everyone!  Work is progressing on the Mouse Lock API, a new JavaScript API which will allow for playable "First Person Shooter" (aka FPS) games, and other  use cases, for HTML5 games. Vince Scheib , Chrome engineer and veteran of the games development industry, has kicked off work back in June 2011 with an email to the public-webapps list .  A recent update from Vince , sent in Sept 22, 2011, hints at a work in progress implementation for Chrome. The draft specification for Mouse Lock API is available for review.  It is proposed that the Web Events Working Group adopt the Mouse Lock spec. Tracking pro

Sponsor:  Register today for  New Game, the conference for HTML5 game developers . Learn from Mozilla, Opera, Google, Spil, Bocoup, Mandreel, Subsonic, Gamesalad, EA, Zynga, and others at this intimate and technically rich conference. Join us for two days of content from developers building HTML5 games today. Nov 1-2, 2011 in San Francisco.  Register now ! After exploring Box2D and Impulses , which can make a body jump and move, we will turn our attention to detecting and dealing with body collisions. Intro Box2D of course knows when and how each body and fixture is contacting other bodies and fixtures, but so far we haven't reacted to these events nor done anything interesting. Luckily, there is an easy way to be notified when two bodies contact each other, when they stop contacting, and even how much impulse is felt by the bodies. We will explore these concepts in this blog post. Can you feel it? The b2ContactListener class from Box2D provides the four callbacks y

Sponsor:  Register today for  New Game, the conference for HTML5 game developers . Learn from Mozilla, Opera, Google, Spil, Bocoup, Mandreel, Subsonic, Gamesalad, EA, Zynga, and others at this intimate and technically rich conference. Join us for two days of content from developers building HTML5 games today. Nov 1-2, 2011 in San Francisco.  Register now ! Intro So far we have been looking at worlds that interact merely from gravity, or motorized joints . The demos have been fairly calm. Time to add a bit more excitement with the introduction of Impulses. Using an impulse, we can immediately change a body's velocity. Adding energy Box2D has two seemingly similar ways to inject a little life into your bodies. ApplyImpulse : immediately change momentum. Think being hit by a bat. ApplyForce : change momentum over time. Think pushing something. There's a lot of confusion over what the difference is between the two methods. If you need a quick obvious change, us

Sponsor:  Register today for  New Game, the conference for HTML5 game developers . Learn from Mozilla, Opera, Google, Spil, Bocoup, Mandreel, Subsonic, Gamesalad, EA, Zynga, and others at this intimate and technically rich conference. Join us for two days of content from developers building HTML5 games today. Nov 1-2, 2011 in San Francisco.  Register now ! Intro Previously we looked at complex bodies with multiple shapes for Box2D . Using those techniques, we learned how to build concave bodies by associating two or more shapes to a body. Another way to build more complex objects is to bind bodies together with joints. Joints constrain bodies together, for example by restricting ranges of motion or affecting motion of one body from another. Box2D supports many different types of joints, including pullings, gears, and ropes. Box2D 2.1a (the version we've been using for all of these tutorials and demos) supports the following joint definitions: Distance Friction Gear

Sponsor: Register today for New Game, the conference for HTML5 game developers . Learn from Mozilla, Opera, Google, Spil, Bocoup, Mandreel, Subsonic, Gamesalad, EA, Zynga, and others at this intimate and technically rich conference. Join us for two days of content from developers building HTML5 games today. Nov 1-2, 2011 in San Francisco.  Register now ! Intro Previously in this Box2D for the JavaScript developer series, I covered how to  build and simulate arbitrary polygons . Not entirely arbitrary, as I mentioned that you can only build convex objects. Turns out I was both right and wrong. Read on to learn how to build more complex and even concave bodies. Example The below screenshot has an example of a complex object. The green square + triangle is also concave. Below is the live version: The stand alone example for the above demo is available, as well as the source code for review. Explanation I'll start using more exact terminology n

Sponsor:  Register today for  New Game, the conference for HTML5 game developers . Learn from Mozilla, Opera, Google, Spil, Bocoup, Mandreel, Subsonic, Gamesalad, EA, Zynga, and others at this intimate and technically rich conference. Join us for two days of content from developers building HTML5 games today.  Nov 1-2, 2011 in San Francisco.   Register now ! Intro Welcome back to another installment of Box2D for the JavaScript programmer. We will pause our exploration of running Box2D in a Web worker for a while and get back to the fundamentals. Today we look at Polygons, how to specify them, and how to render them. The shape of things Box2D supports both circles and squares/rectangles, and we've seen examples of both from our original Box2D Orientation article. For quick review, specifying a circle requires the radius and the position: this.fixDef = new b2FixtureDef; this.fixDef.density = 1.0; this.fixDef.friction = 0.5; this.fixDef.restitution = 0.2; this.body

Sponsor:  Register today for  New Game, the conference for HTML5 game developers . Learn from Mozilla, Opera, Google, Spil, Bocoup, Mandreel, Subsonic, Gamesalad, EA, Zynga, and others at this intimate and technically rich conference. Join us for two days of content from developers building HTML5 games today.  Nov 1-2, 2011 in San Francisco.   Register now ! WARNING : There is a bug with Chrome 15.0.874.5 dev (and probably earlier in the 15 dev channel series) that fires requestAnimationFrame twice per paint, which leads to very different results that you want. To see this correctly, use Canary or Chrome Stable. (this post should have been called "Fixin' muh shit") Following up on a recent post on Box2D, Web workers, and Page Visibility API , we will now take a closer look at performance with Box2D and Web workers. And we fixed my broken code. Intro I was initially pleased with the early work on Box2D and Web workers. Moving the physics simulation to th

Sponsor:  Register today for  New Game, the conference for HTML5 game developers . Learn from Mozilla, Opera, Google, Spil, Bocoup, Mandreel, Subsonic, Gamesalad, EA, Zynga, and others at this intimate and technically rich conference. Join us for two days of content from developers building HTML5 games today.  Nov 1-2, 2011 in San Francisco.   Register now ! UPDATE : The below code is not optimal. While this is interesting, I encourage you immediately follow up with the next post on a better way to do it. (If you're not familiar with Web workers, I encourage to  read the previous post  first before diving into this post.) Intro A previous article discussed running Box2D in a Web worker . We found that, by putting the physics simulation into a separate process, we have better performance as we free up the main JavaScript thread to focus on rendering. But we can do better. I see it's not visible It's great that your awesome physics based WebGL game is runn

Sponsor:  Register today for  New Game, the conference for HTML5 game developers . Learn from Mozilla, Opera, Google, Spil, Bocoup, Mandreel, Subsonic, Gamesalad, EA, Zynga, and others at this intimate and technically rich conference. Join us for two days of content from developers building HTML5 games today. Nov 1-2, 2011 in San Francisco.  Register now ! Last article we looked at running Box2D inside of a Web worker , with promising results. We will revisit Web workers in a future article. For now, let us return to a single thread. Intro After reviewing some of these recent Box2D posts, my colleague Boris Smus pointed out that I've missed an obvious example test. It would be interesting to see what happens if we twiddle two knobs: the update frequency and the draw frequency. I realized my previous articles don't address this experiment, so I present to you: Moar Knobs The example below now allows you to configure the number of bodies to simulate and ren

Sponsor:  Register today for  New Game, the conference for HTML5 game developers . Learn from Mozilla, Opera, Google, Spil, Bocoup, Mandreel, Subsonic, Gamesalad, EA, Zynga, and others at this intimate and technically rich conference. Join us for two days of content from developers building HTML5 games today.  Nov 1-2, 2011 in San Francisco.   Register now ! UPDATE : The below code is non-optimal. While it is interested, and I encourage you to read it for completeness, be sure to continue to a following post on fixes and analysis of this technique . This is the fourth post in a series on Box2D for the JavaScript developer. Intro Our previous post on Box2D frame rates, world step rates, and adaptive rates  showed how changing the FPS and world step frequency has an effect on performance and perception. The rendering and physics simulations were running in the same loop, which is typical for web programming. However, nothing in the simulation requires it to be tied so clos