logo标签列表

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

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

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>

1
你需要在画布上自己绘制汽车和其他精灵。Matter.js仅为您计算物理世界中的坐标。您需要将这些坐标应用于您在画布上绘制的对象。 - Kokodoko
非常感谢，我终于成功让某些东西运作起来了。虽然我仍然不确定为什么matter.js提供精灵纹理功能，如果它无法全面利用。无论如何，感谢您的帮助。 - TNARGI
我完全不知道如何关闭这个问题，现在它已经得到了答案。 - TNARGI
我可以将我的评论复制到答案中，然后您可以将其标记为正确答案 :) 顺便说一句：在这种情况下，精灵功能旨在作为快速而简单的预览，而不是用于实际游戏渲染。 - Kokodoko
1个回答
0

你需要在画布上自己绘制汽车和其他精灵。Matter.js仅为你计算物理世界中的坐标。你需要将这些坐标应用于你在画布上绘制的对象。

下面是一个示例，其中读取了Matter.js的坐标，然后用于定位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)";
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接