Step_2 (Save Version)

順利轉動，可透過spin按鈕開始跟停下。

assets/Script/columnControl.ts

@@ -1,12 +1,16 @@
 
 const {ccclass, property} = cc._decorator;
 
-import {gameMY} from './gameModule';
+import {gameMY, moduleState} from './gameModule';
 
 
-// const eventTarget = new cc.EventTarget();
+export enum columnState {
+    Ready = 1,
+    Spining = 2,
+    Stopping = 3,
 
-enum columnState {
+
+    EngStop = 99,
 
 }
 
@@ -20,15 +24,14 @@ export class columnControl extends cc.Component {
     @property((cc.Node))
     gameModule: cc.Node;
 
-    private nowAction = null;
+    @property(Number)
+    rollSpeed:number = 1;
+
+    // private nowAction = null;
     private columnItem: Array<number> = [];
     private itemList:Array<number>;
-    private gameModuleScript;
+    private gameModuleScript:gameMY;
-
+    nowState:columnState;
-    actionSet = {
-        "stayPosition": cc.moveTo(0, new cc.Vec2(0, 240)),
-        "rollingUp2Button": cc.sequence(cc.moveTo(0, new cc.Vec2(0, 240)), cc.moveBy(1.5, new cc.Vec2(0, -240))),
-    };
 
 
     protected onLoad () {
@@ -36,57 +39,77 @@ export class columnControl extends cc.Component {
     }
 
     protected start () {
-        cc.log("this columnControl start");
 
         this.itemList = 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)];
-            this.columnItem.unshift( a );
+            this.columnItem.push( a );
             this.node.children[i].getComponent(cc.Sprite).spriteFrame = this.gameModuleScript.item_spriteFrame[a]
         }
 
-        this.nowAction = this.node.runAction(this.actionSet["stayPosition"]);
         
+        this.nowState = columnState.Ready;
     }
 
     protected update (dt) {
-        if(this.nowAction.isDone() == true) {
-            let a = this.itemList[Math.floor(Math.random() * 12)];
-            this.columnItem.unshift( a );
-            this.columnItem.pop();
-
-            //換圖
-            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.nowAction = this.node.runAction(this.actionSet["rollingUp2Button"]);
-        }else{
 
+        let dY = Math.ceil(this.rollSpeed * this.gameModuleScript.itemSize * dt)
+
+        switch(this.nowState){
+            case columnState.Ready:
+                //狀態檢查與更新
+                if(this.gameModuleScript.nowState == moduleState.Spining){
+                    this.nowState = columnState.Spining;
+                }
+                break;
+            case columnState.Spining:
+                if(this.node.y - dY <= 0){
+                    this.node.y = this.node.y + this.gameModuleScript.itemSize - dY;
+                    //更新圖片
+                    this.prepareNextItem();
+                    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:
+                if(this.node.y - dY <= 0){
+                    this.node.y = this.gameModuleScript.itemSize;
+                    //更新圖片
+                    this.prepareNextItem();
+                    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; // 狀態復歸
+
+                }else{this.node.y -= dY;}
+                break;
+            case columnState.EngStop:
+                // To Nothing just stop whole column
+                break;
         }
+    }
 
-    
+    prepareNextItem() {
-
+        let a = this.itemList[Math.floor(Math.random() * this.itemList.length)];
-
+        this.columnItem.unshift( a );
-
+        this.columnItem.pop();
     }
 
 
 }
 
 
-        // 用 tween 做動畫
-        // cc.tween(b)
-        //     .to(1, { position: cc.v2(100, 0), rotation: 360 })
-        //     .to(1, { position: cc.v2(0, 0), rotation: 0 })
-        //     // .to(1, { scale: 2 })
-        //     .start()
 
-        // 用 Action 做動畫
-        // var seq = cc.sequence(cc.moveBy(1.5, cc.Vec2(100, 50)), cc.moveBy(1.5, cc.Vec2(-100, -50)));
-        // b.runAction(this.seq)
-        // c.runAction(this.seq) // 失敗 seq 不能一次賦予兩個物件一樣動作
-        // this.bigFrameString.node.runAction(seq)
         

assets/Script/engineerFunction.ts

@@ -17,7 +17,8 @@ export default class NewClass extends cc.Component {
     @property((cc.Node))
     columnControl: cc.Node = null;
 
-    private secCounter: number;
+    private secCounter: number = 0;
+    private fpsCount: number = 0;
 
     private gameModuleScript;
     private columnControlScript;
@@ -42,18 +43,20 @@ export default class NewClass extends cc.Component {
 
     protected update (dt) {
         this.secCounter += dt;
+        this.fpsCount += 1;
 
         // 測試 cc.resources.loadDir 載入時間 ==> 結論: 約需要 0.2~0.5秒
         if(this.tempValue){
             if(!(Object.keys(this.gameModuleScript.item_spriteFrame).length === 0)){
-                cc.log(" empty to full : " + this.secCounter)
+                cc.log(" .loadDir Complete : " + this.secCounter)
                 this.tempValue = false
             }
         }
 
         if(this.secCounter >= 5) {
-            cc.log("engineer Function Update : " + this.secCounter)
+            cc.log("engineer Function Update : " + this.fpsCount)
             this.secCounter = 0
+            this.fpsCount = 0
         }   
 
     } 
@@ -78,10 +81,74 @@ export default class NewClass extends cc.Component {
 
         for(let i=0;i<this.columnControl.childrenCount;i++){
             let a = this.itemList[Math.floor(Math.random() * 12)];
-            this.columnControlScript.columnItem.push( a );
+            this.columnControlScript.columnItem.pop( a );
+            this.columnControlScript.columnItem.unshift( a );
             let c = this.gameModuleScript.item_spriteFrame[a]
             this.columnControl.children[i].getComponent(cc.Sprite).spriteFrame = c
         }
         
     }
+
+    test4():void {
+        this.node.getChildByName('UT4').y += 100;
+        cc.log("markA")
+    }
+
+    tempColumnState:any;
+    test5():void {
+        if(this.columnControlScript.nowState == 99){
+            this.columnControlScript.nowState = this.tempColumnState;
+        }else{
+            this.tempColumnState = this.columnControlScript.nowState;
+            this.columnControlScript.nowState = 99;
+        }
+        
+    }
+
+
+
+
+
 }
+
+
+
+    // 棄置的扣
+
+    // 動畫相關
+
+    // actionSet = {
+    //     "stayPosition": cc.moveTo(0, new cc.Vec2(0, 240)),
+    //     "rollingUp2Button": cc.sequence(cc.moveTo(0, new cc.Vec2(0, 240)), cc.moveBy(1.5, new cc.Vec2(0, -240))),
+    // };
+
+            // if(this.nowAction.isDone() == true) {
+            // let a = this.itemList[Math.floor(Math.random() * 12)];
+            // this.columnItem.unshift( a );
+            // this.columnItem.pop();
+
+            // //換圖
+            // 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.nowAction = this.node.runAction(this.actionSet["rollingUp2Button"]);
+        // }else{
+
+        // }
+
+            // 用 tween 做動畫
+        // cc.tween(b)
+        //     .to(1, { position: cc.v2(100, 0), rotation: 360 })
+        //     .to(1, { position: cc.v2(0, 0), rotation: 0 })
+        //     // .to(1, { scale: 2 })
+        //     .start()
+        
+        // 用 Action 做動畫
+        // var seq = cc.sequence(cc.moveBy(1.5, cc.Vec2(100, 50)), cc.moveBy(1.5, cc.Vec2(-100, -50)));
+        // b.runAction(this.seq)
+        // c.runAction(this.seq) // 失敗 seq 不能一次賦予兩個物件一樣動作
+        // this.bigFrameString.node.runAction(seq)
+
+

assets/Script/gameModule.ts

@@ -9,8 +9,12 @@ const {ccclass, property, } = cc._decorator;
 
 
 
-enum moduleState {
+export enum moduleState {
-        "INIT",
+        INIT1 = 0,
+        INIT2 = 1,
+        Ready = 2,
+        Spining = 3,
+        Stopping = 4,
 
     };
 
@@ -18,10 +22,10 @@ enum moduleState {
 export class gameMY extends cc.Component {
 
     @property
-    columnCount = 5;
+    columnCount:number = 5;
 
     @property
-    itemSize = 240;
+    itemSize:number = 240;
 
     @property(cc.Label)
     betString: cc.Label = null;
@@ -32,7 +36,6 @@ export class gameMY extends cc.Component {
     @property(cc.Label)
     balanceString: cc.Label = null;
 
-
     @property({type: cc.Prefab})
     columnPrefab: cc.Prefab | null = null;
 
@@ -46,6 +49,10 @@ export class gameMY extends cc.Component {
     private balanceNumber: number;
     private bigFrameNumber: number;
 
+    private stopCount:number;
+
+    nowState: moduleState = 0;
+
     // item 圖片資源存放區
     itemNameMapping = {
         'item_01':1, 'item_02':2, 'item_03':3, 'item_04':4, 'item_9':5, 
@@ -56,13 +63,14 @@ export class gameMY extends cc.Component {
     item_spriteFrame = {};
     itemBlur_spriteFrame = {};
 
-    init_Complete:boolean = false 
     
-    protected onLoad () {
 
+    protected onLoad () {
 
         this.unitTestInit(); // for engineer use
 
+        this.onColumnsSignal()
+
         // 讀取 item 圖片資源
         cc.resources.loadDir('item',cc.SpriteFrame, (err: any, sF) => {
             sF.forEach( (eachSpriteFrame)=>{
@@ -82,26 +90,48 @@ export class gameMY extends cc.Component {
     protected start () {
         this.betNumber = 50;
         
-        this.slotBoard.addChild( cc.instantiate(this.columnPrefab) )
+        this.slotBoard.addChild( cc.instantiate(this.columnPrefab), 1 )
-        this.slotBoard.addChild( cc.instantiate(this.columnPrefab) )
+        this.slotBoard.addChild( cc.instantiate(this.columnPrefab), 2 )
-        this.slotBoard.addChild( cc.instantiate(this.columnPrefab) )
+        this.slotBoard.addChild( cc.instantiate(this.columnPrefab), 3 )
-        this.slotBoard.addChild( cc.instantiate(this.columnPrefab) )
+        this.slotBoard.addChild( cc.instantiate(this.columnPrefab), 4 )
 
     }
 
     protected update (dt) {
 
-        if(!this.init_Complete){
+        switch(this.nowState){
-            // 完成圖片載入再啟動 column
+            case moduleState.INIT1:
-            if((Object.keys(this.item_spriteFrame).length === 12)){
+                // 檢查圖片載入完成後
-                for(let i=0;i<=5;i++){
+                // 將必要資訊餵給 column 後再 active column 
-                    this.slotBoard.children[i].getComponent('columnControl').gameModule = this.node;
+                // 再完成初始化
-                    this.slotBoard.children[i].active = true;
+                if((Object.keys(this.item_spriteFrame).length === Object.keys(this.itemNameMapping).length)){
-                    this.init_Complete=true;
+                    for(let i=0; i<this.columnCount; i++){
+                        this.slotBoard.children[i].getComponent('columnControl').gameModule = this.node;
+                        this.slotBoard.children[i].active = true;
+                        this.nowState = moduleState.INIT2;
+                    }
                 }
-            }
+                break;
-            
+            case moduleState.INIT2:
+                for(let i=0; i<this.columnCount; i++){
+                    cc.log(this.slotBoard.children[i].x)
+                }
+                this.nowState = moduleState.Ready;
+                break;
+            case moduleState.Ready:
+                break;
+            case moduleState.Spining:
+                this.stopCount = 0;
+                break;
+            case moduleState.Stopping:
+                if(this.stopCount == 5){
+                    this.nowState = moduleState.Ready;
+                }
+                break;
+            default:
+                break;
         }
+
     } 
 
 
@@ -115,22 +145,44 @@ export class gameMY extends cc.Component {
             this.betNumber -= 50;
         }
         this.betString.string = "" + this.betNumber
+
     }
 
 
     onSpinBtnClick():void {
 
+        switch(this.nowState){
+            case moduleState.Ready:
+                this.nowState = moduleState.Spining;
+                break;
+            case moduleState.Spining:
+                this.nowState = moduleState.Stopping;
+                break;
+            default:
+                cc.log("do nothing");
+                break;
+        }
+
+    }
+
+    onColumnsSignal():void {
+        this.node.on('AColumnStop', ()=>{
+            this.stopCount += 1;
+        }, this)
+    }
+
+
+
+
 
 
 
-        cc.log("nothing");
 
-    }
 
     unitTestInit():void {
         // for unitTest 1
         this.node.on('Bob', (arg1)=>{
-            cc.log("columnControl Recieve Bob say " + arg1)
+            cc.log("gameModule Recieve Bob say " + arg1)
         }, this)
     }