前言

今天來把檯面的數字放上去吧！才知道現在檯面有多少錢！

切割數字

一樣得用PS切割數字之後放到texturepacker進行合併成Sprite圖檔。

架構

這一次我們會新增兩個檔案 AreaBetNumber 和 TotalBetNumber ，一個是中間總額數字，一個是各下注去的金額。

**└─src
    │  App.ts
    │  Game.ts
    ├─components
    │  ├─elements
    │  │      Animation.ts
    │  │      Sprite.ts
    │  │      Texture.ts
    │  │      Wrapper.ts
    │  │      WrapperContainer.ts
    │  │      WrapperContainerCenter.ts
    │  │      WrapperType.ts
    │  ├─groups
    │  │      Body.ts
    │  │      Casino.ts
    │  │      ChipBox.ts
    │  │      Loading.ts
    │  │      Navbottom.ts
    │  │      Navtop.ts
    │  │      Table.ts
    │  └─objects
    │          AreaBetNumber.ts ***
    │          Bg.ts
    │          Chip.ts
    │          Countdown.ts
    │          CountdownNumber.ts
    │          Desk.ts
    │          DeskHover.ts
    │          Info.ts
    │          InfoMoneyNumber.ts
    │          Poker.ts
    │          TotalBetNumber.ts ***
    │          WaitNextBetNotify.ts
    ├─config
    │      chipType.ts
    │      imagePath.ts
    │      loadingPath.ts
    │      pokerPoint.ts
    │      pokerType.ts
    │      
    ├─loaders
    │      Loader.ts
    └─utils
            tools.ts

TotalBetNumber AreaBetNumber

其實很明顯，這就與之前的個人帳戶金額非常相似，都是差不多的結構，只是取的圖檔不一樣而已。

import Sprite from '@/components/elements/Sprite'
import WrapperContainer from '@/components/elements/WrapperContainer'
import imagePath from '@/config/imagePath'
import { toCurrency, todecimal, tounit } from '@/utils/tools'

export default class InfoMoneyNumber extends WrapperContainer {
  private _number: number
  private _target: number
  constructor(number: number) {
    super()
    this._number = number
    this._target = number
    this.updateNumber(number)
  }

  public updateNumber(number: number) {
    this._target = number
    this.animationNuber()
  }
  public animationNuber() {
    let interval = setInterval(() => {
      if (this._target === this._number) { clearInterval(interval) }
      if (this._target > this._number) {
        let _distance = this._target - this._number
        let _new_number = this._number += Math.ceil(_distance / 2)
        this.displayNumber(_new_number)
      } else {
        let _distance = this._number - this._target
        let _new_number = this._number -= Math.ceil(_distance / 2)
        this.displayNumber(_new_number)
      }
      if (Math.abs(this._target - this._number) < 1000) {
        this._number = this._target
        this.displayNumber(this._target)
        clearInterval(interval)
      }
      this.displayNumber(this._number)
    }, 100)
  }

  private displayNumber(number: number) {
    this.removeChildren()
    let numberList = tounit(number).toString().split('')
    let pos = 0
    numberList.map((num: string, i: number) => {
      let _sprite
      let w = 14
      switch (num) {
        case '.':
          _sprite = new Sprite(imagePath.tablePath, `totalbetdot`)
          break
        case ',':
          _sprite = new Sprite(imagePath.tablePath, `totalbetcomma`)
          _sprite.y = 10
          break
        case '/':
          _sprite = new Sprite(imagePath.tablePath, `totalbetslash`)
          break
        case 'e':
          _sprite = new Sprite(imagePath.tablePath, `totalbete`)
          _sprite.y = -2
          w = 30
          break
        case 'w':
          _sprite = new Sprite(imagePath.tablePath, `totalbetw`)
          _sprite.y = -2
          _sprite.x = 2
          w = 25
          break
        default:
          _sprite = new Sprite(imagePath.tablePath, `totalbet${num}`)
          break
      }
      let _wrc = new WrapperContainer()
      _wrc.addContainer(_sprite.getContainer())
      _wrc.setPosition({ animation: false }, pos, 0)
      pos += w
      this.addChild(_wrc)
    })
  }
}

數字定位

我們直接放到Group的Table上，進行定位，因為非常多所以就省略很多其他非這次重點的內容。

// ...省略

export default class Table extends WrapperContainerCenter {
    // ...省略
    
    // 我們的數字都會存在這些Object上
    private _betNumber_total: TotalBetNumber
    private _betNumber_area_playerpair: AreaBetNumber
    private _betNumber_area_playerking: AreaBetNumber
    private _betNumber_area_tiepair: AreaBetNumber
    private _betNumber_area_tie: AreaBetNumber
    private _betNumber_area_bankerking: AreaBetNumber
    private _betNumber_area_banker: AreaBetNumber
    private _betNumber_area_bankerpair: AreaBetNumber
    private _betNumber_area_player: AreaBetNumber


    constructor() {
        super()
        // ...省略

        // 把他們實例化吧 數字隨便打的

        this._betNumber_total = new TotalBetNumber(99954545)
        this._betNumber_area_playerpair = new AreaBetNumber(99954545)
        this._betNumber_area_playerking = new AreaBetNumber(99954545)
        this._betNumber_area_tiepair = new AreaBetNumber(99954545)
        this._betNumber_area_tie = new AreaBetNumber(99954545)
        this._betNumber_area_bankerking = new AreaBetNumber(99954545)
        this._betNumber_area_banker = new AreaBetNumber(99954545)
        this._betNumber_area_bankerpair = new AreaBetNumber(99954545)
        this._betNumber_area_player = new AreaBetNumber(99954545)

        // ...省略

        // 把他們全部放上到此容器上
        this.addChild(this._betNumber_total)
        this.addChild(this._betNumber_area_playerpair)
        this.addChild(this._betNumber_area_playerking)
        this.addChild(this._betNumber_area_tiepair)
        this.addChild(this._betNumber_area_tie)
        this.addChild(this._betNumber_area_bankerking)
        this.addChild(this._betNumber_area_banker)
        this.addChild(this._betNumber_area_bankerpair)
        this.addChild(this._betNumber_area_player)
        
        // ...省略
        
        // 初始化位置
        this.initPosition()
    }

    private initPosition() {
        // ...省略
        
        // 這邊的位置是我用dat gui慢慢調出來的，真的相當耗時間。
        this._betNumber_total.setPosition({ animation: false }, 670, 130)
        this._betNumber_area_playerpair.setPosition({ animation: false }, 250, 165)
        this._betNumber_area_playerking.setPosition({ animation: false }, 410, 455)
        this._betNumber_area_tiepair.setPosition({ animation: false }, 670, 455)
        this._betNumber_area_tie.setPosition({ animation: false }, 670, 310)
        this._betNumber_area_bankerking.setPosition({ animation: false }, 930, 455)
        this._betNumber_area_banker.setPosition({ animation: false }, 1080, 430)
        this._betNumber_area_bankerpair.setPosition({ animation: false }, 1080, 165)
        this._betNumber_area_player.setPosition({ animation: false }, 230, 430)

        // 這邊只是暫時測試是否可以變換數字，而在變換數字時，會有漸變的動畫。
        setInterval(() => {
            this._betNumber_total.updateNumber(Math.ceil(Math.random() * 9000000))
            this._betNumber_area_playerpair.updateNumber(Math.ceil(Math.random() * 9000000))
            this._betNumber_area_playerking.updateNumber(Math.ceil(Math.random() * 9000000))
            this._betNumber_area_tiepair.updateNumber(Math.ceil(Math.random() * 9000000))
            this._betNumber_area_tie.updateNumber(Math.ceil(Math.random() * 9000000))
            this._betNumber_area_bankerking.updateNumber(Math.ceil(Math.random() * 9000000))
            this._betNumber_area_banker.updateNumber(Math.ceil(Math.random() * 9000000))
            this._betNumber_area_bankerpair.updateNumber(Math.ceil(Math.random() * 9000000))
            this._betNumber_area_player.updateNumber(Math.ceil(Math.random() * 9000000))
        }, 1000);
    }

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

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

完成

原來GIF圖要這樣貼，今天才知道。