前言

在剛進入遊戲時，會跳出一個訊息，提示玩家要等下一局才能投注，其實有一部分也是因為這款遊戲一開始就有這樣的設定，於是我們也加進來吧！

圖檔

一樣是切割完的圖，且壓成Sprite圖，如以下。

結構

會新增*** WaitNextBetNotify.ts***這檔案，用來裝我們的提示文字。並且之後會暫時放在body上顯示。

└─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
    │          Bg.ts
    │          Chip.ts
    │          Countdown.ts
    │          CountdownNumber.ts
    │          Desk.ts
    │          DeskHover.ts
    │          Info.ts
    │          InfoMoneyNumber.ts
    │          Poker.ts
    │          WaitNextBetNotify.ts ***
    ├─config
    │      chipType.ts
    │      imagePath.ts
    │      loadingPath.ts
    │      pokerPoint.ts
    │      pokerType.ts
    ├─loaders
    │      Loader.ts
    └─utils
            tools.ts

圖檔載入、動畫

這類別看起來非常繁瑣，但其實是因為切圖大小不一，造成如果同樣的x,y會有上下沒有對稱，所以必須用一個容器裝著置中，至於動畫部分就是每200毫秒會把上一個元件恢復原位，並把下一個元件位置往上提，加上漸變時間，看起來就會像是連續動畫。

import Sprite from '@/components/elements/Sprite'
import imagePath from '@/config/imagePath'
import Wrapper from '@/components/elements/Wrapper'
import WrapperContainerCenter from '@/components/elements/WrapperContainerCenter'
import * as WrapperType from '@/components/elements/WrapperType'

export default class WaitNextBetNotify extends WrapperContainerCenter {
  private _w0: Wrapper
  private _w1: Wrapper
  private _w2: Wrapper
  private _w3: Wrapper
  private _w4: Wrapper
  private _w5: Wrapper
  private _w6: Wrapper
  private _wdot1: Wrapper
  private _wdot2: Wrapper
  private _wdot3: Wrapper
  private _animationList:Array<Wrapper> = []
  private _animationStatus:boolean = false
  constructor() {
    super()
    this._w0 = new WrapperContainerCenter()
    this._w1 = new WrapperContainerCenter()
    this._w2 = new WrapperContainerCenter()
    this._w3 = new WrapperContainerCenter()
    this._w4 = new WrapperContainerCenter()
    this._w5 = new WrapperContainerCenter()
    this._w6 = new WrapperContainerCenter()
    this._wdot1 = new WrapperContainerCenter()
    this._wdot2 = new WrapperContainerCenter()
    this._wdot3 = new WrapperContainerCenter()
    
    this._animationList.push(this._w0)
    this._animationList.push(this._w1)
    this._animationList.push(this._w2)
    this._animationList.push(this._w3)
    this._animationList.push(this._w4)
    this._animationList.push(this._w5)
    this._animationList.push(this._w6)
    this._animationList.push(this._wdot1)
    this._animationList.push(this._wdot2)
    this._animationList.push(this._wdot3)
    
    let w0 = new Sprite(imagePath.waitNotify, '0')
    let w1 = new Sprite(imagePath.waitNotify, '1')
    let w2 = new Sprite(imagePath.waitNotify, '2')
    let w3 = new Sprite(imagePath.waitNotify, '3')
    let w4 = new Sprite(imagePath.waitNotify, '4')
    let w5 = new Sprite(imagePath.waitNotify, '5')
    let w6 = new Sprite(imagePath.waitNotify, '6')
    let wdot1 = new Sprite(imagePath.waitNotify, 'dot')
    let wdot2 = new Sprite(imagePath.waitNotify, 'dot')
    let wdot3 = new Sprite(imagePath.waitNotify, 'dot')

    w0.setPosition({animation: false}, 0, -13)
    w1.setPosition({animation: false}, 0, 3)
    w2.setPosition({animation: false}, 0, 3)
    w3.setPosition({animation: false}, 0, 6)
    w4.setPosition({animation: false}, 0, 5)
    w5.setPosition({animation: false}, 0, 5)
    w6.setPosition({animation: false}, 0, 3)
    wdot1.setPosition({animation: false}, 0, 50)
    wdot2.setPosition({animation: false}, 0, 50)
    wdot3.setPosition({animation: false}, 0, 50)

    this._w0.addChild(this.generatorFont(w0))
    this._w1.addChild(this.generatorFont(w1))
    this._w2.addChild(this.generatorFont(w2))
    this._w3.addChild(this.generatorFont(w3))
    this._w4.addChild(this.generatorFont(w4))
    this._w5.addChild(this.generatorFont(w5))
    this._w6.addChild(this.generatorFont(w6))
    this._wdot1.addChild(this.generatorFont(wdot1))
    this._wdot2.addChild(this.generatorFont(wdot2))
    this._wdot3.addChild(this.generatorFont(wdot3))

    this.addChild(this._w0)
    this.addChild(this._w1)
    this.addChild(this._w2)
    this.addChild(this._w3)
    this.addChild(this._w4)
    this.addChild(this._w5)
    this.addChild(this._w6)
    this.addChild(this._wdot1)
    this.addChild(this._wdot2)
    this.addChild(this._wdot3)

    this._w0.setPosition({animation: false}, 0, 0)
    this._w1.setPosition({animation: false}, 70, 0)
    this._w2.setPosition({animation: false}, 140, 0)
    this._w3.setPosition({animation: false}, 210, 0)
    this._w4.setPosition({animation: false}, 280, 0)
    this._w5.setPosition({animation: false}, 350, 0)
    this._w6.setPosition({animation: false}, 420, 0)
    this._wdot1.setPosition({animation: false}, 490, 0)
    this._wdot2.setPosition({animation: false}, 510, 0)
    this._wdot3.setPosition({animation: false}, 530, 0)
    this.animation(true)
  }

  public generatorFont(font: Wrapper): Wrapper{
    let rect = new PIXI.Graphics()
    let cont = new WrapperContainerCenter()
    rect.drawRect(0, 0, 70, 80)
    cont.addContainer(rect)
    cont.addChild(font)
    font.getContainer().mask = rect
    return cont
  }

  // 動畫部分
  public animation(opt: boolean) {
    this._animationStatus = opt
    if (!this._animationStatus) return
    let index = 0
    let limit = this._animationList.length - 1
    let prev: Wrapper
    let interval = setInterval(() => {
      if (!this._animationStatus) {clearInterval(interval)}
      if ( index > limit ) {index = 0}
      if (prev) {
        prev.setPosition({animation: true}, prev.x, prev.y + 20)
      }
      this._animationList[index].setPosition({animation: true}, this._animationList[index].x, -20)
      prev = this._animationList[index]
      index++
    }, 200)
    interval
  }
  
  // 移除的時候必須要清掉interval不然會越來越肥。
  public removeChildren(): void {
    super.removeChildren()
    this.animation(false)
  }

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

顯示位置

再來因為我們要顯示他，暫時把他放在body上讓我們有辦法看到結果！

import Wrapper from '@/components/elements/Wrapper'
import WrapperContainerCenter from '@/components/elements/WrapperContainerCenter'
import Table from '@/components/groups/Table'
import WaitNextBetNotify from '@/components/objects/WaitNextBetNotify'
export default class Body extends WrapperContainerCenter {
  private _table: Wrapper

  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)

    // 這裡哦!
    let notify = new WaitNextBetNotify()
    this._centerContainer.addChild(this._table)
    this._centerContainer.addChild(notify)
    notify.setPosition({ animation: false }, this.width / 2 - 80, this.height / 2)
  }
}

這是結果。

後記

大概完成我們的訊息提示以及動畫，大概剩下一些桌面訊息顯示，或是一些牌的結果、輸贏。倒數十天的時候應該就會開始把遊戲伺服器完成了。

連結

Github