# Parte 2 - Nivel del juego

## Nueva Escena

Vamos a empezar a completar nuestro archivo `mainScene.js`

Importamos phaser y creamos un objeto que extienda de Phaser.Scene con la siguiente estructura:

```javascript
import Phaser from 'phaser';

class MainScene extends Phaser.Scene {
    constructor() {
      super({ key: "mainScene" });
    }
}
```

A cada escena que creamos debemos pasarle una key que sera la forma en que el objeto Game identificara y manejara nuestras escenas.

Vamos a agregar los 3 metodos principales de nuestra escena, como vimos al principio del tutorial, cada escena necesita precargar los archivos, crear las entidades y actualizar el juego en cada tick.

```javascript
class MainScene extends Phaser.Scene {
    constructor() {
      super({ key: "mainScene" });
    }

    preload(){

    }

    create(){

    }

    update(){

    }
}

export default MainScene;
```

Esta es la base para una escena, si exportamos nuestra escena y la importamos en nuestro index.js vamos a poder correr nuestro juego sin problema. Solo veremos un rectangulo negro.

```javascript
import Phaser from "phaser";
import mainScene from "./scenes/mainScene";

const config = {...}
```

{% hint style="info" %}
El nombre de mainScene y la variable que enviamos en el array de escenas de nuestra configuración deben coincidir. En caso que quieras utilizar otro nombre asegúrate que coincidan.
{% endhint %}

## Dibujando

Ahora vamos a importar el fondo del juego, dibujarlo y darle movimiento.

Importamos el archivo que vamos a usar:

```javascript
import background_sprite from "../assets/backgrounds/purple.png";
```

Luego precargamos el archivo a nuestra escena:

```javascript
preload() {
    this.load.image("sprBackground", background_sprite);
  }
```

Cuando creamos un objeto en nuestra escena debemos agregarlo usando `this.add` , no sera parte de nuestra escena hasta que lo hagamos.\
Crearemos un `tileSprite` para nuestro fondo con los siguientes parámetros:

```javascript
// We are adding the background to the scene so we can call it
// during the update method
this.background = this.add.tileSprite(
      // position x
      240,
      // position y
      320,
      // width of the game
      this.game.config.width,
      // height of the game
      this.game.config.height,
      // texture key
      "sprBackground"
      );
```

{% hint style="info" %}
Un `tileSprite` es patrón que se repite cuando la imagen se agranda, nos ahorra crear imágenes gigantes para nuestro fondo, el juego se encarga de repetirla por nosotros.
{% endhint %}

Si corres el juego desde la linea de comandos deberías ver tu fondo dibujado! Pero aun no se mueve.

## Dando Movimiento

Ahora nos toca utilizar el metodo `update()`

Lo que vamos a hacer es muy simple. Una propiedad de los tiles es que pueden repetirse al salir de la pantalla y vuelven a aparecer en el otro extremo. Entonces si le damos movimiento se volverá a dibujar cuando salga de la vista, dando la impresión de que es un fondo infinito.

Para eso vamos a colocar el siguiente código:

```javascript
update() {
    this.background.tilePositionY -= 3;
}
```

Si corremos nuestro juego vamos a ver que nuestro fondo se mueve! Ya estamos en el espacio.\
Eso es porque actualizamos la posición vertical de nuestro fondo 3 pixeles hacia abajo.\
Puedes cambiar el valor para manejar la velocidad con que se moverá.

## Grupos

Cuando creamos muchos objetos es difícil llevar la cuenta de cada uno individualmente. Una forma de hacer esto es creando grupos de la siguiente forma, al principio del método `create()`.

```javascript
create() {
    //We create containers that will group multiple objects
    this.enemies = this.add.group();
    this.playerLasers = this.add.group();
    ...
}
```

De esta forma a medida que agreguemos disparos y enemigos, tendremos una forma de manejarlos individualmente sin tener que crear muchas variables.

## Resumiendo

Este es el mismo proceso que utilizaremos para todos nuestros objetos.

`preload  >> create >> update`

En la siguiente parte crearemos objetos más complejos que puedan interactuar entre si