javascript - 如何将 Sprite 纹理应用于 matter.js 主体

我不明白为什么我的 Sprite 在 matter.js 中不起作用。我正在创建汽车/足球游戏，并在渲染器上禁用了线框，但 Sprite 仍未正确应用。我的第一个问题是，当我将 Sprite 纹理应用于复合体(汽车)时， Sprite 根本不渲染。我的第二个问题是，当我将 Sprite 纹理应用到车身时， Sprite 不随车身旋转( Sprite 根本不旋转)。我的第三个问题是，当我将 sprite 纹理应用于球(不是复合体)时，代表球的 sprite 和 body 都变得不可见。它们的球对引擎仍然可见，但在 Canvas 上看不到 body 或 Sprite 。

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);
   }
 }
}
*/

<!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>

最佳答案

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

这是一个示例，其中读取物质坐标，然后用于在 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)";

关于javascript - 如何将 Sprite 纹理应用于 matter.js 主体，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50391891/

javascript - 如何将 Sprite 纹理应用于 matter.js 主体

上一篇：video.js - 无法在 'appendBuffer' 上执行 'SourceBuffer'

下一篇：sass - 配置 "Live Sass Compiler"(VSCode模块)