Step3

加減速做完了

assets/Prefab/Column.prefab

@@ -523,6 +523,8 @@
     },
     "_enabled": true,
     "gameModule": null,
+    "rollMinSpeed": 1,
+    "rollMaxSpeed": 15,
     "_id": ""
   },
   {

assets/Script/columnControl.ts

@@ -1,13 +1,16 @@
 
 const {ccclass, property} = cc._decorator;
 
-import {gameMY, moduleState} from './gameModule';
+import {gameMY, moduleState, columnCondition} from './gameModule';
 
 
 export enum columnState {
     Ready = 1,
-    Spining = 2,
+    Start = 2,
-    Stopping = 3,
+    Delay = 3,
+    Spining = 4,
+    Slowing = 5,
+    Stopping = 6,
 
 
     EngStop = 99,
@@ -25,88 +28,168 @@ export class columnControl extends cc.Component {
     gameModule: cc.Node;
 
     @property(Number)
-    rollSpeed:number = 1;
+    rollMinSpeed:number = 1;
 
-    // private nowAction = null;
+    @property(Number)
-    private columnItem: Array<number> = [];
+    rollMaxSpeed:number = 10;
-    private itemList:Array<number>;
+
+    private itemPool:Array<number>;  // 全部的 item 對應
+    private waitingList:Array<number> = []; // 預計要顯示的item
+    private finalList:Array<number> = []; // 預計要停下的item
+    private currentList:Array<number> = []; // 現在正在顯示的item
+    private speedFactor:number = 0; // 調速用變數
+    private N:number; // 調速用變數
+    private M:number; // 調速用變數
+    private t:number; // 調速用變數
     private gameModuleScript:gameMY;
-    nowState:columnState;
+    nowState:columnState; // 狀態機previousState
+    spinCondition:columnCondition; // 從 gameModule 吃過來的旋轉資訊
 
 
     protected onLoad () {
+        // 一些防呆
+        if(this.rollMaxSpeed < this.rollMinSpeed) throw new Error('rollMaxSpeed need to greater than rollMinSpeed');
+
         this.gameModuleScript = this.gameModule.getComponent('gameMY');
     }
 
     protected start () {
 
-        this.itemList = Object.values(this.gameModuleScript.itemNameMapping);
+        this.itemPool = Object.values(this.gameModuleScript.itemNameMapping);
 
         // column 位置初始化
         this.node.y = this.gameModuleScript.itemSize;
 
         // 隨機初始化 item 圖片
         for(let i=0;i<this.node.childrenCount;i++){
-            let a = this.itemList[Math.floor(Math.random() * 12)];
+            let a = this.itemPool[Math.floor(Math.random() * 12)];
-            this.columnItem.push( a );
+            this.currentList.push( a );
             this.node.children[i].getComponent(cc.Sprite).spriteFrame = this.gameModuleScript.item_spriteFrame[a]
         }
 
+        this.t = 0;
  
         this.nowState = columnState.Ready;
     }
 
     protected update (dt) {
 
-        let dY = Math.ceil(this.rollSpeed * this.gameModuleScript.itemSize * dt)
+        // let dY = Math.ceil(this.rollMinSpeed * this.gameModuleScript.itemSize * dt);
+        let dY = this.speedFactor * (this.rollMaxSpeed - this.rollMinSpeed) + this.rollMinSpeed;
+        dY = Math.ceil(dY * this.gameModuleScript.itemSize * dt);
+
+        this.t += dt;
+
 
         switch(this.nowState){
             case columnState.Ready:
                 //狀態檢查與更新
-                if(this.gameModuleScript.nowState == moduleState.Spining){
+                if(this.gameModuleScript.nowState == moduleState.SetSpin){
-                    this.nowState = columnState.Spining;
+                    this.nowState = columnState.Start;
                 }
                 break;
+            case columnState.Start:
+                this.spinCondition = this.gameModuleScript.columnConditionList[this.node.name];
+                this.finalList = [...this.spinCondition.finalResult];
+                this.N = this.spinCondition.N;
+                this.M = 0.25 * (this.rollMaxSpeed - this.rollMinSpeed) * this.spinCondition.slowdownTime * Math.PI;
+                this.M += this.rollMinSpeed * this.spinCondition.slowdownTime;
+                this.M = Math.max(this.M, 4)  // 防呆 預防 M 小於 3
+
+                // cc.log(this.M) // dev
+
+                this.nowState = columnState.Delay; 
+                setTimeout(()=>{ 
+                    this.nowState = columnState.Spining; 
+                    this.gameModule.emit("AColumnStart", this.node.name);
+                    this.t = 0;
+                }, this.spinCondition.delayTime);
+
+                break;
+            case columnState.Delay:
+                cc.log("this is delay inside : " + this.node.name) // dev
+                break;
             case columnState.Spining:
+            case columnState.Slowing:
+                this.speedFactor = this.updateSpeedFactor(this.t);
                 if(this.node.y - dY <= 0){
+                    //移動位置
                     this.node.y = this.node.y + this.gameModuleScript.itemSize - dY;
-                    //更新圖片
+                    //更新圖片與狀態變化
-                    this.prepareNextItem();
+                    this.updateShowItem(); 
-                    for(let i=0;i<this.columnItem.length;i++){
-                        this.node.children[i].getComponent(cc.Sprite).spriteFrame = this.gameModuleScript.itemBlur_spriteFrame[this.columnItem[i]];
-                    }
-                    //狀態檢查與更新
-                    if(this.gameModuleScript.nowState == moduleState.Stopping){
-                        this.nowState = columnState.Stopping;
-                    }
                 }else{this.node.y -= dY;}
                 break;
             case columnState.Stopping:
+                this.speedFactor = this.updateSpeedFactor(this.t);
                 if(this.node.y - dY <= 0){
+                    //移動位置
                     this.node.y = this.gameModuleScript.itemSize;
-                    //更新圖片
+                    //更新圖片與狀態變化
-                    this.prepareNextItem();
+                    this.updateShowItem(); 
-                    for(let i=0;i<this.columnItem.length;i++){
-                        this.node.children[i].getComponent(cc.Sprite).spriteFrame = this.gameModuleScript.item_spriteFrame[this.columnItem[i]];
-                    }
-                    this.gameModule.emit("AColumnStop")
                     //狀態檢查與更新
                     this.nowState = columnState.Ready; // 狀態復歸
 
+                    this.gameModule.emit("AColumnStop", this.node.name)
                 }else{this.node.y -= dY;}
                 break;
             case columnState.EngStop:
-                // To Nothing just stop whole column
+                // To Nothing just pending whole column
                 break;
         }
     }
 
-    prepareNextItem() {
+    temp = 0; //dev
-        let a = this.itemList[Math.floor(Math.random() * this.itemList.length)];
+    updateShowItem() {
-        this.columnItem.unshift( a );
+
-        this.columnItem.pop();
+        let a:number;
+        a = this.itemPool[Math.floor(Math.random() * this.itemPool.length)];
+
+        this.temp+=1;
+        // 持平階段會計數 N 值
+        if((this.t > this.spinCondition.accelerateTime) && (this.nowState == columnState.Spining)) 
+            {this.N -= 1;}
+
+        // 減速階段會計數 M 值
+        if(this.nowState == columnState.Slowing) this.M -= 1;
+
+        // M小於3了，就出最終 item
+        if(this.M <= 3 && this.M > 0 && this.nowState == columnState.Slowing) {
+            a = this.finalList.pop();
+        }
+
+        // N歸零了，進到減速階段
+        if(this.N == 0 && this.nowState == columnState.Spining) {
+            this.nowState = columnState.Slowing;
+            this.t = 0
+        // 最終 item 結束，進到停止階段。
+        } else if(this.finalList.length == 0) {
+            this.nowState = columnState.Stopping;}
+        
+
+        this.currentList.unshift( a );
+        this.currentList.pop();
+
+        for(let i=0;i<this.currentList.length;i++){
+            this.node.children[i].getComponent(cc.Sprite).spriteFrame = this.gameModuleScript.item_spriteFrame[this.currentList[i]];
+        }
     }
 
+    updateSpeedFactor(t){
+        let result = 0;
+        if((this.nowState == columnState.Spining)&&(t < this.spinCondition.accelerateTime)){
+            result = 1 - ( Math.pow(t - this.spinCondition.accelerateTime,2) / Math.pow(this.spinCondition.accelerateTime,2) );
+            result = Math.pow(result,0.5);
+        }else if((this.nowState == columnState.Spining)&&(t > this.spinCondition.accelerateTime)){
+            result = 1;
+        }else if((this.nowState == columnState.Slowing)&&(t < this.spinCondition.slowdownTime)){
+            result = 1 - ( Math.pow(t,2) / Math.pow(this.spinCondition.slowdownTime,2) );
+            result = Math.pow(result,0.5);
+        }else{
+            result = 0;
+        }
+
+        return result;
+    }
 
 }
 

assets/Script/engineerFunction.ts

@@ -1,8 +1,8 @@
 
 const {ccclass, property} = cc._decorator;
 
-import {gameMY} from './gameModule';
+import {gameMY, moduleState, columnCondition} from './gameModule';
-import {columnControl} from './columnControl';
+import {columnControl, columnState} from './columnControl';
 
 
 
@@ -23,6 +23,14 @@ export default class NewClass extends cc.Component {
     private gameModuleScript;
     private columnControlScript;
 
+    spinCondition:columnCondition = {        
+        finalResult:[3,2,1],
+        delayTime:100,
+        accelerateTime:0.5,
+        slowdownTime:0.5,
+        holdspeedTime:0.5,
+        N:2}; 
+
     protected onLoad () {
         cc.log("this is ee onLoad");
         // 呼叫其他 script 的方法或資源
@@ -37,6 +45,7 @@ export default class NewClass extends cc.Component {
     protected start () {
         cc.log("this is ee start");
         this.secCounter = 0; 
+        // this.columnControlScript.spinCondition = this.spinCondition;
     }
 
     tempValue = true
@@ -53,7 +62,24 @@ export default class NewClass extends cc.Component {
             }
         }
 
-        if(this.secCounter >= 5) {
+        // if(this.secCounter >= 5) {
+        //     cc.log("engineer Function Update : " + this.fpsCount)
+        //     this.secCounter = 0
+        //     this.fpsCount = 0
+        // }   
+        // cc.log(dt)
+
+        if(this.test7on){
+
+            if(this.secCounter > 2){
+                this.columnControlScript.nowState = columnState.Slowing;
+                this.secCounter = 0;
+            }
+
+            let a = this.columnControlScript.updateSpeedFactor(this.secCounter);
+            cc.log("SF:" + a + ". T:" + this.secCounter);
+
+        }else if(this.secCounter >= 5){
             cc.log("engineer Function Update : " + this.fpsCount)
             this.secCounter = 0
             this.fpsCount = 0
@@ -77,12 +103,12 @@ export default class NewClass extends cc.Component {
     unitTest3():void {
 
         // @ts-ignore
-        this.itemList = Object.values(this.gameModuleScript.itemNameMapping)
+        this.itemPool = Object.values(this.gameModuleScript.itemNameMapping)
 
         for(let i=0;i<this.columnControl.childrenCount;i++){
-            let a = this.itemList[Math.floor(Math.random() * 12)];
+            let a = this.itemPool[Math.floor(Math.random() * 12)];
-            this.columnControlScript.columnItem.pop( a );
+            this.columnControlScript.currentList.pop( a );
-            this.columnControlScript.columnItem.unshift( a );
+            this.columnControlScript.currentList.unshift( a );
             let c = this.gameModuleScript.item_spriteFrame[a]
             this.columnControl.children[i].getComponent(cc.Sprite).spriteFrame = c
         }
@@ -105,7 +131,49 @@ export default class NewClass extends cc.Component {
         
     }
 
+    test6():void {
+        // this.columnControl.active = false;
+        this.columnControlScript.spinCondition = this.spinCondition;
+        this.columnControlScript.finalList = [...this.spinCondition.finalResult];
+        this.columnControlScript.N = this.spinCondition.N;
+        this.columnControlScript.nowState = columnState.Delay; 
+        setTimeout(()=>{ 
+            this.columnControlScript.nowState = columnState.Spining; 
+        }, this.spinCondition.delayTime);
+    }
 
+    test7on:boolean = false;
+    test7():void {
+        this.test7on = !this.test7on;
+        this.secCounter = 0
+    }
+
+
+    otherLoadingMethod(){
+
+        const symbol = {
+            1: 'item_01',
+            2: 'item_02',
+            3: 'item_03',
+            4: 'item_04',
+            5: 'item_a',
+            6: 'item_k',
+            7: 'item_q',
+            8: 'item_j',
+            9: 'item_9',
+            10: 'item_10',
+            11: 'item_scatter',
+            12: 'item_wild',
+        }
+
+        const symbolSpriteList: Map<string, cc.SpriteFrame> = new Map()
+
+        Object.keys(symbol).forEach((k, i) => {
+            cc.resources.load(`poker/cat/${symbol[k]}`, cc.SpriteFrame, (err, sp: cc.SpriteFrame) => {
+                symbolSpriteList.set(k, sp)
+            })
+        })
+    }
 
 
 

assets/Script/gameModule.ts

@@ -13,11 +13,23 @@ export enum moduleState {
         INIT1 = 0,
         INIT2 = 1,
         Ready = 2,
-        Spining = 3,
+        SetSpin = 3,
-        Stopping = 4,
+        Spining = 4,
+        Stopping = 5,
 
     };
 
+export interface columnCondition {
+        finalResult:Array<number>; // 預期的最後結果 可為空
+        delayTime:number; // 轉動前的延遲 單位 ms
+        accelerateTime:number; // 加速時間  單位 s
+        slowdownTime:number; // 減速時間 單位 s
+        holdspeedTime:number; // delete
+        N:number; // 持平速度的item數量    (-1 表示永動 需要手動停)
+    };
+
+
+
 @ccclass("gameMY")
 export class gameMY extends cc.Component {
 
@@ -49,9 +61,14 @@ export class gameMY extends cc.Component {
     private balanceNumber: number;
     private bigFrameNumber: number;
 
-    private stopCount:number;
+    private isColumnSpin = {}; // 記錄各個 column 的是否旋轉
+    private columnsID: Array<string> = []; // 記錄各個 column 的 node name
+
+    keepSpin:boolean = false;
 
-    nowState: moduleState = 0;
+    columnConditionList = {};   // 放置所有 column spin codition
+
+    nowState: moduleState = moduleState.INIT1; // 狀態機
 
     // item 圖片資源存放區
     itemNameMapping = {
@@ -69,17 +86,17 @@ export class gameMY extends cc.Component {
 
         this.unitTestInit(); // for engineer use
 
-        this.onColumnsSignal()
+        this.onColumnsSignal();
 
         // 讀取 item 圖片資源
         cc.resources.loadDir('item',cc.SpriteFrame, (err: any, sF) => {
             sF.forEach( (eachSpriteFrame)=>{
-                this.item_spriteFrame[ this.itemNameMapping[eachSpriteFrame.name] ] = eachSpriteFrame
+                this.item_spriteFrame[ this.itemNameMapping[eachSpriteFrame.name] ] = eachSpriteFrame;
             })
         } );
         cc.resources.loadDir('item_blur',cc.SpriteFrame, (err: any, sF) => {
             sF.forEach( (eachSpriteFrame)=>{
-                this.itemBlur_spriteFrame[ this.itemNameMapping[eachSpriteFrame.name] ] = eachSpriteFrame
+                this.itemBlur_spriteFrame[ this.itemNameMapping[eachSpriteFrame.name] ] = eachSpriteFrame;
             })
         } );
 
@@ -90,15 +107,17 @@ export class gameMY extends cc.Component {
     protected start () {
         this.betNumber = 50;
         
-        this.slotBoard.addChild( cc.instantiate(this.columnPrefab), 1 )
+        this.slotBoard.children[0].name = "0";
-        this.slotBoard.addChild( cc.instantiate(this.columnPrefab), 2 )
+        this.slotBoard.addChild( cc.instantiate(this.columnPrefab), 1 , "1");
-        this.slotBoard.addChild( cc.instantiate(this.columnPrefab), 3 )
+        this.slotBoard.addChild( cc.instantiate(this.columnPrefab), 2 , "2");
-        this.slotBoard.addChild( cc.instantiate(this.columnPrefab), 4 )
+        this.slotBoard.addChild( cc.instantiate(this.columnPrefab), 3 , "3");
-
+        this.slotBoard.addChild( cc.instantiate(this.columnPrefab), 4 , "4");
     }
 
     protected update (dt) {
 
+        let isAnySpin:boolean = false;
+        let isAllSpin:boolean = true;
         switch(this.nowState){
             case moduleState.INIT1:
                 // 檢查圖片載入完成後
@@ -114,19 +133,45 @@ export class gameMY extends cc.Component {
                 break;
             case moduleState.INIT2:
                 for(let i=0; i<this.columnCount; i++){
-                    cc.log(this.slotBoard.children[i].x)
+                    this.columnsID.push(this.slotBoard.children[i].name); // 直接取位置資訊當ID    
+                    this.isColumnSpin[this.slotBoard.children[i].name] = false;
                 }
+                this.simulateCondition(); // dev
+                // cc.log(this.columnsID) // dev
+                // cc.log(this.isColumnSpin) // dev
                 this.nowState = moduleState.Ready;
                 break;
             case moduleState.Ready:
                 break;
+            case moduleState.SetSpin:
+                Object.values(this.isColumnSpin).forEach((x:boolean)=>{
+                    isAllSpin = isAllSpin && x;
+                });
+                if(isAllSpin) {
+                    this.nowState = moduleState.Spining;
+                    // TODO: 避免重複使用 columnConditionList 應該適當處理
+                }
+                break;
             case moduleState.Spining:
-                this.stopCount = 0;
+                Object.values(this.isColumnSpin).forEach((x:boolean)=>{
+                    isAnySpin = isAnySpin || x;
+                });
+                if( !isAnySpin ){
+                    if(this.keepSpin){
+                        // get new condition
+                        this.nowState = moduleState.SetSpin;
+                        break;
+                    }else{
+                        this.nowState = moduleState.Stopping;
+                    }
+                }
                 break;
             case moduleState.Stopping:
-                if(this.stopCount == 5){
+                Object.values(this.isColumnSpin).forEach((x:boolean)=>{
-                    this.nowState = moduleState.Ready;
+                    isAnySpin = isAnySpin || x;
-                }
+                });
+                if( !isAnySpin ) this.nowState = moduleState.Ready;
+                
                 break;
             default:
                 break;
@@ -144,16 +189,15 @@ export class gameMY extends cc.Component {
         else{
             this.betNumber -= 50;
         }
-        this.betString.string = "" + this.betNumber
+        this.betString.string = "" + this.betNumber;
 
     }
 
-
     onSpinBtnClick():void {
 
         switch(this.nowState){
             case moduleState.Ready:
-                this.nowState = moduleState.Spining;
+                this.nowState = moduleState.SetSpin;
                 break;
             case moduleState.Spining:
                 this.nowState = moduleState.Stopping;
@@ -166,9 +210,13 @@ export class gameMY extends cc.Component {
     }
 
     onColumnsSignal():void {
-        this.node.on('AColumnStop', ()=>{
+        this.node.on('AColumnStop', (ID)=>{
-            this.stopCount += 1;
+            this.isColumnSpin[ID] = false;
         }, this)
+
+        this.node.on('AColumnStart',(ID)=>{
+            this.isColumnSpin[ID] = true;
+        } ,this)
     }
 
 
@@ -178,11 +226,23 @@ export class gameMY extends cc.Component {
 
 
 
+    simulateCondition():void {
+        for(let i=0; i<this.columnCount; i++){
+            let a:columnCondition = {        
+                finalResult:[i+1,i+1,i+1],
+                delayTime:200*i,
+                accelerateTime:5,
+                slowdownTime:2,
+                holdspeedTime:0.5,
+                N:3}
+            this.columnConditionList[this.columnsID[i]]=a
+        }
+    }
 
     unitTestInit():void {
         // for unitTest 1
         this.node.on('Bob', (arg1)=>{
-            cc.log("gameModule Recieve Bob say " + arg1)
+            cc.log("gameModule Recieve Bob say " + arg1);
         }, this)
     }