javascript - navegadores - no cache html5

Mejor almacenamiento en caché para eliminar framedrop

Question

Estoy trabajando en un pequeño juego, solo para practicar, por primera vez. Y como pueden ver en mi violín, comienza a aparecer una gota después de un tiempo cuando hay muchas balas y / o enemigos en la pantalla. ¿Hay alguna forma de reducir esto almacenando en caché de alguna manera?

He leído algo sobre la pre representación. Pero dado que estoy usando la biblioteca Kinetic, no creo que esto sea algo que pueda hacer. ¿Hay algunos consejos y trucos para reducir su framedrop? O una forma de pre-render usando KineticJS?

Aquí está mi violín: http://jsfiddle.net/3nEUv/3/

Creo que el dibujo de las balas es un verdadero motivo de ruptura: (línea 713 en violín)

function Enemybullet(destinationX, destinationY, enemySprite) {
    this.id = ''enemyBullet'';
    this.x = enemySprite.getX()+(enemySprite.getWidth()/2);
    this.y = enemySprite.getY()+(enemySprite.getHeight()/2);

    this.damage = enemy.damage;

    //The targetX and Y are compensated by the player width and height. Subtract or add the halve of the player accordingly
    if (this.x > player.sprite.x) {
        var targetX = (destinationX - this.x)-(player.sprite.getWidth()/2);
        targetY = (destinationY - this.y)-(player.sprite.getHeight()/2);
    } else {
        var targetX = (destinationX - this.x)+(player.sprite.getWidth()/2);
        targetY = (destinationY - this.y)+(player.sprite.getHeight()/2);
    }


    var distance = Math.sqrt(targetX * targetX + targetY * targetY);

    this.velX = (targetX / distance) * enemyAttackSpeed;
    this.velY = (targetY / distance) * enemyAttackSpeed;

    this.finished = false;

    this.sprite = new Kinetic.Circle({
        x: this.x,
        y: this.y, 
        radius: 2,
        fill: ''black'',
        name: ''enemyProjectile''
    });

    this.draw = function(indexEnemy, indexBullet) {

        var mayDelete = false;

        this.x += this.velX;
        this.y += this.velY;

        this.sprite.setAbsolutePosition(this.x, this.y);
        //console.log(this.sprite.getX());


        if(collisionDetection(this, player) == true) {
            player.collide(this);
            mayDelete = true;
        }

        if (bulletLeftField(this.sprite) == true) {
            mayDelete = true;
        }

        if (mayDelete == true) {
            delete this;
            this.sprite.remove();
            //console.log(enemies[indexEnemy].bullets);
            if (enemies[indexEnemy]) {
                enemies[indexEnemy].bullets.splice(indexBullet, 1);
            }
        }

        ammoLayer.draw();
    }

}

¡Gracias por adelantado!

Answer 1

Algunos pensamientos que realmente no se elevan al nivel de una respuesta

Noté que disparas balas en una ráfaga de 5. La ráfaga es tan rápida que las 5 balas viajan en más / menos una línea recta hacia su objetivo. Mi sugerencia es hacer una prueba de colisión, solo la viñeta principal. Si la bala líder impacta, las balas al final llegarán a tu objetivo estacionario.

Las formas KineticJS son muy inteligentes y, por lo tanto, requieren un gran uso del procesador. Entonces, en lugar de crear viñetas inteligentes, podría usar imágenes de viñetas en caché. Eric Drowell (creador de KineticJS) dice que hay un aumento del rendimiento 4x para usar imágenes "tontas" sobre formas "inteligentes". Puede guardar en caché 5 patrones de imagen de viñetas (1-viñeta, 2-viñetas, 3-viñetas, 4-viñetas, 5-viñetas). Al disparar, repite las 1-5 imágenes de bala hasta llegar a 5 balas. Luego, solo mueve la imagen de 5 balas a lo largo de la pendiente de la línea de fuego.

Y, por último, abrir un lienzo de buffer fuera de la pantalla realmente sería útil, pero no es posible porque KineticJS se niega a renunciar a las referencias editables de sus lienzos. Eric Drowlell, si estás escuchando ... ama tu trabajo, pero ¿qué tal si nos regalas un lienzo de memoria intermedia?

Answer 2

Un par de cosas en las que puedo pensar marcarían la diferencia.

1 / agrupación de objetos

Esta es la técnica de reciclar tus objetos. Crear nuevos (y eliminar los viejos a través de la recolección de basura) es un desperdicio.

Esto se hace moviendo, por ejemplo, su viñeta a una matriz temporal cuando ya no la necesita. Como cuando se ha salido de la pantalla o golpea a un enemigo. Luego, cuando necesite una nueva viñeta, tomará el objeto de la matriz temporal y reinicializará la viñeta.

Echa un vistazo a este enlace (busca el título "Reciclaje de los peces")

2 / Detección de colisiones en árboles cuádruples

Esta es una buena técnica de optimización de colisión. En lugar de verificar si tu bala ha colisionado con cada enemigo en cada tic, solo verificas a esos enemigos que están en el mismo "quad" que tu bala.

Aquí hay un buen tutorial .

3 / Buffering

Use lienzos fuera de pantalla. Tendría uno para el fondo, UI, jugador / enemigo / balas. Hay algunas variaciones sobre esto, pero según mi experiencia, la más eficiente es dibujar todos los elementos a las capas fuera de pantalla; luego, con cada tic, solo vuelve a dibujar (a la capa fuera de pantalla) la imagen si esa capa ha cambiado. Una vez hecho esto, compila cada una de las capas fuera de pantalla en una capa visible. Utilicé esta técnica con éxito en mi juego para dispositivos móviles, que cuenta con más de 90 objetos en la pantalla a la vez, que se ejecutan a 60 fps en un iPhone4s.

EDITAR: acabo de ver esta demostración interesante que muestra el rendimiento de 3 marcos diferentes, incluido Kinetic. Kinetic fue lo que más me gustó tanto en mi escritorio como en mi dispositivo móvil.

demostración interactiva aquí .