leenoah 发表于 2018-9-27 20:27:34

FB新人分享

很喜欢群里积极交流的气氛,特别感谢“菠菜”,让我少走了很多弯路,以下是一些个人的经验,希望对新手有所帮助。

开发环境 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;    }    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. 在测试环境显示所在国家无法支持
         随便上传一个小游戏项目,改成测试或者生产


leenoah 发表于 2018-9-27 20:35:21

果然排版有问题,幸好发帖之前复制到了Word文档,大家可以直接看下附件:):) 想要看的直接打开附件看吧。

wysdxj 发表于 2018-9-30 18:49:10

新人感谢分享

0xc 发表于 2018-10-18 09:12:28

感谢分享

王晓微 发表于 2020-7-7 14:08:22

十一运夺金天津时时彩幸运飞艇
页: [1]
查看完整版本: FB新人分享