Layabox--Examples of the use of matter.js in Typescript __js

The

Matter.js is used in the Layabox official physics engine example, but it's not that Laya can only use matter.js as his physical engine, others like BOX2D,P2 can be used, but we're talking about typescript how to use Matter.js
1. First of all, the installation of Matter.js, there are matter.js download installation methods, their own fix. There are also examples, APIs, and so on.
2. Use, you need to reference two files in the index.html file, one is the physical engine library, one is laya to the physical engine rendering library

3. Create a new TS file, write code:

Module Laya {Import Sprite = Laya.sprite;
    Import Stage = Laya.stage;
    Import Render = Laya.render;
    Import Browser = Laya.browser;
    Import WebGL = Laya.webgl;

    Import Event = laya.event;
        Export class Physics_circle {private Matter:any = Browser.window.Matter;

        Private Layarender:any = Browser.window.LayaRender;
        Private Common:any = This.Matter.Common; Private Events:any = this.
        matter.events;
        Private Mouseconstraint:any;
        Private Engine:any;

        Private Rock:any;

            Constructor () {Laya.init (browser.clientwidth, browser.clientheight);
            Laya.stage.alignV = Stage.align_middle;

            Laya.stage.alignH = Stage.align_center;

            Laya.stage.scaleMode = "ShowAll";
        This.setup ();
            Private setup (): void {this.initmatter ();

            This.initworld (); Laya.stage.on (Event.mouse_down, this, this.moUsedown); This.
            Events.on (This.engine, ' Collisionstart ', this.collisionstart); This.
            Events.on (This.engine, ' collisionend ', this.collisionend); This.

        Events.on (This.engine, ' collisionactive ', this.collisionactive);
        Private MouseDown (e:event) {//This.rock.
            Private Collisionstart (E:any) {console.log ("Collisionstart");
        Console.log (e);
            Private Collisionend (E:any) {console.log ("collisionend");
        Console.log (e);
            Private Collisionactive (E:any) {console.log ("collisionactive");
        Console.log (e);
            Private Initmatter (): void {var gameworld:sprite = new Sprite ();

            Laya.stage.addChild (Gameworld); Initialize physical engine This.engine = this.
            Matter.Engine.create ({enablesleeping:true}); This.

          Matter.Engine.run (This.engine);  var render = this. Layarender.create ({engine:this.engine, width:Browser.clientWidth, Height:Browser.clientHeight, options: {
            Background: ' Res/background.png ', Wireframes:true}}); This.
        Layarender.run (render);
            Private Initworld (): void {this.engine.world.gravity.y = 0;

            this.engine.world.friction = 0; var ground:any = this.
            Matter.Bodies.rectangle (395, MB, 815, isstatic:true, restitution:1}); var up:any = this.
            Matter.Bodies.rectangle (395, 0, 815, {isstatic:true, restitution:1}); var left:any = this.
            Matter.Bodies.rectangle (0, $, MB, {isstatic:true, restitution:1}); var right:any = this.


            Matter.Bodies.rectangle (isstatic:true, MB, restitution:1}); var rockoptions:any = {frictionstatic:0, frictionair:0, friction:0, Restitution:1, Density:1, mass:1, render: {SPRI Te:{texture: ' Res/rock.png ', xoffset:23.5, Yoffset:23.5}}; This.rock = this.
            Matter.Bodies.circle (180, 450, rockoptions); This. Matter.Body.applyForce (This.rock, this.rock.position,{x:0.05, y:0.05}) var rock2 = this.
            Matter.Bodies.circle (170, rockoptions); This. Matter.Body.applyForce (Rock2, rock2.position,{x:0.05, y:0.05}) this.

            Matter.World.add (This.engine.world, [This.rock, Rock2, ground, up, left, right]); for (var i = 0; i < i++) {var rock1 = this.
                Matter.Bodies.circle (This.Common.random () * +, this.Common.random () * +, rockoptions); This. Matter.Body.applyForce (Rock1, rock1.position,{x:0.005, y:0.02}) this.
            Matter.World.add (This.engine.world, ROCK1); {}}} new Laya. Physics_circle ();

Here are two points, one:

Initialize physical engine
            This.engine = this. Matter.Engine.create ({enablesleeping:true});
            This. Matter.Engine.run (this.engine);

            Initializes the Yala to the physical engine
            var render = this. Layarender.create ({engine:this.engine, width:Browser.clientWidth, Height:Browser.clientHeight, options: { Background: ' Res/background.png ', Wireframes:true}});
            This. Layarender.run (render);

Second, you need to be in the code of the picture resources to get, you fix.
Finish, run, you can see the effect of the following I paste the effect of the operation.

It's a bunch of balls that keep moving in a box.
It's pretty simple to use, just something you need to check your own API lookup. Events are more troublesome than event parameters.