2019-02-14 09:51:20 pikefish 阅读数 129
  • Cocos Creator微信小游戏开发

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

    682 人正在学习 去看看 赵杰

有时候我们在用cocos creator调用微信api接口的时候会发现,如果根据官方的例子来写例子的话是这个样子的

wx.startAccelerometer()
wx.onAccelerometerChange(function (res) {
    if(res.x >1.5 || res.y>1.5 || res.z>1.5 ){
    //判断手机是否摇动
    }
})

然后在结束的时候写一个

onDestroy(){
        if(typeof(wx) != "undefined"){
            console.log("停止监听加速器");
            wx.stopAccelerometer();
        }
    },

大概这个玩意
但是对于新手来说这样写问题很大,具体在于wx.onAccelerometerChange(function (res) 这个方法当中,你每次往里面塞一个判断相当于注册了多次这类型的函数,会导致后面某些关卡不执行相对应的判断也会调用这个函数里面的功能,那么怎么解决这些并且写一个完善的方法来调用加速器api呢
代码段如下

window.shake = {
    callBack: null,
    init: function () {
        console.log(this);
        if(typeof(wx) != 'undefined'){
            let self = this;
            wx.startAccelerometer();
            wx.onAccelerometerChange(function(res){
            console.log("加速计回调");
            if(self.callBack){
                self.callBack(res);
            }
            })
        }
    },
    start: function (call) {
        this.callBack = call;
        if(typeof(wx) != 'undefined'){
            wx.startAccelerometer();
        }
    },
    stop: function () {
        this.callBack = null;
        if(typeof(wx) != 'undefined'){
            wx.stopAccelerometer();
        }
    }
};

这相当与一个总的方法,在一开始就可以写入段代码并且在这个脚本内的start{}里面加上

window.shake.init();

好了,接下来的使用方法其实就是将一开始的功能修改之后就好了

window.shake.start(function (res) {
    if(res.x >1.5 || res.y>1.5 || res.z>1.5 ){
    //判断手机是否摇动
    }
})

在结束的onDestroy方法就变成这样子了

window.shake.stop();

如此一来便不会存在微信加速度重复注册的问题了

2019-04-08 11:05:58 pikefish 阅读数 1570
  • Cocos Creator微信小游戏开发

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

    682 人正在学习 去看看 赵杰

关于分享功能,微信官方的api也写的很清楚了,不过·注意不要和onShareAppMessage混在一起,那玩意是监听右上角的不是自己设置地方的

wx.shareAppMessage({
                    title: "你是一个,一个一个一个",
                    imageUrl: ""//可以是网络图片Url也可以本地路径
                })

但是这样也只是单纯的分享罢了,如果你想要在分享的同时获得奖励,在你需要调用的地方的onload方法,你得写上onShow方法
(注:微信现在已经取消分享回调,也就是说用户无论是分享成功还是失败都是没有办法直接判断的,onshow方法也会直接执行)

wx.onShow(function () {

}}

那么问题来了,有时候你需要很多个分享,并且每种分享的奖励都是不一样的。既然分享也不能获得回调,那么要怎么判断是否分享成功了呢
我们首先来说一下很多个分享怎么办,实际上只要写一个标识符就可以了
大概就是这个样子
然后给他赋值就行,比如this.shareTag = “keys” 一类的
onshow里面就可以这样判断了

let self = this;
 wx.onShow(function () {
                if (self.isShared && self.shareTag == "keys") {
                        //分享成功
                        console.log("分享成功");
                        self.isShared = false;
                        self.shareTag = "";
                        //这里可以放上奖励方法啥的
                }
           )}

所以说说了半天。还没说要怎么判断是否成功吗,连成功失败都判断不了写个茄子
这里我的方法是比较简单的方法,是使用时间来进行判断,当分享时间在3秒以上就执行判断成功,虽然有些不妥当但是是对于新手来说最为简单的方法
大概还是这个样子
接下来是获取系统时间,可以参考这篇有关获取本地时间

this.isShared = true;
this.shareTag = "keys";
this.closeTime = new Date().getTime();
if (CC_WECHATGAME) {    //判断是否为微信平台,这样写可以让你在原生平台上不报错卡住
       wx.shareAppMessage({
             title: "乖乖站好♂",
             imageUrl: ""
       })
}

然后在onload就可以这样判断时间了

if (typeof (wx) !== "undefined") {
            let self = this;
            wx.onShow(function () {
                if (self.isShared && self.shareTag == "keys") {
                    //分享后返回
                    let curTime = new Date().getTime();
                    if (curTime - self.closeTime >= 3000) {
                        //分享成功
                        console.log("分享成功");
                        self.isShared = false;
                        self.shareTag = "";
                        self.closeTime = curTime;
                    }
                }
           )}
}

右上角监听同理,不过要使用的api就是文章开头说的onShareAppMessage(),在使用之前请记得开启右上角的转发按钮,因为默认是关闭的嘛

if (typeof (wx) !== "undefined") {
            wx.onShareAppMessage({
                title: "WSND&NMSL",
                imageUrl: "NMSL is not a function"
            });
      }

开启代码如下

wx.showShareMenu({
});
2019-02-27 11:15:40 pikefish 阅读数 2354
  • Cocos Creator微信小游戏开发

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

    682 人正在学习 去看看 赵杰

首先是官方的例子
wx.createUserInfoButton

可以看到官方给出的例子如下

const button = wx.createUserInfoButton({
  type: 'text',
  text: '获取用户信息',
  style: {
    left: 10,
    top: 76,
    width: 200,
    height: 40,
    lineHeight: 40,
    backgroundColor: '#ff0000',
    color: '#ffffff',
    textAlign: 'center',
    fontSize: 16,
    borderRadius: 4
  }
})
button.onTap((res) => {
  console.log(res)
})

实际上,虽然给出了这个按钮的属性,但是对于一些小白来说还是不懂得如何使用,比如说这个按钮的位置的放置,所以我将上述代码进行了一些调整

      createLoginButton() {
        if (typeof (wx) != 'undefined') {
            //获取系统信息的宽度
            let sysInfo = wx.getSystemInfoSync();
            let screenW = sysInfo.screenWidth;
            let screenH = sysInfo.screenHeight;
            let rate = screenW / 750;//设计分辨率为750*1334
            let self = this;
            //根据你图片的大小调整对应的长宽高,并且在不同的分辨率下大小也会对应变化,我的图片是418*160
            let width = 418 * rate;
            let height = 160 * rate;
            const button = wx.createUserInfoButton({
                type: 'image',
                image: "images/ksyx.png",//图片的位置是在打包构建后的bulid里的根目录开始而不是项目目录
                style: {
                //设置位置
                    left: screenW / 2 - width / 2,
                    top: screenH/2 + 100,
                    width: width,
                    height: height
                }
            })
            button.onTap((res) => {
                console.log('点击授权按钮', res)
                if (res && res.userInfo) {
                    button.destroy();
                    self.Loadmenu();//载入下一个场景
                }
            })
        }
    }

在上述代码中,它的意义在于创建一个按钮,如果授权成功就会加载到下一个页面并且下一次便不会触发,不授权的话便会在当前页面停留直到用户同意授权,这样你就可以从res中获得用户的头像id等信息并且在你需要的地方显示出来

如果需要一个覆盖全屏的透明按钮的话,可以参考一下群友提供的代码

//创建一个透明按钮在cc.Button的node节点上
	createAuthorizeBtn(btnNode:cc.Node) {
		let btnSize = cc.size(btnNode.width+10,btnNode.height+10);
		let frameSize = cc.view.getFrameSize();
		let winSize = cc.director.getWinSize();
		// console.log("winSize: ",winSize);
		// console.log("frameSize: ",frameSize);
		//适配不同机型来创建微信授权按钮
		let left = (winSize.width*0.5+btnNode.x-btnSize.width*0.5)/winSize.width*frameSize.width;
		let top = (winSize.height*0.5-btnNode.y-btnSize.height*0.5)/winSize.height*frameSize.height;
		let width = btnSize.width/winSize.width*frameSize.width;
		let height = btnSize.height/winSize.height*frameSize.height;
		// console.log("button pos: ",cc.v2(left,top));
		// console.log("button size: ",cc.size(width,height));

		let self = this;
		self.btnAuthorize = wx.createUserInfoButton({
			type: 'text',
			text: '',
			style: {
				left: left,
				top: top,
				width: width,
				height: height,
				lineHeight: 0,
				backgroundColor: '',
				color: '#ffffff',
				textAlign: 'center',
				fontSize: 16,
				borderRadius: 4
			}
		})

		self.btnAuthorize.onTap((uinfo) => {
			console.log("onTap uinfo: ",uinfo);
			if (uinfo.userInfo) {
				console.log("wxLogin auth success");
				wx.showToast({title:"授权成功"});
			}else {
				console.log("wxLogin auth fail");
				wx.showToast({title:"授权失败"});
			}
		});
	}
2018-08-11 18:03:09 lck8989 阅读数 2444
  • Cocos Creator微信小游戏开发

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

    682 人正在学习 去看看 赵杰

cocos creator 可以通过新建一个creator项目进行添加子域项目,但是有一个缺点就是占用文件大小是一个问题,所以我这里采用微信的API进行绘制排行榜,

主域就是各种发送给子域的消息,这里不再这里赘述,就是各种调用微信的API

这里给出微信的API

微信开放数据域

新建main.js

目录结构如下:

main.js

export default class Main{
    constructor(){
        this.canvas = wx.createCanvas();
        this.context = this.canvas.getContext('2d');
        console.log(this.canvas.width,this.canvas.height);
        this.drawRect(0,0,this.canvas.width,this.canvas.height,'white');
    }
    /**
     *@param offsetX : 距离屏幕的左边的距离
     *@param offsetY : 距离屏幕上边的距离 
     *@param width   : 要绘制的画面的宽度
      @param height  : 要绘制画面的高度
      @param color   : 要绘制画面的颜色 
     */
    drawRect(offsetX,offsetY,width,height,color){
        this.context.fillStyle = color;
        this.context.fillRect(offsetX, offsetY, width, height);
    }
    //绘制文本
    drawText(offsetX,offsetY,content,color,fontSize){
        this.context.fillStyle = color;
        this.context.font = fontSize;
        this.context.fillText(content,offsetX,offsetY);
    }
    //绘制图片 void ctx.drawImage(image, dx, dy, dWidth, dHeight);
    drawImage(image,dx,dy,dWidth,dHeight){
        this.context.drawImage(image,dx,dy,dWidth,dHeight);
    }

}

game.js

import Main from './js/main'

let main = new Main();
//一行的高度,宽度,间距
let List = {
    WIDTH     : main.canvas.width * 6 / 9,
    HEIGHT    : main.canvas.height / 11,
    //行的间距
    OFFSET    : main.canvas.height / 28,
    //起始x 坐标
    STARTX    : 60,
    //起始Y 坐标
    STARTY    : 60,
    //该行背景色
    COLOR     : '',
    //一行中字体的颜色
    FONTCOLOR  : '',
    FONTESTYLE : '20px serif',
    FONTTOP    : 40,
    IMAGETOP  : 5,
    IMAGEWIDTH  : 50,
    IMAGEHEIGHT : 50,
}
//可以容纳的行数
let ROWNUMBER =  Math.floor((main.canvas.height - List.STARTY) / (List.HEIGHT + List.OFFSET));
console.log("可以容纳的最大的行数是:",ROWNUMBER);
//需要显示出来的数据
let Data = [{
    RANK        : 1,
    imageUrl    : "头像地址",
    nickname    : '昵称',
    score       : '210'
    },
    {
        RANK: 2,
        imageUrl: "头像地址",
        nickname: '昵称',
        score: '220'
    },
    {
        RANK: 3,
        imageUrl: "头像地址",
        nickname: '昵称',
        score: '210'
    },
    {
        RANK: 4,
        imageUrl: "头像地址",
        nickname: '昵称',
        score: '220'
    },
    {
        RANK: 5,
        imageUrl: "头像地址",
        nickname: '昵称',
        score: '210'
    },
    {
        RANK: 6,
        imageUrl: "头像地址",
        nickname: '昵称',
        score: '220'
    }
    ]
//绘制底图
main.drawRect(50, 50, main.canvas.width * 3 / 4, main.canvas.height * 3 / 4,'#6969FF');
//绘制排名行
for(let i = 0;i < Data.length;i++){
    
    if(i % 2 === 0 ){
        List.COLOR = '#D8BFD8';
        List.FONTCOLOR = '#ffffff';
    }else{
        List.COLOR = '#D3D3D3'
        List.FONTCOLOR = '#ec0063';
    }
    main.drawRect(List.STARTX, List.STARTY + i*(List.HEIGHT +  List.OFFSET), List.WIDTH, List.HEIGHT, List.COLOR);
    //绘制数据中的内容
    let dataItem = Data[i];
    // drawText(offsetX, offsetY, content, color, fontSize)
    main.drawText(List.STARTX + 5,List.STARTY + List.FONTTOP + i *(List.HEIGHT + List.OFFSET),dataItem.RANK,List.FONTCOLOR,List.FONTESTYLE);
    let imagePromise = new Promise(function(resolve,reject){
        //绘制图像内容
        let image = wx.createImage();
        image.src = dataItem.imageUrl;
        image.onload = function () {
            resolve(image);
        }
    });
    imagePromise.then(function(image){
        console.log("image is ",image);
        // drawImage(image, dx, dy, dWidth, dHeight)
        main.drawImage(image, List.STARTX + 30, List.STARTY + List.IMAGETOP + i * (List.HEIGHT + List.OFFSET), List.IMAGEWIDTH, List.IMAGEHEIGHT);
    });
    //绘制昵称
    main.drawText(List.STARTX + 93, List.STARTY + List.FONTTOP + i * (List.HEIGHT + List.OFFSET), dataItem.nickname, List.FONTCOLOR, List.FONTESTYLE);
    main.drawText(List.STARTX + 190, List.STARTY + List.FONTTOP + i * (List.HEIGHT + List.OFFSET), dataItem.score, List.FONTCOLOR, List.FONTESTYLE);

}

// main.drawText(65,100,'1','white','25px serif');

 

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

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

    682 人正在学习 去看看 赵杰

前言

在之前,用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函数。

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