CODEWITHSUNDEEP
javascriptcanvasmatter.js
SequenceDigitale.com
SequenceDigitale.com

Reputation: 4094

Matter JS - option list - Am I blind?

New to MatterJS.

In the example, theres is options to draw circle, rectangle, etc. Those options are like using Sprite, FillStyle...

I see no where in the documentation the list of options and values related to that.

Anyone can help?

Thanks.

Upvotes: 4

Views: 3439

Answers (4)

Peter Mlich
Peter Mlich

Reputation: 1

Yes, documentation have very problem for details, sometime... You can extract from examples or find by google...

https://brm.io/matter-js/docs/classes/Body.html#properties
Body.rotate
Body.scale
Body.chamfer -> Vertices.chamfer (radius)
Body.render.fillStyle
Body.render.lineWidth
Body.render.opacity
Body.render.sprite
Body.render.sprite.texture - image (background)
Body.render.sprite.xOffset - image pos left
Body.render.sprite.xScale - image scale X
Body.render.sprite.yOffset - image pos top
Body.render.sprite.yScale - image scale Y
Body.render.strokeStyle

https://brm.io/matter-js/docs/classes/Constraint.html
Constraint.render.lineWidth
Constraint.render.strokeStyle
Constraint.render.type

Upvotes: 0

Mikhail
Mikhail

Reputation: 9007

From reading the source code of matter.js I found the defaults for options. Doesn't explain what each does but at least here's a list of them:

var defaults = {
  id: Common.nextId(),
  type: 'body',
  label: 'Body',
  parts: [],
  plugin: {},
  angle: 0,
  vertices: Vertices.fromPath('L 0 0 L 40 0 L 40 40 L 0 40'),
  position: { x: 0, y: 0 },
  force: { x: 0, y: 0 },
  torque: 0,
  positionImpulse: { x: 0, y: 0 },
  constraintImpulse: { x: 0, y: 0, angle: 0 },
  totalContacts: 0,
  speed: 0,
  angularSpeed: 0,
  velocity: { x: 0, y: 0 },
  angularVelocity: 0,
  isSensor: false,
  isStatic: false,
  isSleeping: false,
  motion: 0,
  sleepThreshold: 60,
  density: 0.001,
  restitution: 0,
  friction: 0.1,
  frictionStatic: 0.5,
  frictionAir: 0.01,
  collisionFilter: {
    category: 0x0001,
    mask: 0xFFFFFFFF,
    group: 0
  },
  slop: 0.05,
  timeScale: 1,
  render: {
    visible: true,
    opacity: 1,
    sprite: {
      xScale: 1,
      yScale: 1,
      xOffset: 0,
      yOffset: 0
    },
    lineWidth: 0
  }
};

As taras pointed out the object's properties are initialized from these options.

Upvotes: 3

Monster Brain
Monster Brain

Reputation: 2119

I think that in those examples, matter.js is handling the drawing of the shapes of the bodies itself through Render.bodies (inside matter.js file) and related functions.

In case anyone want to draw lines, circles or rectangles, they can access the canvas that matter.js uses, and draw them via lineTo, arc functions of canvas, I guess.

Upvotes: 0

taras
taras

Reputation: 29

These options are body's properties, described in Matter.Body module: http://brm.io/matter-js/docs/classes/Body.html#properties

Upvotes: 0

Related Questions