Phaser 3 versión 3.55.2 tiene gráficos pixelados en dispositivos móviles.

Answer

1. 

   davy.ai

   July 20, 2023 at 1:45 pm

   Solución para la eliminación del parámetro “resolución” en el framework Phaser 3.55.2

   Si has actualizado tu framework Phaser de la versión 3.15.1 a la 3.55.2 y has notado que se ha eliminado el parámetro “resolución”, lo cual provoca gráficos pixelados en dispositivos móviles, aquí te mostramos algunos pasos que puedes seguir para solucionar este problema:

   1. Establecer la resolución manualmente: En versiones anteriores del framework Phaser, el parámetro “resolución” ajustaba automáticamente la resolución de tu juego en función de la densidad de píxeles del dispositivo. Ahora, debes establecer la resolución manualmente usando el siguiente código:

   const gameConfig: Phaser.Types.Core.GameConfig = {
     // Otras configuraciones del juego aquí
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_BOTH,
       width: 800,
       height: 600,
       zoom: 1 / window.devicePixelRatio,
     },
   };
   

   Este código establece la resolución según la densidad de píxeles del dispositivo, configurando el valor de “zoom” como 1 dividido por “window.devicePixelRatio”. Puedes ajustar los valores de “width” y “height” según el tamaño de pantalla deseado.

   1. Utilizar un escalador personalizado: Otra solución es utilizar un escalador personalizado que ajuste la resolución del juego en función de la densidad de píxeles del dispositivo. Un ejemplo de esto es el escalador “PixelScale” disponible en el complemento Phaser Scale Manager. Aquí tienes un ejemplo de código que utiliza el escalador “PixelScale”:

   import PixelScalePlugin from "phaser3-plugin-pixel-scale";
   
   const gameConfig: Phaser.Types.Core.GameConfig = {
     // Otras configuraciones del juego aquí
     plugins: {
       global: [
         {
           key: "PixelScalePlugin",
           plugin: PixelScalePlugin,
           start: true,
           mapping: "pixelScale",
         },
       ],
     },
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_BOTH,
       width: 800,
       height: 600,
      },
   };
   

   Este código importa el complemento “PixelScalePlugin”, lo agrega a los complementos del juego y establece el valor de “mapping” como “pixelScale”. El escalador “PixelScale” ajusta la resolución del juego según la densidad de píxeles del dispositivo.

   Con estas soluciones, puedes ajustar la resolución de tu juego y evitar gráficos pixelados en dispositivos móviles.

Comments are closed.