CocosCreator 硬核 APP分享战绩、截图到微信

前言

Creator2.0之后的版本，弃用了RenderTexture渲染树，导致很多功能不能用。别担心，去除一个东西，总会有另外一个东西来替代，所以重心就转移到了Camera身上。

提示：亲测实用有效，成败主要在于参数和语句的使用

该文章详细讲述了截图、交互、分享的流程，代码可以按需参考使用。第一部分是 js客户端 的截图交互代码，第二部分是 SDKInterfaces接口 的代码。

一、js截图、交互代码

1、我们把该方法封装到 share_image 函数中。

share_image:function()
{
	// 新建一个 RenderTexture,如果截图内容中不包含 Mask 组件，可以不用传递第三个参数
	var texture = new cc.RenderTexture();
	texture.initWithSize(cc.visibleRect.width, cc.visibleRect.height);
	
	// 创建一个camera, 并且设置 camera 的 targetTexture 为新建的 RenderTexture
	// 这样 camera 的内容将会渲染到新建的 RenderTexture 中。
	var node = new cc.Node();
	node.parent = cc.director.getScene();
	node.x = cc.visibleRect.width*0.5
	node.y = cc.visibleRect.height*0.5

	var camera = node.addComponent(cc.Camera);
	camera.targetTexture = texture;
	camera.enabled = true
	
	// 渲染一次摄像机，即更新一次内容到 RenderTexture 中
	camera.render();
	
	// 这样我们就能从 RenderTexture 中获取到数据了
	var data = texture.readPixels();
	
	// 获取到的截图数据是颠倒的，我们要处理data
	// 用 filpYImage 函数把图捋顺喽(该函数在第一部分第2条)
	var width = texture.width
	var height = texture.height
	var picData = filpYImage(data, width, height)

	camera.enabled = false
	node.removeFromParent()
	
	// 1、如果你想本地测试一下截图是否成功，可以打开下面这段注释
	// var spriteFrame = new cc.SpriteFrame()
    // spriteFrame.setTexture(texture)
        
    // var sprite_node = new cc.Node()
    // var sprite = sprite_node.addComponent(cc.Sprite)
    // sprite.spriteFrame = spriteFrame  
    // cc.director.getScene().addChild(sprite_node)
	
	// 2、将截图传递给Native设备，设置一下可读写路径，并返回该路径
	var filePath = jsb.fileUtils.getWritablePath() + 'render_to_image.png';
	var succeed = jsb.saveImageData(picData, width, height, filePath)
	if(succeed)
	{
	    // 路径设置成功之后，我们开始分享                
	    // 调用java交互访问第二大部分的函数share_img
	    jsb.reflection.callStaticMethod
	    (
	        packageName.replace(/\./g, '/') + "/SDKInterfaces",   //包名 + SDK文件
	        "share_img",    //调用SDK中的share_img函数(在第二部分)
	        "(Ljava/lang/String;II)V",  //函数的参数类型
	        filePath, 
	        width,
	        height
	    )
	}
}

2、filpYImage 函数：一开始的截图是颠倒的，把截图捋顺喽

filpYImage:function(data, width, height) 
{
    var picData = new Uint8Array(width * height * 4)
    var rowBytes = width * 4
    for (var row = 0; row < height; row++) 
    {
        var srow = height - 1 - row
        var start = srow * width * 4
        var reStart = row * width * 4
        
        for (var i = 0; i < rowBytes; i++) 
        {
            picData[reStart + i] = data[start + i]
        }
    }
    return picData
}

至此，js截图、交互完成，接下来我们看SDK端的接口。

二、SDKInterfaces接口

注意: 记得导入所需类名

import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import com.tencent.mm.opensdk.openapi.IWXAPI;
import com.tencent.mm.opensdk.modelmsg.WXMediaMessage;
import com.tencent.mm.opensdk.modelmsg.WXImageObject;
import org.cocos2dx.lib.Cocos2dxActivity;
import java.io.File;

public static IWXAPI mIWXAPI;   
public static void share_img(String path, int width, int height)
{
    try
    {
        File file = new File(path);
        if (!file.exists()) {
            return;
        }
        输出一下路径
        System.out.println(path);
        System.out.println(width);
        System.out.println(height);

        Bitmap bmp = BitmapFactory.decodeFile(path);
        WXImageObject imgObj = new WXImageObject(bmp);
        
        WXMediaMessage msg = new WXMediaMessage();
        msg.mediaObject = imgObj;
    
        Bitmap thumbBmp = Bitmap.createScaledBitmap(bmp, 150, 150, true);
        bmp.recycle();
        msg.thumbData = Util.bmpToByteArray(thumbBmp, true);
        
        SendMessageToWX.Req req = new SendMessageToWX.Req();
        req.transaction = buildTransaction("img");
        req.message = msg;
        req.scene = SendMessageToWX.Req.WXSceneSession;
        mIWXAPI.sendReq(req);   
    }
    catch(Exception e)
    {
        e.printStackTrace();
    }
}

以上两部分完成之后，我们构建、打包，就可以顺利实现分享功能。

后语：

我刚好是要写这个分享战绩的功能，也在网上搜了很多例子，发现网上多是星星草草的几句话，没有一点实用性。索性自己摸索出这种方法，把它分享给广大学者，希望可以对学者们有所帮助。