• 我们使用CocosCreator官方的polished_project例子来讲解如何生成微信小游戏。 1、下载polished_project工程,地址:https://github.com/cocos-creator/tutorial-first-game/releases/download/v1.2/polished_p

    微信已经放出小游戏的开发工具包,虽然功能尚未完善,但已经可以开发调试了。我们使用CocosCreator官方的polished_project例子来讲解如何生成微信小游戏。
    1、下载polished_project工程,地址:https://github.com/cocos-creator/tutorial-first-game/releases/download/v1.2/polished_project.zip,用CocosCreator 1.8.0打开,先调试运行一遍,确保工程本身没有问题;
    2、从微信公众平台下载微信开发者工具,地址:https://mp.weixin.qq.com/debug/wxagame/dev/devtools/download.html?t=2018110,并按默认设置安装;
    3、在 “Creator 偏好设置” > “原生开发环境” 中设置微信开发者工具路径,如图所示:
    这里写图片描述
    4、在构建面板中选择“发布平台”为“Wechat Game”,设置项目名和 appid,可以暂时使用游客appID:wx6ac3f5090a6b99c5,如图所示:
    这里写图片描述
    5、点击 构建,等待一段时间编译完成,然后点击 运行,如果前面配置没有问题,就将会自动启动微信开发者工具。
    6、在微信开发者工具中点击 编译,就可以在左边面板里模拟小游戏运行了,如图所示:
    这里写图片描述
    7、还可以上传到真机运行。在微信开发者工具中点击 预览,将会生成二维码,如图所示:
    这里写图片描述
    8、最后打开手机微信,扫描二维码,顺利的话应该就能在手机上运行了。看,这就是个标准的微信小游戏,如图所示:
    这里写图片描述
    这里写图片描述

    展开全文
  • CocosCreator在1.8版本开始,就支持一键发布微信小程序,下面是详细的发布步骤: 1、在微信公众平台下载微信开发者工具; 地址:https://mp.weixin.qq.com/debug/wxagame/dev/devtools/download.html?t=2018115,...

    CocosCreator在1.8版本开始,就支持一键发布微信小程序,下面是详细的发布步骤:

    1、在微信公众平台下载微信开发者工具;

        地址:https://mp.weixin.qq.com/debug/wxagame/dev/devtools/download.html?t=2018115,根据需要选择相应的版本。

        小游戏开发:https://developers.weixin.qq.com/minigame/dev/

    2、Cocos Creater

        发布:https://docs.cocos.com/creator/manual/zh/publish/publish-wechatgame.html

        打开cocoscreator,选择Cocos Creator --> 偏好设置 --> 原生开发环境,配置WechatGame程序路径,点击保存并关闭。

     

    3、在cocoscreator中点击项目-->构建发布

    看到下面的界面:

    游戏名称根据需要自己写入,发布平台悬着Wechat Game,appid可以暂时不填写,因为微信小游戏是可以支持无appid的调试,但是会有功能受到限制。根据项目需要,选择初始场景以及参与构建的场景。MD5 Cache的勾选,根据官方文档,是为了进行版本控制(不明白就先勾上,下文会用得到)。详细内容可以参考官方文档。

    当你看到箭头3指向的内容显示completed,则表示已经构建成功了。因为我是直接构建成功,没遇到什么意外情况,所以是不是有坑,我就不清楚了,如果遇到了问题,最直接的办法就是使用creator的helloworld工程进行编译,如果没有编译成功,就检查下自己的环境是不是配置的有问题。

    一切OK,点击运行。

    4、打开小程序项目

    如果你是第一次打开,会看到下面的界面:

    选择小程序项目,进入下面的界面

    选择项目目录,(项目路径)\(项目名称)\build\wechatgame,如果有appId,直接填写,也可以注册,我只是做一个demo,趟趟雷,所以直接选择小游戏,点击确定。

    5、进入微信开发工具

    这时候你就可以看到你编辑的游戏界面了,你也可以直接在界面上直接游戏,检验下游戏有没有问题。顺便给小白推荐个教程,http://www.byjth.com/CocosCreator/66.html闭眼就天黑的博客,很适合小白学习怎么使用creator去做游戏,只看教程是没用的,重点还是多学多做。这个游戏就是照着他的教程撸出来的。

    6、点击工具上的编译按钮,可以在工具上的左侧模拟器界面看到这个小游戏的运行。

    7、点击预览,可以通过微信的扫一扫在手机上体验你的第一个小游戏。但是有一个需要注意的地方,如果按照这个教程来走的话,你可能会遇到这个问题(代码包大小为 xxxx kb,上限为 4096 kb,请删除文件后重试 ),如果运气好,包体大小正好小于4096kb,那就可以用手机玩玩了。好了,别着急,现在来填坑。

    根据官方文档介绍,在小游戏的环境中,资源管理是最特殊的部分,其中就有一条, 小游戏的包内体积不能够超过 4mb,包含所有代码和资源,额外的资源必须通过网络请求下载。这就有点尴尬了,只有4m,那就只能使用网络下载了,不要担心,处理起来很简单,因为cocoscreator已经给我们封装好了,可以直接调用。

    具体操作步骤如下:

    • 在构建时,勾选md5Cache,上文已经勾选了,如果没有勾选,请重新build一下。
    • 将小游戏发布包中的res文件夹完整的上传到服务器。
    • 删除发布包中的res文件夹。
    • 在 main.js 中,找到对应代码段并添加 REMOTE_SERVER_ROOT 的设置

      require('libs/wx-downloader.js');

      // 添加这行代码,将 URL 修改为正确的 res 远程路径。

      wxDownloader.REMOTE_SERVER_ROOT = 'https://www.xxx.com/remote-res/';

      boot();
      PS:如果你不太了解在哪里加,在main文件搜索boot();找到else if (true) ,就在这儿加。另外,网络地址指向的是res的父目录,即res的上一层。不过,后面发现在game.js下面也有这个路径,我直接在那里写入了网址,也是ok的,具体情况不太清楚,总之两处写一处就好。

    • 对于测试阶段来说,可能你无法部署到正式服务器上,需要用本地服务器来测试,那么请在微信开发者工具中打开详情页面,勾选项目设置中的 不检验安全域名、TLS 版本以及 HTTPS 证书 选项。

    8、预览成功,会生成一个二维码,使用微信扫一扫,打开小游戏,这时候,你可能看到有编译异常,不用太在意,先看下运行效果。你可能看到的是全黑的一屏,点击右上角的...选择打开调试,重新扫一下二维码,这时候手机上就可以运行了。

    至此,小游戏的开发部署算是完成了。

    展开全文
  • 上一篇文章介绍了主域和子域的概念,微信小游戏:主域子域,这一篇介绍一下怎样在微信小游戏中制作好友排行榜 创建工程 由于开放数据域是一个封闭、独立的 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/

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

    展开全文
  • 微信小游戏是微信小程序下的游戏产品平台,它不仅提供了强大的游戏能力,还和小程序一样,提供... Cocos Creator也在v1.8版本就支持了微信小游戏的打包,现在简单说明一下使用Cocos Creator发布微信小游戏的流程: ...

            微信小游戏是微信小程序下的游戏产品平台,它不仅提供了强大的游戏能力,还和小程序一样,提供了大量的原生接口,比如支付,社交,文件系统,照片,NFC 等。相当于同时结合了 WEB 易于传播以及 Native 功能丰富的优势。

             Cocos Creator也在v1.8版本就支持了微信小游戏的打包,现在简单说明一下使用Cocos Creator发布微信小游戏的流程:

              开发环境:

               Cocos Creator v2.0.5 /  微信web开发者工具  /  编辑器:Visual Studio Code

                本次使用的appid为微信开发者团队提供给Cocos官方的appid(wx6ac3f5090a6b99c5)

               步骤:

                        1、项目构建

    将发布平台设置为Wechat Game ,填入appid(这里使用官方提供的appid),进行构建。

                     2、构建完毕后再Cocos文件./build 文件夹下多出一个wechatgame文件

                   3、打开微信web开发者工具并选择小游戏一项

    点击加号导入项目,找到Cocos文件./build文件夹下的wechatgame文件夹,选中后填写appid(一般情况下会自动识别)

     

     

    点击导入,由于本次仅为测试,不考虑服务器资源,就未设置下面一项。

    上面一项在

    设置-项目设置

    然后点击预览。

    ##打包过程中可能遇到的问题:

    由于微信小游戏要求不能大于4MB,若出现由于游戏包过大导致错误的问题,则在项目的构建过程中去除调试模式一项

    若仍然过大,则在Cocos项目-项目设置-模块设置中除去是否打包,这样出去必要的引擎包,剩下的引擎包就不会打包了,减小了游戏包的大小。

    展开全文
  • 在每局游戏结束时,用来显示玩家 在好友中的排行,这个需要在微信提供的开放数据域中完成。 微信为防止数据外泄,特地提供了开放数据域。开发者只能在子域获取数据,不能上传到外部。 微信开放数据域中 计算好...

    在每局游戏结束时,用来显示玩家 在好友中的排行,这个需要在微信提供的开放数据域中完成。

    微信为防止数据外泄,特地提供了开放数据域。开发者只能在子域获取数据,不能上传到外部。

    微信开放数据域中 计算好排行榜数据,并显示,渲染到主域的页面上。

    需要在主域画布下,创建一个和画布大小相同的空物体,挂载组件

    子域的画面 就是通过该组件渲染到挂载该组件的物体上,有点类似Unity 的RawImage。

    这里使用的是2.0.10版本,子域工程的按钮,在测试的时候 无法点击。所以在主工程相同位置,制作了一个按钮,来代替子域中对应位置的按钮。子域和主工程画布大小一致。

    通过该组件 屏蔽事件的点击。

    在主工程中,通过 wx.postMessage 向子域传递消息。子域中 通过wx.onMessage 接收主域的消息,根据消息类型

    做出对应的处理。

    1.提交游戏分数:先通过wx.getUserCloudStorage 获取用户的云存储

     通过wx.setUserCloudStorage  提交玩家的成绩

    2.获取好友成绩,处理成排行榜

     微信接口:wx.getFriendCloudStorage

    获取到数据,是没有顺序的,需要自己经过排序,再来显示到排行榜上。

    3.超越好友提示功能

    我们可以在游戏一开始 获取到好友分数和头像,分别用数组 存起来,当你的分数增加的时候,和数组中最后一名玩家

    比较,每次超越 一名好友,将该好友从数组尾部弹出,每次重新开始游戏,更新重新获取数据。

    4.分享

    分为主动分享 和 被动分享

    被动分享:微信小游戏右上角菜单里面

    通过 wx.showShareMenu 接口,显示分享功能,

    通过 wx.onShareAppMessage 接口  设置 分享主题title,以及分享的图片,传入图片的地址

    主动分享: 用户主动拉起好友 通讯录 分享:

    wx.shareAppMessage 接口

     

     

     

    展开全文
  • 1,安装微信开发者工具 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 从上述地址下载,笔者下载的是稳定版。 下载后安装,安装的默认目录为:C:\Program Files (x86)\Tencent\微信...
  • 吃饭先拿碗筷,想吃下“微信小游戏”这盘2018年的大菜,我们也得先将我们的“吃饭工具”准备好: CocosCreator 2.0.2 下载地址:http://cocos2d-x.org/filedown/CocosCreator_v2.0.2_win 安装教程...
  • 微信小游戏零基础教程(一)-CocosCreator最终效果预览准备工作创建工程测试第一个场景 最终效果预览 本教程最后制作的游戏效果: 准备工作 下载 微信开发者工具 最新版-&amp;amp;gt;下载地址 下载 ...
  • 目录 我的开发环境: ...2:cocos creator微信排行榜子域问题 3 游戏过程中要避免频繁的创建与销毁对象。在PC浏览器上测试时可能帧率比较稳定看不出来,发布到微信上就会比较明显了。 4:关于c...
  • 随着游戏玩法越来越丰富,游戏的代码量也越来越大,开发者对于扩大包大小的需求越来越强烈,同时微信小游戏也支持了分包加载的功能。所以 Cocos Creator 推出了 分包加载 这样一个功能,该功能支持 代码 和 资源 的...
  • 之前用three.js手撸了一个微信小游戏半成品,但是因为这种手撸的方式,程序和美术很难配合,而且开发难度和时间成本太大,最终决定还是用cocos creator进行微信小游戏的开发。 微信小程序早已经推出了云开发功能,...
  • 相信这两天大家都被微信推出的小游戏刷屏了吧。大家比较熟知的可能是“跳一跳”,但是其实微信首发了15款游戏,其中8款游戏用的是 Cocos 游戏引擎。下面为大家介绍一下 Windows 64 平台下如何搭建基于 Cocos2d-x 的...
  • 这里写自定义目录标题cocos creator 项目导入微信小游戏报错JSON.parse cocos creator 项目导入微信小游戏报错JSON.parse 1.原因是你在项目中使用过的JSON.parse(); 2.JSON.parse(cc.sys.localStorage.getItem(...
  • 《守卫竹林》的云开发方式与文章微信小游戏:云开发(三)云开发和CocosCreator解决方案介绍的相同,可以作为参考 《守卫竹林》下载链接 《果蔬去哪了》下载链接 创建了一个小游戏交流群,加群或者有问题交流 可以...
  • 第一个demo有“好友榜”、“top3”功能;第二个demo增加了“群排行”功能;第三个demo增加了“待超越”功能。可由cocos creator2.0.8打开并构建发布到微信小游戏
  • 在我们制作微信小游戏的时候基本上一定会用到排行榜,而制作好友排行榜的时候就涉及到子域问题,子域渲染到主域问题还不是一般的少,这里总结一下我遇到的子域渲染到主域的几个问题: 子域界面怎么渲染到屏幕上: ...
  • 上一章:《微信小游戏:云开发(二)默认云开发模板运行问题》 创建了一个小游戏交流群,加群或者有问题交流可以加我微信 备注“微信小游戏” 前言 Cocos Creator现阶段尚不支持微信云开发,但是对于个人开发者而言...
  • 按照官方教程去做 ... 结果出现 确保只在主域中使用微信 Creator插件。 那么就很有可能是该小游戏后台并没有加入微信小游戏 Creator插件。具体链接: https://mp.weixin.qq.com...
  • Cocos 讲述微信小游戏

    2020-06-01 23:31:42
    里面涵盖微信小游戏的底层技术、开发环境、运行框架、引擎工作原理、场景加载等多方面的内容。
  • 实现微信小游戏好友分享功能 好友分享/转发功能是游戏传播的一种重要途径,在本节教程中我们就来看下如何在微信小游戏中实现这一功能。 运行效果如下: Cocos Creator版本:2.2.0 完整项目下载地址: ...
1 2 3 4 5 ... 20
收藏数 4,430
精华内容 1,772
关键字:

微信小游戏cocos