3

Estoy desarrollando una juego simple(Snake) en winforms.

Empleo un pictureBox que utilizo de canvas(tablero de juego) este canvasse vuelve a pintar por cada ejecución de un Timercon intervalo de 100ms.

 g = canvas.CreateGraphics();

    public void dibujar(Graphics g, Color color)
    {
        if (partes.Count() > 0)
        {
            foreach (var act in partes)
            {
                g.FillRectangle(new SolidBrush(color), act.PositionX, act.PositionY, act.ancho, act.ancho);  //Relleno del cuadro y los bordes

            }
        }
        g.FillRectangle(new SolidBrush(color), this.x, this.y, this.ancho, this.ancho);
    }

Este es el código que ejecuto para pintar a cada jugador, y métodos similares para los elementos restantes del juego.

Todo funciona perfectamente hasta que hay demasiados elementos y empieza ha realizar unos parpadeos muy molestos.

He probado varias "soluciones" que encontré pero ninguna funcionó.

Editado;

Me acabo de dar cuenta de que los parpadeos aumentan a la hora de imprimir las imágenes (solo tengo implementado este sprite)

    public void FromImageArma(Graphics g, int x, int y)
    {   
        Image imageFile = Image.FromFile("Sprites//cajaMunicion.png");
        Graphics newGraphics = Graphics.FromImage(imageFile);
        // Draw image to screen.
        g.DrawImage(imageFile, new PointF(x, y));
        newGraphics.Dispose();
    }

Cuando empiezo a imprimir estas imágenes (no se suelen a cumular mas de 10 en la pantalla) el parpadeo aumenta considerablemente. Pero aun sin imprimir las mismas si imprimo muchos objetos de tipo comida también comienza el parpadeo.

8
  • Muy buenas @Hector Lopez, en principio para un juego como el que comentas con activar el doble buffer debería ser suficiente. No se si puede ser un problema del PictureBox puedes probar a dibujar directamente sorbre el formulario para ver si mejora. Si aun así no consigues nada puedes mirar este articulo. Espero que te ayude.
    – ElGerar
    Commented el 16 ago. 2018 a las 12:36
  • ¿Podrías compartir el proyecto completo? De esta forma podríamos determinar la causa del problema. ¿Cuántos son "muchos" elementos? Por otro lado, ¿100 ms? Eso quiere decir que se refresca 10 veces por segundo. El ojo humano necesita al menos 24 refrescos por segundo para tener sensación de fluidez en la animación. Commented el 16 ago. 2018 a las 14:30
  • @RobertoPintosLópez lo malo es que es un proyecto local, si quieres que te lo comparta, tendras que cambiar la configuracion del signalR para que te funcione, y con varios elementos me refiero a los jugadores y la comida por el momento. Commented el 17 ago. 2018 a las 6:12
  • De acuerdo, no debería ser muy problemático el cambiar ligeramente la configuración. Commented el 17 ago. 2018 a las 7:43
  • @RobertoPintosLópez Te lo comparto en un enlace de drive (se que tiene pecado no hacerlo con GIT, lo siento) drive.google.com/open?id=10sGP0G7Oc1oAuMBEJPYU_a3ybF-xOsSt Commented el 17 ago. 2018 a las 7:49

1 respuesta 1

4

Tras ver el código fuente, tienes dos problemas de parpadeo:

El primero consiste en que ordenas al picture box pintarse de blanco:

        ApiConexion._hub.On("ciclo", (p) =>
        {
            g.Clear(Color.White);
            ...

Aunque hayas usado doble buffer en el picturebox, si le ordenas que se pinte de blanco se va a pintar de blanco. Ese es el parpadeo principal.

He hecho dos cambios: El primero es crear un control personalizado que es un picturebox con doble buffer. No cambies la propiedad por reflexión, esto es una mala práctica. La solución correcta es usar, en lugar de un picturebox, una instancia de la siguiente clase:

using System.Windows.Forms;

namespace Snake.Juego.Controles
{
    public class DoubleBufferedPictureBox : PictureBox
    {
        public DoubleBufferedPictureBox() {
            this.DoubleBuffered = true;
            this.SetStyle(ControlStyles.UserPaint | 
              ControlStyles.AllPaintingInWmPaint |
              ControlStyles.ResizeRedraw |
              ControlStyles.ContainerControl |
              ControlStyles.OptimizedDoubleBuffer |
              ControlStyles.SupportsTransparentBackColor, true);
        }
    }
}

He añadido esta clase a una carpeta "Controles".

Recuerda compilar la solución o el cuadro de herramientas no lo detectará.

A continuación, usemos el doble buffer adecuadamente.

Para ello he de darle a mi picture box imágenes finales. Si creas un Graphics de la imagen y ordenas un Clear, el resultado de esa operación es dibujado.

Así que lo siguiente es crear un bitmap nuevo, crear gráficos para ese bitmap y pintar en el bitmap. Cuando ya hayamos terminado, sustituimmos la imagen del picture box por el bitmap:

        ApiConexion._hub.On("ciclo", (p) =>
        {
            Bitmap newImg = new Bitmap(_canvas.Width, _canvas.Height);
            Graphics gNewImg = Graphics.FromImage(newImg);
            gNewImg.Clear(Color.White);
            gNewImg.SmoothingMode = SmoothingMode.AntiAlias;
            gNewImg.InterpolationMode = InterpolationMode.HighQualityBicubic;
            gNewImg.PixelOffsetMode = PixelOffsetMode.HighQuality;

            if (disparos.Count()>0)
            {
                for (int a=0;a<disparos.Count();a++)
                {
                    disparos[a].dibujar(gNewImg);
                    disparos[a].mover();
                }
            }

            if (armasL.Count() > 0)
            {
                for (int d = 0; d < armasL.Count(); d++)
                {
                    draw.getXY(armasL[d].x, armasL[d].y);
                    draw.FromImageArma(gNewImg,armasL[d].x, armasL[d].y); //Imprime el sprite
                }
            }
            for (int it = 0; it < jugadores.Count(); it++)
            {
                ///////////////////////////////////
                if (armasL.Count() > 0)
                {
                    for (int i = 0; i < armasL.Count(); i++)
                    {
                        if (jugadores[it].interseccion(armasL[i]))
                        {
                            armasL.Remove(armasL[i]);
                            jugadores[it].recogerMunicion();
                            if (jugadores[it].idCola == ApiConexion.connection.ConnectionId)
                            {
                                this.Invoke((MethodInvoker)delegate
                                {
                                    refrescarMunicionTask(jugadores[it]);
                                });
                                return;
                            }
                        }
                    }
                }
                ///////////////////////////////////////////


                ParteCola temp = new ParteCola(jugadores[it].x, jugadores[it].y, jugadores[it].color, jugadores[it].idCola);

                lock (jugadores[it])
                {
                    jugadores[it].dibujar(gNewImg, jugadores[it].color);
                    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

                    foreach (var act in jugadores)
                    {
                        if (act.partes.Find(x => x.PositionX == temp.PositionX) != null && act.partes.Find(x => x.PositionY == temp.PositionY) != null && act.idCola != jugadores[it].idCola /*&&  filtrar que entre el jug que yo estoy manejando*/ )
                        {
                            ApiConexion._hub.Invoke("pararMov", jugadores[it]);
                        }

                        if (act.x == jugadores[it].x && act.y == jugadores[it].y && act.idCola != jugadores[it].idCola)
                        {
                            ApiConexion._hub.Invoke("pararMov", jugadores[it]);
                            ApiConexion._hub.Invoke("pararMov", act);
                        }
                    }

                    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
                    jugadores[it].movimiento();

                    jugadores[it].ChoquePared();

                    for (int i = 0; i < comidas.Count(); i++)
                    {
                        //comidas[i].dibujar(g);
                        draw.getXY(comidas[i].x, comidas[i].y);
                        draw.FromImageManzana(gNewImg, comidas[i].x, comidas[i].y); //Imprime el sprite

                        if (jugadores[it].interseccion(comidas[i]))
                        {
                            if (jugadores[it].partes.Count() > 0)
                            {
                                jugadores[it].meter(jugadores[it].partes.Last().PositionX, jugadores[it].partes.Last().PositionY);
                            }
                            else
                            {
                                jugadores[it].meter(jugadores[it].x, jugadores[it].y);
                            }

                            comidas[i].colocarComidaUno(comidas[i].x, comidas[i].y);
                            comidas.Remove(comidas[i]);
                            jugadores[it].sumarPunto();
                            ApiConexion._hub.Invoke("refrescarPuntuacion");
                        }
                    }
                }
            }
            _canvas.Image = newImg;
        });

Con esto se arregla una buena parte del parpadeo. De vez en cuando veo un parpadeo al conseguir comida, pero sospecho que no tiene que ver con el picturebox.

Te pasaré el código fuente en cuanto pueda

5
  • Vale gracias por tu tiempo :) Commented el 17 ago. 2018 a las 9:48
  • Entonces cambio mi pictureBox (_canvas) por el control nuevo generado no? Commented el 17 ago. 2018 a las 9:57
  • Eso es :), y así no tienes que modificar la propiedad DoubleBuffered por reflexión Commented el 17 ago. 2018 a las 9:58
  • Listo, acabo de aplicar tu solucion, y es MAGICO! jajaja muchas gracias, y no te preocupes por pasarme el fuente, ya hiciste bastante. Commented el 17 ago. 2018 a las 10:03
  • Ahh, de acuerdo. De nada :), me alegra haberte ayudado Commented el 17 ago. 2018 a las 10:04

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.