這篇使用PIXI.projection.Sprite2d 做出假3D的效果

js可以在pixi的github找到

<script src="pixi-projection.js"></script>

先製作一個PIXI.projection.Container2d

var container = new PIXI.projection.Container2d();
container.position.set(app.screen.width / 2, app.screen.height / 2);
app.stage.addChild(container);

然後放入圖片使用PIXI.projection.Sprite2d載入,並加入container

var bunny = new PIXI.projection.Sprite2d(new PIXI.Texture.fromImage('img/cat.png'));
bunny.anchor.set(0.5);
bunny.scale.set(0.7);
container.addChild(bunny);

最後設定位置

let posX = container.toLocal(squareX.position, undefined, undefined, undefined, PIXI.projection.TRANSFORM_STEP.BEFORE_PROJ);
let posY = container.toLocal(squareY.position, undefined, undefined, undefined, PIXI.projection.TRANSFORM_STEP.BEFORE_PROJ);
container.proj.setAxisX(posX,1);
container.proj.setAxisY(posY, 2);

setAxisX第一個參數設定位置,第二個參數是設定軸,數字越大圖片回拉扯越嚴重,正負數則是方向相反

設定5和-2的效果

container.proj.setAxisX(posX,5);
container.proj.setAxisY(posY, -2);

我今天回家啦~~~~~~~~~~~~~
要來面對現實啦~~~~~~~~