Question

我无法理解为什么我的精灵不在work.js中工作。我正在创建一个汽车/足球游戏，并在渲染器上禁用了线框，但是精灵仍未正确应用。我的第一个问题是，当我将精灵纹理应用于复合体（汽车）时，精灵根本不会渲染。我的第二个问题是，当我将精灵纹理应用于汽车车身时，精灵不会随着车身旋转（精灵根本不会旋转）。我的第三个问题是，当我将精灵纹理应用于球（不是复合体）时，精灵和代表球的身体都变得不可见。他们的球仍然可以看到引擎，但在画布上都看不到身体或精灵。

＆＃13;

function game ()
{
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext("2d");
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;


  // module aliases
  var Engine = Matter.Engine,
      Render = Matter.Render,
      World = Matter.World,
      Bodies = Matter.Bodies,
      Body = Matter.Body,
      Composite = Matter.Composite,
      Composites = Matter.Composites,
      Vertices = Matter.Vertices;

  // create an engine
  var engine = Engine.create();
  engine.world.gravity.y = 0.6;

  // create a renderer
  var render = Render.create
  ({
    //element: canvas,
    element: document.body,
    canvas: canvas,
    engine: engine,
    options:
    {
      width: window.innerWidth - 30,
      height: window.innerHeight - 30,
      wireframes: false
    }
  });

  var offset = 1;
  var wallSize = 20;

  var ground = Bodies.rectangle(400, 510, 1810, 60,
    {
      isStatic: true,
      friction: 0,
      restitution: 0
    });

  var ball = Bodies.circle(window.innerWidth/2, window.innerHeight/2, 40,
    {
      mass: 5,// Used to be 0.5
      restitution: 0.95,
      friction: 0,
      frictionAir: 0.01,
    });
    ball.render.sprite.texture = "soccarball.png";

const carBody = Matter.Bodies.fromVertices(100, 100, [{x:200, y:200},{x:260, y:210},{x:260, y:220},{x: 200, y: 220}]);
carBody.render.sprite.texture = "car_sprites.jpg";
carBody.render.sprite.xScale = 0.06;
carBody.render.sprite.yScale = 0.06;

const frontWheel = Matter.Bodies.circle(100 -20, 115, 8);
const rearWheel = Matter.Bodies.circle(100 +20, 115, 8);

const car = Body.create
({
  parts: [carBody, frontWheel, rearWheel],
  inertia: 100000,
  friction: 0,
  mass: 100,
  restitution: -1,
});



  var floor = Bodies.rectangle(window.innerWidth/2, window.innerHeight + offset, window.innerWidth + 2 * offset, wallSize,
    {
      isStatic: true, friction: 0
    });


  World.add(engine.world, [ground, car, ball, floor]);



  // MAIN lOOP
    function cycle()
  {
    requestAnimationFrame(cycle);
  }
  cycle();







  // run the engine
  Engine.run(engine);
  //Engine.update(engine);

  // run the renderer
  Render.run(render);


  }



window.onload = game();









///////////////////////////////////////////////////////////////////////////////////////////////////////////
/*
function checkButtons()
{
 if(keys["68"]) // KEY_D
 {
   if(car.speed < 10)
   {
     //Body.applyForce( car, {x: car.position.x, y: car.position.y}, {x: 0.5, y: 0})
     let force = (0.001 * car.mass);
     Body.applyForce(car,car.position,{x:force,y:0});
     //console.log("Car Speed: " + car.speed);
   }
 }

 if(keys["87"]) // KEY_W
 {
   if(onGround())
   {
     carAvailableJumps--;
     let verticalForce = (-0.013 * car.mass);
     Body.applyForce(car,car.position,{x:0,y:verticalForce});
   }
   if(carAvailableJumps > 0)
   {
     if(!onGround() && keys["68"]) // KEY_D
     {
       carAvailableJumps--;
       let rotationalForce = (0.0009 * car.mass);
       Body.applyForce(car,{x: (car.position.x - carWidth/2), y: (car.position.y)},{x:0,y:-rotationalForce});
     }
     if(!onGround() && keys["65"]) // KEY_A
     {
       carAvailableJumps--;
       let rotationalForce = (0.0009 * car.mass);
       Body.applyForce(car,{x: (car.position.x - carWidth/2), y: (car.position.y)},{x:0,y:rotationalForce});
     }
   }
 }


 if(keys["83"]) // KEY_S
 {

 }

 if(keys["65"]) // KEY_A
 {
   if(car.speed < 10)
   {
     //Body.applyForce( car, {x: car.position.x, y: car.position.y}, {x: 0.5, y: 0})
     let force = (-0.001 * car.mass);
     Body.applyForce(car,car.position,{x:force,y:0});
     //console.log("Car Speed: " + car.speed);
   }
 }
}
*/

＆＃13;

<!DOCTYPE HTML>
<html>
<meta charset="UTF-8"/>
<head>
  <title>This is the title</title>
</head>
<body>
  <div id="div">
    <canvas id="myCanvas"</canvas>
    <script src="matter.js" type="text/javascript"></script>
    <script src="internethelp.js" type="text/javascript"></script>
  </div>
</body>

</html>

＆＃13;

Answer 1

你应该在画布上自己画汽车和其他精灵。物质只为你计算物理世界中的坐标。您必须将这些坐标应用于在画布中绘制的对象。

这是一个读取物质坐标的例子，然后用于在DOM中定位DIV元素

        let physicsBox = Matter.Bodies.rectangle(x, y, w, h);
        Matter.World.add(world, [physicsBox]);

        let div = document.createElement("box");
        document.body.appendChild(div);

        // draw
        let pos = physicsBox.position;
        let angle = physicsBox.angle;
        let degrees = angle * (180 / Math.PI);

        div.style.transform = "translate(" + (pos.x - 10) + "px, " + (pos.y - 10) + "px) rotate(" + degrees + "deg)";

如何将精灵纹理应用于matter.js实体

1 个答案: