{"id":19014248,"url":"https://github.com/spritejs/sprite-extend-matter","last_synced_at":"2025-04-23T00:42:51.604Z","repository":{"id":87731623,"uuid":"133021992","full_name":"spritejs/sprite-extend-matter","owner":"spritejs","description":"matter.js renderer for spritejs","archived":false,"fork":false,"pushed_at":"2019-06-14T08:47:42.000Z","size":183,"stargazers_count":2,"open_issues_count":1,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-23T00:42:45.305Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/spritejs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-05-11T09:50:23.000Z","updated_at":"2019-06-14T08:47:44.000Z","dependencies_parsed_at":"2023-04-11T04:12:16.121Z","dependency_job_id":null,"html_url":"https://github.com/spritejs/sprite-extend-matter","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spritejs%2Fsprite-extend-matter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spritejs%2Fsprite-extend-matter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spritejs%2Fsprite-extend-matter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spritejs%2Fsprite-extend-matter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/spritejs","download_url":"https://codeload.github.com/spritejs/sprite-extend-matter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250348891,"owners_count":21415907,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-08T19:28:28.309Z","updated_at":"2025-04-23T00:42:51.581Z","avatar_url":"https://github.com/spritejs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# sprite-extend-matter\n\nThis is a spritejs extension based on [matter-js](https://github.com/liabru/matter-js/).\n\n```html\n\u003cscript src=\"https://s5.ssl.qhres.com/!a75e6d57/sprite-extend-matter.js\"\u003e\u003c/script\u003e\n```\n\n## Quick Start\n\n```html\n\u003cdiv id=\"container\"\u003e\u003c/div\u003e\n\u003cscript src=\"https://s4.ssl.qhres.com/!ee69cc07/spritejs.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://s5.ssl.qhres.com/!a75e6d57/sprite-extend-matter.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  const Matter = spritejs.Matter;\n  const {Scene, Path} = spritejs;\n\n  const scene = new Scene('#container', {resolution: [800, 600]})\n  const fglayer = scene.layer('fglayer')\n\n  var Engine = Matter.Engine,\n      Render = Matter.Render,\n      Runner = Matter.Runner,\n      Composites = Matter.Composites,\n      Common = Matter.Common,\n      MouseConstraint = Matter.MouseConstraint,\n      Mouse = Matter.Mouse,\n      World = Matter.World,\n      Bodies = Matter.Bodies;\n\n  // create engine\n  var engine = Engine.create({enableSleeping: true}),\n      world = engine.world;\n\n  // create renderer\n  var render = Render.create({\n      layer: fglayer,\n      engine: engine,\n      options: {\n          showAngleIndicator: true,\n          background: '#fff',\n          wireframes: false,\n          showBroadphase: false,\n          showBounds: true,\n          showVelocity: true, \n          showSeparations: true,\n      }\n  });\n\n  Render.run(render);\n\n  // create runner\n  var runner = Runner.create();\n  Runner.run(runner, engine);\n\n  // add bodies\n  var stack = Composites.stack(20, 20, 10, 5, 0, 0, function(x, y) {\n      var sides = Math.round(Common.random(1, 8));\n\n      // triangles can be a little unstable, so avoid until fixed\n      sides = (sides === 3) ? 4 : sides;\n\n      // round the edges of some bodies\n      var chamfer = null;\n      if (sides \u003e 2 \u0026\u0026 Common.random() \u003e 0.7) {\n          chamfer = {\n              radius: 10\n          };\n      }\n      \n      switch (Math.round(Common.random(0, 1))) {\n      case 0:\n          if (Common.random() \u003c 0.6) {\n              return Bodies.rectangle(x, y, Common.random(25, 50), Common.random(25, 50), { chamfer: chamfer });\n          } else if(Common.random() \u003c 0.8) {\n              return Bodies.rectangle(x, y, Common.random(80, 120), Common.random(25, 30), { chamfer: chamfer });\n          } else {\n              const width = 64\n              return Bodies.rectangle(x, y, width, width, { chamfer: chamfer, \n                  render: {\n                      sprite: {\n                          // texture: 'https://p5.ssl.qhimg.com/t01bd0523f7bc9241c2.png',\n                          attrs: {\n                              textures: {\n                                  // src: 'http://brm.io/matter-js/demo/img/box.png',\n                                  src: 'https://p5.ssl.qhimg.com/t01bd0523f7bc9241c2.png',\n                                  srcRect: [32, 32, 64, 64],\n                              },\n                              size: [width, width],\n                          }\n                      }\n                  } \n              });\n          }\n      case 1:\n          return Bodies.polygon(x, y, sides, Common.random(25, 50), { chamfer: chamfer });\n      }\n  });\n\n  World.add(world, stack);\n\n  World.add(world, [\n      // walls\n      Bodies.rectangle(400, 0, 800, 50, { isStatic: true }),\n      Bodies.rectangle(400, 600, 800, 50, { isStatic: true }),\n      Bodies.rectangle(800, 300, 50, 600, { isStatic: true }),\n      Bodies.rectangle(0, 300, 50, 600, { isStatic: true })\n  ]);\n\n  // add mouse control\n  var mouse = Mouse.create(render.canvas),\n      mouseConstraint = MouseConstraint.create(engine, {\n          mouse: mouse,\n          constraint: {\n              stiffness: 0.2,\n              render: {\n                  visible: false\n              }\n          }\n      });\n\n  World.add(world, mouseConstraint);\n\n  // keep the mouse in sync with rendering\n  render.mouse = mouse;\n\n  // fit the render viewport to the scene\n  // Render.lookAt(render, {\n  //     min: { x: 0, y: 0 },\n  //     max: { x: 800, y: 600 }\n  // });\n\u003c/script\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspritejs%2Fsprite-extend-matter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fspritejs%2Fsprite-extend-matter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspritejs%2Fsprite-extend-matter/lists"}