Drag & Drop (Arrastrar y soltar)

En la parte 2 del tutorial aprendimos a manejar el teclado y el ratón, pero nos falto aprender la técnica drag & drop (arrastrar y soltar).

Es por ello que en esta entrada aprenderemos que es y como aplicar la técnica drag & drop en nuestros videojuegos.

Que es y como empezamos a usar esta técnica

Drag & Drop lo podríamos definir como una técnica que nos ayuda a tener una mayor interacción con nuestro videojuego permitiéndonos de manera intuitiva poder llevar un elemento de un lugar a otro.

Para continuar el curso aunque no es obligatorio, podéis descargar el repositorio de Github.

Lo primero que haremos será crear un par de imágenes nuevas (aunque podemos usar los existentes) a las cuales aplicaremos la técnica drag & drop.

A continuación para facilitar la búsqueda os dejo un par de imágenes.

Arrastrando nuestra imagen (Drag)

Lo primero que haremos será cargar nuestras imágenes dentro de Phaser.

preload() {
   ...
   this.load.image(["ball", "spaceship", "ironman", "coin", "closed-chest", "open-chest"]);
   ...
}
create() {
   ...
   this.coin = this.add.image(50, 50, "coin").setInteractive();
   this.closedChest = this.add.image(150, 150, "closed-chest").setDepth(-1).setInteractive();
   ...
}

Podemos observar que hemos añadido el método setInteractive sobre la propia imagen, ya que esto nos permite registrar la entrada táctil en nuestro gameobject.

El siguiente paso es hacer que nuestra imagen se pueda arrastrar, y para ello usaremos el método setDraggable.

create() {
   ...
   this.coin = this.add.image(50, 50, "coin").setInteractive();
   this.closedChest = this.add.image(150, 150, "closed-chest").setDepth(-1).setInteractive();
   this.input.setDraggable(this.coin);
   ... 
   
   // Drag & drop
   this.input.on(DRAG_START, (pointer, obj, dragX, dragY) => {
      // Empezamos arrastrar
      console.log('Empezamos arrastrar');
   });
   this.input.on(DRAG, (pointer, obj, dragX, dragY) => {
      // Arrastrando
      obj.x = dragX;
      obj.y = dragY;
   });
   this.input.on(DRAG_END, (pointer, obj, dropZone) => {
      // Arrastrando
      // Si no soltamos en la zona que este habilitada
      if (!dropZone) {
         obj.x = obj.input.dragStartX;
         obj.y = obj.input.dragStartY;
      } else {
         obj.setScale(1.4);
      }
      console.log('Terminamos arrastrar');
   });
}

Para terminar solo nos quedaría añadir los eventos DRAG_START, DRAG y DRAG_END para controlar la acción que queremos hacer en cada momento.

Soltando nuestra imagen (Drop)

Para esta fase necesitamos indicar una zona donde soltar nuestro elemento, y para ello Phaser tiene una propiedad llamada dropZone que habilita esa característica.

create() {
   ...
   this.closedChest.input.dropZone = true;
   ...
   this.input.on(DROP, (pointer, obj, dropZone) => {
      // Soltamos
      obj.x = dropZone.x + 20;
      obj.y = dropZone.y + 20;
   });
}

Como ocurre con el resto de los eventos, no es necesario añadirlo pero si queremos realizar alguna acción necesitaremos estar escuchando.

Para finalizar puedes ver el ejemplo en acción.