zoukankan      html  css  js  c++  java
  • 翻牌动画(CocosCreator)

    推荐阅读:

          在游戏中,有时候为了通过一种有意思的途径,让用户在一些物品中随机获取某种物品,除了前面我们提到的使用大转盘抽奖获得,还有一种可以实现类似功能的是抽取卡片。

    1.描述

          抽卡界面打开时,向用户展示所有卡片的背面,待用户随机点一张卡片后,该卡片会播放一个翻开的动画,然后显示卡片的相关描述等信息。

    2.UI搭建

    (1)新建一个Button组件,图片设置为牌的背面图
    (2)复制5份,排列好,并依次名命如下;
    在这里插入图片描述
    效果图如下:
    在这里插入图片描述

    3.代码

    (1)声明一个存放卡片的数组

    this.cards = [];//卡片数组
    

    (2)存储卡片置数组中

    for (let i = 0; i < 6; i++) 
    {
        self.cards[i] = cc.find("card" + i, obj4);
    }
    

    (3)为卡片添加监听事件

    findBtn("card" + i, obj4, function () 
    {
         self.turnCard(i);
    })
    

    (4)翻牌操作(翻牌动画)

    	///翻牌操作
        turnCard(idx) {
            var self = this;
    
            var scale1 = cc.scaleTo(0.1, 0, 1);
            var call1 = app.callFunc(function (adt) {
                self.flipCard(idx);
            }, [self.cards[idx]]);
            var scale2 = cc.scaleTo(0.1, 1, 1)
    
            self.cards[idx].stopAllActions();
            self.cards[idx].runAction(cc.sequence(scale1, call1, scale2));
        },
    

    5翻牌后显示牌正面:这里为了替换牌正面纹理的方便,我们将它保存在Resources/image/card/目录下,并依次命名为1,2,3,4,5,将背面纹理图片命名为0.

       //翻开某一张牌后显示牌正面相关信息
        flipCardShow(idx) {
        	//--测试,根据需要赋值
        	let cardIdx=3;
            self.updateCardTexture(this.cards[idx], cardIdx);//更换牌的纹理 
            //显示牌正面的其他信息
            //TODO
        },
    

    修改纹理图片方法:

     updateCardTexture(img, textureName) {
            cc.loader.loadRes("image/card/" + textureName, cc.SpriteFrame, function (err, spriteFrame) {
                if (!err) { img.getComponent(cc.Sprite).spriteFrame = spriteFrame; }
            });
        },
    

    6.当关闭该翻牌面板时,需要将翻牌结果重置未未翻牌状态

    	//初始化牌
        initCard() {
            for (let i = 0; i < 6; i++) {
                gm.GameData.updateCardTexture(this.cards[i], "0");
            }
        },
    

    至此,翻牌功能就实现了,写这篇文章的主要目的是分享一个翻牌的动画,即步骤(4)。

  • 相关阅读:
    使用FastJson parseObject方法时,json字符串解析成对象后,部分属性丢失问题处理
    IDEA启动Tomcat时 , 报错提示:this web application instance has been stopped already
    Servlet基本概念记录(随笔...不完全...)
    有关MacBook的简单操作收集
    Elasticsearch 相关资料收集
    redis入门
    整理最近面试遇到的一些问题
    java中的一些概念整理
    windows相关操作
    java基础知识优秀博客整理
  • 原文地址:https://www.cnblogs.com/shirln/p/11016173.html
Copyright © 2011-2022 走看看