Egret社区

纸牌 - 搓牌效果

2017-12-7 10:50
524280
本帖最后由 cair 于 2017-12-18 20:49 编辑

先上一个效果图
rub_preview.GIF



这个效果棋牌游戏用的挺多的,分享下我的做法

戳牌分两步,1 是用户手指滑动纸牌达到看牌的目的。 2 是当用户看到了所有的牌,播放一个把牌摆整齐的动画。
实现过程就是按照这个来:触摸监听,完了触发某个特定条件,最后播放预设的动画。

不太会说 直接上代码。

[Actionscript3] 纯文本查看 复制代码
/** 
 * 工作请联系
 * @author [url=mailto:lyq.android@foxmail.com]lyq.android@foxmail.com[/url]
 */        
namespace game
{
        const SCENE_WIDTH = 1334;
        const SCENE_HEIGHT = 750;
        
        const POKER_WIDTH = 368;
        const POKER_HEIGHT = 500;

        const MAX_X = SCENE_WIDTH - 100;
        const MIN_X = POKER_WIDTH + 100;
        const MAX_Y = SCENE_HEIGHT - 50;
        const MIN_Y = POKER_HEIGHT + 50;
        
        /**   阻尼,改变此值调整触摸扑克的移动反馈    */
        const DUMP = 0.3;
        
        /** 搓牌交互界面 */
        export class RubCardPanel extends EUIComponent
        {
                private pokerBmpArray: egret.Bitmap[];
                
                // 记录最后触摸的点
                private _lastTouchPoint: { x, y };

                /** @param pokers  扑克资源,不能少于两张 */
                constructor(pokers: string[])
                {
                        super();
                        this.initCards(pokers);
                }
                
                /** 给 pokerBmpArray 赋予初始值 */
                private initCards(): void
                {
                        let self = this;
                        self.pokerBmpArray = new Array();
                        for (let index = 0; index < self._pokers.length; ++index)
                        {
                                let bmp = self.createCardById(self._pokers[index]);
                                self.pokerBmpArray.push(bmp);
                                self.addChild(bmp);
                        }
                }
        
                // 创建高清扑克图片
                private createCardById(id: string): egret.Bitmap
                {
                        let poker = new egret.Bitmap();
                        poker.texture = RES.getRes(id);
                        // poker.width = POKER_WIDTH;
                        // poker.height = POKER_HEIGHT;
                        poker.touchEnabled = true;
                        return poker;
                }

                /**
                 * add poker touch listener
                 * 给每张图片加上触摸监听
                 */
                protected addListener(): void
                {
                        this.loopTargets((v, i) =>
                        {
                                v.addEventListener(egret.TouchEvent.TOUCH_MOVE, this.touchMove, this);
                                v.addEventListener(egret.TouchEvent.TOUCH_BEGIN, this.touchBegin, this);
                                v.addEventListener(egret.TouchEvent.TOUCH_END, this.touchEnd, this);
                                v.addEventListener(egret.TouchEvent.TOUCH_CANCEL, this.touchEnd, this);
                        });
                }

                // Easy
                protected removeListener(): void
                {
                        this.loopTargets((v, i) =>
                        {
                                v.removeEventListener(egret.TouchEvent.TOUCH_MOVE, this.touchMove, this);
                                v.removeEventListener(egret.TouchEvent.TOUCH_BEGIN, this.touchBegin, this);
                                v.removeEventListener(egret.TouchEvent.TOUCH_END, this.touchEnd, this);
                                v.removeEventListener(egret.TouchEvent.TOUCH_CANCEL, this.touchEnd, this);
                        });
                }
        
                // 界面完全显示时
                protected onShow(): void
                {
                        super.onShow();
                        
                        // 设置为全屏
                        this.width = Const.SCENT_WIDTH;
                        this.height = Const.SCENT_HEIGHT;
                        
                        // 找到中心坐标
                        let centerX = ((this.width - POKER_WIDTH) >> 1) + (POKER_WIDTH >> 1);
                        let centerY = ((this.height - POKER_HEIGHT) >> 1) + POKER_HEIGHT;
                        
                        
                        // Please don't modify codes here,remember targets length & rotations length have to be equal.
                        let size = this.pokerBmpArray.length - 1;
                        this.loopTargets((v, i) =>
                        {
                                // 图片的锚点设置在底部中心,围绕该点旋转
                                v.anchorOffsetX = POKER_WIDTH >> 1;
                                v.anchorOffsetY = POKER_HEIGHT;
                                // 稍微旋转一点
                                v.rotation = i * 3;
                                v.x = centerX;
                                v.y = centerY;
                        });
                }
                
                /**
                 * 触摸开始,记录触摸点 _lastTouchPoint
                 * 禁用其他图片的 touchEnabled 防止失去焦点
                 */
                private touchBegin(evt: egret.TouchEvent): void
                {
                        this.loopTargets(function (v, i) { v.touchEnabled = evt.target == v });
                        this._lastTouchPoint = { x: evt.localX, y: evt.localY };
                }
                
                /**
                 * 开始滑动手指
                 * 计算此时 触摸点与上个触摸点的差距 dx dy
                 * 在这里限制移动的边距 MAX_X...
                 */ 
                private touchMove(evt: egret.TouchEvent): void
                {
                        let target = <egret.Bitmap>evt.target;
                        if (this._lastTouchPoint != null)
                        {
                                let dx = evt.localX - this._lastTouchPoint.x;
                                let dy = evt.localY - this._lastTouchPoint.y;
                                
                                let laterX = target.x + (dx * DUMP);
                                let laterY = target.y + (dy * DUMP);

                                laterX = laterX > MAX_X ? MAX_X : laterX < MIN_X ? MIN_X : laterX;
                                laterY = laterY > MAX_Y ? MAX_Y : laterY < MIN_Y ? MIN_Y : laterY;
                        
                                // 设置最终坐标
                                target.x = laterX;
                                target.y = laterY;
                        }
                }
                
                /** evt >> 触摸结束,手抬起 */
                private touchEnd(evt: egret.TouchEvent): void
                {
                        // 将最后触摸点清除
                        this._lastTouchPoint = null;
                        // 设置所有图片为可点击
                        this.loopTargets(function (v, i) { v.touchEnabled = true });

                        /** 翻到倒数第二张就可以播放动画了 */
                        // WARNING pokerBmpArray length always larger than 1
                        if (evt.target === this.pokerBmpArray[1])
                        {
                                this.playShowAnim();
                        }
                }
                
                /** 循环pokerBmpArray */
                private loopTargets(loopFunction: (value: egret.Bitmap, index: number) => void)
                {
                        this.pokerBmpArray.forEach(loopFunction, this);
                }

                /** 播放预设动画 */
                private playShowAnim(): void
                {
                        let self = this;

                        let targets = self.pokerBmpArray;
                        // fill targets
                        self.loopTargets(function (v, i) { v.touchEnabled = false });

                        // delay to close this panle function
                        let closePanel = () =>
                        {
//                                 PopupManager.dismissCurrentPopupPanel();
//                                 game.AppFacade.getInstance().sendNotification(game.COP_RUB_CARD_FINISH, this._pokers);
                        };

                        // resetAnimation complete function
                        let completeFunc = function () 
                        { 
                                egret.setTimeout(closePanel, self, 1000);
//                                 game.AnsycTaskPool.startAnsycTaskGameScene(closePanel, self, 1000); 
                        }

                        // reset poker location animation function
                        let resetAnimation = function ()
                        {
                                // calculate the center location
                                let centerX = ((self.width - POKER_WIDTH) >> 1) + (POKER_WIDTH >> 1);
                                let centerY = ((self.height - POKER_HEIGHT) >> 1) + POKER_HEIGHT;
                                let centerProp = { x: centerX, y: centerY, rotation: 0 };

                                let centerIndex = (targets.length - 1) >> 1;

                                // single poker reset complete
                                let resetCallback = function (index: number)
                                {
                                        // 中间那张不需要设置旋转动画
                                        if (index == centerIndex)
                                                return;
                                        let prop = {
                                                rotation: 12 * (index - centerIndex)
                                        };
                                        console.info('prop rotation = ' + prop.rotation);
                                        if (index == 0)
                                                egret.Tween.get(targets[index]).to(prop, 300, egret.Ease.quadIn).call(completeFunc);
                                        else
                                                egret.Tween.get(targets[index]).to(prop, 300, egret.Ease.quadIn);
                                }

                                // loop
                                let startAnimFunction = (value: egret.Bitmap, index) =>
                                {
                                        egret.Tween.get(value).to(centerProp, 200).call(resetCallback, self, [index]);
                                }
                                // start loop
                                self.loopTargets(startAnimFunction);
                        }
                        egret.setTimeout(resetAnimation, self, 500);
//                         game.AnsycTaskPool.startAnsycTaskGameScene(resetAnimation, self, 500);
                }
        }
}



git 地址
游客,如果您要查看本帖隐藏内容请回复

// ps 听说设置回复隐藏才有互动














分享到 :
12 人收藏

80 个回复

倒序浏览
sxtaosdo  自成一派 | 2017-12-7 10:52:24
学习学习
~~~~~
lshl12315  略有小成 | 2017-12-7 11:02:44
24308787  登堂入室 | 2017-12-7 11:11:18
看看
fan11  登堂入室 | 2017-12-7 11:14:34
学习
wendehua  登堂入室 | 2017-12-7 11:36:10
学习下
liu_game  登堂入室 | 2017-12-7 13:39:36
666
Jesonhu  初学乍练 | 2017-12-7 13:46:55
LookLookLookLookLookLookLook
631620396  登堂入室 | 2017-12-7 14:21:05
不错不错~~~~~~~~~~~~~~~~~~
你可别逗了  登堂入室 | 2017-12-7 14:41:18
学习
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|京网文[2014]0791-191号|京ICP证150115号|Egret社区 ( 京ICP备14025619号

Powered by Discuz! X3.2 © 2001-2016 Comsenz Inc.

返回顶部