Как применить спрайт-текстуры к телу material.js - PullRequest
Новая
       44

Как применить спрайт-текстуры к телу material.js

0 голосов
/ 17 мая 2018

Я не могу понять, почему мои спрайты не работают в деле .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 Ответ

0 голосов
/ 24 мая 2018

Вы должны нарисовать машину и другие спрайты самостоятельно на холсте. Материя только рассчитывает координаты в мире физики для вас. Вы должны применить эти координаты к объектам, которые вы рисуете на холсте.

Это пример, в котором координаты материи считываются, а затем используются для позиционирования элемента DIV в DOM 

        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)";
...