Physics.js-使用Sprite工作表將一個位圖的部分分配給多個實體

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渲染器，但一直出現錯誤：

“未定義不是評估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，則它一定不能是Sprite工作表。 之所以在這里，是因為出於某種原因，這僅在將圖像分配給主體時才起作用，但不適用於僅包含形狀的主體。 創建僅形狀的主體時，它會比指定的寬度少2個像素，但是當將主體與圖像配合使用時，它是完美的。

如果解決了上述差異，這似乎將是好的核心功能。

圖書館也很棒！ 期待看到它還會發生什么！