搜索
热搜: 活动 交友 discuz
Hi~登录注册
查看: 5014|回复: 4
打印 上一主题 下一主题

FB新人分享

[复制链接]

1

主题

2

帖子

7

积分

新手上路

Rank: 1

积分
7
跳转到指定楼层
楼主
发表于 2018-9-27 20:27:34 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
很喜欢群里积极交流的气氛,特别感谢“菠菜”,让我少走了很多弯路,以下是一些个人的经验,希望对新手有所帮助。

开发环境 Creator 2.02

以Last Knife 举例

1 好友邀请挑战
  利用chooseAsync[选择好友] 或者 createAsync[已知好友ID的情况下直接选择好友]
  updateAsync 可以在之前打开的窗口更新发送信息
// This will post a custom update. If the game is played in a messenger// chat thread, this will post a message into the thread with the specified// image and text message. And when people launch the game from this// message, those game sessions will be able to access the specified blob// of data through FBInstant.getEntryPointData().FBInstant.updateAsync({  action: 'CUSTOM',  cta: 'Play',  image: base64Picture,  text: {    default: 'Edgar just played BASH for 9 points!',    localizations: {      en_US: 'Edgar just played BASH for 9 points!',      pt_BR: 'Edgar jogou BASH por 9 pontos!',    }  }  template: 'WORD_PLAYED',  data: { myReplayData: '...' },  strategy: 'IMMEDIATE',  notification: 'NO_PUSH',}).then(function() {  console.log('Message was sent successfully');});
Base64Pic 可以用 http://imgbase64.duoshitong.com/ 在线转换

或者利用 Creator的摄像机功能 截屏,再进行图片字符转换

let node = new cc.Node();node.parent = cc.director.getScene();let camera = node.addComponent(cc.Camera);// 设置你想要的截图内容的 cullingMaskcamera.cullingMask = 0xffffffff;// 新建一个 RenderTexture,并且设置 camera 的 targetTexture 为新建的 RenderTexture,这样 camera 的内容将会渲染到新建的 RenderTexture 中。let texture = new cc.RenderTexture();let gl = cc.game._renderContext;// 如果截图内容中不包含 Mask 组件,可以不用传递第三个参数texture.initWithSize(cc.visibleRect.width, cc.visibleRect.height, gl.STENCIL_INDEX8);camera.targetTexture = texture;// 渲染一次摄像机,即更新一次内容到 RenderTexture 中camera.render();// 这样我们就能从 RenderTexture 中获取到数据了let data = texture.readPixels();// 接下来就可以对这些数据进行操作了let canvas = document.createElement('canvas');let ctx = canvas.getContext('2d');canvas.width = texture.width;canvas.height = texture.height;let rowBytes = width * 4;for (let row = 0; row < height; row++) {    let srow = height - 1 - row;    let imageData = ctx.createImageData(width, 1);    let start = srow*width*4;    for (let i = 0; i < rowBytes; i++) {        imageData.data = data[start+i];    }    ctx.putImageData(imageData, 0, row);}let dataURL = canvas.toDataURL("image/jpeg");let img = document.createElement("img");img.src = dataURL;
2 .关于排行榜

   世界排行榜获得数值
        FBInstant.getLeaderboardAsync('worldRank1')
        .then(function(leaderboard) {
        return leaderboard.getEntriesAsync();
        })
        .then(function(entries) {
              console.log(entries)
           for (let i = 0; i < 200; i++){
               com.globalPlayerRank = entries[i].getRank();
               com.globalPlayerScore = entries[i].getScore();
               com.globalPlayerPicUrl = entries[i].getPlayer().getPhoto();
               com.globalPlayerName = entries[i].getPlayer().getName();
               com.globalPlayerExtraData = entries[i].getExtraData();
               var item = cc.instantiate(rankRow);
               item.getComponent('RankRow').init();
               rankingContent.addChild(item);
               com.progressRankNode = 1;
               progressBar.progress =1.2
           }
    });


   好友排行榜获得数值
        FBInstant.getLeaderboardAsync('worldRank1')
        .then(function(leaderboard) {
        return leaderboard.getConnectedPlayerEntriesAsync();
        })
       .then(function(entries) {
        console.log(entries)
        for (let i = 0; i < entries.length; i++){
            com.friendGetID = entries[i].getPlayer().getID();
            com.friendPlayerRank = entries[i].getRank();
            com.friendPlayerScore = entries[i].getScore();
            com.friendPlayerPicUrl = entries[i].getPlayer().getPhoto();
            com.friendPlayerName = entries[i].getPlayer().getName();
            com.friendPlayerExtraData = entries[i].getExtraData();
            var item = cc.instantiate(rankRow);
            item.getComponent('RankRow').initFriend();
            friendRankingContent.addChild(item);
            com.progressRankNode = 1;
            progressBar.progress =1.2
        }
    });



       新建一个Prefab ,赋值到你想要的对象。
    initFriend(){
          //赋值
        this.playBtnNode.active = true;

        var playerName = FBInstant.player.getName();
        if(playerName == com.friendPlayerName){
            this.playBtnNode.active = false ;
        }
        this.rankLabel.string =   com.friendPlayerRank;
        this.ScoreLabel.string = com.friendPlayerScore;
        this.playerNameLabel.string = com.friendPlayerName;
        this.jewelCountLabel.string = com.friendPlayerExtraData;
        //照片
        var remoteUrl =  com.friendPlayerPicUrl
        var photoNode = this.myPhotoNode
        cc.loader.load(remoteUrl, function (err, texture) {
            var frame=new cc.SpriteFrame(texture);
            photoNode.getComponent(cc.Sprite).spriteFrame  = frame;
             console.log(err)
        });
        console.log(com.friendPlayerRank)
        if (com.friendPlayerRank % 2 == 1) {
            this.bgSprite.color = new cc.Color(126, 0, 150, 255);
            this.bgSprite.opacity = 120
        }else{
            this.bgSprite.color = new cc.Color(78, 1, 50, 255);
            this.bgSprite.opacity = 120
        }
        if (com.friendPlayerRank == 1) {
            this.rankLabel.node.color = new cc.Color(252, 212, 4, 255);
            this.playerNameLabel.node.color = new cc.Color(252, 212, 4, 255);
            this.ScoreLabel.node.color = new cc.Color(252, 212, 4, 255);
            this.jewelCountLabel.node.color = new cc.Color(252, 212, 4, 255);
        } else if (com.friendPlayerRank == 2) {
            this.rankLabel.node.color = new cc.Color(250, 151, 4, 255);
            this.playerNameLabel.node.color =new cc.Color(250, 151, 4, 255);
            this.ScoreLabel.node.color = new cc.Color(250, 151, 4, 255);
            this.jewelCountLabel.node.color = new cc.Color(250, 151, 4, 255);
        } else if (com.friendPlayerRank == 3) {
            this.rankLabel.node.color = new cc.Color(122, 250, 4, 255);
            this.playerNameLabel.node.color =new cc.Color(122, 250, 4, 255);
            this.ScoreLabel.node.color = new cc.Color(122, 250, 4, 255);
            this.jewelCountLabel.node.color = new cc.Color(122, 250, 4, 255);
        }      
    },




BIn 最后在Creator新建ScrollView UI 节点,在Layout节点下面生成Prefab的数据就可以了 。

    3)第一次创建FB测试环境的一些小问题

         1. 按照下面的Creator搭建环境之后加载游戏的时候会卡在0%


三、测试游戏在本地启用支持 https 的 Web 服务器
  • 首先打开命令行窗口,进入构建好的 fb-instant-games 目录,通过 npm 安装 http-server 包:
$ cd fb-instant-games$ npm install -g http-server
  • 接着通过 openssl 创建私钥和证书:
$ openssl genrsa 2048 > key.pem$ openssl req -x509 -days 1000 -new -key key.pem -out cert.pem
  • 当私钥和证书准备就绪后,可通过 SSL 在本地启动 Web 服务:
$ http-server --ssl -c-1 -p 8080 -a 127.0.0.1          一定要访问https://localhost:8080,把证书加入到白名单


        2. 在测试环境显示所在国家无法支持
           随便上传一个小游戏项目,改成测试或者生产


回复

使用道具 举报

1

主题

2

帖子

7

积分

新手上路

Rank: 1

积分
7
沙发
 楼主| 发表于 2018-9-27 20:35:21 | 只看该作者
果然排版有问题,幸好发帖之前复制到了Word文档,[img]大家可以直接看下附件[/img] 想要看的直接打开附件看吧。

1.zip

269.83 KB, 下载次数: 49

正常排版

回复 支持 反对

使用道具 举报

0

主题

3

帖子

14

积分

新手上路

Rank: 1

积分
14
板凳
发表于 2018-9-30 18:49:10 | 只看该作者
新人感谢分享
回复 支持 反对

使用道具 举报

0

主题

5

帖子

59

积分

注册会员

Rank: 2

积分
59
地板
发表于 2018-10-18 09:12:28 | 只看该作者
感谢分享
回复

使用道具 举报

0

主题

3

帖子

13

积分

新手上路

Rank: 1

积分
13
5#
发表于 2020-7-7 14:08:22 | 只看该作者
回复 支持 反对

使用道具 举报

游客
回复
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表