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

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

转载作者：行者123 更新时间：2023-12-05 07:33:52

25

4

我不明白为什么我的 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/

25

4

0

文章推荐： database - python中的远程Oracle DB连接

文章推荐： sass - 配置 "Live Sass Compiler"(VSCode模块)

文章推荐： video.js - 无法在 'appendBuffer' 上执行 'SourceBuffer'

文章推荐： angular - PrimeNG TableModule 错误

javascript - 无法读取未定义的属性“主体”
我试图将护照逻辑放入 Controller 文件中，但问题是当我将逻辑放入 Controller 中时，它告诉我“无法读取未定义的属性“主体””，但是当我将代码移至索引时，所有内容都会路由向右走 in
Javascript 主体 OnClick
我正在学习 Javascript，我正在尝试创建一个简单的下拉菜单。我想要的功能的一个例子可以在谷歌主页的顶部菜单中看到，带有“更多”和“设置”下拉菜单。具体来说，当您单击关闭菜单时，菜单会消失。我
swagger - ServiceStack Swagger 主体
我正在努力让 Swagger 正确呈现我的 ServiceStack 服务。我希望看到一个 UserId 字符串作为表单参数，一个 PrivateCustomer 对象作为主体参数，但是尽管 Use
security - 检索 Shiro 主体
注意:由于随后的研究，这个问题已经完全重组。我正在尝试从 Shiro 的主题 PrincipalCollection 中检索值.我在集合中添加了两个主体。 Username和 UUID .当我试图记
java - 如何扩展 OAuth2 主体
我们正在开发一个将 OAuth 2 用于两个用例的应用程序: 访问后端微服务(使用 client_credentials) 验证应用程序的用户(使用 authorization_code ，因此将用户
c# - 在运行时更改表达式委托(delegate)主体？
我有这段代码生成一个将 myNumber 乘以 5 的委托(delegate) ParameterExpression numParam = Expression.Parameter(typeof(i
javascript - 来自变量的 Jquery 主体
我有一些jquery， $( document ).ready(function() { body=$(body).html; $("html").html(body); }); 这应
java - 在抛出异常时配置 ResponseEntity 主体
我创建了一个通用异常 DTO，它也扩展了 RuntimeException。通过这种方式，可以在应用程序中使用它，也可以将其用作 DTO。问题是当我将 DTO 应用于 ResponseEntity 构
typescript - 动态设置 HttpParams() 主体
在 Angular 5 HttpClient 中，我可以通过这种方式设置 HttpParams()。 const body = new HttpParams() .set('email', '
java - 获取具有属性的 RabbitMQ 主体
我正在从 RabbitMQ 读取数据，如下所示: connection = factory.newConnection(); ch = connection.createChannel() ; Str
java - 改造不同的调用和响应 json 主体
如何使用不同类型的调用和响应主体来改造 PUT？我有一个错误限制。类型必须相同 and 。响应bodie可以包含int值，但call不应该，因为当我用int值初始化CallBody对象时，它已经包
dynamic - 如何在运行时动态修改 proc 主体？
原则上我想做这样的事情: #grab some value from outer source (i.e. file or list defined by another programer) set
java - 如何将动画应用到 box2d 主体？
我知道如何使用TextureRegions 创建动画并将其应用于非box2d 游戏中的对象。但是在 libgdx 的 box2d 中，我不知道该怎么做。在CocosD2中，Sprite对象中有run
c# - 在运行时更改表达式委托(delegate)主体？
我有这段代码生成一个将 myNumber 乘以 5 的委托(delegate) ParameterExpression numParam = Expression.Parameter(typeof(i
java - 无法完成类(class)主体
我已经计算了花括号的数量，但无法弄清楚为什么类主体不完整。每次我试图修复类(class)时，都会把整个类(class)弄乱。问题出在代码中的最后一个类。最后一个花括号给我带来了类里面的麻烦。我正在使用
c++ - 如何在不对其施加力的情况下旋转 Box2D 主体？
有人知道吗？我只能看到 ApplyTorque 和 SetAngularVelocity，我只想在将对象添加到模拟之前旋转对象，例如:所以我有一个 crate 倾斜靠在墙上，另一个 crate 是平的
java - 将图像绘制到 Box2D 主体
我可以获得如何让图像出现在 box2d 主体上的简单答案吗？我尝试为图像和主体创建 x 和 y int，但是一旦主体移动，图像就会保持静态。如果您确实回答，请尽可能解释一下代码。如果您对我的完整源代码
java - 如何反复用纹理填充 libgdx 主体？
我知道我可以通过使用 PolygonRegion 来做到这一点，但问题是我使用 scene2d.Stage 和几个 Actor 。您可能知道阶段使用 SpriteBatch 而我无法渲染 Polygo
JavaScript 主体 onunload 不起作用
您好，我有以下代码: function redirect(){ window.location.href='logged_out_chat.php'; } ...在我的标题和以下正文标记中:
swift - SKPhysicsContact 主体，无法更改属性
我在 didBegin(contact:) 中触发了 SpriteKit 物理接触。我为要移出屏幕的 Dot 对象的实例抓取物理体，但是当我尝试像这样更改其位置时，没有任何反应: 第一种方法 /* I

首页

博学

6Ren·AI

商城

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