Saltar la navegación

3. Ingeniería inversa

Retor diceTras realizar el juego con Scratch, es hora comenzar a utilizar Processing. Para ello, utilizaremos un juego similar al que has creado con Scratch para poder aprovechar los conocimientos que ahora has recordado, lo que te facilitará la exploración de este otro lenguaje de programación.

Processing es un lenguaje de programación de código abierto que está orientado para programar proyectos multimedia y para aprender a programar. En este caso lo utilizaremos para crear videojuegos aprovechando su potencia gráfica y multimedia.

Conocer cómo se crean los elementos que intervienen en un videojuego es imprescindible para poder acometer tu reto final.

1. Retroingeniería con un videojuego

Imagen con códigos binarios y una lupa para analizarlosLa ingeniería inversa o también conocida como retroingeniería,  es una técnica de estudio y análisis llevada a cabo con el objetivo de obtener información de un diseño a partir de un producto, con el fin de determinar cuáles son sus componentes y de qué manera interactúan entre sí y cuál fue el proceso de fabricación o creación.

Se puede utilizar con fines positivos o negativos. Por ejemplo, si encontráramos una nave espacial alienígena, utilizaríamos ingeniería inversa para saber cómo funciona. También se suele utilizar en el espionaje industrial cuando un empresa o país roba un diseño o prototipo con el objetivo de analizarlo y obtener los conocimientos tecnológicos novedosos de dicho diseño para su propio beneficio.

A continuación tienes el código en Processing de un videojuego similar el que has realizado anteriormente con scratch.

Los elementos

Los  elementos y personajes del juego son los siguientes:

  • Rétor: Soy yo, tengo que recoger manzanas que caen desde arriba y para ello me muevo a derecha e izquierda con las teclas correspondientes.
  • Las manzanas: Caen desde una posición aleatoria en de la parte superior de la pantallas, además van rotando en su caída.
  • El marcador de puntos: cuenta las manzanas que recoge Rétor.
  • El fondo: un bonito fondo con animales y vegetación.

Retor mini          

El código

Icono de la carpeta data y archivo titulado recoge_manzanas.pde

Este es el código del juego en Processing, lo puedes copiar y pegar en el IDE.

Recuerda que las imágenes debes guardarla en una carpeta llamada data en la carpeta donde esté el archivo ".pde"  de processing.

Descarga la carpeta data.

PImage fondo;
PImage retor;
PImage manzana;

int xr = 370;
int yr = 400;
float xm = 370;
float ym = 10;
float velocidad = 0;
int Puntos = 0;
float i = 0;
float distancia;

void setup() {
  size(800, 460);
  fondo = loadImage("campo.png");
  retor = loadImage("retor-mini-iz.png");
  manzana = loadImage("manzana.png");
}

void draw() {
  if (ym > 470) {
    noStroke();
    textSize(50);
    fill(#938D16);   
    text ("Game Over ", 270, 200);
    fill(#860813); 
    textSize(20);
    text ("Pulsar Click para empezar", 270, 250);

    if (mousePressed == true) {
      ym = 25;
      velocidad = 0 ;
      Puntos = 0;
    }
  } else {
    imageMode(CORNER);
    image(fondo, 0, 0); 

    imageMode(CENTER);
    image(retor, xr, yr);

    textSize(20);
    fill(#EDBB56);
    rect (5, 5, 165, 35, 5);
    fill(#1C1A18);
    text ("Manzanas = "+ Puntos, 10, 30); 

    manzana();  

    i += 0.02;

    if (keyPressed && (key == CODED)) {
      if (keyCode == LEFT) {
        xr -=3 + velocidad;
        retor=loadImage("retor-mini-iz.png");
      } else if (keyCode == RIGHT) { 
        xr +=3 + velocidad;
        retor=loadImage("retor-mini-der.png");
      }
    }
    ym +=1+velocidad;
    distancia = dist (xr, yr, xm, ym);
    if (distancia < 50) {
      xm = random(25, 775);
      ym = 10;
      velocidad +=0.2;
      Puntos +=1;
    }
  }
}

void manzana() {
  translate(xm, ym);
  rotate(i);
  image(manzana, 0, 0);
}

La tarea

Las imágenes las puedes descargar desde el siguientes enlace en un archivo .zip con la carpeta data.

El código no está comentado a propósito pues se trata de que lo analices y estudies cómo funciona. Busca identificando por lo menos los siguientes apartados:

  • Definición e inicialización de variables.
  • Creación de pantalla y carga de las imágenes.
  • Pantalla de finalización y reinicio del juego.
  • Cargar fondo.
  • Visualizar el marcador de puntos.
  • Dibujar la manzana.
  • Hacer que caiga la manzana.
  • Comprobar que Rétor recoge la manzana.
  • Aumentar la velocidad.
  • Hacer que Rétor se mueva a derecha o izquierda.

Más adelante comprobaremos si lo has hecho bien.

Processing guarda en una carpeta llamada "data" las imágenes y archivos multimedia que utiliza. Puedes arrastrar directamente una imagen al IDE de Processing y se creará la carpeta guardando la imagen en su interior.

Lumen dice ¿Refrescamos un poco los conocimientos de Processing?

Es posible que tengas un poco oxidados tus conocimiento de Processing. No te preocupes, los siguientes vídeos te pondrán al día.

PImage


En cada página de este apartado verás un videotutorial. Recuerda que si lo necesitas puedes activar los subtítulos del video, en la parte baja del mismo, en el botón de subtítulos(c).

Variables

Void setup() Void draw()

Funciones

Condicionales

2. Identifico lo que tengo que hacer

Para poder realizar el reto  es necesario tener una serie de conocimientos sobre el uso de sistemas de ocultación, las condiciones que afectan a la seguridad , etc.

Además, debes conocer algunas estrategias importantes como trabajar en grupo, observar, planificar, explorar, analizar y muchas más. 

Así que para conectar con lo que ya sabes debes dirigirte al PASO 1 Diario de aprendizaje titulado “Identifico lo que tengo que hacer”. En él tienes que reflexionar sobre la tarea que te piden que realices y si recuerdas alguna situación anterior donde hayas hecho algo parecido. 

Diario de aprendizaje

Haz clic aquí para descargar tu Diario de Aprendizaje en formato PDF imprimible.
Haz clic aquí para descargar tu Diario de Aprendizaje en formato editable.

Recuerda:

  1. Pregunta a tu profesor o profesora si la rellenarás en papel o en el ordenador.
  2. Si la rellenas en el ordenador, ¡no te olvides de guardarla en tu ordenador cuando la termines!

¡Ánimo, que lo harás genial!

3. ¿Seré capaz de hacerlo?

Esta actividad "Analizamos Processing" parece interesante pero quizás, al intentar realizarla has sentido algunas dudas. 

Si completas el PASO 2 (¿Seré capaz de hacerlo?) del Diario de aprendizaje, podrás comprobar que solo con reflexionar sobre esto te ayudará a relajarte, a continuar con la actividad y completarla con éxito. También conseguirás sentir menos inseguridad cuando tengas que realizar las próximas actividades.

¡Ánimo! ¡Seguro que te lo pasas fenomenal!

4. ¿Has entendido el código?

2

Pulsa sobre las áreas o iconos activos de la imagen.

Puedes consultar la imagen inicial durante el cuestionario.

{"typeGame":"Mapa","instructions":"

Pulsa sobre las áreas o iconos activos de la imagen.

\n

Puedes consultar la imagen inicial durante el cuestionario.

","showMinimize":true,"showActiveAreas":false,"author":"","url":"resources/mapa2.JPG","authorImage":"","altImage":"","itinerary":{"showClue":false,"clueGame":"","percentageClue":40,"showCodeAccess":false,"codeAccess":"","messageCodeAccess":""},"points":[{"id":"p1164407733676","title":"Código para cargar el fondo","type":2,"url":"","video":"","x":0.6621591186523438,"y":0.49103672261140785,"x1":0,"y1":0,"footer":"","author":"","alt":"","iVideo":0,"fVideo":0,"eText":"

imageMode(CORNER);
image(fondo, 0, 0);

","iconType":0,"question":"","question_audio":"","map":{"id":"a1164407733676","pts":[{"id":"p233337357904","title":"","type":0,"url":"","video":"","x":0,"y":0,"x1":0,"y1":0,"footer":"","author":"","alt":"","iVideo":0,"fVideo":0,"eText":"","iconType":0,"question":"","question_audio":"","map":{"id":"a233337357904","url":"","alt":"","author":"","pts":[]},"slides":[{"id":"s233337357904","title":"","url":"","author":"","alt":"","footer":""}],"activeSlide":0}],"url":"","alt":"","author":"","active":0},"slides":[{"id":"s1164407733676","title":"","url":"","author":"","alt":"","footer":""}],"activeSlide":0,"audio":""},{"id":"p621471760002","title":"El marcador de puntos se incrementa cuando Retor atrapa una manzana","type":2,"url":"","video":"","x":0.13215911865234375,"y":0.1675325023884676,"x1":0,"y1":0,"footer":"","author":"","alt":"","iVideo":0,"fVideo":0,"eText":"

distancia = dist (xr, yr, xm, ym);
if (distancia < 50) {
  xm = random(25, 775);
  ym = 10;
  velocidad +=0.2;
  Puntos +=1;
}

","iconType":11,"question":"","question_audio":"","map":{"id":"a621471760002","pts":[{"id":"p25160445149","title":"","type":0,"url":"","video":"","x":0,"y":0,"x1":0,"y1":0,"footer":"","author":"","alt":"","iVideo":0,"fVideo":0,"eText":"","iconType":0,"question":"","question_audio":"","map":{"id":"a25160445149","url":"","alt":"","author":"","pts":[]},"slides":[{"id":"s25160445149","title":"","url":"","author":"","alt":"","footer":""}],"activeSlide":0}],"url":"","alt":"","author":"","active":0},"slides":[{"id":"s621471760002","title":"","url":"","author":"","alt":"","footer":""}],"activeSlide":0,"audio":""},{"id":"p1250860532010","title":"Mover a Retor hacia la izquierda","type":2,"url":"","video":"","x":0.6309091186523438,"y":0.8573284771977638,"x1":0,"y1":0,"footer":"","author":"","alt":"","iVideo":0,"fVideo":0,"eText":"

if (keyCode == LEFT) {
  xr -= 3 + velocidad;
  retor = loadImage (\"retor-mini-iz.png\");

\n

}

","iconType":16,"question":"","question_audio":"","map":{"id":"a1250860532010","pts":[{"id":"p531561617623","title":"","type":0,"url":"","video":"","x":0,"y":0,"x1":0,"y1":0,"footer":"","author":"","alt":"","iVideo":0,"fVideo":0,"eText":"","iconType":0,"question":"","question_audio":"","map":{"id":"a531561617623","url":"","alt":"","author":"","pts":[]},"slides":[{"id":"s531561617623","title":"","url":"","author":"","alt":"","footer":""}],"activeSlide":0}],"url":"","alt":"","author":"","active":0},"slides":[{"id":"s1250860532010","title":"","url":"","author":"","alt":"","footer":""}],"activeSlide":0,"audio":""},{"id":"p1136119589454","title":"Movimiento de caída de la manzana","type":2,"url":"","video":"","x":0.45590911865234374,"y":0.406308076819595,"x1":0,"y1":0,"footer":"","author":"","alt":"","iVideo":0,"fVideo":0,"eText":"

void manzana() {
   translate(xm, ym);
   rotate(i);
   image(manzana, 0, 0);
}

","iconType":15,"question":"","question_audio":"","map":{"id":"a1136119589454","pts":[{"id":"p582216081375","title":"","type":0,"url":"","video":"","x":0,"y":0,"x1":0,"y1":0,"footer":"","author":"","alt":"","iVideo":0,"fVideo":0,"eText":"","iconType":0,"question":"","question_audio":"","map":{"id":"a582216081375","url":"","alt":"","author":"","pts":[]},"slides":[{"id":"s582216081375","title":"","url":"","author":"","alt":"","footer":""}],"activeSlide":0}],"url":"","alt":"","author":"","active":0},"slides":[{"id":"s1136119589454","title":"","url":"","author":"","alt":"","footer":""}],"activeSlide":0,"audio":""},{"id":"p662386056604","title":"Dibujo del marcador con los puntos","type":2,"url":"","video":"","x":0.20715911865234374,"y":0.10426726049306441,"x1":0,"y1":0,"footer":"","author":"","alt":"","iVideo":0,"fVideo":0,"eText":"

textSize(20);
fill(#EDBB56);
rect (5, 5, 165, 35, 5);
fill(#1C1A18);
text (\"Manzanas = \"+ Puntos, 10, 30);

","iconType":8,"question":"","question_audio":"","map":{"id":"a662386056604","pts":[{"id":"p1643086330849","title":"","type":0,"url":"","video":"","x":0,"y":0,"x1":0,"y1":0,"footer":"","author":"","alt":"","iVideo":0,"fVideo":0,"eText":"","iconType":0,"question":"","question_audio":"","map":{"id":"a1643086330849","url":"","alt":"","author":"","pts":[]},"slides":[{"id":"s1643086330849","title":"","url":"","author":"","alt":"","footer":""}],"activeSlide":0}],"url":"","alt":"","author":"","active":0},"slides":[{"id":"s662386056604","title":"","url":"","author":"","alt":"","footer":""}],"activeSlide":0,"audio":""},{"id":"p1558604372146","title":"Fin de juego y reinicio","type":2,"url":"","video":"","x":0.7284091186523437,"y":0.28158057076590404,"x1":0,"y1":0,"footer":"","author":"","alt":"","iVideo":0,"fVideo":0,"eText":"
if (ym > 470) {\"Reinicio\"
    noStroke();
    textSize(50);
    fill(#938D16);   
    text (\"Game Over \", 270, 200);
    fill(#860813); 
    textSize(20);
    text (\"Pulsar Click para empezar\", 270, 250);
\n


    if (mousePressed == true) {
      ym = 25;
      velocidad = 0 ;
      Puntos = 0;
    }

","iconType":9,"question":"","question_audio":"","map":{"id":"a1558604372146","pts":[{"id":"p807383338309","title":"","type":0,"url":"","video":"","x":0,"y":0,"x1":0,"y1":0,"footer":"","author":"","alt":"","iVideo":0,"fVideo":0,"eText":"","iconType":0,"question":"","question_audio":"","map":{"id":"a807383338309","url":"","alt":"","author":"","pts":[]},"slides":[{"id":"s807383338309","title":"","url":"","author":"","alt":"","footer":""}],"activeSlide":0}],"url":"","alt":"","author":"","active":0},"slides":[{"id":"s1558604372146","title":"","url":"","author":"","alt":"","footer":""}],"activeSlide":0,"audio":""}],"isScorm":0,"textButtonScorm":"Guardar la puntuación","repeatActivity":false,"textAfter":"","evaluation":4,"selectsGame":[{"type":0,"time":null,"numberOptions":4,"typeSelect":0,"customScore":null,"msgHit":"","msgError":"","quextion":"¿Qué cosas ocurren cuando Retor recoge una manzana?","options":["La velocidad de caída aumenta 0.2","Se suma un punto.","La manzana reaparece en un punto (xm, ym) aleatorios","La distancia entre Retor y la manzana es inferior a 50 px."],"solution":"ABD","percentageShow":35,"solutionQuestion":""},{"type":0,"time":null,"numberOptions":4,"typeSelect":0,"customScore":null,"msgHit":"","msgError":"","quextion":"El código para cargar el fondo...","options":["Carga la imagen de fondo en el centro de la pantalla (0 , 0)","Carga la imagen de fondo desde la esquina superior izquierda (0 , 0)","Pone un fondo de color blanco (0, 0)","Carga la imagen de fondo desde la esquina inferior derecha (0 , 0)"],"solution":"B","percentageShow":35,"solutionQuestion":""},{"type":0,"time":null,"numberOptions":4,"typeSelect":0,"customScore":null,"msgHit":"","msgError":"","quextion":"Cuando pulsamos la flecha a izquierda del teclado","options":["Retor cambia para mirar hacia la izquierda","Retor aumenta su velocidad si mantenemos pulsada la tecla.","Retor aumenta su velocidad en 3","Retor aumenta su velocidad con cada manzana"],"solution":"AD","percentageShow":35,"solutionQuestion":""},{"type":0,"time":null,"numberOptions":4,"typeSelect":0,"customScore":null,"msgHit":"","msgError":"","quextion":"Cuando la manzana cae...","options":["Rota un ángulo i en cada frame","Cambia la referencia a su posición central para rotar sobre sí misma.","Cae con velocidad constante.","Cae con velocidad aleatoria."],"solution":"AB","percentageShow":35,"solutionQuestion":""},{"type":0,"time":null,"numberOptions":4,"typeSelect":1,"customScore":null,"msgHit":"","msgError":"","quextion":"Marca las líneas en el orden adecuado para dibujar el marcador","options":["text (\"Manzanas = \"+ Puntos, 10, 30);","textSize(20);","rect (5, 5, 165, 35, 5);","fill (#1C1A18);"],"solution":"BCDA","percentageShow":35,"solutionQuestion":""},{"type":0,"time":null,"numberOptions":4,"typeSelect":0,"customScore":null,"msgHit":"","msgError":"","quextion":"¿Cuándo finaliza el juego?","options":["Cuando Retor no recoge alguna manzana.","Cuando los puntos llegan a 25.","Cuando la coordenada \"y\" de la manzana es superior a 470","Cuando pulsa Click en el ratón"],"solution":"AC","percentageShow":35,"solutionQuestion":""}],"isNavigable":true,"showSolution":false,"timeShowSolution":3,"version":2,"percentajeIdentify":100,"percentajeShowQ":100,"percentajeQuestions":100,"msgs":{"msgSubmit":"Enviar","msgIndicateWord":"Proporcione una palabra o expresión","msgClue":"¡Genial! La pista es:","msgErrors":"Errores","msgHits":"Aciertos","msgScore":"Puntuación","msgMinimize":"Minimizar","msgMaximize":"Maximizar","msgFullScreen":"Pantalla Completa","msgNoImage":"Pregunta sin imágenes","msgSuccesses":"¡Correcto! | ¡Excelente! | ¡Genial! | ¡Muy bien! | ¡Perfecto!","msgFailures":"¡No era eso! | ¡Incorrecto! | ¡No es correcto! | ¡Lo sentimos! | ¡Error!","msgTryAgain":"Necesita al menos un %s% de respuestas correctas para conseguir la información. Vuelva a intentarlo.","msgEndGameScore":"Antes de guardar la puntuación comience la partida.","msgScoreScorm":"La puntuación no se puede guardar porque esta página no forma parte de un paquete SCORM.","msgPoint":"Punto","msgAnswer":"Responder","msgOnlySaveScore":"¡Sólo puede guardar la puntuación una vez!","msgOnlySave":"Sólo puede guardar una vez","msgInformation":"Información","msgYouScore":"Su puntuación","msgOnlySaveAuto":"Su puntuación se guardará después de cada pregunta. Sólo puede jugar una vez.","msgSaveAuto":"Su puntuación se guardará automáticamente después de cada pregunta.","msgSeveralScore":"Puede guardar la puntuación tantas veces como quiera","msgYouLastScore":"La última puntuación guardada es","msgActityComply":"Ya ha realizado esta actividad.","msgPlaySeveralTimes":"Puede realizar esta actividad cuantas veces quiera","msgClose":"Cerrar","msgPoints":"puntos","msgQuestions":"Preguntas","msgAudio":"Audio","msgAccept":"Aceptar","msgYes":"Sí","msgNo":"No","msgShowAreas":"Mostrar áreas activas","msgShowTest":"Mostrar cuestionario","msgGoActivity":"Pulsa aquí para realizar esta actividad","msgSelectAnswers":"Selecciona las opciones correctas y pulsa sobre el botón 'Responder'.","msgCheksOptions":"Marca todas las opciones en el orden adecuado y pulsa sobre el botón 'Responder'.","msgWriteAnswer":"Escribe la palabra o expresión correcta y pulsa en el botón 'Responder'.","msgIdentify":"Identificar","msgSearch":"Buscar","msgClickOn":"Pulsa sobre","msgReviewContents":"Debes repasar el %s% de los contenidos de la actividad antes de completar el cuestionario.","msgScore10":"¡Todo perfecto! ¡Enhorabuena! ¿Deseas repetir esta actividad?","msgScore4":"No has superado esta prueba. Repasa sus contenidos e inténtalo de nuevo. ¿Deseas repetir la actividad?","msgScore6":"¡Estupendo! Has superado la prueba, pero seguro que lo puedes mejorar. ¿Deseas repetir esta actividad?","msgScore8":"¡Casi perfecto! Aún lo puedes hacer mejor. ¿Deseas repetir esta actividad?","msgNotCorrect":"¡No es correcto! Has pulsado sobre","msgNotCorrect1":"¡No es correcto! Has pulsado sobre","msgNotCorrect2":"y la respuesta correcta es","msgNotCorrect3":"¡Prueba otra vez!","msgAllVisited":"¡Genial! Has visitado los puntos necesarios.","msgCompleteTest":"Puedes completar el cuestionario.","msgPlayStart":"Pulse aquí para empezar","msgSubtitles":"Subtítulos","msgSelectSubtitles":"Selecciona un archivo de subtítulos. Formatos válidos:"}}
resources/mapa2.JPG

imageMode(CORNER);
image(fondo, 0, 0);

distancia = dist (xr, yr, xm, ym);
if (distancia < 50) {
  xm = random(25, 775);
  ym = 10;
  velocidad +=0.2;
  Puntos +=1;
}

if (keyCode == LEFT) {
  xr -= 3 + velocidad;
  retor = loadImage ("retor-mini-iz.png");

}

void manzana() {
   translate(xm, ym);
   rotate(i);
   image(manzana, 0, 0);
}

textSize(20);
fill(#EDBB56);
rect (5, 5, 165, 35, 5);
fill(#1C1A18);
text ("Manzanas = "+ Puntos, 10, 30);

if (ym > 470) {Reinicio
    noStroke();
    textSize(50);
    fill(#938D16);   
    text ("Game Over ", 270, 200);
    fill(#860813); 
    textSize(20);
    text ("Pulsar Click para empezar", 270, 250);


    if (mousePressed == true) {
      ym = 25;
      velocidad = 0 ;
      Puntos = 0;
    }

Su navegador no es compatible con esta herramienta.

5. Comentando el código

Comentar el código puede ser útil para hacerlo más fácil de entender por otra persona o por nosotros mismos pasado un tiempo. En este caso lo utilizaremos para saber si en tu exploración has comprendido bien el código del juego.