porfin lo logre. ahora ya puedo pasar al siguiente paso: crear Sprites masivamente XD
Muchas gacias por tu ayuda
PD: dejo el script para que veas como lo hize:
Código Javascript
:
Ver original<HTML>
<HEAD>
<TITLE>Ice Pokemon</TITLE>
<SCRIPT>
Object.prototype.initialize = function(init){for(var prop in init)if(init.hasOwnProperty(prop)) this[prop] = init[prop];}
$=function(i) {return document.getElementById(i)}
Sprite=function(image,width,height,hmargin,vmargin,hspace,vspace,rows,cols) {
this.numItems=rows*cols;
this.image=new Image()
this.image.src=image;
this.frames=new Array();
count=0;
for (i=0; i<cols; i++) {
for (j=0; j<rows; j++) {
y=hmargin+(height*j)+(hspace*j)
x=vmargin+(width*i)+(vspace*i)
this.frames[count]={x:x,y:y}
count++
}
}
this.height=height;
this.width=width
}
Animation=function(spr,spd) {
this.initialize({
sprite:spr,
speed:spd,
frames:[],
timer:null,
count:0,
id:null
});
}
Animation.prototype={
addFrame: function (id) {
spr=this
i=(!this.frames.length)? 0: this.frames.length++
this.frames[i]={
id:id,
sprite:"url('"+spr.sprite.image.src+"') -"+spr.sprite.frames[id].x+"px -"+spr.sprite.frames[id].y+"px"
}
},
drawAnimation:function (con, id) {
image=document.createElement('img')
image.setAttribute('src','sprites/empy.gif')
image.setAttribute('style',"background:"+this.frames[0].sprite)
image.setAttribute('class','animation')
image.setAttribute('width',this.sprite.width)
image.setAttribute('height',this.sprite.height)
image.setAttribute('id',id)
con.appendChild(image)
this.id=image
var that = this;
this.timer=setInterval(function(){that.play();},this.speed);
},
play:function() {
//this.count=(this.count==this.frames.length)? 0:this.count++
this.id.style.background=this.frames[this.count].sprite
if (this.count==this.frames.length-1) {this.count=0} else {this.count++}
}
}
avatar=new Sprite('sprites/avatars/ash_walking.gif',30,38,0,0,0,0,1,12);
aniAvatar=new Animation(avatar,1000);
aniAvatar.addFrame(0);
aniAvatar.addFrame(1);
aniAvatar.addFrame(0);
aniAvatar.addFrame(2);
window.onload=function() {aniAvatar.drawAnimation($('con'),'IMGavatar')}
</SCRIPT>
</HEAD>
<BODY>
<DIV ID="con"></DIV>
</BODY>
</HTML>