After months of hard work and Dev Log entries, we’re delighted to announce that Phaser Box2D is now available. This issue of Phaser World will be specially dedicated to exploring what it offers. However, we also have two tutorials and two great new games at the end! Regular newsletter service will commence in the next issue. For now, let’s fling some dynamic bodies around.
🚀 Phaser Box2D is now available
Create immersive, physics-rich 2D worlds
The Phaser Studio team is thrilled to announce the release of Phaser Box2D, the ultimate 2D physics engine for creating realistic, physics-driven games for your browser. Whether you’re building fast-paced shooters, intricate puzzle games, or sprawling RPGs, Phaser Box2D is here to take your creations to the next level.
What Makes Phaser Box2D So Awesome?
Phaser Box2D is powered by the latest version of Box2D, a cutting-edge physics engine designed for accuracy and performance. We’ve painstakingly converted the Box2D v3.0 API, written in C, to modern JavaScript, making Phaser Box2D the only v3 port available for the web. We’ve optimized it specifically for browsers, so it’s fast, powerful, and ridiculously easy to integrate with all modern web stacks.
No one likes laggy physics or buggy collisions, and with Phaser Box2D, you won’t have to deal with either. Thanks to a fancy new Soft Step Rigid Body Solver, your physics will stay stable and smooth—even with fast-moving objects or crazy stacks of bodies. Plus, its island-based sleep management keeps things efficient by letting inactive objects and your processor take a break.
Pinpoint Accuracy
Have you ever had a bullet magically phase through a wall? Not with Continuous Collision Detection (CCD). Whether it’s high-speed objects, tricky AI behaviors, or complex aiming mechanics, Phaser Box2D makes sure everything behaves exactly how you expect.
Easy Integration
We’ve kept it simple. Phaser Box2D works right out of the box as an ES Module. It’s also tiny — just 65KB when zipped — so it’s perfect for web games and playable ads. And for those of you who’ve used Box2D before, good news: we kept the original C API function names, so you’ll feel right at home. The added benefit of this approach is that if Box2D is new to you, you can rely on its rich 18-year history to learn it faster because tools like ChatGPT and Cursor understand its C API well.
Packed with Features You’ll Love
Shapes, Shapes, and More Shapes: From circles to chains to capsules (a new Box2D v3 feature), create the environments and characters your game needs.
Composite Bodies: Combine shapes for vehicles, ragdolls, or funky robots with multiple collision parts.
Versatile Joints: Build swinging doors, working pistons, or even car suspensions — you can access Revolute, Distance, Prismatic, Wheel, and Weld joint types.
With Versatile Interactions: Combine the joints in interesting ways, with limits, motors, springs, and friction available.
Smooth Physics: Speculative collisions and continuous motion handling keep everything looking and feeling real.
Hands-On Fun with 50+ Examples
We’ve included over 50 examples to get you up and running in no time. From mini-games to single-feature demos, you’ll have everything you need to get inspired and start building.
Made for Phaser, Open to Everyone
Of course, Phaser Box2D works beautifully with the Phaser game framework (thanks to our handy plugin), but you don’t have to use Phaser. It plays nicely with any web game framework or application, making it a great choice no matter what you’re building with.
Even the Phaser integration is entirely optional. We have been careful not to deeply tie the two together, instead opting to provide a thin layer of helper functions between the two. This makes it easy for you to roll your own fully custom integration without needing to unpick lots of legacy code. Or you can use the handy functions we created! Either is OK with us.
Let’s Build Something Amazing
Phaser Box2D is here to help you create incredible, physics-driven games that wow your players. Whether you’re an indie creator or a pro studio, this is the tool to bring your ideas to life.
Ready to get started? Let’s make some magic together!
We offer three licenses: one for those looking to integrate Phaser Box2D into their tools and systems, one for commercial use, and one for indie solo developers.
Find all the pricing details on the Phaser Box2D website.
What’s Included?
When you purchase Phaser Box2D, you will receive the following:
A Comprehensive Getting Started Guide. This covers two sample projects, one using Phaser and one without, and guides you through some Box2D terminology and how to approach it.
Over 50 Box2D Examples. The complete source code and assets to many examples, including stress tests, mini-games, joint and shape demos, and more. We will keep adding to the examples in the coming months. They are provided with a web-based interface and launcher script so you can quickly run them locally.
API Documentation. We have written our own API documentation, which is included in the download. The docs cover all of the core functions you may need to use and the correct data types required for our JavaScript version.
Vite Project template. To help you get started fast, we’ve also compiled a Vite project template that shows how to use Phaser and Box2D together. It supports development hot-reload and production build commands.
30 Advanced Tutorials. We’ve also published 30 detailed tutorials covering all aspects of Box2D, from querying the World to efficiently destroying bodies to advanced topics such as buoyancy and sticky projectiles. Feel free to browse the tutorials on our website.
FAQs
Q. Box2D is open source. Why does this cost money?
A. Phaser Studio invested months of full-time work into carefully porting, optimizing and testing this library specifically for web games. We believe it represents one of the most stable and feature-packed physics libraries available for the web and, as such, has commercial value to those earning from publishing web games and playables.
The Phaser Studio team also offers continuous updates and support, custom documentation, tutorials, and examples, ensuring Phaser Box2D remains reliable and up-to-date. We understand that the pricing isn’t suitable for everyone. Some developers' web games are purely a hobby. In those cases, we’d suggest a free alternative like the Rapier Physics integration we put together.
Q. Does it only work with Phaser, or can I use Pixi, etc?
A. Despite its title, Phaser Box2D is compatible with any web-based tech stack or framework, including Pixi, React, Vue, and more. It is provided as an ESM compatible Module and is not deeply integrated with Phaser itself. There is no Phaser code or Game Objects within the plugin at all.
Of course, as Phaser Studio, we include many helpful functions that ease the use of Box2D with Phaser itself. These are included with the purchase. However, using Phaser isn't a requirement.
Q. How complicated is it to use?
A. Complexity is, of course, subjective. However, we feel it would be remiss to say that this is perfect for complete beginners. You are expected to have a solid grasp of JavaScript and, ideally, previous experience with physics systems.
We provide tutorials, API Documentation, and examples from which to learn. Plus, you can ask us questions in our Discord. Even so, Box2D does have a certain level of complexity, and if you are unsure if it's right for you, we would recommend you read some of our public tutorials first to get an understanding of how it works.
You can find more FAQs on the Phaser Box2D page.
A Quick Phaser Example
In this example, we will create a simple physics Scene with a static ground platform on which we drop two dynamic bodies. The full code is as follows (minus the import statements, to save space in this newsletter)
class Example extends Phaser.Scene {
constructor () {
super();
}
create () {
SetWorldScale(40);
const debug = this.add.graphics();
const world = CreateWorld({ worldDef: b2DefaultWorldDef() });
const worldId = world.worldId;
CreateBoxPolygon({
worldId,
type: DYNAMIC,
position: pxmVec2(630, 64),
size: 1,
density: 1.0,
friction: 0.2,
color: b2HexColor.b2_colorGold
});
CreateCircle({
worldId,
type: DYNAMIC,
position: pxmVec2(690, 0),
radius: 1,
density: 1.0,
friction: 0.5,
color: b2HexColor.b2_colorRed
});
const groundBodyDef = b2DefaultBodyDef();
groundBodyDef.rotation = RotFromRad(-0.06);
CreateBoxPolygon({
worldId,
type: STATIC,
bodyDef: groundBodyDef,
position: pxmVec2(640, -600),
size: new b2Vec2(20, 1),
density: 1.0,
friction: 0.5,
color: b2HexColor.b2_colorLawnGreen
});
this.world = world;
this.debug = debug;
this.worldDraw = new PhaserDebugDraw(debug, 1280, 720, GetWorldScale());
}
update (time, delta) {
const worldId = this.world.worldId;
WorldStep({ worldId, deltaTime: delta });
this.debug.clear();
b2World_Draw(worldId, this.worldDraw);
}
}
const config = {
type: Phaser.AUTO,
width: 1280,
height: 720,
scene: Example
};
const game = new Phaser.Game(config);
This code should be very familiar to you if you've experience with Phaser. We’re using a Phaser Graphics Game Object to render our world. This is perfect for quick tests and debugging. You can, of course, hook bodies to sprites too!
We’ll show some more examples in the next issue.
We’re extremely happy with how this product has turned out. It was a lot of hard work, a lot of debugging and tweaking, but ultimately, we felt it was about time there was an industry-standard physics library available for web games, and we’re thrilled to have created exactly that. It’s fast, stable and powerful.
That’s enough Box2D talk; let’s conclude this issue with some tutorials and games from the Phaser community.
⚽ Full Breakout Tutorial
Breaking Down Breakout: Learn Essential Game Physics While Building a Timeless Classic.
Learn how to create a classic Brick Breaker (Breakout) game using Phaser JS! This tutorial covers everything from setting up the game configuration to implementing paddle and ball physics, creating colorful brick rows, and adding sound effects for an engaging experience. Watch how to handle game states like losing lives, game over, and victory, all explained with clear, easy-to-follow code. Perfect for beginners and those looking to expand their Phaser.js skills.
Watch the video
⚔️ Daily Dungeon
Your Daily Dose of Puzzle-Packed Adventure: A New Labyrinth of Challenges Every 24 Hours.
As the name suggests, Daily Dungeon is a quick-fire dungeon romp. The controls are simple. Move with the arrows, collect keys to open doors, and solve the puzzles. The difference is in the title: Every day, you get a different dungeon to explore!
Play Daily Dungeon
🧠 Steps
Game 3 of the 101 Game Challenge is out.
Emanuele Feronato is back with game 3 in his 101 game series. Each game is available both to play, and also download the source code, or buy an extended version of it. So you can simply enjoy it, or learn from it, too.
Read about Steps
⭐ Dangle Drop
Orchestrating the Perfect Chain Reaction: A Symphony of Falling Dots.
Dangle Drop is an engaging gravity-based puzzle game set against a calming night sky, challenging players to clear puzzles by eliminating all the white dots on the screen. The gameplay revolves around clicking strategically on various types of dots to create chain reactions, causing the white dots to fall away. Each puzzle offers a unique setup, and players must carefully consider their moves to succeed.
Play Dangle Drop
🖊️ State of Web Game Dev 2024 Survey
The survey should take no more than 20 minutes. The result will be used to evaluate the state of Web Game Development in 2024. The survey takes place between December 4th and 20th 2024, and we plan on sharing the results publicly in January 2025. Make sure to visit gamedevjs.com/survey/2024 for more details.
Please take part in this survey!
Share your content with 18,000+ readers
Created a game, tutorial, code snippet, video, or anything you feel Phaser World readers would like? Then please send it to us!
Until the next issue, happy coding!
