no detecta ID

[ClubIce]

Hola,

tengo el siguienete script:

Código Javascript:

Animation=function(spr,spd) {
 this.initialize({
  sprite:spr,
  speed:spd,
  frames:[],
  timer:null,
  count:0
 });
}
Animation.prototype={
 addFrame: function (id) {
  spr=this
  this.frames[frames.length]={
   id:id,
   sprite:"url('"+spr.sprite.image.src+"') "+spr.sprite.frames[id].x+"px "+spr.sprite.frames[id].y+"px;"
  }
 },
 drawAnimation:function (con, id) {
  alert(con)
  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=document.getElementById(id)
  this.timer=setInterval(this.play,this.speed);
 },
 play:function() {
  if (this.count=this.frames.length) {
   this.count=0
  } else {
   this.count++
  }
  this.id.style.background=this.frames[this.count]
 }
}
avatar=new Sprite('sprites/avatars/ash_walking.gif',28,38,0,0,0,2,3,4);
aniAvatar=new Animation(avatar,50);
aniAvatar.addFrame(0);
aniAvatar.addFrame(1);
aniAvatar.addFrame(0);
aniAvatar.addFrame(2);
window.onload=function() {aniAvatar.drawAnimation($('con'),'IMGavatar')}
 

mi problema esque cunado se ejecuta la funcion play(), me aparce como error: this.id is undefined.

en realidad esque no tengo mucha experiencia con DOM y no se como referirme a un objeto creado con DOM.

[zerokilled]

veamos! lo mas probable es que, tal como te lo indica el error, la propiedad id no esta definida en la instancia de Animation. el problema puede ser que estas invocando play antes de invocar drawAnimation. este ultimo es quien crea y agrega el elemento. de todos modos, dentro de play intenta hacer un alert de this.id para determinar que valor contiene en ese momento de invocacion.

por otro lado, a juzgar por el codigo, no comprendo porque crear el elemento y luego buscarlo por getElementById cuando puedes crear el elemento y hacerlo como una propiedad para las instancias Animation. de esta manera te evitas el paso de tener que buscar por dicho elemento. es decir, en tu funcion drawAnimation luego de crear la imagen asignas esta a la propiedad this.id. luego en play no tienes que buscarla, simplemente usas this.id.

[ClubIce]

no me funcion :(

[zerokilled]

¿como lo hicistes? lo que tenias que hacer era cambiar la linea #28 por this.id = image.

[ClubIce]

lo hize asi como dises, y hasta use alerts para comprovar que se eta pasando el valor, pero me sigue dando el mismo error

[zerokilled]

¿cabe la posiblidad que de que tengas un ejemplo en linea para comprobarlo? es que en mi interpretacion mental entiendo que debe funcionarte. ando un tanto vago como para preparar varias imagenes y escribir el resto del codigo que falta.

@edit,
no estoy seguro, sospecho que el problema esta en la linea #29. setInterval ejecuta la funcion en el contexto de window, de modo que la referencia this en play se refiere a window y no a la instancia creada. tienes que crear un closure de una variable que haga referencia a la instancia creada. probablemente como lo siguiente.

Código:

var that = this;
this.timer=setInterval(function(){that.play();},this.speed);

[ClubIce]

Código Javascript:

Animation=function(spr,spd) {
 this.initialize({
  sprite:spr,
  speed:spd,
  frames:[],
  timer:null,
  count:0,
  id:null
 });
}
Animation.prototype={
 addFrame: function (id) {
  spr=this
  this.frames[frames.length]={
   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)
  this.id=image
  con.appendChild(image)
  this.timer=setInterval(this.play,this.speed);
 },
 play:function() {
  if (this.count=this.frames.length) {
   this.count=0
  } else {
   this.count++
  }
  this.id.style.background=this.frames[this.count]
 }
}
 

[ClubIce]

si era eso, ya me funciono, pero surge otro problema: la imagen no se mueve, JS no me cambia el Background: http://clubice.site50.net/eje/

[zerokilled]

el problema va por estos tiros, a ver si lo encuentras antes que yo. la consola de firefox me dice Warning: Expected end of value but found '['. Error in parsing value for 'background'. Declaration dropped. o sea, se esta asignando un valor invalido a la propiedad background. todavia no encuentro cual es. aparte, en la funcion play tienes un error al comprar el conteo, if (this.count=this.frames.length) fijate que deberias usar el operador == y no el de asignacion.

[zerokilled]

ya encontre el problema, pero no es el unico, todavia tienes mas. te los dejare para que vayas mejorando. el de este caso particular esta en la funcion play. fijate en la linea #37 le estas asignando un objeto a la propiedad background. por eso es que indica el error que antes te indique. al ser un objeto javascript lo intenta convertir a string porque es el tipo de dato que acepta las propiedades css. un objeto convertido a string resulta un valor invalido para las propiedades css, o sea luego de la conversion la propiedad adquiere el valor [object Object]. en este caso lo que quisistes asignar fue la propiedad sprite de dicho objeto. luego muestra el siguiente error: Warning: Expected end of value but found ';'. Error in parsing value for 'background'. Declaration dropped. este se debe porque estas incluyendo el punto y coma (;) en el string que sera asignado como valor a la propiedad background. aunque en css cada declaracion la terminamos con punto y coma en javascript no se incluye.

[ClubIce]

ya me funciona, pero yengo otro problema, ahora es con la funcion Sprite(), en el momento que asigna "x" y "y" no me los asigna como debe ser, a medida que va asignando me va pasando un incremiento demaciado grande!!!, en realidad nesesito lograr asignar "x" y "y" de forma que cada cuadro encaje correctamente usando los parametros que le paso a Sprite()

[zerokilled]

la verdad era un tanto confuso entender porque no alineaba bien, ya me habia fijado de eso. en todo caso son por dos razones. primero que hay marcos de la imagen sprite estan mal alineado o que contiene una dimension distinta a los parametros que indicas. supone que la dimension de cada marco es de 28x38 pero por ejemplo pero por ejemplo la segunda y tercera columna contiene dos pixeles mas en el ancho. me baso en estas indicaciones porque tuve que crear un nuevo sprite con una imagen propia. esta imagen simplemente consistia de bloques de colores, todos exactamente de las mismas dimensiones y separados por la misma cantidad de pixeles.

gracias a la nueva imagen surge la otra razon por la que no esta alineado. en la funcion Sprite estas calculando los parametros incorrectamente. el vspace debe calcularse junto con el ancho (width) y hspace con el height (alto). es decir, vspace se refiere al espacio entre columna de modo que se mide en horizontal. de la misma forma, hspace se refiere al espacio entre filas de modo que se mide en vertical. no lo he comprobado, pero lo mismo sucede con vmargin y hmarign: estan atado con el parametro incorrecto.

[ClubIce]

http://clubice.site50.net/eje/

Edito: ya corregi los 2 errores, jajajaja como siempre surgue otro proble: no se por que, pero me dice que:
Error: this.frames[this.count] is undefined
Archivo de origen: http://localhost/icepokemon/index.htm
Línea: 66
si lo unico que hize fue cambiar la funcion Sprite():

Código Javascript:

<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++) {
   x=vmargin+(width*j)+(vspace*j)
   y=hmargin+(height*i)+(hspace*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
  alert(id)
  i=(this.frames.length==0)? 0: this.frames.length++
  alert(i)
  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() {
  if (this.count==this.frames.length) {
   this.count=0
  } else {
   this.count++
  }
  this.id.style.background=this.frames[this.count].sprite
 }
}
avatar=new Sprite('sprites/avatars/ash_walking.gif',30,38,0,0,0,0,1,12);
aniAvatar=new Animation(avatar,100);
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>
 

[zerokilled]

a esto era lo que me referia

Código:

   x=vmargin+(width*j)+(vspace*j)
   y=hmargin+(height*i)+(hspace*i)

y la imagen que utilice, http://img138.imageshack.us/img138/9084/palettev.gif

[ClubIce]

mira arriba↑

[zerokilled]

el error se debe a que estas haciendo referencia a un elemento del array frames que no existe. el error se lanza desde la funcion play. te dejo una pista, preguntate que sucede cuando this.count equivale a tres. por cierto, puedes reducir varias lineas de esa funcion usando el operador modulo (%), y por ende te evitas el error que tienes ahora mismo.

[ClubIce]

explicame eso del %, es que yo nunca lo he usado .

[zerokilled]

el operador modulo te devuelve el sobrante de una division. por ejemplo, 5 % 2 = 1. es decir, no es la mejor ilustracion pero bueno...

Código:

  2   
2 | 5
   =4
   1

[ClubIce]

definitivamente no encuentro la falla. Podrias darme otra pista o explicarmelo mejor

PD: hablo del array no del %

[zerokilled]

tal como lo tienes ahora mismo, mas o menos esto es lo que sucede. si tu array tiene 4 elementos y this.count equivale a 3, entonces se interpreta de esta forma. ¿es tres igual a 4? no. entonces agrega uno a this.count, por tanto equivale a 4. luego, cuando se asigna el valor a la propiedad background, esta añadiendo el 5to elemento del array, el cual no existe. la idea es valida pero no en ese orden.

[ClubIce]

lo que hize ahora fue igualar thus.count con frames.length, pero ahora no se porque no se mueve, ni tampoco me muertra ningun error:

Código Javascript:

<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++) {
   x=vmargin+(width*j)+(vspace*j)
   y=hmargin+(height*i)+(hspace*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,100);
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>
 

[ClubIce]

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:

<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>
 

[zerokilled]

ya iba a decir, no encuentro el problema porque a mi me estaba funcionando, solo que ahora tenia un patron diferente. igual revisare el ultimo codigo. por cierto, ahora te paso la factura: un jamon y par de cervezas.

[ClubIce]

Jajajajaja, no te preocupes tarde o temprano algun dia te pagare XD, te dejo mi msn para que estemos en contacto: [email protected]