Matter-JS collisionFilter 碰撞过滤器

快来打我* 2022-03-30 02:10 154阅读 0赞

# collisionFilter 碰撞过滤器 #

1、Matter.js 创建的物体可以为它们设置碰撞规则，如哪些物体相互应该碰撞，而哪些物体相互之间则不应该发生碰撞。

2、[Body][](刚体)提供了一个 collisionFilter 属性，其值是一个 json 数组，可选值有：group，category，mask。默认值如下：

collisionFilter: {
            category: 0x0001,
            mask: 0xFFFFFFFF,
            group: 0
    }

3、使用这三个属性，可以设计出很复杂的碰撞关系，其中碰撞规则如下：

> 物体的 group 相等，且 group > 0 时，则物体之间会发生碰撞；Matter.Body.nextGroup(false)可以生成从-1开始递减的整数
> 
> 物体的 group 相等，且 group < 0 时，则物体之间不发生碰撞；Matter.Body.nextGroup(true)可以生成从1开始递增的整数
> 
> \--不满足上述两种情况时，则根据category和mask进行判断--  
> category 代表一个碰撞分类，其值可为1，2，4，8...直到 2^31，mask 为碰撞集合（category集合）
> 
> a 和 b碰撞情况：a 的 mask 必须包含 b 的 category，同时 b 的 mask 也必须包含 a 的 category，即  
> (a.category & b.mask) !== 0 && (b.category & a.mask) !== 0

## group 组 ##

通过这个例子就可以直观的看到到底如何才算是物体碰撞。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <title>Matter-JS</title>
        
        <script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.12.0/matter.js"></script>
        
        <script type="text/javascript">
            var stageWidth = 800;//舞台宽度
            var stageHeight = 500;//舞台高度
            var Engine = Matter.Engine;//引擎
            var Render = Matter.Render;//渲染器
            var World = Matter.World;//世界
            var MouseConstraint = Matter.MouseConstraint;//鼠标控制
            var Bodies = Matter.Bodies;//内置常见刚体
            var Composites = Matter.Composites;//符合材料
            var Composite = Matter.Composite;//混合体
            var Common = Matter.Common;//公用模块
            var Body = Matter.Body;//刚体
    
            window.onload = function () {
                matterJS();
            }
    
            /**Matter-JS*/
            function matterJS() {
                var engine = Engine.create();//创建引擎
                var render = Render.create({//创建渲染器
                    engine: engine,//渲染创建好的引擎
                    /**渲染页面的body元素，即会在body标签自动新建<canvas>画布，同理如果element的值是某个div元素-
                     * 则会在div下自动新建canvas，canvas的尺寸是options中的width、height
                     * */
                    element: document.body,
                    options: {
                        width: stageWidth,//画布的宽度
                        height: stageHeight,//画布的高度
                        wireframes: true,//线框模式,默认false不使用线框模式
                        showAngleIndicator: true,//是否显示角度,默认false
                        showVelocity: true,//是否显示速度,默认false
                        showCollisions: true,//是否显示碰撞点,默认false
                        showBroadphase: false,//是否显示宽频，用于调试,默认false
                        showMousePosition: false // 鼠标约束线
                    }
                });
                Engine.run(engine);//运行引擎
                Render.run(render);//运行渲染器
                /**设置鼠标控制*/
                var mouseConstraint = MouseConstraint.create(engine, {});
    
                /**Body.nextGroup(isNonColliding)：下一个组ip值，
                 * isNonColliding：表示非碰撞，为true时，第一次调用 nextGroup 时返回 -1，每调用一次则递减1
                 * isNonColliding=false时，第一次调用 nextGroup 时返回 1，每调用一次则递加1
                 */
                var group = Body.nextGroup(true);
                console.log("group=" + group);
                var stack = Composites.stack(20, 20, 12, 4, 0, 0, function (x, y) {
                    switch (Math.round(Common.random(0, 1, 2))) {
                    /**为0时创建矩形*/
                        case 0:
                            return Bodies.rectangle(x, y, Common.random(20, 50), Common.random(20, 50), {
                                collisionFilter: {group: group}
                            });
                    /**为1时创建多边形*/
                        case 1:
                            return Bodies.polygon(x, y, Math.round(Common.random(3, 8)), Common.random(20, 50), {
                                collisionFilter: {group: group}
                            });
                    /**为2时创建圆形*/
                        case 2:
                            return Bodies.circle(x, y, Common.random(10, 20), {
                                collisionFilter: {group: group}
                            });
                    }
                });
                /**将物体以及鼠标控制添加到世界中*/
                World.add(engine.world, [mouseConstraint, stack]);
                /**为世界4周添加4面墙*/
                World.add(engine.world, create4Wall(Bodies));
            }
    
            /**创建4面墙-强制物体在墙内运动*/
            function create4Wall(Bodies) {
                var ground_top = Bodies.rectangle(stageWidth / 2, 0, stageWidth, 40, {isStatic: true});
                var ground_right = Bodies.rectangle(stageWidth, stageHeight / 2, 40, stageHeight, {isStatic: true});
                var ground_bottom = Bodies.rectangle(stageWidth / 2, stageHeight, stageWidth, 40, {isStatic: true});
                var ground_left = Bodies.rectangle(0, stageHeight / 2, 40, stageHeight, {isStatic: true});
                return [ground_top, ground_right, ground_bottom, ground_left];
            }
        </script>
    </head>
    <body>
    </body>
    </html>

![20190104152543581.gif][]

如上所示 collisionFilter: \{group: group\}，因为 Body.nextGroup(true) 只调用了1次，则所有物体的 group 值为-1，此时物体相互之间是没有碰撞的。

当 var group = Body.nextGroup(false); 时，因为 Body.nextGroup(false) 只调用了1次，则所有物体的 group 值为 1，此时物体相互之间会发生碰撞。

![20190104152743214.gif][]

[Body]: http://brm.io/matter-js/docs/classes/Body.html
[20190104152543581.gif]: /images/20220330/9ff36d57f191484a8ce7a2a652d1b8e7.png
[20190104152743214.gif]: /images/20220330/924c5004775e48c3972881622bd41d55.png