您想实现的只是动画精灵吗?您可以轻松地在不使用游戏引擎的情况下完成此操作。至于对话框,您可以在画布上使用dom元素。
这是我用javascript编写的一个精灵类 - 也许会有所帮助:)
var FrtlsSprite = Class.extend({
init: function(bitmap, offsetX, offsetY, frameWidth, frameHeight, frameCount, loop){
this.dtotal=0;
this.framerate=0.007;
this.loop = loop;
this.isPlaying=false;
this.bitmap = new Image();
this.bitmap.src = bitmap;
this.frames= new Array();
this.currentFrame=0;
this.endFrame=0;
for(var i=0;i<frameCount;i++){
this.frames.push(new FrtlsFrame(offsetX+i*frameWidth, offsetY+0, frameWidth, frameHeight));
}
},
update: function(dt){
if(this.isPlaying){
this.dtotal += dt
if (this.dtotal >= this.framerate){
this.dtotal -= this.framerate;
this.currentFrame++;
if(this.currentFrame==this.endFrame){
if(this.loop == false){
this.stop();
}
else{
this.currentFrame=0;
}
}
}
}
},
draw: function(){
fruitless.ctx.drawImage(this.bitmap,
this.frames[this.currentFrame].pos.x,
this.frames[this.currentFrame].pos.y,
this.frames[this.currentFrame].dimensions.x,
this.frames[this.currentFrame].dimensions.y,
0,
0,
this.frames[this.currentFrame].dimensions.x*fruitless.worldScale,
this.frames[this.currentFrame].dimensions.y*fruitless.worldScale);
},
play:function(frame){
this.currentFrame=(frame==undefined)?0:frame;
this.endFrame = this.frames.length-1
this.isPlaying=true;
},
playTo:function(frame, endFrame){
this.currentFrame=frame;
this.endFrame = endFrame;
this.isPlaying=true;
},
stop:function(frame){
this.currentFrame=(frame==undefined)?this.currentFrame:frame;
this.isPlaying=false;
}
});