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渲染器，但一直收到错误：

"undefined不是一个评估PIXI的函数。舞台">

所以我最终编写了自己的解决方案。 在画布渲染器中，在 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 作为选项传递，并使用该偏移量和其他一些不同的参数将精灵表定位在遮罩区域内。

条件假定它不能是子画面表，如果不存在背景 PosX/Y。 它之所以存在，是因为出于某种原因，这仅在将图像分配给身体时才有效，而不适用于仅包含形状的实体。 当创建仅形状的主体时，它一直比分配的宽度少 2 个像素，但在使用带有图像的实体时是完美的。

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

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