iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 23
0

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

https://ithelp.ithome.com.tw/upload/images/20181102/20111962SIOTCDLQbH.jpg

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第一個參數設定位置,第二個參數是設定軸,數字越大圖片回拉扯越嚴重,正負數則是方向相反

https://ithelp.ithome.com.tw/upload/images/20181102/20111962c4mFYddVl7.jpg
設定5和-2的效果

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

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


上一篇
Day22 PIXI.projection.Sprite2d 做景深
下一篇
Day24 Spine
系列文
30天Pixi帶你飛上天30

尚未有邦友留言

立即登入留言