iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 29
1
Modern Web

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

[PixiJS - Day-29] 實作:第二版萬花筒

大家 2018 新年快樂!
這次講的是第二版萬花筒
alt
網址:http://eia.github.io/pixijs/170419/


萬花筒的部分,在第一版萬花筒有提過

本篇提到的部分有三個:
- 架構:
實作本身開始變龐大,因此將程式各個部分抽出

- 萬花筒內花瓣動態控制:
萬花筒內的動態由程式控制,但程式運作時的參數是先透過另一個小程式取得

- 畫面更新與場景控制


開始實作:

架構:
alt

  • 主程式:Main,控制 PIXI.Application 實體的程式
  • 六邊形:Hexagon
  • 花:Triangle_Hana_1~4 等各種不同花的實作

六邊形與花各是獨自的類別,各自實作了一些方法

關於 JavaScript 裡原型擴充的部分,可參考 Kuro 的文章:原型與繼承

- 主程式

  • 決定目前場景上會有幾個六邊形,以及六邊形裡是哪一種花
  • 控制目前播放的片段

- 六邊形
從主程式帶進來的參數決定六邊形裡要放什麼樣的花,可能是:

  • Triangle_Hana_1
  • Triangle_Hana_2
  • Triangle_Hana_3
    ...

alt

// main.js
var hexagon = new Hexagon("hana_1");

// hexagon.js
Hexagon = function($type){
  switch($type){
    case "hana_1":
      this.triangle1 = new Triangle_Hana_1();
      this.triangle2 = new Triangle_Hana_1();
      this.triangle3 = new Triangle_Hana_1();
      this.triangle4 = new Triangle_Hana_1();
      this.triangle5 = new Triangle_Hana_1();
      this.triangle6 = new Triangle_Hana_1();
    break;
    ...
  }
}

// hana_1.js
this.texture = PIXI.Texture.fromImage('assets/hana/hana_1_2.png');
...

- 花
不參與程式邏輯,單純實作花的功能,以及動態上的視覺呈現

萬花筒內花瓣動態控制:
取得萬花筒內動態參數的小程式
alt
小程式分做左邊與右邊兩個部分:

  • 左邊:萬花筒六邊形完整樣貌
  • 右邊:是六邊形的其中一個三角形,半透明紅色三角形是遮罩範圍但不設定遮罩

透過 dat.GUI 控制圖片位置的參數,在左邊的六邊形會即時看到複製六片時的效果

畫面更新與場景控制:

alt

app.ticker 會隨著時間一直呼叫
因此我在 app.ticker 裡呼叫當下場景裡六邊形的 update()
並讓六邊形對裡面的花呼叫update()

alt
主程式使用 TimelineMax 控制整體動態

六邊形與花不需知道主場景播到哪了,動態由主場景控制


本文用到方法,基本上延續之前 第一版萬花筒 的內容,附上參考的文章:


上一篇
[PixiJS - Day-28] 實作:萬花尺
下一篇
[PixiJS - Day-30] 實作:在手機版網頁上蓋章
系列文
PixiJS,方便好用的 WebGL 內容產生工具31

尚未有邦友留言

立即登入留言