# Parte 1 - Configuración

## Estructura

Lo primero que tenemos que saber es como vamos a ordenar nuestro código. Para eso vamos a plantear la siguiente estructura.

```javascript
(game folder)
|_ index.html
|_ src/
   |_ index.js
   |_ assets/
   |_ scenes/
      |_ mainScene.js
   |_ entities/
      |_ entity.js
      |_ player.js
      |_ redShip.js
      |_ playerShoot.js
```

Nuestro objeto **juego** (`Game` ) y su configuración estará en el **index.js**, mientras que las escenas en la carpeta **scenes**, y las entidades (jugador, obstáculos, enemigos) estarán en la carpeta **entities**.\
\
Podemos ir creando los archivos y dejarlos vacíos, a medida que avancemos los iremos completando.

## Configuración del Canvas

El template que descargamos viene con una escena donde puedes ver el logo de phaser rebotando arriba y abajo. Esto sucede en un solo archivo y no queremos eso, lo que buscamos es estructurar nuestro código aprovechando los beneficios de Node y ECMAscript6.\
\
Vamos a borrar el contenido de nuestro index.\
Lo primero que vamos a hacer es importar phaser y crear lo que sera nuestro juego.

```javascript
import Phaser from "phaser";

// this is our game instance
const game = new Phaser.Game(config);
```

Como vemos, este objeto recibe una configuración como parámetro.\
Esta es la configuración que vamos a utilizar y como debería verse nuestro `index.js`

```javascript
import Phaser from "phaser";

// This is our configuration params, this can be put in a json file later
const config = {
  // How the canvas will be rendered
  type: Phaser.AUTO,
  // The width of our canvas
  width: 480,
  // The height of our canvas
  height: 640,
  // A background color
  backgroundColor: "black",
  // Physics params
  physics: {
    default: "arcade",
    arcade: {
      gravity: { x: 0, y: 0 }
    }
  },
  // A list of keys for our scenes. We can define them here
  // or add them later on the go.
  // We will use just one scene.
  scene: [
    mainScene
  ]
};

// this is our game instance
const game = new Phaser.Game(config);
```

Algunos parámetros no son obligatorios, por ejemplo las físicas o `physics`. Nosotros queremos que nuestras naves se muevan simulando una aceleración así que necesitamos físicas de `arcade`\
\
En `scene` declaramos nuestras escenas o niveles. Por defecto iniciara en el primer nivel a menos que indiquemos otra escena.\
\
En este momento nuestro proyecto dejara de funcionar porque aun no hemos creado el nivel del juego. Eso lo haremos a continuación.