iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 6
1

前言

今天來製作一個倒數的鐘,用來計時現在剩餘下注時間,但因數字我們買的圖組裡面也有,不需要用真的數字,我們只要用數字切換顯示的圖片即可。

數字

以下為新增檔案的結構,我們新增Countdown(整個鐘)、CountdownNumber(數字)這兩檔案

    │  └─objects
    │          Bg.ts
    │          Chip.ts
    │          Countdown.ts
    │          CountdownNumber.ts
    │          Desk.ts
    │          DeskHover.ts

這是數字的內容,我們要甚麼數字他就要顯示,首先('0' + number).slice(-2).toString().split('')
的意思是,取得最後兩位數字,全部都加上0是因為如果只有個位數,我們要顯示01,02,03。

CountdownNumber.ts

import Sprite from '@/components/elements/Sprite'
import WrapperContainer from '@/components/elements/WrapperContainer'
import imagePath from '@/config/imagePath'

export default class CountdownNumber extends WrapperContainer {
  constructor(number: number) {
    super()
    // 曲最後両位數字
    let numberList = ('0' + number).slice(-2).toString().split('')
    // 遍歷兩個數字
    numberList.map((num: string, i: number) => {
    // 新增數字Sprite
      let _sprite = new Sprite(imagePath.tablePath, `countdown${num}`)
      // 新增容器
      let _wrc = new WrapperContainer()
      // 裝在容器
      _wrc.addContainer(_sprite.getContainer())
      // 設定位置 讓圖跟圖有間隔
      _wrc.setPosition({ animation: false }, i * 20, 0)
      this._container.addChild(_wrc.getContainer())
    })
  }
}

以上就可以產生出數字,這些切圖就如同前面幾篇講的,把圖片切成以下幾個,再用網路上的工具合併產生Sprite json檔案。
https://ithelp.ithome.com.tw/upload/images/20190907/20109783r9vuQKgODp.png

計時器

再來我們要新增計時器,把我們的數字放上去。

以下是Countdown,這次直接拿Sprite當容器,super直接把圖片蓋上去。

Countdown.ts
import Sprite from '@/components/elements/Sprite'
import WrapperContainer from '@/components/elements/WrapperContainer'
import CountdownNumber from '@/components/objects/CountdownNumber'
import imagePath from '@/config/imagePath'

export default class Countdown extends Sprite {
  private wrapperContainer: WrapperContainer
  private countdownNumber: CountdownNumber

  constructor() {
    super(imagePath.tablePath, 'countdown')
    this.wrapperContainer = new WrapperContainer()
    this.countdownNumber = new WrapperContainer(new CountdownNumber(0))
    this.wrapperContainer.addChild(this.countdownNumber)
    // 把計時數字置中放
    this.countdownNumber.setPosition({ animation: false }, this._container.width / 2 - this.countdownNumber.width / 2, this._container.height / 2)
    this._container.addChild(this.wrapperContainer.getContainer())
  }
// 計時開始
  public countdownStart(time: number) {
    let t = time
    let interval = setInterval(() => {
    // 每跳動一秒就會直接清掉舊的圖片,並新增另一組數字圖片
    // 這邊會不會產生一堆廢Object占用記憶體,我認為是不會的,因為我並沒有再addChild內把Object存入變數等等,照理來講removeChild清掉pixijs的Child應該就會GC了吧!
      this.countdownNumber.removeChildren()
      this.countdownNumber.addChild(new CountdownNumber(--t))
      if (t <= 0) { clearInterval(interval) }
    }, 1000)
  }
}

以上新增好後,我們要把他放在Table上,

...省略
import Countdown from '@/components/objects/Countdown'

export default class Table extends WrapperContainerCenter {
    ...省略
    private _countdown: Countdown

    constructor() {
        super()
        ...省略
        this.addChild(this._countdown)

        this.initPosition()
    }

    private initPosition() {
       ...省略
        this._countdown.setPosition({ animation: false }, 590, 45)
    }

    public setPosition(animationOpt: WrapperType.animationOpt, x: number, y: number): void {
        this._centerContainer.setPosition(animationOpt, x, y)
    }

    public countdownStart(num: number) {
        this._countdown.countdownStart(num)
    }
}

https://ithelp.ithome.com.tw/upload/images/20190907/20109783THn7QDtkob.png

dat.GUI測試

因為我們已經新增到Table,所以直接再body操作table的倒數方法,那增加一個方便我們觸發的介面,於是使用dat.GUI。

import Wrapper from '@/components/elements/Wrapper'
import WrapperContainerCenter from '@/components/elements/WrapperContainerCenter'
import Table from '@/components/groups/Table'
import * as dat from 'dat.gui'

export default class Body extends WrapperContainerCenter {
  private _table: Table
  constructor() {
    super()
    let rect = new PIXI.Graphics()
    rect.drawRect(0, 0, 1650, 900)
    rect.alpha = 0
    this._centerContainer.addContainer(rect)
    this._table = new Table()
    this._table.setPosition({animation: false}, this.width / 2 - 10, this.height / 2 + 60)
    this._table.setScale(false, 1.2, 1.2)

    // 從這邊建立gui
    const gui = new dat.GUI()
    let config = {
      countdown: () => {
        this._table.countdownStart(30)
      }
    }
    gui.add(config, 'countdown')
    this._centerContainer.addChild(this._table)
  }
}

點下去就開始倒數了哦!
https://ithelp.ithome.com.tw/upload/images/20190907/20109783c0rcsRkj1o.png

結尾

今天製作了一個倒數的計時器,整體細節其實還會再修,想到日後串接的時候,會相當痛苦。

連結

Github
Pixijs


上一篇
DAY05 賭桌感應區域、繪製互動區域
下一篇
DAY07 遊戲平台、搭建頁面(Vue)
系列文
三十天路邊賭場上線了!30

尚未有邦友留言

立即登入留言