2d开发微信小游戏 cocos

2018-08-06 20:00:45 u011607490 阅读数 3739

这是官方的教程

Cocos2d-JS 适配、打包微信小游戏教程

——————————————————————————————————————————

进去需要下载两个东西

————————————————————————————————————————————————

解压好微信适配文件,安装好开发者工具之后(

 

注意!:在替换掉framework/html5后需要先发布一下web版本,再导入WeChatGame)

 

 

 

然后打开微信开发者工具,选择小程序项目

然后,选择小程序、选择项目目录为你的.../publish/html文件夹

最后确定,就可以进行模拟微信端调试了

——————————————————————————————————————————

微信发布版默认横屏,要切换横屏需要修改game.json文件,portrait为竖屏

 

微信小程序和小游戏都需要已备案的合法域名才可以上传代码。

具体配置在微信开放平台上。

# 微信中的js规范和cocos不同,使用chipmunk需要再导出一下

cocos2d-js | 解决在微信小程序中使用chipmunk报错gameThirdScriptError cp is not defined ReferenceError: cp is not d

 

 

2018-01-01 15:35:25 weixin_34366546 阅读数 324

前言

相信这两天大家都被微信推出的小游戏刷屏了吧。大家比较熟知的可能是“跳一跳”,但是其实微信首发了15款游戏,其中8款游戏用的是 Cocos 游戏引擎。下面为大家介绍一下 Windows 64 平台下如何搭建基于 Cocos2d-x 的小游戏开发环境。

准备

安装时直接选择下一步即可。 注意目前最新的微信开发者工具是12月28号的,可以直接用我上面给出的链接去下载。

过程

一、Cocos Creator 部分

  1. 打开 CocosCreator (第一次打开需要登录cocos的账号,可自行申请,略),新建一个工程。这里我们建一个 Hello World 的工程。

    Hello World 工程打开后的效果如下:

  2. 设置微信开发者工具目录。这里注意选择的是安装文件夹,例如我的是 --> D:\Program Files (x86)\Tencent\微信web开发者工具。另外 NDK,SDK,ANT 如果你配置过的话会自动识别,此处不讨论它们的安装配置。

  3. 构建工程。配置如图所示,需要注意 appId 的填写 ,本来需要在微信公众平台将小程序的类别设置为小游戏类目才可以正常运行,但是由于微信目前(截至2017-12-30)尚未开放小游戏的权限设置,个人开发者无法改为这个类别,公司认证账号暂时也不行,参考此链接。微信为了照顾想抢先体验小游戏开发的开发者准备了一个 appId: wx6ac3f5090a6b99c5 用于体验。所以现在可以先用此appId进行体验,等到以后微信开放了小游戏的申请后再更换回自己的appId。

    注意不要点 运行,目前微信开发者工具貌似有bug,如果直接点 运行,微信开发者工具将会报 “Error: 未找到入口 app.json 文件” 的错误。下面我们用手动的方式在微信开发者工具中打开项目。

二、微信开发者工具 部分

  1. 打开微信开发者工具。

选择 小程序项目

2. 打开小游戏工程,项目目录为刚刚创建的 Cocos 工程目录下的 build\wechatgame

  1. 在微信开发者工具中预览效果。

  2. 扫码在微信中验证实际的效果。

参考资料

  1. Cocos 官网
  2. 微信小程序开启游戏支持!你准备好了没?
  3. Creator v1.8 :微信小游戏开发教程
  4. 小游戏在微信开发者工具中的问题汇总(FAQ)
2018-07-27 12:13:39 mei_363014743 阅读数 2350

 

附:

1. GitHub Desktop使用:https://blog.csdn.net/baimafujinji/article/details/74533992

2. GitHub README.md编写:https://blog.csdn.net/u014252406/article/details/44681475

3. 成品项目

 

 

 

 

2015-02-13 11:32:05 qq_25600055 阅读数 1284

 
今天我们来介绍一下如何使用Cocos2d-JS引擎快速开发一个微信游戏《来自喵星的你》
 
游戏地址(建议用手机访问):http://app8.download.anzhuoshangdian.com/cat/
 
1.Cocos2d-JS引擎
Cocos2d-JS引擎是Cocos2d-x的JS版本,它极大简化与整合的API设计使得游戏开发变得前所未有地轻松。依托Web平台使Cocos2d-JS享有高效的开发测试环境,命令行工具提供三步就可以搞定Web与Native全平台部署的便捷功能。
 
官方下载地址:http://cn.cocos2d-x.org/download/
 

2.Cocos Code IDE
Cocos Code IDE是基于 Eclipse的跨平台 IDE,可帮助开发者便捷地创建游戏工程、编写调试代码、实时查看修改效果、并最终直接发布成可上架的安装包。
 
官方下载地址:http://cn.cocos2d-x.org/download/
 
3.游戏
《来自喵星的你》主角是一只喵星小喵咪。他的使命是在危险的地球上铲除汪星人(为什么这两个星球的主战场要设置在地球上,我也没想通,不要在意这些细节嘛...),配角就是一群不断产生的汪星人,玩家需要控制喵星人的移动和攻击来躲避或者打败汪星人,打败的越多分数越高,如果喵星人被打败了,游戏结束,这个时候就可以把你的成绩分享给你的好友,比一比谁更牛。
 
游戏无外乎就是各种游戏内的对象根据你所设定的逻辑或者用户的交互运行一系列动画而已。明白了这一点,我们就开始动手来开发一个已经在微信上刷屏刷的一塌糊涂的《来自喵星的你》,想想是不是有点小激动。
 
我们先简单介绍一下这个游戏的结构:
 
A.不要主菜单不要一堆乱七八糟的东西,一进游戏就开始玩,越简洁越能抓住用户。
B.游戏的主界面,玩家操作界面和分数标签。
C.喵星人只有一只,汪星人随着时间一直产生。
D.游戏结束显示游戏结束的界面,可以重玩也可以分享。所以这是个单场景游戏。
 
1)window.onload函数是Cocos2d-JS游戏的入口。
在这里,我们加载了资源后进入到游戏场景。
  1. cc.LoaderScene.preload(["catnorrisd.png""pg.png""arrow.png""end.png"], function () {//加载资源 
  2. cc.director.runScene(new MyScene());//加载资源后回调,进入场景 
MyScene 就是游戏的主场景了,MyScene从 cc.Scene 继承而来。进入游戏后,引擎会调用 onEnter 函数,所以我们可以在 onEnter 函数里初始化整个游戏场景UI和处理触摸相关的逻辑。
 
2)创建分数标签
比如,创建一个分数标签,很简单,只需要初始化标签的属性,并添加到场景中即可。
  1. this.scoreLabel =  UI.scoreLabel = new cc.LabelTTF("0""黑体", 24, cc.size(150, 30), cc.TEXT_ALIGNMENT_LEFT);//创建Label 
  2.     this.addChild(this.scoreLabel);//添加到场景 
  3.     this.scoreLabel.attr({ //属性设置 
  4.         x:30, 
  5.         y:cc.director.getVisibleSize().height - 25, 
  6.         strokeStyle: cc.color(0,0,0), 
  7.         lineWidth: 2, 
  8.         color: cc.color(255,150,100), 
  9.         anchorX:0.1 
  10.     }); 
 
3)处理触摸逻辑
如何捕获用户的触摸?Cocos2d-JS提供了一个很方便的接口,我们只要在游戏的场景中调用
  1. cc.eventManager.addListener 
 
重写下面三个函数就可以了。
  1. onTouchBegan:function(touch, event); 
  2. onTouchMoved:function(touch, event); 
  3. onTouchEnded:function(touch, event); 
 
 从命名就可以看出来这三个函数是处理触摸的三个时间点。这里要注意的是,如果我们根据触摸的时间来判断用户是长按还是点击,如果是长按,喵星人就会移动,如果是点击,喵星人就会进行攻击。目标点坐标怎么获取呢?touch参数暴露咯..
  1. touch.getLocation(); 
 
4)主角登场
喵星人终于要出来了,为了方便操作喵星人,我们把它封装为一个类Cat,从 cc.Sprite 继承而来。ctor 构造函数初始化了喵星人的状态。
  1. ctor:function(){ 
  2.     this._super("catnorrisd.png", cc.rect(144,148,70,32));//初始化纹理,可以理解为图片 
  3.     this.attr({//属性设置 
  4.         anchorX:0.5, 
  5.         anchorY:0 
  6.     }); 
  7.     this.scheduleUpdate(); 
  8.     this.idle(); 
  9. }, 
 
5)状态机
从上面的代码我们可以看到有2个奇怪的函数调用scheduleUpdate()和idle(),又是做什么用的呢?这里我们把喵星人设置为状态机模式。给定了喵星人可能的几个状态,idle,walking,attacking,dieing和dead。
  1. this.idle()//设置喵星人进入idle状态 
 
同样的调用walk(),attack()等等也会切换喵星人的状态。那这些只是状态的切换,如何表现这些状态呢?
  1. this.scheduleUpdate();//这是个定时器,每帧调用update函数,我们根据不同状态处理喵星人的表现 
 
假如此时是walk的状态,喵星人会有一个左右摇晃的动作。
  1. this.runAction(cc.sequence(cc.rotateTo(0.12, -3), cc.rotateTo(0.12,3)).repeatForever()); 
 cc.rotateto 是一个旋转动作。Sequence 是一个连续动作,它把2个 rotateTo 连接在一起,按顺序执行。而 repeatForever 表示这个动作循环进行。
 
同理,2种汪星人Doge和Husky也被封装为状态机的模式,然后后Manager对象统一进行管理,Manager对象主要做的事就是定时产生汪星人。
 
6)碰撞检测
碰撞检测同样在每帧进行,主角喵星人是一个精灵,在游戏看来它只是一块矩形纹理,汪星人同样也是,即便有的地方是透明的。所以这里采用的方式是检测喵星人的位置和汪星人的位置,一旦距离低于我们设置的值就判定为碰撞。
  1. if(cc.pDistance(this.target.getPosition(),this.getPosition()) < COLSIZE) 
  2.     ...//碰撞 
如果喵星人被打败后,显示游戏界面,即UI对象。在这里可以重新游戏,也可以进行微信分享。
 
7)微信分享
这么碉堡的游戏怎么能少得了微信分享功能呢?分享功能的代码可以在index.html中看到。
  1. Api.shareToFriend(wxFriend, wxCallbacks); 
  2. Api.shareToTimeline(wxData, wxCallbacks); 
  3. Api.shareToWeibo(wxData, wxCallbacks); 
 
其中wxFriend.desc和wxData.desc表示内容描述,可以在游戏结束的时候会进行修改。其他字段同样也可以在这里进行修改,比如链接,图标等等。
  1. document.title = window.wxData.desc = "喵星刷屏!喵获得"+UI.score+"分,在众喵中排名"+(0|(percent*100))+"%,尼能超过喵吗!"
  2. document.title = window.wxFriend.desc = "我拿了"+UI.score+"分,战胜了"+ UI.pg +"个汪,超越了"+(0|(percent*100))+"%的好友!你能超过我吗"
 
4.总结
可以看到,《来自喵星的你》只用了一个js文件就搞定了,使用Cocos2d-JS引擎可以高效快速方便地开发一个JS游戏,只要有了Cocos2d-JS和Cocos Code IDE,你也能轻松、快速地打造出一款趣味的优秀游戏。
 
目前微信游戏平台已成为国内最高人气的平台之一,并且诞生出了许多成功作品。借助Cocos2d-JS和Cocos Code IDE,从此开发者可以告别繁琐的工序,让开发来得更有效率。也许下款微信大热之作就属于你哦!
 
2019-03-29 10:20:02 qq_35624156 阅读数 537

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

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