javascript - Physicsjs - 使用 Sprite 表将一个位图的部分分配给多个主体

Question

我想创建一个可以分解的字母序列。理想情况下，我只加载一张 Sprite 表来生成不同字母的 View 。我将图像分配给主体 View ，如下所示:

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

我现在想知道是否有一种方法可以更改分配给Physicsjs主体 View 的位图的背景位置。

Answer 1

尝试使用 PIXI 渲染器来实现此目的。

然后您可以使用 pixi 纹理和 Sprite 来实现您想要的目的。

// 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

使用这个 Sprite : http://www.xojo3d.com/images/sprite1.png

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