iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 21
2
Modern Web

PixiJS,方便好用的 WebGL 內容產生工具系列 第 21

[PixiJS - Day-21] 看起來像用了骨塊工具的 Strip 範例 與 Spine 範例

在範例裡有幾個範例看起來像用了骨塊工具:

BASIC - Textured Mesh:
alt
http://pixijs.io/examples/#/basics/textured-mesh.js

DEMOS - Strip:
alt
http://pixijs.io/examples/#/demos/strip-demo.js

兩個範例很像,一起討論:
程式碼:

var strip = new PIXI.mesh.Rope(PIXI.Texture.fromImage('required/assets/snake.png'), points);

主要是將蛇的圖片套進 PIXI.mesh.Rope 類別裡
蛇的圖片:
alt

在BASIC 的例子裡,範例把每一個節點畫出來,並用線段連起來
alt
程式碼:

41. function renderPoints () {
42. 
43.     g.clear();
44. 
45.     g.lineStyle(2,0xffc2c2);
46.     g.moveTo(points[0].x,points[0].y);
47. 
48.     for (var i = 1; i < points.length; i++) {
49.         g.lineTo(points[i].x,points[i].y);
50.     }
51. 
52.     for (var i = 1; i < points.length; i++) {
53.         g.beginFill(0xff0022);
54.         g.drawCircle(points[i].x,points[i].y,10);
55.         g.endFill();
56.     }
57. }

在BASIC - Textured Mesh 的例子裡,範例把每一個節點畫出來,並用線段連起來
在DEMOS - Strip 的例子裡,則是拿掉上方案例的節點,直接看做出來的效果

除了繪製蟲之外,也很適合用在動物、火焰等效果上

觀察一下所使用類別的API:
PIXI.mesh.Rope:
http://pixijs.download/dev/docs/PIXI.mesh.Rope.html
也可以當容器使用、加濾鏡等


PIXI.mesh 的成員:
alt

種類不多


Spine 類別:
SPINE - Dragon:
http://pixijs.io/examples/#/spine/dragon.js
alt

SPINE - Goblin:
http://pixijs.io/examples/#/spine/goblins.js
alt

SPINE - Pixie:
http://pixijs.io/examples/#/spine/pixie.js
alt

SPINE - Walking Animation:
http://pixijs.io/examples/#/spine/spineboy.js
alt

4個 Spine 範例很像
主要使用方式:與先前提到的 AnimatedSprite 類似。先讀入定義Spine的JSON檔,然後將資料交給 PIXI.spine.Spine 類別使用
程式碼:

PIXI.loader
    .add('dragon', 'required/assets/spine/dragon.json')
    .load(onAssetsLoaded);
function onAssetsLoaded(loader,res)
{
    // instantiate the spine animation
    dragon = new PIXI.spine.Spine(res.dragon.spineData);
    dragon.skeleton.setToSetupPose();
    dragon.update(0);
    dragon.autoUpdate = false;
...

使用的材質圖:
alt
.json 檔:

...
"skins": {
	"default": {
		"L_front_leg": {
			"L_front_leg": { "x": 14.68, "y": 0.48, "rotation": 15.99, "width": 84, "height": 57 }
		},
...

程式碼片段,定義了 Spine 圖、動作等

Spine官網:
alt
可試用


上一篇
[PixiJS - Day-20] 在 PixiJS 裡使用 Filters 與 Shader
下一篇
[PixiJS - Day-22] PixiJS 粒子效果
系列文
PixiJS,方便好用的 WebGL 內容產生工具31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言