Question

我想创建一系列可以分开的字母。理想情况下，我只加载一个spritesheet来生成不同字母的视图。我按照以下方式将图像分配给实体视图：

// 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.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个像素，但在使用带有图像的主体时非常完美。

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

图书馆也很棒！期待看到它发生了什么！

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

2 个答案: