cocos creator + TypeScript achieve flop effect

Disclaimer: This article is a blogger original article, shall not be reproduced without the bloggers allowed. https://blog.csdn.net/lxt610/article/details/89517005

1 Introduction
2, the implementation process

2.1, making the scene
2.2, code implementation
2.3, showing the effect of
2.4 Principle Analysis
2.5, Demo demo

3. Conclusion

1 Introduction

These days to be a chess game, you need a flop action! This effect only try a few simple and true feeling some require a small partner take it, have a good effect can communicate with Ha ~

2, the implementation process

2.1, making the scene

Specific layout as shown:
Here Insert Picture Description
We need to create a PokerNode node, and add a child object font, which PokerNode node add a sprite for the back to add a component of poker, poker font add positive, default font is hidden. Scene on the well, start code section below.

2.2, code implementation

New PokerItem.ts file, as follows

const {ccclass, property} = cc._decorator;

@ccclass
export default class PokerItem extends cc.Component {

    @property(cc.Node) front: cc.Node = null;

    value:number = 10;//牌值

    showPoker(delayTime?:number,callBack?):void
    {
        if(delayTime == null)
        {
            delayTime = 0
        }
        let self = this
        let action = cc.sequence(
            cc.delayTime(delayTime),
            cc.rotateTo(0.5,0,90),
            cc.callFunc(function(){
                //在这里切换扑克纹理
                self.front.active = true
            }),
            cc.targetedAction(self.front,cc.rotateTo(0,0,180)),
            cc.rotateTo(0.5,0,180),
            cc.callFunc(function(){
                //Configs.SoundManager.playPointCountEffect(self.value%0x10)
                if(callBack !=null)
                {
                    callBack()
                }
            })
        )
        this.node.runAction(action);
    }

    start()
    {
        this.node.scale = 1//控制大小
    }
}

The script to hang on PokerNode node, specify a good object!

Here is a test code

import PokerItem from "./PokerItem";
const {ccclass, property} = cc._decorator;

@ccclass
export default class GameCtl extends cc.Component {
    @property(cc.Node) pokerNode: cc.Node = null;
    // LIFE-CYCLE CALLBACKS:

    keyEvent_Up(event)
    {
         if(event.keyCode == cc.macro.KEY.w)
         {
            this.pokerNode.getComponent(PokerItem).showPoker()
        }
    }

    onLoad () {
        cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP,this.keyEvent_Up,this)
    }
}

2.3, showing the effect of

Write test scripts, we start the project, press the w key can be seen, the effect is as follows:
Here Insert Picture Description

2.4 Principle Analysis

We first rotation PokerNode the parent node, Y directions to 90 degrees, then the node up display font, and switches to be displayed poker texture, font node then rotated 180 degrees, then the parent node PokerNode rotation to 180 degrees, the entire process to display the front end of this poker rotates 360 degrees.

2.5, Demo demo

Finally, the authors demonstrate Demo, click here to download .

3. Conclusion

The End
Well, today's share on here, if inadequacies also hope you correct me in time, feel free to discuss the exchange! ! !

Like friends, please Bangding, thumbs up, comment! You certainly inexhaustible power of my writing!