We are thrilled to introduce Phaser Editor v4.9.0, a major update that brings brand-new tools for Box2D physics integration!
As you may know, just two months ago, the Phaser team announced the release of Phaser Box2D, a JavaScript translation of the popular library, originally written in C language. Today, in Phaser Editor we are delivering an update that includes the first visual tools to integrate Box2D into your game scenes.
The Box2D API comprises a wide range of objects, such as worlds, bodies, shapes, joints, events, etc.. and integrating these tools into a visual editor is a challenge. In this release, we have started with the most basic tools, such as creating worlds, bodies, and a large portion of shapes, and setting their physics properties.
Getting started with Box2D
To get started with Box2D and the editor, we recommend that you create a new project using the Box2D Starter. This is a project template that includes the Phaser Box2D library and a short demo of how to create a world and body pairs in a scene.
You can also check out the Angry Balls project template, which is a slightly more elaborate demo that recreates in a very simplified way the physics of the popular game Angry Birds.
If you already have an existing project, you can add Box2D to your project by copying the Phaser Box2D library files into your project. You should follow the file naming convention: PhaserBox2D.js and PhaserDebugDraw.js. These names will be used to generate the code with the import clauses.
Creating the world
To create a Box2D world in your scene, you just need to enable the Generate Box2D World Code option in the Box2D section of the scene settings.
This will generate all the code needed to create a world, sync physics bodies with Phaser sprites, and update the physics simulation on every frame.
Learn more about preparing a scene for Box2D
Creating bodies
In Box2D, bodies are independent of Phaser sprites. However, you can associate a body with a sprite. To create a stand-alone body in the scene, you can drag the b2Body block from the Blocks view and drop it into the scene:
You can also create a body in the scene using the Add Body To Scene option from the scene context menu, in the Box2D Physics sub-menu.
To create a body associated with a sprite, you must select the sprite and then activate the Add Body To Sprite option which is available in the same menu:
A body has position and angle. Both can be modified by the Translate and Rotate tools respectively. You can also write these properties in the Inspector view. In the case of bodies associated with sprites, the position and angle of the body are synchronized with the position and angle of the sprite, so they are disabled in the Inspector.
Learn more about creating a physics body
Creating a shape
A shape is an object that defines the geometry of a body. In Box2D, shapes come in various types, such as circles, rectangles, polygons, etc.
To create a shape, you must first select a body and then activate the corresponding option in the scene context menu. For each shape type supported by the editor, there is an option to add it to the body:
You can also add a shape in the Box2D Body Shapes section of the Inspector view:
This section also shows a shortcut to each of the body shapes, so you can select them and modify their properties quickly.
Depending on the shapes, you can modify some of their properties using the Translate, Rotate, Resize, and Polygon modification tools.
Learn more about creating and editing shapes
Prefabs
You can create a prefab of a game object and add a body and shapes to it. This way, you can reuse the prefab in your scenes. You can also declare a body or a shape as a nested prefab, however, this has some limitations.
Due to the way the Box2D API is designed, it is not possible to modify in the editor the properties of a body or shape instance that is declared as a nested prefab. This limitation is related to the editor's code generation, which is based on the peculiarities of the Phaser API, which is very different from Box2D's.
However, we have a pretty good idea of how to fine-tune the code generation and we will soon create a new version of the editor without any limitations in editing the nested prefabs of a body or shape.
Learn more about nested prefabs in Box2D
Box2D has much more than bodies and shapes, but we are working hard to bring you more tools in the next releases.
Other changes
For this release we focused mainly on Box2D tools, but we also fixed some other bugs. One bug that we managed to reproduce and then fix is the one regarding the selection of "ghost" objects in the scene. This bug appears when the user changes the content of a scene, changes windows, and then activates the editor window again. If in another scene of the editor there is an object selected, this object is shown as selected in the current scene, even if it is not. We hope that this bug has been fixed in this version.
All current subscribers of Phaser Editor can download this update immediately from their User Account.
Not a subscriber?