Scaling

Hay un objeto especial scale disponible en Phaser con algunos métodos prácticos y propiedades disponibles. Actualice su función preload() existente de la siguiente manera:

function preload() {
  game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
  game.scale.pageAlignHorizontally = true;
  game.scale.pageAlignVertically = true;
}

scaleMode tiene algunas opciones diferentes disponibles para ver como se puede escalar el Canvas (lienzo):

• NO_SCALE — nada está escalado.
• EXACT_FIT — escala el lienzo para llenar todo el espacio disponible tanto vertical como horizontalmente, sin conservar la relación de aspecto.
• SHOW_ALL — escala el lienzo, pero mantiene intacta la relación de aspecto, por lo que las imagenes no se verán sesgadas como en el modo anterior. Puede haber franjas negras visibles en los bordes de la pantalla, pero podemos vivir con eso.
• RESIZE — creates the canvas with the same size as the available width and height, so you have to place the objects inside your game dynamically; this is more of an advanced mode.
• USER_SCALE — le permite tener una escala dinámica personalizada, calculando el tamaño, la escala y la relación por su cuenta; de nuevo, esto es mas un modo avanzado.

Las otras dos lineas de código en la función preload() son responsables de alinear el elemento canvas horizontal y verticalmente, por lo que siempre se centra en la pantalla independientemente del tamaño.

También podemos agregar un color de fondo personalizado a nuestro lienzo, por lo que no se mantendrá negro. El objeto stage tiene una propiedad backgroundColor para este propósito, que podemos establecer usando la sintaxis de definición de color de CSS. Agregue la siguiente línea debajo de las otras tres que agregó anteriormente:

game.stage.backgroundColor = "#eee";

Puedes verificar el código final de esta lección en la demostración en vivo a continuación, y jugar con la misma para entender mejor como trabaja:

Ahora que hemos configurado el escalamiento de nuestro juego, continuemos con la tercera lección y descubramos cómo cargar los assets e imprimirlos en la pantalla.

page(Doc) not found /es/docs/Games/Workflows/2D_Breakout_game_Phaser/Initialize_the_framework