动效完善

index.html

@@ -70,7 +70,7 @@
       canvas.width = document.body.clientWidth * (window.devicePixelRatio || 1)
       canvas.height = document.body.clientHeight * (window.devicePixelRatio || 1)
       new Main(canvas, {
-        isFirstGame: true
+        isFirstGame: false
       })
     })
     

resource/res.json

@@ -11,6 +11,14 @@
 		{
 			"keys": "closebtn.png,giftBoxIcon.png,waitingBg.png,waitingRot.png",
 			"name": "common"
+		},
+		{
+			"keys": "rabbit0.spi",
+			"name": "spine"
+		},
+		{
+			"keys": "SpBoom.svga,boomSvga.svga,spSvga.svga",
+			"name": "svga"
 		}
 	],
 	"path": "./resource/"

scripts/rabbit/rabbit.atlas

 
-tuzi跳.png
+人物.png
 size: 256,256
 format: RGBA8888
 filter: Linear,Linear
 repeat: none
-erdy
-  rotate: true
-  xy: 112, 120
-  size: 49, 65
-  orig: 69, 81
-  offset: 0, 1
+arm l
+  rotate: false
+  xy: 226, 154
+  size: 23, 49
+  orig: 23, 49
+  offset: 0, 0
   index: -1
-erdz
+arm r
   rotate: false
-  xy: 95, 31
-  size: 36, 78
-  orig: 36, 94
-  offset: 0, 1
+  xy: 226, 205
+  size: 28, 49
+  orig: 28, 50
+  offset: 0, 0
   index: -1
-jb
+body
   rotate: false
-  xy: 133, 13
-  size: 38, 38
-  orig: 39, 42
-  offset: 0, 3
+  xy: 161, 206
+  size: 63, 48
+  orig: 63, 49
+  offset: 0, 0
   index: -1
-st
+ear l
   rotate: false
-  xy: 2, 111
-  size: 108, 136
-  orig: 138, 139
-  offset: 26, 2
+  xy: 97, 201
+  size: 62, 53
+  orig: 62, 53
+  offset: 0, 0
   index: -1
-toua
+ear r
+  rotate: true
+  xy: 161, 160
+  size: 44, 63
+  orig: 44, 63
+  offset: 0, 0
+  index: -1
+eye l
   rotate: false
-  xy: 2, 21
-  size: 91, 88
-  orig: 94, 89
-  offset: 3, 1
+  xy: 122, 145
+  size: 24, 20
+  orig: 26, 22
+  offset: 1, 1
   index: -1
-weib
+eye r
   rotate: false
-  xy: 220, 100
-  size: 27, 29
-  orig: 31, 33
-  offset: 2, 2
+  xy: 97, 144
+  size: 23, 21
+  orig: 25, 23
+  offset: 1, 1
+  index: -1
+eye sadl
+  rotate: true
+  xy: 33, 126
+  size: 18, 23
+  orig: 18, 23
+  offset: 0, 0
+  index: -1
+eye sadr
+  rotate: true
+  xy: 2, 125
+  size: 18, 23
+  orig: 18, 23
+  offset: 0, 0
+  index: -1
+eye xiaol
+  rotate: true
+  xy: 148, 146
+  size: 19, 11
+  orig: 19, 11
+  offset: 0, 0
+  index: -1
+eye xiaor
+  rotate: true
+  xy: 79, 125
+  size: 19, 11
+  orig: 19, 11
+  offset: 0, 0
+  index: -1
+eyebrow l
+  rotate: false
+  xy: 45, 111
+  size: 8, 5
+  orig: 10, 8
+  offset: 1, 1
   index: -1
-ys
+eyebrow r
   rotate: false
-  xy: 133, 53
-  size: 36, 65
-  orig: 39, 69
-  offset: 1, 3
+  xy: 45, 118
+  size: 7, 6
+  orig: 10, 8
+  offset: 2, 1
   index: -1
-yziz
+face
   rotate: false
-  xy: 112, 171
-  size: 135, 76
-  orig: 176, 107
-  offset: 27, 17
+  xy: 2, 174
+  size: 93, 80
+  orig: 93, 81
+  offset: 0, 0
   index: -1
-zs
+foot l
   rotate: true
-  xy: 179, 131
-  size: 38, 65
-  orig: 41, 67
-  offset: 1, 1
+  xy: 138, 167
+  size: 32, 21
+  orig: 33, 22
+  offset: 1, 0
+  index: -1
+leg l
+  rotate: true
+  xy: 97, 167
+  size: 32, 39
+  orig: 32, 39
+  offset: 0, 0
+  index: -1
+mouth
+  rotate: false
+  xy: 58, 116
+  size: 17, 11
+  orig: 17, 19
+  offset: 0, 8
+  index: -1
+mouth sad
+  rotate: false
+  xy: 27, 113
+  size: 16, 11
+  orig: 16, 12
+  offset: 0, 1
   index: -1
-zsy
+mouth smile
   rotate: true
-  xy: 179, 98
-  size: 31, 39
-  orig: 36, 42
-  offset: 3, 1
+  xy: 58, 129
+  size: 15, 19
+  orig: 15, 19
+  offset: 0, 0
+  index: -1
+sai l
+  rotate: false
+  xy: 33, 146
+  size: 30, 26
+  orig: 34, 30
+  offset: 2, 2
+  index: -1
+sai r
+  rotate: false
+  xy: 65, 146
+  size: 30, 26
+  orig: 34, 30
+  offset: 2, 2
+  index: -1
+tail
+  rotate: false
+  xy: 2, 145
+  size: 29, 27
+  orig: 29, 27
+  offset: 0, 0
   index: -1

src/Dream/development.ts

@@ -108,6 +108,9 @@ export function createElement<K extends new(p?: any) => ChildType, T extends Chi
     if (isFunction(props.onAddedToStage)) {
       eleins.addEventListener(FYGE.Event.ADDED_TO_STAGE, props.onAddedToStage!)
     }
+    if (isFunction(props.onRemoveFromStage)) {
+      eleins.addEventListener(FYGE.Event.REMOVED_FROM_STAGE, props.onRemoveFromStage)
+    }
 
     // 被移除的时候直接 去 清除 Tween
     eleins.addEventListener(FYGE.Event.REMOVED_FROM_STAGE, function(e: any) {

src/Dream/types.ts

@@ -7,5 +7,7 @@ export type EventsMap = {
   onClickCapture?: EventCallBack<FYGE.MouseEvent>
   onEnterFrame?: EventCallBack<FYGE.Event>
 
-  onAddedToStage?: EventCallBack<FYGE.Event>
+  onAddedToStage?: EventCallBack<FYGE.Event>,
+
+  onRemoveFromStage?: EventCallBack<FYGE.Event>
 }
\ No newline at end of file

src/ResJson.ts

@@ -2,188 +2,24 @@ export const ResJson = {
 	"groups": [
 		{
 			"keys": "GSB.png,clockBack.png,platform.png,rabbit.png,scoreBoardBack.png,sp_boom.png,sp_milk.png",
-			"name": "GameScene",
-			"atlas": {
-				"GSB.png": {
-					"x": 2,
-					"y": 2,
-					"w": 750,
-					"h": 1624,
-					"ox": 0,
-					"oy": 0,
-					"sw": 750,
-					"sh": 1624,
-					"ro": false
-				},
-				"rabbit.png": {
-					"x": 754,
-					"y": 2,
-					"w": 110,
-					"h": 218,
-					"ox": 0,
-					"oy": 0,
-					"sw": 110,
-					"sh": 218,
-					"ro": false
-				},
-				"scoreBoardBack.png": {
-					"x": 754,
-					"y": 222,
-					"w": 193,
-					"h": 81,
-					"ox": 0,
-					"oy": 0,
-					"sw": 193,
-					"sh": 81,
-					"ro": true
-				},
-				"platform.png": {
-					"x": 754,
-					"y": 417,
-					"w": 142,
-					"h": 52,
-					"ox": 0,
-					"oy": 0,
-					"sw": 142,
-					"sh": 52,
-					"ro": true
-				},
-				"sp_boom.png": {
-					"x": 754,
-					"y": 561,
-					"w": 94,
-					"h": 99,
-					"ox": 0,
-					"oy": 0,
-					"sw": 94,
-					"sh": 99,
-					"ro": true
-				},
-				"sp_milk.png": {
-					"x": 754,
-					"y": 657,
-					"w": 93,
-					"h": 93,
-					"ox": 0,
-					"oy": 0,
-					"sw": 93,
-					"sh": 93,
-					"ro": false
-				},
-				"clockBack.png": {
-					"x": 754,
-					"y": 752,
-					"w": 80,
-					"h": 91,
-					"ox": 0,
-					"oy": 0,
-					"sw": 80,
-					"sh": 91,
-					"ro": true
-				}
-			}
+			"name": "GameScene"
 		},
 		{
 			"keys": "Guide1.png,Guide2.png,Guide3.png,Guide4.png",
-			"name": "NewGuyScene",
-			"atlas": {
-				"Guide1.png": {
-					"x": 2,
-					"y": 2,
-					"w": 750,
-					"h": 1624,
-					"ox": 0,
-					"oy": 0,
-					"sw": 750,
-					"sh": 1624,
-					"ro": false
-				},
-				"Guide2.png": {
-					"x": 754,
-					"y": 2,
-					"w": 750,
-					"h": 1624,
-					"ox": 0,
-					"oy": 0,
-					"sw": 750,
-					"sh": 1624,
-					"ro": false
-				},
-				"Guide3.png": {
-					"x": 1506,
-					"y": 2,
-					"w": 750,
-					"h": 1624,
-					"ox": 0,
-					"oy": 0,
-					"sw": 750,
-					"sh": 1624,
-					"ro": false
-				},
-				"Guide4.png": {
-					"x": 2,
-					"y": 1628,
-					"w": 750,
-					"h": 1624,
-					"ox": 0,
-					"oy": 0,
-					"sw": 750,
-					"sh": 1624,
-					"ro": true
-				}
-			}
+			"name": "NewGuyScene"
 		},
 		{
 			"keys": "closebtn.png,giftBoxIcon.png,waitingBg.png,waitingRot.png",
-			"name": "common",
-			"atlas": {
-				"waitingBg.png": {
-					"x": 2,
-					"y": 2,
-					"w": 160,
-					"h": 180,
-					"ox": 0,
-					"oy": 0,
-					"sw": 160,
-					"sh": 180,
-					"ro": false
-				},
-				"giftBoxIcon.png": {
-					"x": 164,
-					"y": 2,
-					"w": 127,
-					"h": 125,
-					"ox": 0,
-					"oy": 0,
-					"sw": 127,
-					"sh": 125,
-					"ro": true
-				},
-				"waitingRot.png": {
-					"x": 2,
-					"y": 184,
-					"w": 56,
-					"h": 56,
-					"ox": 0,
-					"oy": 0,
-					"sw": 56,
-					"sh": 56,
-					"ro": false
-				},
-				"closebtn.png": {
-					"x": 60,
-					"y": 184,
-					"w": 52,
-					"h": 52,
-					"ox": 0,
-					"oy": 0,
-					"sw": 52,
-					"sh": 52,
-					"ro": false
-				}
-			}
+			"name": "common"
+		},
+		{
+			"keys": "rabbit0.spi",
+			"name": "spine"
+		},
+		{
+			"keys": "SpBoom.svga,boomSvga.svga,spSvga.svga",
+			"name": "svga"
 		}
 	],
-	// eslint-disable-next-line
-	"path": "https://yun.duiba.com.cn/db_games/activity/template/1670923535/resource/"
+	"path": "./resource/"
 }
\ No newline at end of file

src/components/DreamSvgaAni/DreamSvgaAni.tsx

+import { OriginalElementWidthEvents } from "../../Dream";
+
+export const DreamSvgaAni: OriginalElementWidthEvents<{
+  svgaData: any,
+  loop?: number,
+  loopEnd?: () => void
+}, FYGE.SvgaAni> = ({
+  svgaData,
+  loop = 0,
+  loopEnd = () => {}
+}) => {
+  const svgaIns = new FYGE.SvgaAni(svgaData)
+  svgaIns.play(loop, loopEnd)
+  return svgaIns
+}
\ No newline at end of file

src/scenes/GameScene/GameConfig.ts

@@ -14,8 +14,8 @@ export const GameConfig = {
   mapChangeAddSpeed: 10, // 切换地图就会 增加速度
   renderMapScreenNum: 200, //当卷轴 移动到视窗上面多少 会去生成地图
   rabbitConfig: {
-    offsetX: 10,
-    offsetY: -203,
+    offsetX: 70,
+    offsetY: 30,
   },
   DecisionLine: [
     // 判定线 当前屏幕显示区域
@@ -37,7 +37,7 @@ export const GameConfig = {
         [4, 0, 0, 5, 0],
         [0, 1, 1, 0, 1],
         [4, 3, 0, 1, 0],
-        [0, 1, 1, 0, 0],
+        [0, 1, 1, 1, 0],
         [5, 0, 0, 0, 1],
         [1, 0, 1, 1, 1],
         [0, 1, 0, 0, 5],

src/scenes/GameScene/GameScene.tsx

@@ -10,7 +10,7 @@ import { PromiseAwait } from "../../tools/Tools";
 import { GameConfig } from "./GameConfig";
 import { G_Events } from "./GameEvents";
 import { Platform } from "./Platform";
-import { RabbitPlayer } from "./Player";
+import { PlayerIns, RabbitActionMap, RabbitPlayer } from "./Player";
 import { ScoreBoard } from "./ScoreBoard";
 import { SpClock } from "./SpClock";
 
@@ -31,6 +31,8 @@ function randomPro(n: number) {
 @UsePreload({
   preAction: async function() {
     await RES.loadGroup('GameScene')
+    await RES.loadGroup('spine')
+    await RES.loadGroup('svga')
   }
 })
 export class GameScene extends Dream.RenderContainer {
@@ -46,7 +48,6 @@ export class GameScene extends Dream.RenderContainer {
   set mapCount(v) {
     this._mapCount = v;
     this.renderMapOffsetY = layers.stageOffsetY - GameConfig.renderMapScreenNum + (v - 1) * mapHeight
-    console.log('renderMapOffsetY:', this.renderMapOffsetY)
   }
 
   isPause: boolean = true
@@ -58,6 +59,9 @@ export class GameScene extends Dream.RenderContainer {
   SpClockIns: SpClock // 道具倒计时
   double: number = 1 // 是否双倍
 
+  rabbitIns: PlayerIns
+  cloneRabbitIns: PlayerIns
+
   set dir(v: number) {
     this.rabbitContainer.scaleX = v
     this.rabbitCloneContainer.scaleX = v
@@ -114,19 +118,28 @@ export class GameScene extends Dream.RenderContainer {
    * 游戏结束
    */
   onGameOver() {
+    this.onShowRabbitAni(RabbitActionMap.Fail)
+
     FYGE.Tween.removeTweens(this.rabbitContainer)
     this.isPause = true
 
     GDispatcher.dispatchEvent(G_Events.GameOver, this.ScoreBoardIns.score)
   }
 
+  /**
+   * 显示动画
+   */
+  onShowRabbitAni(aniName: RabbitActionMap, endAni?: RabbitActionMap) {
+    this.rabbitIns.showAni(aniName, endAni)
+    this.cloneRabbitIns.showAni(aniName, endAni)
+  }
+
   /**
    * 开始渲染地图
    * @param init 是否是初始化
    */
   renderMap(init: boolean = false) {
     console.info('=========render map ===========')
-
     const mapConfig = GameConfig.mapList[Math.random() * GameConfig.mapList.length >> 0]
     const {
       rowNum,
@@ -142,7 +155,10 @@ export class GameScene extends Dream.RenderContainer {
     // 地图平台数组
     const mapPlatform:Platform[][] = []
     this.GameMapContainer.addChildAt(
-      <DreamContainer className="mapContainer" inlineProps={{
+      <DreamContainer className="mapContainer" onRemoveFromStage={() => {
+        console.log(this.rabbitBoxMap)
+        console.log('remove!!!!')
+      }} inlineProps={{
         y: this.mapCount * rowNum * offsetYLen * -1
       }}>
         {
@@ -198,9 +214,16 @@ export class GameScene extends Dream.RenderContainer {
       </DreamContainer>
     , 0)
     this.mapCount += 1
+
     // 增加速度
     GameConfig.speed += GameConfig.mapChangeAddSpeed
     this.rabbitBoxMap.unshift(...mapPlatform)
+
+    // 第三章图片的话，清楚掉第一张地图
+    if (this.mapCount >= 3) {
+      this.rabbitBoxMap.splice(60)
+      this.GameMapContainer.removeChildAt(2)
+    }
   }
 
   /**
@@ -210,9 +233,12 @@ export class GameScene extends Dream.RenderContainer {
    */
   renderRabbit(pos: Pos) {
     if (this.rabbitContainer) return
-    // TODO Player 动作集
-    this.rabbitContainer = this.GameMapContainer.addChild(<RabbitPlayer />)
-    this.rabbitCloneContainer = this.GameMapContainer.addChild(<RabbitPlayer inlineProps={{
+    this.rabbitContainer = this.GameMapContainer.addChild(<RabbitPlayer getPlayer={p => {
+      this.rabbitIns = p
+    }} />)
+    this.rabbitCloneContainer = this.GameMapContainer.addChild(<RabbitPlayer getPlayer={p => {
+      this.cloneRabbitIns = p
+    }} inlineProps={{
       visible: false,
       className: 'clone'
     }} />)
@@ -221,7 +247,6 @@ export class GameScene extends Dream.RenderContainer {
       pos.y * offsetYLen
     )
     this.rabbitPos = pos
-    console.log(this.rabbitContainer)
   }
 
   lastTime: number = 0
@@ -279,15 +304,25 @@ export class GameScene extends Dream.RenderContainer {
       let landPlatform: Platform
       while(!(landPlatform = rabbitBoxMap[shouldY][willX])) {
         shouldY += 1
-        if (shouldY >= rabbitBoxMap.length - 1) {
+        if (shouldY >= rabbitBoxMap.length) {
           break
         }
       }
+
+      // TODO 如果找不到 下去的平台 直接不让跳吧
+      if (!landPlatform) {
+        resolve()
+        return
+      }
+
       // 这里之前提前改，否则会有时序问题
       this.rabbitPos = {
         x: willX,
         y: shouldY
       }
+
+      const afterCb = this.onPlatformLand(landPlatform)
+
       FYGE.Tween.removeTweens(rabbitContainer)
       if (rax == 4) {
         rabbitCloneContainer.visible = true
@@ -297,7 +332,7 @@ export class GameScene extends Dream.RenderContainer {
         rabbitCloneContainer.position.set(rabbitContainer.x + 750, rabbitContainer.y)
       }
       const sp = shouldY - ray
-      const downTime = 200 * (sp > 0 ? sp : 1)
+      const downTime = 300 // 200 * (sp > 0 ? sp : 1)
       FYGE.Tween.get(rabbitContainer, {
         onChange: () => {
           // rabbitContainer.x = (rabbitContainer.x + 750) % 750
@@ -306,7 +341,7 @@ export class GameScene extends Dream.RenderContainer {
       })
         .to({
           x: _willX * offsetXLen
-        }, 400 + downTime)
+        }, 600 + downTime)
       
       FYGE.Tween.get(rabbitContainer, {
         onChange: () => {
@@ -315,7 +350,7 @@ export class GameScene extends Dream.RenderContainer {
       })
         .to({
           y: Math.min(ry + sp * offsetYLen, ry) - 100
-        }, 400, FYGE.Ease.quadOut)
+        }, 600, FYGE.Ease.quadOut)
         .to({
           y: ry + sp * offsetYLen
         }, downTime, FYGE.Ease.quadIn)
@@ -326,7 +361,8 @@ export class GameScene extends Dream.RenderContainer {
             this.rabbitContainer = rabbitCloneContainer
             this.rabbitCloneContainer = rabbitContainer
           }
-          this.onPlatformLand(landPlatform)
+
+          afterCb()
           resolve()
         })
         
@@ -338,17 +374,34 @@ export class GameScene extends Dream.RenderContainer {
    * @param platform 
    */
   onPlatformLand(platform: Platform) {
-    platform.onLand((type: number, s: number) => {
+    let noop = () => {}
+
+    platform.onLand((type: number, s: number, cb: Function) => {
+      // pre 去做动作吧
       if (type == 3) {
-        return this.onGameOver()
+        this.onShowRabbitAni(RabbitActionMap.Jump, RabbitActionMap.Fail)
       } else if (type == 2) {
-        this.double = 2
-        this.SpClockIns.onShowCountDown(() => {
-          this.double = 1
-        })
+        this.onShowRabbitAni(RabbitActionMap.Jump, RabbitActionMap.Smile)
+      } else {
+        this.onShowRabbitAni(RabbitActionMap.Jump, RabbitActionMap.Normal)
+      }
+
+      // 落地的回调
+      noop = () => {
+        cb()
+        if (type == 3) {
+          return this.onGameOver()
+        } else if (type == 2) {
+          this.double = 2
+          this.SpClockIns.onShowCountDown(() => {
+            this.double = 1
+          })
+        }
+        this.onAddScore(s)
       }
-      this.onAddScore(s)
     })
+
+    return noop
   }
 
   /**

src/scenes/GameScene/Platform.tsx

 import { DreamContainer } from "../../components/DreamContainer/DreamContainer";
 import { DreamSprite } from "../../components/DreamSprite/DreamSprite";
+import { DreamSvgaAni } from "../../components/DreamSvgaAni/DreamSvgaAni";
 import { DreamTextField } from "../../components/DreamTextField/DreamTextField";
 import Dream from "../../Dream";
 import { fadeOutUpFactory } from "../../modules/animations";
@@ -13,13 +14,36 @@ export class Platform extends Dream.RenderContainer<{
 }> {
   private isLanded: boolean = false // 是否被踩过
   private spCont: FYGE.Container
-  onLand(cb?: (type: number, s: number) => void) {
-    if (this.isLanded) return
+  PlatformContainer: FYGE.Container
+  onLand(cb?: (type: number, s: number, afterCb: Function) => void) {
+
+    const ctype = this.isLanded ? 1 : this.props.type
+    cb && cb(ctype, this.isLanded ? 0 : GameConfig.landPlatformScore, () => {
+      if (ctype !== 1 && this.spCont) {
+        // fadeOutUpFactory(500)(this.spCont)
+        this.spCont.visible = false
+        if (ctype == 3) {
+          const atom = new FYGE.SvgaAni(RES.getRes('boomSvga.svga'))
+          atom.position.set(-50, -162)
+          atom.play(1, () => {
+            atom.parent.removeChild(atom)
+          })
+          this.PlatformContainer.addChild(
+            atom
+          )
+        } else if (ctype == 2) {
+          const atom = new FYGE.SvgaAni(RES.getRes('spSvga.svga'))
+          atom.position.set(-100, -320)
+          atom.play(1, () => {
+            atom.parent.removeChild(atom)
+          })
+          this.PlatformContainer.addChild(
+            atom
+          )
+        }
+      }
+    })
     this.isLanded = true
-    if (this.spCont) {
-      fadeOutUpFactory(500)(this.spCont)
-    }
-    cb && cb(this.props.type, GameConfig.landPlatformScore)
   }
 
   /**
@@ -33,17 +57,21 @@ export class Platform extends Dream.RenderContainer<{
         y: -100
       }} src={RES.getRes('sp_milk.png')} />
     } else if (this.props.type == 3) {
-      return this.spCont = <DreamSprite inlineProps={{
-        x: 20,
-        y: -90
-      }} src={RES.getRes('sp_boom.png')} />
+      return this.spCont = <DreamSvgaAni
+        inlineProps={{
+          x: 20,
+          y: -85
+        }}
+      svgaData={RES.getRes('SpBoom.svga')} />
     }
   }
 
   render() {
     const backRes = RES.getRes('platform.png')
     return (
-      <DreamContainer inlineProps={{
+      <DreamContainer ref={el => {
+        this.PlatformContainer = el
+      }} inlineProps={{
         x: this.props.x || 0
       }}>
         <DreamSprite src={backRes} inlineProps={{

src/scenes/GameScene/Player.tsx

 import { DreamContainer } from "../../components/DreamContainer/DreamContainer";
+import { DreamSpine, setSpineAni } from "../../components/DreamSpine/DreamSpine";
 import { DreamSprite } from "../../components/DreamSprite/DreamSprite";
 import Dream from "../../Dream";
 import { RES } from "../../modules/RES";
+import { Tools } from "../../tools/Tools";
 import { GameConfig } from "./GameConfig";
 
+export enum RabbitActionMap {
+  Normal = 'daijizc',
+  Smile = 'daijizcxiao',
+  Fail = 'daijiku',
+  Jump = 'jump'
+}
+
+export type PlayerIns = {
+  showAni: (a: RabbitActionMap, b?: RabbitActionMap) => Promise<any>
+}
+
 export class RabbitPlayer extends Dream.RenderContainer<{
-  inlineProps?: Record<string, any>
+  inlineProps?: Record<string, any>,
+  getPlayer?: (p: PlayerIns) => void
 }> {
+  spinePlayer: FYGE.Spine
+  currAniName: RabbitActionMap
+
+  didRendered(): void {
+    this.props.getPlayer && this.props.getPlayer({
+      showAni: (aniName: RabbitActionMap, endAni?: RabbitActionMap) => {
+        this.currAniName = aniName
+        return new Promise<void>(resolve => {
+          setSpineAni(this.spinePlayer, aniName, endAni ? 1 : 0, () => {
+            endAni && setSpineAni(this.spinePlayer, endAni)
+            resolve()
+          })
+        })
+      }
+    })
+  }
+
   render() {
+    const spineData = RES.getRes('rabbit0.spi')
+
     return (
       <DreamContainer inlineProps={{
         ...this.props.inlineProps,
@@ -17,7 +50,13 @@ export class RabbitPlayer extends Dream.RenderContainer<{
           x: GameConfig.rabbitConfig.offsetX,
           y: GameConfig.rabbitConfig.offsetY
         }}>
-          <DreamSprite src={RES.getRes('rabbit.png')} />
+          {/* <DreamSprite src={RES.getRes('rabbit.png')} /> */}
+          <DreamSpine ref={el => {
+            this.spinePlayer = el
+          }} spineData={spineData}
+            aniName={"daijizc"}
+            skinName={Tools.PageData.skinName}
+          />
         </DreamContainer>
       </DreamContainer>
     )

src/tools/Tools.ts

 export class Tools {
   static PageData: {
     isFirstGame: boolean
+    skinName: string
   } = {
-    isFirstGame: false
+    isFirstGame: false,
+    skinName: ''
   }
 }