Ralentizacion de navegador al generar objetos

[SeaPirates]

Hola, estoy tratando de desarrollar un juego a tiempo real en el que puedes moverte por el mapa . Lo hago con jQuery y nodeJS.

El problema está, en que por ejemplo cuando quiero generar objetos en el mapa, como por ejemplo "100" nubes repartidas entre todo el mapa de 5000x5000px se ralentiza el navegador considerablemente, ya que por cada nube utilizo la función animate para mover las nubes.

¿Habría alguna idea o solución para que no ocurriera esto? Porque me pasará lo mismo si trato de generar NPC que se muevan aleatoriamente.

[buzu]

Lo mejor, creo yo, seria usar canvas, calcular la pocicion de tus nuves y dibujar la escena. Mover objetos en el DOM es costoso en terminos computacionales y es por eso que se te ralentiza el navegador. Te sugiero que busques algo sobre optimizacion para juegos y tecnicas de animacion para juegos en javascript. Tambien puedes intentar algo con animaciones CSS que estan aceleradas por el GPU, aun que no se en realidad cuanta mejora puedas alcanzar. Tambien busca informacion sobre tecnicas de cacheo. Hace tiempo tenia un problema con una animacion ya que estava calculando todos los datos al vuelo. Lo resolvi con un simple sistema de cacheo. Lo que hacia era calcular la posicion de los elementos previamente y cachear esos valores. Despues solo era cuestion de sacar los valores y usarlos. Si un valor necesario no excistia, entonces era computado y cacheado. No recuerdo excactamente que es lo que estava haciendo, pero recuerdo que me mejoro mucho el rendimiento ya que los valores eran computados una sola vez.

Por ultimo, recuerda hacer redibujado de la pantalla lo menos posible. Por ejemplo, en lugar de mover todas tus nuves independiente mente, puedes sacarlas de DOM, moverlas y agregarlas todas de una sola vez para hacer un solo redibujado. Investiga un poco sobre document fragment y su uso en tecnicas de animacion.

[buzu]

Otro punto importante que olvide mencionar es que investiges sobre frameworks para juegos (game engines), jQuery no es para juegos. Aqui hay una lista que no es para nada un mal comienzo en la direccion correcta: https://github.com/bebraw/jswiki/wiki/Game-Engines

[SeaPirates]

Gracias por tu respuesta, la verdad es que tengo ni idea de como se manejan esos frameworks pero me pondré a leer la documentación y a ver si consigo algo..

Me he decantado por el enchantjs, parece fácil de utilizar..

http://enchantjs.com/

Imagino que utilizando una librería de estas, ya no tendría porque tener lag no? No sé si se puede utilizar el framework y jQuery a la vez para algunas funciones como para detectar eventos

[buzu]

los frameworks no son trucos de magia. Si no programas con cuidado, en un momento u otro vas a enonctrarte con problemas. Mi recomendacion es que programes siempre poniendo atencion a los detalles, que aprendas el lenguaje, sus trampas, su partes buenas y las malas, buenas practicas, tecnicas generales de optimizacion y recomendaciones generales sobre lo que es bueno hacer y lo que no.

En cuanto a utilizar jQuery, no le veo sentido. jQuery no es para juegos, y si solo lo vas a usar para detectar eventos, no tiene caso. Recuerda que estas tratando de alivianar el juego, no de cargarle mas cosas.

enchantjs se mira bien, pero como sugerencia general, identifica primero las necesidades de tu juego, luego en base a eso, busca el framework que mejor se acomode a tus necesidades. Para ello hay que leer sobre los pros y contras de cada uno de los frameworks que estas considerando, asi como que es lo que hacen mejor y que es lo que no hacen muy bien. Por ejemplo algun framework puede ser mejor para hacer juegos de plataformas, mientras que otro pueda ser mejor para hacer juegos de cartas. Una vez que elijas uno, tomate un dia o dos para no hacer otra cosa mas que aprender a usarlo. Aprende sus metodos, sus funcionalidades y si hay manera de extenderlo. En este proceso siempre es bueno tener un edito abierto y listo para hacer pruevas y programar cosas sencillas pero que nos ayuden a entender como funciona el framework.

Ya de plano, si te sientes muy euforico, pues entierrate un rato entre el codigo del framework. Como dicen, la mejor documentacion de algo es su codigo.