我将 PhaserIO 与 Meteor 结合使用来创建多人 html5 游戏,但在我正在制作的网络原型中遇到了我似乎无法弄清楚的问题。首先,相关代码(也可作为gist获得):
if(Meteor.isClient) {
var game,
mainState,
mainStateInitialized,
characterData;
Template.game.game = function() {
characterData = Character.find().fetch();
if(!mainStateInitialized)
{
game = new Phaser.Game(500, 600, Phaser.AUTO, 'gameScreen');
createMainState()
}
}
}
function createMainState()
{
mainState = {
sprites: null,
playerLastFrame: characterData.length,
playerCurrentFrame: null,
charData: characterData,
preload: function() {
this.sprites = game.add.group();
game.stage.disableVisibilityChange = true;
game.load.image('hello', 'resources/hello.png');
},
create: function() {
$.each(characterData, function(index) {
var sprite = mainState.sprites.create(this.x, this.y, 'hello');
sprite.angle = this.angle;
});
},
update: function() {
this.charData = characterData;
this.playersCurrentFrame = this.charData.length;
if(this.playersLastFrame > this.playersCurrentFrame) {
//todo: remove player that left
}
else if(this.playersLastFrame < this.playersCurrentFrame) {
for(var i = playersLastFrame; i < playersCurrentFrame; i++) {
var thisData = this.charData[i],
sprite = null;
sprite = mainState.sprites.create(thisData.x, thisData.y, 'hello');
sprite.angle = thisData.angle;
}
}
for(var j = 0; j < mainState.sprites.length; j++) {
mainState.sprites.getAt(j).angle = this.charData[j].angle;
}
playersLastFrame = this.charData.length;
}
}
game.state.add('main', mainState);
game.state.start('main');
mainStateInitialized = true;
}
这个原型的想法是为数据库中的每个帐户在画布上显示一个精灵。我正在测试的主要功能是:
无缝地动态添加精灵/玩家数据(因为所有适当的多人在线游戏都应该具备这种能力。这最终将为适当的加入/离开系统铺平道路)
并搞乱创建有效的数据包。
现在,当玩家创建新帐户时,我遇到了动态创建新精灵的问题。大约 75% 的时间,当玩家创建新帐户时,什么都没有发生。Meteor 正确下推了我可以查询的字符数据,并mainState.sprites
正确显示了精灵数据。但是,画布上没有渲染任何内容。
另外 25% 的时间,它运行良好。此外,如果我有代码断点,据我所知,它的工作时间为 100%。
所以,这里显然发生了一些间歇性的事情,但我无法弄清楚问题是什么。在更新循环期间添加精灵时,我是否遗漏了什么?有没有更好的方法来解决这个问题?
我在 Nitrous.io 上有我的代码,所以如果它有助于解决问题,我可以运行一个 localhost 实例供您使用。