pixi-box2d

"pixi-box2d" is a plugin for using "box2dweb" with "pixi.js".

---

Supported version

• box2dweb 2.1.0-b
• pixi.js 5.3.x

I have not confirmed the operation on other versions.

Setup

NPM

npm install --save pixi.js @tawaship/pixi-box2d

import * as PIXI from 'pixi.js';
import * as PixiBox2d from '@tawaship/pixi-box2d';

Browser

git clone https://github.com/tawaship/pixi-box2d

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.3.3/pixi.min.js"></script>
<script src="/path/to/lib/Box2d.min.js"></script>
<script src="/path/to/dist/pixi-box2d.min.js"></script>

Usage

For browsers, this module is stored in the namespace "PIXI.box2d".

const app = new PIXI.Application({
    width: 450,
    height: 800
});

class Root extends PIXI.Container {
    constructor() {
        super();
        
        this.addChild(new PIXI.Graphics()).beginFill(0x00FF00).drawRect(0, 0, 450, 800 / 2)
        this.interactive = true;
        this.cursor = 'pointer'
        
        // create World
        const world = this.addChild(new PIXI.box2d.WorldContainer({
            listenPreSolve: false,
            listenPostSolve: false,
            listenBeginContact: false,
            listenEndContact: true,
            ticker: app.ticker
        }));
        
        // create component
        const a = world.addBox2d(PIXI.box2d.Circle.from(new PIXI.Graphics().beginFill(0xFF0000).drawCircle(100, 0, 20), {
            density: 0.1,
            restitution: 0.1,
            categoryBits: 2
        }));
        a.setX(120);
        
        // create component when click
        this.on("pointerdown", (e) => {
            const r = Math.random() > 0.5;
            const w = 100
            const h = 150
            
            const a2 = world.addBox2d(new PIXI.box2d.Rectangle(w, h, {
                density: 0.1,
                restitution: 0.1,
                friction: 0.9,
                categoryBits: 1
            }));
            
            a2.addChild(new PIXI.Graphics().beginFill(0xFF0000).drawRect(0, 0, w, h));
            
            if (!r) {
                a2.setX(e.data.global.x - a2.width / 2);
                a2.setY(e.data.global.y - a2.height / 2);
            } else {
                a2.setRotation(90 * Math.PI / 180);
                a2.setX(e.data.global.x + a2.height / 2);
                a2.setY(e.data.global.y - a2.width / 2);
            }
        })
        
        // create static component
        const baseHeight = 100;
        const base = world.addBox2d(PIXI.box2d.Rectangle.from(new PIXI.Graphics().beginFill(0x0000FF).drawRect(0, 0, 450 / 2, baseHeight), { isStatic: true }));
        base.setX(450 / 2 - base.width / 2);
        base.setY(800 - baseHeight - 100);
        
        // create sensor component
        const dead = world.addBox2d(new PIXI.box2d.Edge(new PIXI.box2d.Common.Math.b2Vec2(450 + 2000, 0), { isStatic: true, isSensor: true, maskBits: 1 }));
        dead.setX(-1000);
        dead.setY(800 - 10);
        dead.on('EndContact', (opponent) => {
            world.removeBox2d(opponent);
            console.log("gameover");
        });
    }
}

app.stage.addChild(new Root());
document.body.appendChild(app.view);