javascript - Physicsjs - 使用精灵表将一个位图的部分分配给多个实体

Question

我想创建一个可以分解的字母序列。理想情况下，我只加载一个精灵表来生成不同字母的视图。我将图像分配给身体视图，如下所示：

// letter is a physicsjs rectangle body
letter.view = new Image();
letter.view.src = 'someImage.jpg';

如果有一种方法可以更改分配给physicsjs 主体视图的位图的背景位置，我现在想这样做。

Answer 1

尝试为此使用 PIXI 渲染器。

然后，您可以使用 pixi 纹理和精灵来做想要的事情。

// set the base sprite
var base = PIXI.Texture.fromImage( spriteURL );
// get the first "frame"
var first = new PIXI.Texture( base, new PIXI.Rectangle( 0, 0, 100, 100 ) );

// set the view on the body
body.view = new PIXI.Sprite( first );
body.view.anchor.set(0.5, 0.5);

这是一个例子： http ://codepen.io/wellcaffeinated/pen/ByKapK

使用这个精灵： http ://www.xojo3d.com/images/sprite1.png

PIXI.js 纹理文档： http ://www.goodboydigital.com/pixijs/docs/classes/Texture.html

Answer 2

我尝试使用 pixi 渲染器，但一直收到错误消息：

“未定义不是评估 PIXI.Stage 的函数”

所以我最终编写了自己的解决方案。在画布渲染器中，在 drawBody() 方法中，我更改了：

ctx.drawImage(view, -view.width/2, -view.height/2 );

至：

if( body.backgroundPosX != undefined || body.backgroundPosY != undefined )
{
    body.backgroundPosX = body.backgroundPosX != undefined ? body.backgroundPosX : 0;
    body.backgroundPosY = body.backgroundPosY != undefined ? body.backgroundPosY : 0;
    ctx.drawImage( view, body.backgroundPosX, body.backgroundPosY, body.width, body.height, -body.width/2, -body.height/2, body.width, body.height );
}
else
{
   ctx.drawImage(view, -view.width/2, -view.height/2 );
}

这允许我在创建主体时将 backgroundPosX 和/或 backgroundPosY 作为选项传递，并使用该偏移量和其他一些不同的参数将精灵表定位在蒙版区域内。

如果不存在 backgroundPosX/Y，则条件假定它一定不是精灵表。它在那里是因为出于某种原因，这仅在将图像分配给主体时才有效，但不适用于仅包含形状的主体。当创建一个只有形状的主体时，它总是比指定的宽度少 2 个像素，但在使用带有图像的主体时是完美的。

如果解决了上述差异，这似乎将是很好的核心功能。

图书馆的工作也很棒！期待看到它还会发生什么！