i want update body properties if user clicks on it, e.g. body.render.linewidth = 5; works fine if default canvas renderer used. if switch pixi.js renderer stops working , doesn't seem reflect properties @ all. tried matter.body.set function no luck either. properties are set body body keeps showing initial style provided @ construction time.
what proper way set properties?
edit: sample.js
var engine = matter.engine, world = matter.world, bodies = matter.bodies, common = matter.common, mouseconstraint = matter.mouseconstraint; var createoptions = function(options) { var defaults = { ismanual: false, scenename: 'mixed', sceneevents: [] }; return common.extend(defaults, options); }; var options = { positioniterations: 6, velocityiterations: 4, enablesleeping: false, metrics: { extended: true }, render: { controller: matter.renderpixi } }; var engine = engine.create(document.getelementbyid('canvas-container'), createoptions(options)); var world = engine.world; var mouseconstraint = mouseconstraint.create(engine, { constraint: { render: { visible: false } } }); world.add(engine.world, mouseconstraint); world.add(world, [ bodies.rectangle(400, 0, 800, 1, { isstatic: true }), bodies.rectangle(400, 600, 800, 1, { isstatic: true }), bodies.rectangle(800, 300, 1, 600, { isstatic: true }), bodies.rectangle(0, 300, 1, 600, { isstatic: true }) ]); var body = bodies.polygon(200, 200, 4, common.random(50, 60), { isstatic: true, friction: 1, render: { fillstyle: '#f0f0f0', strokestyle: 'black', linewidth: 1 } }); world.add(world, body); matter.events.on(mouseconstraint, 'mousedown', function(e) { body.render.linewidth = 5; }); var renderoptions = engine.render.options; renderoptions.wireframes = false; renderoptions.hasbounds = false; renderoptions.showdebug = false; renderoptions.showbroadphase = false; renderoptions.showbounds = false; renderoptions.showvelocity = false; renderoptions.showcollisions = false; renderoptions.showaxes = false; renderoptions.showpositions = false; renderoptions.showangleindicator = false; renderoptions.showids = false; renderoptions.showshadows = false; renderoptions.showvertexnumbers = false; renderoptions.showconvexhulls = false; renderoptions.showinternaledges = false; renderoptions.showseparations = false; renderoptions.background = '#fff'; engine.run(engine); sample.html
<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> </head> <body> <div id="canvas-container"></div> <script src="pixi.min.v3.0.10.js" type="text/javascript"></script> <script src="matter.min.v0.9.1.js" type="text/javascript"></script> <script src="sample.js" type="text/javascript"></script> </body> </html> if comment out controller: matter.renderpixi works ok.
renderpixi creates primitives once when body first gets rendered , gets cached.
remove cache, should able like:
engine.render.primitives['b-' + body.id] = null; then should created again.
Comments
Post a Comment