mirror of
https://github.com/liabru/matter-js.git
synced 2024-12-24 13:29:01 -05:00
97 lines
No EOL
3.1 KiB
JavaScript
97 lines
No EOL
3.1 KiB
JavaScript
(function() {
|
|
|
|
var World = Matter.World,
|
|
Bodies = Matter.Bodies,
|
|
Composites = Matter.Composites,
|
|
Common = Matter.Common;
|
|
|
|
Example.collisionFiltering = function(demo) {
|
|
var engine = demo.engine,
|
|
world = engine.world,
|
|
mouseConstraint = demo.mouseConstraint;
|
|
|
|
// define our categories (as bit fields, there are up to 32 available)
|
|
var defaultCategory = 0x0001,
|
|
redCategory = 0x0002,
|
|
greenCategory = 0x0004,
|
|
blueCategory = 0x0008;
|
|
|
|
var redColor = '#C44D58',
|
|
blueColor = '#4ECDC4',
|
|
greenColor = '#C7F464';
|
|
|
|
// create a stack with varying body categories (but these bodies can all collide with each other)
|
|
World.add(world,
|
|
Composites.stack(275, 150, 5, 10, 10, 10, function(x, y, column, row) {
|
|
var category = redCategory,
|
|
color = redColor;
|
|
|
|
if (row > 5) {
|
|
category = blueCategory;
|
|
color = blueColor;
|
|
} else if (row > 2) {
|
|
category = greenCategory;
|
|
color = greenColor;
|
|
}
|
|
|
|
return Bodies.circle(x, y, 20, {
|
|
collisionFilter: {
|
|
category: category
|
|
},
|
|
render: {
|
|
strokeStyle: color,
|
|
fillStyle: 'transparent'
|
|
}
|
|
});
|
|
})
|
|
);
|
|
|
|
// this body will only collide with the walls and the green bodies
|
|
World.add(world,
|
|
Bodies.circle(310, 40, 30, {
|
|
collisionFilter: {
|
|
mask: defaultCategory | greenCategory
|
|
},
|
|
render: {
|
|
strokeStyle: Common.shadeColor(greenColor, -20),
|
|
fillStyle: greenColor
|
|
}
|
|
})
|
|
);
|
|
|
|
// this body will only collide with the walls and the red bodies
|
|
World.add(world,
|
|
Bodies.circle(400, 40, 30, {
|
|
collisionFilter: {
|
|
mask: defaultCategory | redCategory
|
|
},
|
|
render: {
|
|
strokeStyle: Common.shadeColor(redColor, -20),
|
|
fillStyle: redColor
|
|
}
|
|
})
|
|
);
|
|
|
|
// this body will only collide with the walls and the blue bodies
|
|
World.add(world,
|
|
Bodies.circle(480, 40, 30, {
|
|
collisionFilter: {
|
|
mask: defaultCategory | blueCategory
|
|
},
|
|
render: {
|
|
strokeStyle: Common.shadeColor(blueColor, -20),
|
|
fillStyle: blueColor
|
|
}
|
|
})
|
|
);
|
|
|
|
// red category objects should not be draggable with the mouse
|
|
mouseConstraint.collisionFilter.mask = defaultCategory | blueCategory | greenCategory;
|
|
|
|
var renderOptions = demo.render.options;
|
|
renderOptions.wireframes = false;
|
|
renderOptions.background = '#222';
|
|
renderOptions.showAngleIndicator = false;
|
|
};
|
|
|
|
})(); |