Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Planck.js is JavaScript rewrite of Box2D physics engine for cross-platform HTML5 game development. Check out demos!
Key motivations for the development of this project are:
Testebd examples and demos.
Updates and news: Twitter @Piqnt
Issues and questions: GitHub
Community discussions: Discord
To try Planck.js, simply add planck-with-testbed.js
script to your HTML code and call planck.testbed(callback)
with your code in callback. For example:
<html><body>
<script src="https://cdn.jsdelivr.net/npm/planck-js@0.2/dist/planck-with-testbed.js"></script>
<script>
planck.testbed(function(testbed) {
var world = planck.World();
// rest of your code
return world; // make sure you return the world
});
</script>
</body></html>
Check out Car example on JS Bin to try it in practice.
Also see example
directory for more testbed usage examples.
Latest builds are available on releases page.
Planck.js is available on jsDelivr.
npm install planck-js --save
bower install planck-js --save
Planck.js includes Box2D algorithms without modification and its architecture is very similar to Box2D. However some internal changes and refactoring are made during rewrite to address differences between C++ and JavaScript.
Planck.js public API closely follows Box2D API (see Resources), with the following differences:
b2
prefix is dropped from class names, for example b2World
is now available as planck.World
.{}
).World#on(eventName, listenerFn)
and World#off(eventName, listenerFn)
are added to add and remove event listeners. Currently supported events are:
'begin-contact'
'end-contact'
'pre-solve'
'post-solve'
'remove-joint'
'remove-fixture'
'remove-body'
Following resources are recommended if you are interested in learning about Box2D/Planck.js's internal details.
This tutorial is under development, please feel free to edit, comment or ask for new sections.
Before writing code there are a number of key concepts to learn:
A physics simulation in Planck starts by creating a World and adding Bodies and Joints. So let’s create our world:
var world = planck.World();
This will create a world with default options. You can pass a definition object as first argument to World constructor, for example:
var world = planck.World({
gravity: planck.Vec2(0, -10)
});
Bodies are directly created and added to world:
var ground = world.createBody();
This will create a body with default options, which means a ‘static’ body at position 0, 0 with no velocity. You can pass a body definition object to change it:
var ground = world.createBody({
type: 'static',
position: planck.Vec2(2, 5),
});
After creating a body, you can create a fixture using a shape:
ground.createFixture({
shape: planck.Edge(Vec2(-40.0, 0.0),Vec2(40.0, 0.0))
});
Planck.js does not use any renderer by default. To use or integrate it with a rendering library all you need to do
is call world.step(timeStep)
in each frame, and then iterate over world entities to draw or update them.
You may also want to listen to world events to remove objects which are removed from the world. For example:
<script src="./path/to/planck.min.js"></script>
<script>
var world = planck.World();
window.requestAnimationFrame(function() {
// in each frame call world.step(timeStep) with fixed timeStep
world.step(1 / 60);
// iterate over bodies and fixtures
for (var body = world.getBodyList(); body; body = body.getNext()) {
for (var fixture = body.getFixtureList(); fixture; fixture = fixture.getNext()) {
// draw or update fixture
}
}
});
world.on('remove-fixture', function(fixture) {
// remove fixture from ui
});
</script>
For development, you can run testbed locally with a live build and try examples in example
directory.
Install git
and npm
Clone or download this repository
Install npm dependencies:
npm install
Run testbed and open it in your web browser (see command-line output for URL to open):
npm run testbed
Box2D is a popular C++ 2D rigid-body physics engine created by Erin Catto. Box2D is used in several popular games, such as Angry Birds, Limbo and Crayon Physics, as well as game development tools and libraries such as Apple's SpriteKit.
Planck.js is developed and maintained by Ali Shakiba.
TypeScript definitions for planck.js are developed by Oliver Zell.
Planck.js is available under the zlib license.
FAQs
2D JavaScript physics engine for cross-platform HTML5 game development
The npm package planck-js receives a total of 440 weekly downloads. As such, planck-js popularity was classified as not popular.
We found that planck-js demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.