Facebook instance game技巧

fb技巧

1. fb调试说明 https://developers.facebook.com/docs/games/build/instant-games/get-started/test-publish-share?locale=zh_CN

   生成key和证书

   npm install -g http-server
   openssl genrsa 2048 > key.pem
   openssl req -x509 -days 1000 -new -key key.pem -out cert.pem

   使用 SSL 从 localhost 运行游戏
   http-server --ssl -c-1 -p 8080 -a 127.0.0.1
   在浏览器中输入 https://localhost:8080，确认浏览器显示的安全警告后，在继续操作。
   戏嵌入到fb的运行工具中
   https://www.facebook.com/embed/instantgames/YOUR_GAME_ID/player?game_url=https://localhost:8080
   完成本地调试。

2. fb分享图片
   背景图片+fb的头像，合成一张分享的base64

    getImgBase64(iScore?: number): Promise<string> {
        return new Promise((resolve) => {
            let imgSp: cc.SpriteFrame = this.gScene.fbshareBg;
            let canvas = document.createElement("canvas");
            let w = 1280;
            let h = 720;
            canvas.width = w;
            canvas.height = h;
            let ctx = canvas.getContext("2d");
   
            // 绘制背景图
            ctx.drawImage(imgSp.getTexture().getHtmlElementObj(), 0, 0, w, h);
   
            // 获取用户头像
            let photoURL = FBInstant.player.getPhoto();
            if (photoURL) {
                let img = new Image();
                img.crossOrigin = "anonymous";
                img.src = photoURL;
                // 头像绘制大小
                let avatarSize = 200;
                // 位置放在右边中心
                let tox = w - avatarSize - 100;
                let toy = h / 2 - avatarSize / 2 + 50;
                img.onload = () => {
                    // ctx.drawImage(img, tox, toy, avatarSize, avatarSize);
                    // 创建一个圆形的路径
                    ctx.beginPath();
                    ctx.arc(
                        tox + avatarSize / 2,
                        toy + avatarSize / 2,
                        avatarSize / 2,
                        0,
                        Math.PI * 2,
                        true
                    );
                    ctx.closePath();
                    ctx.clip();
                    // 绘制图像到圆形区域
                    ctx.drawImage(img, tox, toy, avatarSize, avatarSize);
                    // 取消剪裁
                    ctx.restore();
   
                    let base64 = canvas.toDataURL("image/png");
                    console.log("base64a:", base64);
                    resolve(base64);
                };
                // 绘制文字
                if (iScore) {
                    ctx.font = "bold 100px Arial";
                    ctx.fillStyle = "#ffffff";
                    // 文字放在头像下方
                    let txtw = tox ;
                    let txty = toy + avatarSize + 100;
                    ctx.fillText("" + iScore, txtw, txty);
                }
                img.onerror = () => {
                    console.log("Failed to load user avatar");
                    let base64 = canvas.toDataURL("image/png");
                    console.log("base64b:", base64);
                    resolve(base64);
                };
            } else {
                let base64 = canvas.toDataURL("image/png");
                console.log("base64c:", base64);
                resolve(base64);
            }
        });
    }