|
很喜欢群里积极交流的气氛,特别感谢“菠菜”,让我少走了很多弯路,以下是一些个人的经验,希望对新手有所帮助。
开发环境 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 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. 在测试环境显示所在国家无法支持
随便上传一个小游戏项目,改成测试或者生产
|
|