Creando el actor puntaje, vinculando evento para detectar clicks en l…

…a pantalla y otros arreglos generales.

manual/eventos.md

@@ -15,6 +15,11 @@ Para capturar un evento desde el mouse simplemente hay que declarar alguna de es
 
 Estas funciones se pueden crear en el código de una escena o de un actor. La diferencia es que en las escenas el "click" o el movimiento se van a detectar en toda la pantalla, mientras que en el código del actor solo se detectarán si el mouse apunta al actor.
 
+Si desde un actor necesitas detectar el click del mouse en la pantalla deberías
+usar este otro método:
+
+- cuando_hace_click_en_la_pantalla(x, y, evento_original)
+
 Veamos un ejemplo, imaginá que queremos crear actores de la clase "Pelota" cada vez que el usuario hace "click" sobre la pantalla. Podríamos hacerlo colocando este código en la escena:
 
 ```typescript

pilas-engine/actores.ts

@@ -118,4 +118,8 @@ class Actores {
   robot() {
     return this.crear_actor("robot");
   }
+
+  puntaje() {
+    return this.crear_actor("puntaje");
+  }
 }

pilas-engine/actores/-actor-base.ts

@@ -269,6 +269,8 @@ class ActorBase {
     }
   }
 
+  cuando_hace_click_en_la_pantalla(x: number, y: number, evento_original: any) {}
+
   get area_de_interactividad() {
     let ancho = this.sprite.input.hitArea.width;
     let alto = this.sprite.input.hitArea.height;

pilas-engine/actores/puntaje.ts

@@ -0,0 +1,26 @@
+class puntaje extends ActorTextoBase {
+  propiedades = {
+    imagen: "imagenes:basicos/invisible",
+    texto: "PUNTAJE: 0",
+    color: "white",
+    es_texto: true,
+    z: -10
+  };
+  puntaje: number = 0;
+
+  iniciar() {
+    this._texto.setFontSize(20);
+    this._texto.setStroke("#fff", 1);
+    this._texto.setShadow(1, 1, "#333333", 2, true, true);
+    this.actualizar_texto();
+  }
+
+  aumentar(cantidad: number = 1) {
+    this.puntaje += cantidad;
+    this.actualizar_texto();
+  }
+
+  actualizar_texto() {
+    this.texto = `PUNTAJE: ${this.puntaje}`;
+  }
+}

pilas-engine/escenas/-escena-base.ts

@@ -142,6 +142,12 @@ class EscenaBase {
     });
   }
 
+  avisar_click_en_la_pantalla_a_los_actores(x: number, y: number, evento_original: any) {
+    this.actores.map(actor => {
+      actor.cuando_hace_click_en_la_pantalla(x, y, evento_original);
+    });
+  }
+
   quitar_actor_luego_de_eliminar(actor: Actor) {
     let posicion = this.actores.indexOf(actor);
     let id = actor["id"];

pilas-engine/modos/modo_ejecucion.ts

@@ -85,6 +85,7 @@ class ModoEjecucion extends Modo {
         if (this._escena_en_ejecucion) {
           try {
             this._escena_en_ejecucion.cuando_hace_click(posicion.x, posicion.y, cursor);
+            this._escena_en_ejecucion.avisar_click_en_la_pantalla_a_los_actores();
           } catch (e) {
             console.error(e);
             this.pilas.mensajes.emitir_excepcion_al_editor(e, "emitir cuando_hace_click");

pilas-engine/pilas.ts

@@ -15,7 +15,7 @@ class Pilas {
   utilidades: Utilidades;
   escenas: Escenas;
   historia: Historia;
-  sonidos: any;
+  sonidos: { [key: string]: any };
   actores: Actores;
   animaciones: Animaciones;
   Phaser: any;

public/actores.json

@@ -120,6 +120,11 @@
       "codigo": "class plataforma extends Actor {\n  propiedades = {\n    figura: \"rectangulo\",\n    imagen: \"imagenes:plataformas/plataforma\",\n    etiqueta: \"plataforma\",\n    y: 0,\n    figura_ancho: 250,\n    figura_alto: 40,\n    figura_dinamica: false,\n    figura_rebote: 0\n  };\n\n  iniciar() {}\n}\n",
       "archivo": "plataforma.ts"
     },
+    {
+      "nombre": "puntaje",
+      "codigo": "class puntaje extends ActorTextoBase {\n  propiedades = {\n    imagen: \"imagenes:basicos/invisible\",\n    texto: \"PUNTAJE: 0\",\n    color: \"white\",\n    es_texto: true,\n    z: -10\n  };\n  puntaje: number = 0;\n\n  iniciar() {\n    this._texto.setFontSize(20);\n    this._texto.setStroke(\"#fff\", 1);\n    this._texto.setShadow(1, 1, \"#333333\", 2, true, true);\n    this.actualizar_texto();\n  }\n\n  aumentar(cantidad: number = 1) {\n    this.puntaje += cantidad;\n    this.actualizar_texto();\n  }\n\n  actualizar_texto() {\n    this.texto = `PUNTAJE: ${this.puntaje}`;\n  }\n}\n",
+      "archivo": "puntaje.ts"
+    },
     {
       "nombre": "robot",
       "codigo": "class robot extends Actor {\n  propiedades = {\n    imagen: \"imagenes:objetos/robot\",\n    centro_y: 1\n  };\n\n  contenedor: any;\n  huesos: Huesos;\n\n  iniciar() {\n    this.imagen = \"imagenes:basicos/invisible\";\n    this.contenedor = this.pilas.modo.add.container();\n    this.huesos = new Huesos(this.pilas, \"robot\", \"atlas-robot\", this.contenedor);\n    this.huesos.definir_animacion(\"run\");\n  }\n\n  actualizar() {\n    this.huesos.actualizar_animacion(20);\n  }\n\n  pre_actualizar() {\n    this.pilas.utilidades.sincronizar_contenedor(this.contenedor, this.sprite);\n  }\n}\n",

public/ceferino.json

@@ -267,6 +267,6 @@
 	"meta": {
 		"app": "https://www.codeandweb.com/texturepacker",
 		"version": "3.0",
-		"smartupdate": "$TexturePacker:SmartUpdate:86527b76f9d52c2aa27565afc3d3f2e9:b807329ab171fd6a5fbbaef3382f43fd:d4dcf4feabb56e05f0148dc1de18613f$"
+		"smartupdate": "$TexturePacker:SmartUpdate:f4bfad7322f4045278214ca812347343:b807329ab171fd6a5fbbaef3382f43fd:d4dcf4feabb56e05f0148dc1de18613f$"
 	}
 }

public/grilla-imagenes.css

@@ -1,7 +1,7 @@
 /* -----------------------------------------------------
    created with https://www.codeandweb.com/texturepacker 
    -----------------------------------------------------
-   $TexturePacker:SmartUpdate:8c60fdc84a55babb4a4d23a9aae7eee2:a5ba9a169c2c47d8ac988a2662777c2a:f906d06d9aeba575a5ffa09df65658ca$
+   $TexturePacker:SmartUpdate:1778ee0353bb2bc60db130a7ade00eea:a5ba9a169c2c47d8ac988a2662777c2a:f906d06d9aeba575a5ffa09df65658ca$
    -----------------------------------------------------
 
    usage: <span class="{-spritename-} sprite"></span>