Canvas y 'animaciones'

[jp91]

Ese es el problema de los que vienen de otro lenguaje y tratan de implementar el mismo paradigma a js, que pasa que esto no funciona como en c++ , la palabra "this" no se comporta como deberia, esto que estamos diciendo es lo mas basico de js aqui hay una explicacion muy buena para que te guies http://blog.amatiasq.com/2012/01/javascript-conceptos-basicos-herencia-por-prototipos/

[Albuss]

no, repito, cuando empece a trabajar con javascript, busque la forma de trabajr con objetos, publicada por muchos medios : https://developer.mozilla.org/es/doc...tado_a_objetos , http://www.cristalab.com/tutoriales/...etos-c111760l/

Llego cerca de 4 años usando ese tipo de sintaxis, no tengo ningun problema de volver a aprender una sintaxis nueva, lo que me choca es pensar que tantos medios estén equivocados.

[jp91]

jejejej lo de firefox esta mejor explican de manera muy superificial el prototipo y constructor pero lo de cristalab no explica la naturaleza de js que es prototipal

[Albuss]

http://blog.amatiasq.com/ y me esta resultando una gran lectura,


pero entonces, tanta memoria gasto con mi sintaxis actual?! , al fin y al cabo , de lo que estamos hablando es de mover graficamente todo eso.


Ps. la herencia de prototipos, la llevo a cabo exactamente igual que el ejemplo de los de : https://developer.mozilla.org/es/doc...tado_a_objetos , con esta sintaxis estoy copiando todos los métodos como decia #Italico76 ? , se supone que es una re-dirección , no una variable que contiene a otra.

[jp91]

esta bien imaginate una funcion con 100 propiedades y 100 metodos si usar prototipos , ahora crea un for que repite 10 veces y crear una nueva instancia, que crees que resulte de hacer una copia exacta de todos esos metodos y propiedades en otro 10 objetos directamente una locura inmediata.

[Albuss]

esta bien, y hablando del bucle for(); como puedo optimizarlo para este caso?

[Albuss]

Por cierto , Italico76 , y si cada objeto solo tiene sus propiedades mas fundamentales, y ningun metodo? , es decir, que sea un objeto y solo un unico objeto el que luego haga las tareas tediosas como , mover, cacalcular y pintar ... ect ?

[jp91]

mmm en este caso el bucle es normal asi que esta bien, tal vez modificando las clases pero ya eso es decision tuya y despues puedes probar si mejora o no , haciendo un poco de estudio a tu ejemplo consume 8.5 megabytes de memoria solo para pintar eso y el recolector de basura en 50.6 ms da un resultado de 0.28%, para obtener 60 fps es necesario que el update y la funcion que dibuja actualizen en menos 16.67ms (1000/60) por eso es bueno uno usar un canvas como cache para asi ejemplo en juego como breakout solo se acutalize el dibujado cuando se aumenta el score o se destruya un ladrillo.

[jp91]

Iniciado por Albuss

Por cierto , Italico76 , y si cada objeto solo tiene sus propiedades mas fundamentales, y ningun metodo? , es decir, que sea un objeto y solo un unico objeto el que luego haga las tareas tediosas como , mover, cacalcular y pintar ... ect ?

No es mejor hacer asi? Digamos para un jugador: yo quiero que camine ,que colisone, que ataque.

Código Javascript:

function jugador (){
//propiedad
this.salud = 3;
};
 
jugador.prototype ={
//metodos
camina:function(){},
colisionar:function()(),
ataca:function(){}
};
 
var heroe = new jugador();
 

[Albuss]

Iniciado por jp91

mmm en este caso el bucle es normal asi que esta bien, tal vez modificando las clases pero ya eso es decision tuya y despues puedes probar si mejora o no , haciendo un poco de estudio a tu ejemplo consume 8.5 megabytes de memoria solo para pintar eso y el recolector de basura en 50.6 ms da un resultado de 0.28%, para obtener 60 fps es necesario que el update y la funcion que dibuja actualizen en menos 16.67ms (1000/60) por eso es bueno uno usar un canvas como cache para asi ejemplo en juego como breakout solo se acutalize el dibujado cuando se aumenta el score o se destruya un ladrillo.

Me cuesta entender la parte en negrita, podrias ser un poco mas extendido ?

[Albuss]

O lo que es lo mismo (supongo) (sacado de:https://developer.mozilla.org/en-US/.../Object/create)

Código Javascript:

function jugadorPrototype(){
 
this.salud = 3
 
}
 
jugadorPrototype.prototype.caminar = function(){
 
}
 
jugadorPrototype.prototype.colisionar = function(){
 
}
 
jugadorPrototype.prototype.atacar = function(){
 
}
 
 
var heroe = new jugadorPrototype();
 

[Albuss]

este uso de this. seria correcto ? (instanciar un objeto dentro de otro) :

Código Javascript:

// 'CLASES'
 
function prototipoPadre(){
 
}
 
function prototipoHijo(){
 
}
 
// METODO
 
objetoPadre.prototype.crearObjetoHijo = function(){
 
   this.objetoHijo = new prototipoHijo();
 
}
 
// INSTANCIA DEL PRIMER OBJETO (PADRE)
 
objetoPadre = new prototipoPadre();
objetoPadre.crearObjetoHijo();
 
// ?
 

[marlanga]

Hace tiempo que escribí ésto:
http://www.jlabstudio.com/webgl/2012...en-javascript/
Pero básicamente sigo usando el mismo sistema.

[Albuss]

marlanga , me encantaría hablar contigo sobre vectores, acerca de tu articulo de pong.

[Albuss]

Bueno, aqui dejo para que veáis por vosotros mismos el resultado una versión muy simplificada de lo que quiero hacer usando request animation frame (ya no uso ningún interval), sin fisicas y sin grandes calculos, solo le aplico movimiento horizontal a cada partícula y calculo que permanezca dentro de un mundo definido. he reescrito las 'clases' de la forma en la que me habéis recomendado (http://blog.amatiasq.com/2012/01/jav...or-prototipos/, https://developer.mozilla.org/en-US/.../Object/create) y solo he notado que el recolector de basura aumenta su presencia, aunque ha bajado extremadamente el consumo de memoria.

(no calculo : fricion, inercia, acelaracion, desaceleracion, colisiones, fuerza y constancia, solo le aplico un movimiento horizontal y re-posiciono las coordenadas cuando un punto sobrepasa el espacio)

http://vodoad.com/Braismartelo/Conte...vas/Index.html

consume 2.9 megabytes de memoria, el recolector de basura en 30.5 ms da un resultado de 0.55% y obtengo 60 frames el 91% del tiempo con picos que bajan a menos de los 30 fr/s.

Puntos en movimiento a la vez : 1100.
tamaño del lienzo : 1920 x 900;

[jp91]

En algunos de mis comentarios coloque un link donde explican el cache,te para que te guies aqui una parte del codigo :

Código Javascript:

function aCanvas(width, height, render) {
    canvas = document.createElement('canvas');
    canvas.width  = width;
    canvas.height = height;
//aqui le pasas el contexto a la funcion que dibuja tus objetos
    render(canvas.getContext('2d'));
    return canvas;
  };
 

Código Javascript:

function dibujar(ctx) {
//se actualizo algo ?? ps pintamos    
if (this.pintar) {
//canvas a pintar
      this.canvas = aCanvas(this.game.width, this.game.height, this.pintaCasa.bind(this));
      this.pintar = false;
    }
//this.canvas tiene el retorno de la funcion aCanvas
// y el truco dibujar una imagen del canvas recuerda se pinta en cache y cuando hay algo
// nuevo se actualiza la imagen con el contenido del otro canvas. 
//el canvas puede ser pasado como parametro a este metodo.
    ctx.drawImage(this.canvas, 0, 0);
 

[jp91]

Sobre hijos y padre ps algunos hacen:

Código Javascript:

function extender(hijo, padre) {
//temporal constructor
var F = function(){};
//si el prototipo del hijo apuntara al del padre directamente no sirve porque lo que cambie en
//el padre cambiaria al hijo
F.prototype = padre.prototype;
//por eso se usar un constructor temporal 
hijo.prototype = new F();
hijo.prototype.constructor = hijo;
//propiedad que apunta al padre
hijo.papa = Parent.prototype;
}
 

Lo de el recolector bienvenido al nuevo mundo jejej eso es algo dificil de evitar por ahora crep que no te debes preocupar por eso,nada mas te digo un ejemplo rapido los chicos de Construct 2 un egine para hacer juegos, evitan en lo minimo crear nuevos objetos con "{}" y tambien se puede hacer lo mismo con "new", borran todas las propiedes del objeto y este ps queda "vacio" y listo para re-usarlo:

Código Javascript:

cr.wipe = function (obj)
{
for (var p in obj)
{
if (obj.hasOwnProperty(p))
delete obj[p];
}
};
 

[Albuss]

He pasado toda la noche haciendo pruebas de rendimiento, cambiando únicamente la sintaxis de programación (la que utilizaba y me habéis rebatido y la que habéis propuesto).
todo esto en un entorno extremdamente simplificado, simplemente; 1100 puntos, movimiento horizontal y re-posicionamiento cuando se sobrepasa el limite del espacio. en ambos
casos uso requestAnimationFrame y un solo for(); (solo uno para los 1100 puntos, operaciones movimiento y control de los limites del espacio)

¿cunclusiones? despues de ver muchas variaciones y tomando conciencia de forma empirica , puedo demostrar con datos que mi antigua sintaxis (vease mas abajo ejemplo de antigua
y 'correcta' sintaxis para cada prueva) hace un mayor consumo de memoria pero brinda significativamente menos 'tirones' y un frame rate mas estable, así como un uso requerido del recolector de basura 1/5 - 1/4 menor.

ahora expongo por separado cada prueva, ejemplo de sintaxis por cada prueva y sus respectivos datos :

- Prueva 'sintaxis correcta': http://vodoad.com/Braismartelo/Conte...vas/Index.html

Sintaxis 'correcta' : (http://blog.amatiasq.com/2012/01/jav...-call-y-apply/ , http://www.jlabstudio.com/webgl/2012...en-javascript/ , https://developer.mozilla.org/en-US/.../Object/create)

datos :

http://i1179.photobucket.com/albums/...5.png~original


http://i1179.photobucket.com/albums/...1.png~original


http://i1179.photobucket.com/albums/...b.png~original



- Prueva 'mi sintaxis antigua' : http://vodoad.com/Braismartelo/Conte...s_2/Index.html

Mi 'sintaxis antigua' : (del propio archivo de la prueva) http://vodoad.com/Braismartelo/Conte...usExMachina.js , http://vodoad.com/Braismartelo/Conte...s/metaPoint.js , http://vodoad.com/Braismartelo/Conte...ions/render.js , http://vodoad.com/Braismartelo/Conte...racParticle.js

datos :

http://i1179.photobucket.com/albums/...4.png~original


http://i1179.photobucket.com/albums/...7.png~original


http://i1179.photobucket.com/albums/...a.png~original


Espero que podáis a ayudarme, contribuyendo con vuestras propias conclusiones.

Ps. creo que he colocado todos los datos de forma correcta, si hay algun error, decidmelo,

[jp91]

Amigo es sencillo que el consumo de memoria se disminuya creo que mi tarea ha sido cumplida, debido en que en lo que hago esa disminucion es muy importante para los celulares debido a la bateria,
lo de recolector y fps se puede arreglar con una mejor sintaxis y optimizaciones de codigo y estoy seguro que seria mas fluido.Saludos

[Albuss]

Iniciado por jp91

Amigo es sencillo que el consumo de memoria se disminuya creo que mi tarea ha sido cumplida, debido en que en lo que hago esa disminucion es muy importante para los celulares debido a la bateria,
lo de recolector y fps se puede arreglar con una mejor sintaxis y optimizaciones de codigo y estoy seguro que seria mas fluido.Saludos

y ya esta? , te limitas a decir que de 2.5 a 3.8 mb es mejor para la bateria de un telefono (que ovbiamente no podria 'correr' pruevas como esta) y te vas?

Pues a las pruevas empricas me remito, si la diferencia de memoria es la que es 1.3mb, y consigo que no haya tirones y los frames sean mas estables y aun encima no hago trabajar al recolector de memoria .... ¿por que es 'peor' mi sintaxis? (bueno, no es mia, es la que aprendí de tantos medios que la han publicado)

[Carlangueitor]

Yo digo que tu problema es el lookup al DOM, pero no pareces convencido.


Saludos

[Albuss]

Iniciado por Carlangueitor

Yo digo que tu problema es el lookup al DOM, pero no pareces convencido.


Saludos

Perdona si me habias escrito antes y no te respondi, exactamente a que parte del codigo te refieres ? (modifique la forma en la que accedia a los metodos y a las propiedades de cada objeto)


Ps. obviamente si te refieres a una parte del codigo que no uso (que este comentado), aun no la he usado y no la he tocado denuevo.

[jp91]

hey para donde me voy? jejejej aqui me puedo quedar toda la vida compartiendo informacion contigo , pero si quieres seguir ya tienes que olvidarte de lo que habias aprendido quedarte con lo bueno y analizar lo malo, esa diferencia de memoria no crees que es un progreso para tu caso??? , como dice @Carlangueitor tambien debes mejorar el acceso al DOM hay muchos tutos donde lo explican y mas en ingles, sobre la sintaxis amigo lo que se, lo aprendi de leer muchos libros y practicar y darme duro contra el mundo no lo invente yo, libros como High Performance Javascript de nicolas zackas, javascript patterns, Manning Secrets of the JavaScript Ninja, la forma en que creas tus clases "padres" e hijas hay mejor forma de hacerlo te puse un ejemplo arriba , cuando creas un objeto o una nueva instancia es para usarla y reutilizarla porque sino hay llega el recolector.

[Albuss]

Iniciado por jp91

hey para donde me voy? jejejej aqui me puedo quedar toda la vida compartiendo informacion contigo , pero si quieres seguir ya tienes que olvidarte de lo que habias aprendido quedarte con lo bueno y analizar lo malo, esa diferencia de memoria no crees que es un progreso para tu caso??? , como dice @Carlangueitor tambien debes mejorar el acceso al DOM hay muchos tutos donde lo explican y mas en ingles, sobre la sintaxis amigo lo que se, lo aprendi de leer muchos libros y practicar y darme duro contra el mundo no lo invente yo, libros como High Performance Javascript de nicolas zackas, javascript patterns, Manning Secrets of the JavaScript Ninja, la forma en que creas tus clases "padres" e hijas hay mejor forma de hacerlo te puse un ejemplo arriba , cuando creas un objeto o una nueva instancia es para usarla y reutilizarla porque sino hay llega el recolector.

Pero entonces por que mi mala praxis sintactica hace que el recolector de basura trabaje menos? , y por que consigo un frame rate mas estable y con menos parones? , es decir, esta muy bien que compartas bibliografia pero me gustaria que fuésemos a debatir estas preguntas y no ovbiarlas, reitero que estos temas me apasionan mucho.

y como ejemplo creo que es bueno ver que trabaje re escribiendo toda la sintaxis de mi practica para adaptarla a la que propones. Y por favor, si ponéis cosas como 'debes mejorar el acceso al DOM' , poned al menos una linea de codigo donde pueda llevar a la practica eso, solo pido una linea de mi código para orientarme con vuestras palabras!

[jp91]

mmmmmmmmm, ok para que veas como soy te voy a dar un consejo, una regla muy util es siempre "guardar" el ambito global en una variable local pero ojo siempre y cuando la usemos mas de una vez dentro de nuestra funcion, ese es el consejo??? sip se ve mejor con un ejemplo.

Código Javascript:

function algo(){
//document ambito global
//variable local mas rapido el acceso
//los usamos repetidamente en la funcion
var local = document,
//por si necesitas acceder digamos a className
localBody = local.body,
parrafos = local.getElementsByTagName("p"),
i= 0,
len = enlaces.length;
while(i < len){
cambiar(parrafos[i++]);
}
 
local.getElementById("loquesea").onclick = function(){
ejecuta();
};
 
};