cocos微信小游戏_cocos creator 微信小游戏和微信小游戏开放数据源 - CSDN
精华内容
参与话题
  • 微信小游戏《守卫竹林》线上游戏源码及资源。本人开发,资源可以直接使用,但不允许再次分发,CSDN擅自涨了分数
  • 微信小游戏排行榜:Cocos Creator

    千次阅读 2019-04-02 17:41:17
    上一篇文章介绍了主域和子域的概念,微信小游戏:主域子域,这一篇介绍一下怎样在微信小游戏中制作好友排行榜 创建工程 由于开放数据域是一个封闭、独立的 JavaScript 作用域,所以开发者需要创建两个项目: 主域...

    上一篇文章介绍了主域和子域的概念,微信小游戏:主域子域,这一篇介绍一下怎样在微信小游戏中制作好友排行榜

    创建工程

    由于开放数据域是一个封闭、独立的 JavaScript 作用域,所以开发者需要创建两个项目:

    • 主域项目工程(正常的游戏项目)
    • 子域项目工程(通过微信 API 获取用户数据来做排行榜等功能)

    在我的示例中client是主域工程,children是子域工程,工程目录可以不相关
    在这里插入图片描述
    发布设置有几点注意事项

    • 首先,左侧主域中开放数据域代码目录要和右侧子域的游戏名称相同
    • 其次,右侧子域的发布路径要在主域发布路径之下,在我的工程中,主域的发布路径是
      G:\B2\trunk\code\client\build,那么子域的发布路径就要是G:\B2\trunk\code\client\build\wechatgame
    • 最后要先构建主域,再构建子域,因为构建子域的时候主域目录可能不存在,如果确认主域已经构建过,且只修改了子域的内容,也可以只构建子域工程。如果构建了主域要重新构建子域,因为构建的时候,Cocos Creator会把之前的构建目录删除掉。
      在这里插入图片描述

    核心代码

    主域

    这段代码可以写在你的游戏结算函数中,告诉子域游戏要结算了

    if(cc.sys.platform == cc.sys.WECHAT_GAME)
            {
                wx.postMessage({score : this.score, type : "open"});
            }
    

    子域

    var self = null;
    cc.Class({
        extends: cc.Component,
    
        properties: {
            scroll_view_content : cc.Node,
            score_num_txt : cc.Label,
            max_score_notice : cc.Node,
            scroll_item_prefab : cc.Prefab,
            root_node : cc.Node,
        },
    
        start () {
            this.max_score = 0;
            if(cc.sys.platform == cc.sys.WECHAT_GAME)
            {
                wx.onMessage(this.on_message_come);
                wx.getUserCloudStorage({
                    keyList : ["max_score"],
                    success : this.get_user_data_success,
                    fail : this.get_user_data_fail,
                });
                wx.getFriendCloudStorage({
                    keyList : ["max_score"],
                    success : this.get_friend_data_success,
                    fail : this.get_friend_data_fail,
                });
            }
            this.root_node.active = false;
            this.cached_scroll_item = [];
            this.cached_data = {};
            self = this;
        },
    
        on_message_come : function(data)
        {
            if(data["type"] == "open")
            {
                var score = data["score"];
                self.refresh(score);
                if(score > self.max_score)
                {
                    wx.setUserCloudStorage({
                        KVDataList : [{key : "max_score", value : score.toString()}],
                        success : self.set_data_success,
                        fail : self.set_data_fail,
                    });
                    wx.getFriendCloudStorage({
                        keyList : ["max_score"],
                        success : self.get_friend_data_success,
                        fail : self.get_friend_data_fail,
                    });
                    self.max_score = score;
                }
            }
        },
    
        refresh : function(score)
        {
            this.score_num_txt.string = score;
            if(score > this.max_score)
            {
                this.max_score_notice.active = true;
            }
            else
            {
                this.max_score_notice.active = false;
            }
            var items_d = [];
            for(var k in this.cached_data)
            {
                items_d.push(this.cached_data[k]);
            }
            items_d.sort(function(a, b){return b["max_score"] - a["max_score"];});
            for(var i = 0; i < items_d.length; i++)
            {
                if(i < this.cached_scroll_item.length)
                {
                    this.cached_scroll_item[i].refresh(i, items_d[i]);
                }
                else
                {
                    var new_node = cc.instantiate(this.scroll_item_prefab);
                    new_node.parent = this.scroll_view_content;
                    var controller = new_node.getComponent("RankItemController");
                    controller.refresh(i, items_d[i]);
                    this.cached_scroll_item.push(controller);
                }
            }
        },
    
        set_data_success : function(result)
        {
            console.log(result);
        },
    
        set_data_fail : function(result)
        {
            console.log(result);
        },
    
        get_user_data_success : function(result)
        {
            console.log(result);
            var data = result["KVDataList"];
            for(var item in data)
            {
                if(data[item]["key"] == "max_score")
                {
                    self.max_score = parseInt(data[item]["value"]);
                    break;
                }
            }
        },
    
        get_user_data_fail : function(result)
        {
            console.log(result);
        },
    
        get_friend_data_success : function(result)
        {
            var data = result["data"];
            for(var k in data)
            {
                var final_d = {};
                var item_d = data[k];
                var kv_list = item_d["KVDataList"]
                final_d["url"] = item_d["avatarUrl"];
                final_d["nickname"] = item_d["nickname"];
                for(var kv in kv_list)
                {
                    if(kv_list[kv]["key"] == "max_score")
                    {
                        final_d["max_score"] = parseInt(kv_list[kv]["value"]);
                        break;
                    }
                }
                self.cached_data[item_d["openid"]] = final_d;
            }
            console.log(result);
            console.log(self.cached_data);
        },
    
        get_friend_data_fail : function(result)
        {
            console.log(result);
        }
    });
    
    
    1. 获取好友数据成功后的数据格式可以参考微信小游戏:主域子域中的介绍
    2. 各个子域函数的用法也可以参考微信小游戏:主域子域中的介绍

    下一篇文章将介绍一些微信小游戏中遇到的一些问题及解决方式

    1.开发工具:https://www.cocos.com/

    推广一下自己做的简单的小游戏
    在这里插入图片描述
    在这里插入图片描述
    创建了一个小游戏交流群,如果过期或者满了或者有问题交流 可以加我微信 备注“微信小游戏”
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • CocosCreator小游戏排行榜

    万次阅读 2018-07-18 11:43:44
    先贴上几个链接 : ... https://www.w3cschool.cn/weixinapp/weixinapp-vibrate.html  微信小程序的接口 当时查震动就是在这里找...

    先贴上几个链接 :

    https://developers.weixin.qq.com/minigame/dev/tutorial/open-ability/open-data.html?q=     这个是介绍了子域和主域之间的通信

    https://www.w3cschool.cn/weixinapp/weixinapp-vibrate.html   微信小程序的接口  当时查震动就是在这里找到的

    我用的Creator版本是1.9.2。

    制作游戏微信小游戏排行榜,你需要创建两个项目,一个项目作为主域存放你的代码,就是你写的游戏逻辑。另外需要新建一个项目作为子域,这个项目用来和微信之间通信。因为开发者只有在子域中才能访问微信提供的 wx.getFriendCloudStorage() 和 wx.getGroupCloudStorage() 两个 API,才能实现一些排行榜的功能。

    主域构建的时候要在开放域数据代码写上wegame下的一个文件目录,这个文件目录就是子域的代码。

    子域构建勾选小游戏开放数据域。

    由于每次重新构建的时候,都会将之前的东西先删除再构建,所以要首先构建子域项目,构建完成之后再将子域构建的项目复制过来。我这里选择的是将子域构建目录直接放在主域构建目录的wegame文件夹下,所以我会先构建主域,然后构建子域就可以了,不需要手动去复制粘贴。

    打包子域工程的时候,渲染模式选择canvas,选择自动会报错:子域只支持2D渲染模式

    主域和子域都构建完成了之后,建立主域与子域之间的通信,另外说一下,调用微信的接口使用的wx. 是只能在微信开发工具或者预览到手机上才有用的,直接调试或者运行,在creator中wx.是会报错的,建议搞一个枚举,不然调试功能的时候很麻烦,或者从微信平台再转回Android要更改或者注释很多代码。

    微信中的wx.getOpenDataContext()方法可以获得开放数据域的实例,获得的实例调用postMessage,向子域发送数据,子域通过开启wx.onMessage()接受主域传达的消息。

     

                let openDataContext = wx.getOpenDataContext();

    openDataContext.postMessage({

    text: 'writeBubbleNum',

    bubbleToatalNum:cc.sys.localStorage.getItem("wipeBubbleTotalNum"),

    LV:cc.sys.localStorage.getItem("GameLv"),

    });

     

     

     

    wx子域

     

    wx.onMessage(data => {

    console.log(data)

    switch(data.text){

    case "rankList":

    self.label_tips.active = true;

    self.onLoadRankList();

    break;

    case "abilityList":

    self.label_tips.active = true;

    self.onLoadAbilityList();

    break;

    case "writeBubbleNum":

    self.onWriteBubbleNum(data.bubbleToatalNum,data.LV);

    break;

    default:break;

    }

    })

     

    子域中收到主域传递过来的消息,甄别后进入不同的渠道。我上边的代码前两个是进行读操作,后一个是进行写操作。

     

    存储数据wx.setUserCloudStorage(function(){})

     

    wx.setUserCloudStorage({

    KVDataList: [{key: "writeBubbleNum", value: "" + bubbleToatalNum},{key:"LV",value:"" + LV}],

    success:function(res){

    console.log("存储数据成功")

    },

    fail:function(res){

    console.log("存储数据失败")

    },

    complete:function(res){

    console.log("存储数据完成")

    }

    });

    读数据就通过微信提供的接口来实现

     

    wx.getFriendCloudStorage({

    keyList:["LV"], //获取到好友存储的LV值

    success:function(res){

    console.log("读取等级数据成功")

    console.log(res); //微信开发工具中后台可以看到返回的详细数据

                    }

        });

     

    你申请获得的数据会以下边的格式返回,用户写入的数据都会存储到data当中,如果不清楚可以在后台输出,使用console.log()方法,在微信开发工具中可以查看具体的数据。微信头像的返回是一个URL,可以用cocos官网上提供的一个方法,直接将微信返回的url传入就可以显示头像。

     

     

    //加载头像

        createImage(avatarUrl) {

    if (CC_WECHATGAME) {

    try {

    let image = wx.createImage();

    image.onload = () => {

    try {

    let texture = new cc.Texture2D();

    texture.initWithElement(image);

    texture.handleLoadedTexture();

    this.avatarImgSprite.spriteFrame = new cc.SpriteFrame(texture);

    } catch (e) {

    cc.log(e);

    this.avatarImgSprite.node.active = false;

    }

    };

    image.src = avatarUrl;

    }catch (e) {

    cc.log(e);

    this.avatarImgSprite.node.active = false;

    }

    } else {

    cc.loader.load({

    url: avatarUrl, type: 'jpg'

    }, (err, texture) => {

    this.avatarImgSprite.spriteFrame = new cc.SpriteFrame(texture);

    });

    }

    }

     

    这是在子域中的操作,接下来要把子域中的画面渲染到主域上去。微信公众平台提供的方法我试了下,会报错说不能将安全的canvas绘制到不安全的canvas上,一脸懵。搞了半天没解决问题。后边去用了cocos官网的方法,才实现了,可以去看看。

    链接是:http://docs.cocos.com/creator/manual/zh/publish/publish-wechatgame-sub-domain.html

    上边是官网的代码,值得一提的是我没找到sharedCanvas是在哪里定义的,然后它就直接用了,我将这个sharedCanvas保存为全局变量,通过wx.getOpenDataContext()获得,因为微信调试好麻烦的,我也没试直接用这个玩意。但是我保存全局变量是可以的。

    在上边的代码的基础上,我们还要去设置sharedCanvas的宽高,我是设置的设计分辨率的大小。我这里用的self就是this,因为吃过this的亏,所以我在每个方法的第一行都会写上let self = this;

     

             //子域设置尺寸

    let openDataContext = wx.getOpenDataContext()

    self.sharedCanvas = openDataContext.canvas

    self.sharedCanvas.width = 1080;

    self.sharedCanvas.height = 1920;

        当子域绘制在屏幕上的时候,游戏会特别卡,在微信小游戏中帧率掉到了恐怖的6帧。后边查了很久才知道就是这么卡,最好的解决方案是调开排行榜的时候暂停游戏。然后我去看了跳一跳还有一些带排行榜的游戏,我发现跳一跳排行榜是在载入界面的入口,要么就是游戏结束后会自己弹出,根本就不存在游戏运行的时候可以查看排行榜。所以,加载排行榜的时候还是暂停游戏,或者干脆游戏中不给玩家看排行榜。

    有一些问题,微信小程序的帧率问题,我的小游戏在浏览器和微信开发工具上的模拟器上都不卡,但是在微信小游戏中有一点卡顿,我看了一下帧率,在微信中只有30帧左右波动,而在模拟器中却很流畅,60左右波动,打出android包也是不卡。搜索了很久没找到原因。在cocos论坛上看到了也有类似的情况,引擎团队说是要改底层,我没有解决的能力。不过整体不是很影响。

    还有就是在子域中不能修改节点的颜色,会报错。也是引擎级别的bug。后边应该会改进。

    展开全文
  • 不知道大家有没有注意到我们这个微信小游戏得名称时《小猫钓鱼》,前面咱们做了半天,貌似是不是还没看到我们的小猫。   OK,别急,我们小猫马上登场。   在这一节,我们主要来做小猫的动画,以及通过动画...

    转载请保留原文链接:https://blog.csdn.net/zzx023/article/details/83064366

     

    不知道大家有没有注意到我们这个微信小游戏得名称时《小猫钓鱼》,前面咱们做了半天,貌似是不是还没看到我们的小猫。

     

    OK,别急,我们小猫马上登场。

     

    在这一节,我们主要来做小猫的动画,以及通过动画事件让整个游戏的美术表现变得更好。

     

    在开始之前,我们先在场景中创建两个Sprite节点,一个是小猫Cat节点,待会我们通过Animation来使它动起来。另一个是一张背景图片Back节点,我想我们已经受够了背景一成不变的蓝色了。

     

     

    接下来我们开始制作小猫的动画。

    通过官方文档,你可以很全面的了解动画系统,我希望可以抽空先看一遍:

    http://docs.cocos.com/creator/manual/zh/animation/

     

    选择Cat节点,同时切换到动画编辑器界面,如果你没有调整过编辑器的界面布局,那么动画编辑器在这个位置。

     

    现在我们点击“添加Animation组件”按钮,来给Cat节点添加一个动画组件。

     

    接下来在动画编辑器中点击“新建 AnimationClip”按钮,根据弹出的窗口创建一个新的动画剪辑文件。

    创建完毕后,点击动画编辑器左上角的编辑按钮,开始编辑。

     

    我们使用的是帧动画来完成小猫的动作,记得把Cat节点的Trim属性,也就是自动剪裁关闭掉。

     

    然后点击动画编辑器中属性列表旁边的加号按钮,选择cc.Sprite.spriteFrame添加一条“轨道”,我喜欢并且习惯使用“轨道”这个词来形容节点动画数据,不觉得这个界面和很多我们常用的视频音频工具很相似么?上手非常的方便。

     

    接下来把帧动画的图片资源,从资源管理器中,拖到我们刚刚创建的“轨道”里。

     

    点击播放按钮,这个时候我们就可以在场景界面中预览到动画的播放

     

    OK,帧序列没有问题,不过好像整个动画播放的有点快,没关系,你有两种方法来调整播放的时间。

    第一种土办法:

             默认动画帧率是60帧,我们现在是每帧进行一次spriteFrame的更换,我们可以通过鼠标移动关键帧来增大每一个关键帧之间的间隔。

    第二种办法:

             更改动画的Sample帧率和Speed动画播放速度。

     

    这里我们改一下Speed的参数,从1调整到0.5,再次预览看一下,嘿,好多了。到这里,我们的动画就编辑完毕了。同样点击动画编辑器左上方的编辑按钮,退出编辑并保存。

     

    这个时候我们看Cat节点的属性检查器中的Animation组件,我们可以看到Cat节点的动画列表中已经有我们编辑好的CatAnim动画了。

    这时我们在脚本当中就可以通过

            var anim = this.getComponent(cc.Animation);
    
            anim.play();

     

    或者

            anim.play('CatAnim');//播放指定动画

    来进行Animation的播放。

    注意anim.play()没有动画名作为参数时,会播放DefaultClip动画,当然你需要设定DefaultClip

     

    到这里,我相信你可以很轻易的为Cat节点添加一个脚本,并且在脚本中写入一个startAnim的方法永凯控制动画的播放。同时在“开始游戏”按钮和“再来一局”按钮的点击中进行调用。

        startAnim () {
    
            var anim = this.getComponent(cc.Animation);
    
            anim.play('CatAnim');//播放指定动画
    
        }

     

     

    不过,这并不是我们想要的最终效果,我们更需要的是小猫甩鱼竿的动作播放完后,鱼钩开始下沉。

    要达到这个效果,我们就需要添加一个帧事件,让动画播放到最后一帧的时候,通过事件回调执行鱼钩下沉的代码。

     

    添加帧事件很简单,参开官方文档:

    http://docs.cocos.com/creator/manual/zh/animation/animation-event.html#%E6%B7%BB%E5%8A%A0%E4%BA%8B%E4%BB%B6

     

    http://docs.cocos.com/creator/manual/zh/animation/scripting-animation.html#%E5%8A%A8%E7%94%BB%E4%BA%8B%E4%BB%B6

     

    打开动画,选择最后一个关键帧,点击左上方加号按钮旁边的AddEvent按钮。

    这时候在时间轴上我们可以看到一个白色的小标记,这个就是我们添加的帧事件。

     

    双击帧事件的小标记,输入回调的方法名,点击 +,- 号按钮,可以增加或减少参数

     

    编辑好后,点击左边的保存,并且在节点的脚本中实现回调方法即可。

    var Hook = require("Hook");
    
    
    
    cc.Class({
    
        extends: cc.Component,
    
    
    
        properties: {
    
            mHook : cc.Node
    
        },
    
    
    
        start () {
    
    
    
        },
    
    
    
        startAnim () {
    
            var anim = this.getComponent(cc.Animation);
    
            anim.play('CatAnim');//播放指定动画
    
        },
    
    
    
        OnAnimEnd () {
    
            var pHook = this.mHook.getComponent("Hook");
    
            pHook.StartLine();
    
        }
    
    });

     

    OK,重新调整一下“开始游戏”按钮和“再来一局”按钮的点击事件,我们来看下效果:

    展开全文
  • 直接上流程 1. 在项目的根路径下添加文件结构 2. loading-scene.js文件内容 var loadingBg = "...; var scene = new cc....

    直接上流程

    1. 在项目的根路径下添加文件结构

    2. loading-scene.js文件内容

    var loadingBg = "https://com-eonsun-public.oss-cn-shanghai.aliyuncs.com/product/HappinessLength/LoadingPicture/bg.png";

     

    var scene = new cc.Scene();

     

    // 1. Add canvas component

    var root = new cc.Node();

    var canvas = root.addComponent(cc.Canvas);

    root.parent = scene;

     

    // 2. Add sprite component

    var bgSprite = root.addComponent(cc.Sprite);

    var createImage = function (sprite, url) {

    if (cc.sys.platform == cc.sys.WECHAT_GAME) {

    let image = wx.createImage();

    image.onload = function () {

    let texture = new cc.Texture2D();

    texture.initWithElement(image);

    texture.handleLoadedTexture();

    sprite.spriteFrame = new cc.SpriteFrame(texture);

    };

    image.src = url;

    }

    };

    createImage(bgSprite, loadingBg);

     

    // 3. Add label component

    var node = new cc.Node();

    var label = node.addComponent(cc.Label);

    label.fontSize = 25;

    label.lineHeight = 30;

    label.string = "正在加载资源中……";

    node.parent = root;

     

    module.exports = scene;

    3. 发布微信小游戏

    4. 打开main.xxx.js文件
    5. 在onStart方法最前面添加
                var loadingScene = require('src/loading-scene.xxx');
                cc.director.runSceneImmediate(loadingScene);


    6. 其中的"loading-scene.xxx"的xxx为src路径下实际loading-scene.xxx的名称,注意要加上

    PS:cocos creator 1.9.3亲测可用,如有错误,欢迎拍砖。

    展开全文
  • 在每局游戏结束时,用来显示玩家 在好友中的排行,这个需要在微信提供的开放数据域中完成。 微信为防止数据外泄,特地提供了开放数据域。开发者只能在子域获取数据,不能上传到外部。 微信开放数据域中 计算好...
  • 目录 关于cocos  cocos creator学习路线建议 ...要开发微信小游戏,需要选择 cocoscocos creator:cocos creator, 不要选择错了哦。 cocos creator的官方文档:cocos开发文档  注意事项:请注意c...
  • CocosCreator在1.8版本开始,就支持一键发布微信小程序,下面是详细的发布步骤: 1、在微信公众平台下载微信开发者工具; 地址:https://mp.weixin.qq.com/debug/wxagame/dev/devtools/download.html?t=2018115,...
  • 使用cocos creator开发微信小游戏(二)

    千次阅读 2018-11-09 15:18:44
    目录 我的开发环境: ...2:cocos creator微信排行榜子域问题 3 游戏过程中要避免频繁的创建与销毁对象。在PC浏览器上测试时可能帧率比较稳定看不出来,发布到微信上就会比较明显了。 4:关于c...
  • cocos creator微信小游戏截图

    千次阅读 2018-11-17 18:04:22
    前言 在之前,用CocosCreator制作的游戏,截图功能的实现是一个比较麻烦的地方,之前的官方文档也没有相关资料,只有论坛大神给出的一些解决方案...微信小游戏其实已经给开发者准备了相关的截图api–Canvas.toTempF...
  • 下面是这个微信小游戏截图: 整体看起来界面还不错 属于Q版 卡通类型 玩法有别于其他切水果游戏,一直小猫不断跑,类似竖版跑酷+切水果 挺新颖的 带几种道具 还不错 下面直接讲讲怎么导出微信平台源码,...
  • 关于cocoscreator 转微信小游戏的遇到的一些问题 做为一个程序菜鸟 总是会遇到这样那样的问题 最后决定把自己遇到为一些智障问题还有 我的智障解决方法总结分享一下 微信 在初期的时候关于cocoscreator转微信啥都...
  • cocos creator 微信小游戏接口 /* * @Description:微信小游戏 * @version: * @Author: lvpeijun * @Date: 2019-12-02 10:43:41 * @LastEditors: Please set LastEditors * @LastEditTime: 2020-08-06 20:59...
  • 微信修改了wx.getUserInfo接口的策略,需要用户调用wx.createUserInfoButton来创建一个授权按钮进行授权,不再自动弹出。这里可以做成全屏按钮的形式进行授权,简单粗暴又美观。下面上代码: let exportJson = {}; ...
  • Cocos Creator 微信小游戏 填坑记录

    千次阅读 2019-07-26 18:30:34
    微信小游戏禁止了动态生成并执行代码的功能,window.eval()、 new Function() ,这些都不能用了。 微信小游戏中window.atob window.btoa 未定义, 解决:用了这个Base64.js 库。 protobuf.js 6.x 中用到...
  • 一段用Cocos开发微信小游戏的经历

    千次阅读 2020-06-25 17:27:33
    本篇blog是我的第一篇csdn的bolg,并没有很多的干货,主要记录的是一个游戏小白最近从零开发一个小游戏的艰难过程中的一点心得体会,所以读到这篇文章的你请不要对里边的的技术质量抱有任何过高的期待,如果你们对我...
  • 在这里,我们将用代码实现一个微信小游戏首屏的全屏授权登录按钮 首先创建一个登录场景,并将场景UI放置,将log脚本挂载在登录场景上 在log脚本中,登录按钮主要就是上图的代码,其中,我们将按钮宽高设置为...
  • CocosCreator 打包微信小游戏

    千次阅读 2019-07-11 16:41:57
    2.发布平台选择微信小游戏,填入appid,这里要注意,小程序的id 和小游戏的id不同。不能混用。 3.如果包体大于4M是没法上传微信平台的。我们可以利用ccc的远程服务器 功能,把我们的资源放到远程服务器。此时可以...
  • Cocos Creator 打包成微信小游戏源代码,Cocos Creator 打包成微信小游戏源代码,Cocos Creator 打包成微信小游戏源代码,Cocos Creator 打包成微信小游戏源代码,Cocos Creator 打包成微信小游戏源代码,Cocos ...
  • 2019独角兽企业重金招聘Python工程师标准>>> ...
1 2 3 4 5 ... 20
收藏数 4,526
精华内容 1,810
关键字:

cocos微信小游戏