2019-07-11 20:19:31 hnzmdlhc 阅读数 1171
  • Cocos Creator微信小游戏开发

    如今,H5游戏、微信小游戏、抖音小游戏、头条小游戏、快手小游戏、百度小游戏、QQ轻游戏等小程序游戏都特别火,而这些小游戏中80%都是用Cocos Creator开发的,Cocos Creator可以做到一次开发,多平台部署。本套课程将从零开始,从项目实战的角度手把手带领大家开发一个《猴子吃香蕉》微信小游戏,从环境的搭建开始,到最终部署到微信平台。让大家了解Cocos Creator中的组件化开发、碰撞系统、物理系统、动画系统、使用Cocos Creator发布微信平台、微信小游戏上传与发布等内容。同时,本套课程结合实战开发经验,教大家如何使用Git进行项目的版本管理以及团队成员之间的协作开发。

    672 人正在学习 去看看 赵杰

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

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

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

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

子域的画面 就是通过该组件渲染到挂载该组件的物体上,有点类似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 接口

 

 

 

2019-04-29 23:48:01 weixin_43774837 阅读数 853
  • Cocos Creator微信小游戏开发

    如今,H5游戏、微信小游戏、抖音小游戏、头条小游戏、快手小游戏、百度小游戏、QQ轻游戏等小程序游戏都特别火,而这些小游戏中80%都是用Cocos Creator开发的,Cocos Creator可以做到一次开发,多平台部署。本套课程将从零开始,从项目实战的角度手把手带领大家开发一个《猴子吃香蕉》微信小游戏,从环境的搭建开始,到最终部署到微信平台。让大家了解Cocos Creator中的组件化开发、碰撞系统、物理系统、动画系统、使用Cocos Creator发布微信平台、微信小游戏上传与发布等内容。同时,本套课程结合实战开发经验,教大家如何使用Git进行项目的版本管理以及团队成员之间的协作开发。

    672 人正在学习 去看看 赵杰

微信小游戏制作学习笔记

关于 cocos 的学习笔记

文字图像部分:

***1.***图集资源由png和plist文件组成
接下来可以使用专门的软件生成图集,我们推荐的图集制作软件包括:
        [Zwoptex](https://zwopple.com/zwoptex/)
        [ TexturePacker](https://www.codeandweb.com/texturepacker)Zwoptex

使用这些软件生成图集时请选择 cocos2d-x 格式的 plist 文件。最终得到的图集文件是同名的 plist 和 png。

***2.***艺术字体创建
直接在资源管理器中点新建-> 艺术数字配置
|属性 |功能说明 |
|-Raw Texture File-|-设置事先绘制好的包含所需字体样式的图片-|
| Item Width | 指定每一个字符的宽度 |
|Item Height |指定每一个字符的高度 |
|Start Char |指定艺术数字字体里面的第一个字符,如果字符是 Space,也需要在 这个属性里面输入空格字符|
使用时需要创建label组建将新建好的艺术数字资源拖拽到节点的 Label 组件的 Font 属性上即可。

***3.***跨项目导出美术资源(暂不需要)
跨项目导出的具体

***4.***图像资源的自动剪裁
在这里插入图片描述
自带位置信息的序列帧动画
有很多动画师在绘制序列帧动画时,会使用一张较大的画布,然后将角色在动画中的运动直接通过角色在画布上的位置变化表现出来。在使用这种素材时,我们需要将 Sprite 组件 的 Trim 设为 false,将 Size Mode 设为 RAW。这样动画在播放每个序列帧时,都将使用原始图片的尺寸,并保留图像周围透明像素的信息,这样才能正确显示绘制在动画中的角色位移。
而 Trim 设为 true,则是在位移完全由角色位置属性控制的动画中,更推荐使用的方式。

5.声音资源加载
建议在脚本中cc.loader 加载
~~ ~~
场景制作工作流程

1.节点和组件
节点是承载组建的实体
创建节点->在层级管理上直接创建,有sprite、label、particelSystem三类。
sprite节点渲染组件sprite Fram 属性需要直接将一张图片拖入该处。
在这里插入图片描述
上图中节点的 颜色(Color) 属性和 不透明度(Opacity) 属性直接影响了 Sprite 组件对图片的渲染。颜色和不透明度同样会影响 文字(Label) 这样的渲染组件的显示。可直接在属性管理器中修改sprite组件的节点位置(Position)、旋转(Rotation)、缩放(Scale)、尺寸(Size)四大信息。

在所创建的节点上可添加不同组件,如果需要添加新的逻辑可通过在vs code里写Java script脚本来添加。
写好脚本后,点击要添加组件的节点,在属性管理器中点击添加组件,点击脚本,选中自己写好的脚本。

如果需要添加如按钮的组件需要选择->UI ->Button.

注意:
所有写好的脚本储存在script文件夹中,
节点名字修改成与所添加组件相关的信息,
注意资源管理。
一个节点只能添加一个渲染组件,渲染组件包括 Sprite(精灵), Label(文字),Particle(粒子)等。!!!!!

***2.***坐标系和变换位置信息
世界坐标系(Word Coordinate)和本地坐标系(Local Coordinate)

世界坐标系也叫做绝对坐标系,在 Cocos Creator 游戏开发中表示场景空间内的统一坐标体系,「世界」就用来表示我们的游戏场景。

本地坐标系也叫相对坐标系,是和节点相关联的坐标系。每个节点都有独立的坐标系,当节点移动或改变方向时,和该节点关联的坐标系将随之移动或改向。

cocos 中的节点(Node)是有父子关系的,修改该节点的位置,是修改该节点相对于它上一级父节点的本地位置而非世界坐标系。
世界坐标系是绘制完该场景后,cocos会将该场景下的本地坐标系映射成世界坐标系(在某一场景下修改该场景的节点位置信息都是在修改本地坐标系)。

锚点(Anchor)
它决定该节点的约束框内哪一个点决定该节点的位置,在属性管理器的Anchor属性下的x、y属性都是节点尺寸计算锚点位置的乘数因子。如(0.5, 0.5) 表示锚点位于节点长度乘 0.5 和宽度乘 0.5 的地方,即节点约束框的中心。它是以该节点的左下角为原点(0,0)。

变换属性
1>位置(position)
位置属性的默认值是 (0, 0),也就是说,新添加节点时,节点总会出现在父节点的坐标系原点位置。
可根据该场景背板来修改它的位置
2->旋转(rotation)
该属性只有一个未知量,正是顺时针转动,负是逆时针。旋转属性会影响该父节点下所有子节点。
3->缩放(scale)
该属性的两个未知量x,y是在x、y轴的缩放系数。缩放属性会影响该父节点下所有子节点。
4->尺寸(size)
该属性由width 和high两个值决定,它不会直接改变节点的相对位置

***3.***管理节点层级和显示顺序

在同一场景下,我们通常通过建立父子节点(节点树)来获取相对位置和整体场景位置的变换。

节点渲染顺序是按排列顺序依次渲染,也就是说排列渲染顺序在前的节点会被在后的节点所遮挡。

可以看到父节点永远是出现在子节点上面的,因此子节点永远都会遮盖住父节点。

注意:
大量节点会拖慢渲染速度,所以需要减少大量无意义的子节点。
尽可能合并相同功能的节点。

***4.***使用场景编辑器搭建场景图像
首先应建立Canvas节点作为父节点。
有时我们会建立一些逻辑节点,仅承载脚本执行逻辑,不包含渲染内容。通常我们将这些节点放置在场景根层级,和 Canvas 节点并列。

UI节点
从 创建节点菜单 中的 创建 UI 节点 类别里可以创建包括 Button(按钮)、Widget(对齐挂件)、Layout(布局)、ScrollView(滚动视图)、EditBox(输入框)等节点在内的常用 UI 控件。

层级管理器 里选中一个节点,然后按 Cmd/Ctrl + F 就可以在 场景编辑器 里聚焦这个节点。
选中一个节点后按 Cmd/Ctrl + D 会在该节点相同位置复制一个同样的节点,当我们需要快速制作多个类似节点时可以用这个命令提高效率。
在 场景编辑器 里要选中多个节点,可以按住 Cmd/Ctrl 键依次点击你想要选中的节点,在 层级管理器 里也是一样的操作方式。
场景编辑器 中将鼠标悬停在一个节点上(即使是空节点),会显示该节点的名称和约束框大小,这时点击就会选中当前显示名称的节点。在复杂的场景中选节点之前先悬停一会,可以大大提高选择成功率。

2019-04-20 15:35:51 qq_40209672 阅读数 427
  • Cocos Creator微信小游戏开发

    如今,H5游戏、微信小游戏、抖音小游戏、头条小游戏、快手小游戏、百度小游戏、QQ轻游戏等小程序游戏都特别火,而这些小游戏中80%都是用Cocos Creator开发的,Cocos Creator可以做到一次开发,多平台部署。本套课程将从零开始,从项目实战的角度手把手带领大家开发一个《猴子吃香蕉》微信小游戏,从环境的搭建开始,到最终部署到微信平台。让大家了解Cocos Creator中的组件化开发、碰撞系统、物理系统、动画系统、使用Cocos Creator发布微信平台、微信小游戏上传与发布等内容。同时,本套课程结合实战开发经验,教大家如何使用Git进行项目的版本管理以及团队成员之间的协作开发。

    672 人正在学习 去看看 赵杰

1.主域游戏工程“项目”-“构建发布”-“发布平台”选择“微信小游戏”-填入APPID-“构建”;

2.子域游戏过程“项目”-“构建发布”-“发布平台”选择“微信小游戏开放数据域”-“构建”;

3.在子域工程目录下“build”里的子域文件夹复制到主域工程目录下“build”文件夹下“wechatgame”文件夹里;

4.打开微信web开发者工具,选择“小游戏”,选择“+”-“导入项目”,选择主域工程目录\build\wechatgame,选择“导入”。

demo源码下载地址:https://download.csdn.net/download/qq_40209672/11131078

 

其中,源码子域文件中GroupRank.js文件中的 sdk.getFriendCloudStorage(["score"], (res)=>{ 这一行代码应该修改为

sdk.getGroupCloudStorage(shareTicket,["score"], (res)=>{

手误手误

2018-11-02 12:52:02 qq_26902237 阅读数 2851
  • Cocos Creator微信小游戏开发

    如今,H5游戏、微信小游戏、抖音小游戏、头条小游戏、快手小游戏、百度小游戏、QQ轻游戏等小程序游戏都特别火,而这些小游戏中80%都是用Cocos Creator开发的,Cocos Creator可以做到一次开发,多平台部署。本套课程将从零开始,从项目实战的角度手把手带领大家开发一个《猴子吃香蕉》微信小游戏,从环境的搭建开始,到最终部署到微信平台。让大家了解Cocos Creator中的组件化开发、碰撞系统、物理系统、动画系统、使用Cocos Creator发布微信平台、微信小游戏上传与发布等内容。同时,本套课程结合实战开发经验,教大家如何使用Git进行项目的版本管理以及团队成员之间的协作开发。

    672 人正在学习 去看看 赵杰

目录

cocos creator练习项目介绍

我的开发环境:

使用cocos creator制作过程

一:新建cocos creator工程

二:制作分辨率选择

三: 脚本语言选择

四:代码如何组织

五:游戏逻辑实现

六:cocos creator 微信子域排行榜


cocos creator练习项目介绍

这是一个使用cocos creator做的拧柠檬汁小游戏,模仿的4399小游戏里的,当做自己练手的项目。所用图片来自于截图后简单处理了一下,仅供学习参考用途(图片比较粗糙),PC下chrome浏览器运行截图如下:

chrome浏览器截图
Chrome浏览器下运行

微信开发者工具下截图如下:

微信开发者工具项目截图
微信开发者工具下运行

我的开发环境:

cocos creator v1.9.1    vscode v1.26  微信开发者工具  chrome浏览器

win7 64   

环境的配置请参考   Cocos Creator开发微信小游戏(一) 中官方文档里的步骤

使用cocos creator制作过程

一:新建cocos creator工程

cocos creator新建工程截图
cocos creator新建工程

选择 新建--->空白项目。路径不要含有中文字符,否则会有不可预知的错误或者难查的Bug

二:制作分辨率选择

当前主流游戏的分辨率,横屏: 1280*720   竖屏:720*1280,手机的分辨率越来越高,低分辨率在某些高端手机上会有毛边。

我这练习使用的是 640*960,不建议使用。

cocos creator Canvas
cocos creator适配设置

由于游戏是一个竖屏游戏,所以适配选择的是Fit Height, 在高度上占满手机屏幕,横向上的UI使用Widget组件,对齐Canvas

三: 脚本语言选择

我选择使用JavaScript,反正这几个都不熟悉

四:代码如何组织

这个问题一开始比较纠结,该怎么将模块组织起来。刚接触cocos creator,以前使用过2dx, 但两者的开发思路相差还是挺大的。cocos creator是基于组件(component)的,基本一个功能模块就是一个组件。一个组件挂在一个Node上。Node的树结构当场景加载完成后就new出来了,Node上挂载的组件在运行时也就可以Get到。2dx时候,需要自己去管理创建时机,模块顺序等

这是我组织的代码结构,截图如下:

DataManager:处理配置文件数据以及游戏逻辑相关联的数据,一个单例

SoundManager:游戏中所有的声音管理类,一个单例

UI:管理所有的UI,一个单例

五:游戏逻辑实现

由于逻辑比较简单,整个游戏逻辑放在Game.js里,游戏中界面UIGame.js, 结束界面UIGameOver.js,排行界面 UIRank.js

结构如下图:

cocos creator场景图
cocos creator场景图

开发的过程比cocos2dx时要方便了很多,直接拖拽节点与脚本,整个流程就OK了。

完整的工程及代码,可以在我的资源包里下载,由于是练习用的,有些代码及资源还有很大的优化余地

cocos creator完整工程

六:cocos creator 微信子域排行榜

上面资源包里的微信排行榜是一个比较早的工程了,有一些Bug,已经在后面的项目中解决了。可以在我的资源里单独下载

详见 cocos creator开发微信小游戏(二)

 

最后,想下载源码没有积分的,可以在下面留言留邮箱,虽然不能保证即时回复

试玩一下,未对Web Mobile下运行做测试,只当做一个功能演示罢了。

 

 

 

2018-11-17 18:03:10 weixin_39873315 阅读数 1127
  • Cocos Creator微信小游戏开发

    如今,H5游戏、微信小游戏、抖音小游戏、头条小游戏、快手小游戏、百度小游戏、QQ轻游戏等小程序游戏都特别火,而这些小游戏中80%都是用Cocos Creator开发的,Cocos Creator可以做到一次开发,多平台部署。本套课程将从零开始,从项目实战的角度手把手带领大家开发一个《猴子吃香蕉》微信小游戏,从环境的搭建开始,到最终部署到微信平台。让大家了解Cocos Creator中的组件化开发、碰撞系统、物理系统、动画系统、使用Cocos Creator发布微信平台、微信小游戏上传与发布等内容。同时,本套课程结合实战开发经验,教大家如何使用Git进行项目的版本管理以及团队成员之间的协作开发。

    672 人正在学习 去看看 赵杰

前言

在之前,用CocosCreator制作的游戏,截图功能的实现是一个比较麻烦的地方,之前的官方文档也没有相关资料,只有论坛大神给出的一些解决方案。后来cocos更新了2.0版本,camera组件大改,截图功能也有了官方的解决方案,详情请见这里。不过本文讨论的不是h5或是原生平台,以上平台可以参考上面官方文档。

开始

微信小游戏其实已经给开发者准备了相关的截图api–Canvas.toTempFilePath,你们可以先进去看看文档关于各个参数的解释。这个函数的作用是,在当前的Canvas指定一个区域(没有参数情况下则截取整个Canvas)来截图,最后返回一个图片临时路径。根据不同的需求来使用函数返回的路径图片。

需求Ⅰ 预览所截的图,并保存图片

这里需要配合微信api的另一个函数wx.previewImage,同理可先进去看看文档怎么解释的。

wechat_download() {
        let canvas = cc.game.canvas;
        let rate = this.wechat_canvas.parent.width / canvas.width;
        let width = this.wechat_canvas.width / rate;
        let height = this.wechat_canvas.height / rate;

        canvas.toTempFilePathSync({
            x: canvas.width / 2 - this.wechat_canvas.width / rate / 2,
            y: canvas.height / 2 - (this.wechat_canvas.height / 2 + this.wechat_canvas.y) / rate,
            width: width,
            height: height,
            destWidth: width,
            destHeight: height,
            success : (res)=> {
	            wx.previewImage({
                     current: res.tempFilePath,
                     urls: [res.tempFilePath]
                })
           }
        })
    },

上面是我调用的过程,其中要注意的是,不同设备适配的时候会将canvas拉伸,所以不可以直接用我们在cocos里的尺寸,这里我先计算放缩的比例rate,再根据rate调整截图位置和截图区域大小。

需求 Ⅱ 根据截图分享小游戏给好友

相关函数wx.shareAppMessage

shareFriend() {
        let canvas = cc.game.canvas;
        let rate = this.wechat_canvas.parent.width / canvas.width;
        let width = this.wechat_canvas.width / rate;
        let height = this.wechat_canvas.height / rate;

        canvas.toTempFilePathSync({
            x: canvas.width / 2 - this.wechat_canvas.width / rate / 2,
            y: canvas.height / 2 - (this.wechat_canvas.height / 2 + this.wechat_canvas.y) / rate,
            width: width,
            height: height,
            destWidth: 500,
            destHeight: 400,
            success: (res) => {
                 wx.shareAppMessage({
                 	 imageUrl: res.tempFilePath
                 })
             }
        })
    },

使用方法其实和上面差不多,注意目标尺寸最好是5:4吧

总结

调用微信api的话截图比较简单,但需要注意位置的定位和canvas的转换,还有一点,上述转发图片功能我测试的时候,用游客appid是不能用的,所以需要自己去申请一个appid才能使用shareAppMessage函数。

没有更多推荐了,返回首页