Be Maker

Cargando...

Be Maker

Registrarse
section-icon

Guías de Ayuda

¡Aprende Robótica Educativa, Programación de Videojuegos y mucho más!

PictoBlox - Programación - febrero 25, 2023

Programación con PictoBlox: Primeros Pasos

6

Gran CodeMaster

@admin

CLASE 03

Para obtener tu recompensa debes estar registrado en nuestra plataforma y publicar tu trabajo

🧠¿Qué aprendo?

  • Conocer el entorno de programación de PictoBlox.

💡 ¿Qué es PictoBlox?

🧠 PictoBlox es un programa que se utiliza para crear animaciones multimedia usando un entorno de programación visual. Gracias al uso de este programa los alumnos/as pueden aprender fácilmente conceptos matemáticos e informáticos: variables, coordenadas, bucles, eventos de usuario, estructuras de decisión, tratamiento de imágenes y de audios, etc.

💡 Acceso al editor de PictoBlox

🧠 Para acceder al editor en línea debes hacer clic en el siguiente enlace: https://pictoblox.ai/

🧠El escenario

💡 El escenario de tiene unas dimensiones de 480 x 360 píxeles. Al igual que un plano cartesiano la posición de los objetos sobre él se determina por las coordenadas X e Y teniendo en cuenta que el centro del escenario se corresponde con las coordenadas X=0 e Y=0.

🧠Los Sprites (Objetos)

💡 Los sprites son los personajes u objetos que situamos sobre el escenario. Para añadir un sprite a nuestro proyecto:

1. En el panel Biblioteca de sprites en el botón Elegir un objeto y se ofrecen 4 opciones: subir del ordenador, sprite sorpresa, pintar desde blanco o elegir uno de la galería. 

2. Elige el icono lupa para seleccionar uno de la galería de PictoBlox. 

3. Haz clic sobre uno de los sprites de la galería. Por ejemplo: Bat.

4. Observa que este personaje se incorpora automáticamente al escenario y a la Biblioteca de Sprites. 

5. En la pestaña Disfraces se mostrarán los disfraces correspondientes a ese sprite. 

Para borrar un sprite del escenario: 

  1. Haz clic sobre el icono de la papelera que se muestra en su vista previa en la Biblioteca de Sprites.

🧠Los Bloques de Programación

💡 La caja de bloques consta de 9 categorías de bloques agrupados por funcionalidad. Cada categoría se distingue por su color:

  1. Movimiento. Contienen las acciones relacionadas con el movimiento de los sprites sobre el escenario: moverse, situarse en un punto concreto, girar, rebotar al tocar el borde …
  2. Apariencia. Ofrece las acciones relacionadas con el aspecto del sprite: mostrar un disfraz, decir algo en un bocadillo, etc.
  3. Sonido. Muestra las acciones relacionadas con los audios asociados en el panel Sounds al objeto: reproducir, detener, etc.
  4. Eventos. Gracias a estos bloques es posible capturar eventos: al pulsar bandera verde, al pulsar una tecla concreta, etc.
  5. Control. Es la paleta de bloques relacionados con el control de flujo: bucles por siempre, repetir X veces, etc.
  6. Sensores. Incluye los bloques que detectan colisiones entre objetos, tocar un color …
  7. Operadores. Proporcionan las operaciones aritméticas y lógicas entre variables.
  8. Variables. Permite crear variables para almacenar valores en la aplicación. 
  9. Mis Bloques. En esta sección se almacenarán los bloques personalizados creados por el programador ensamblando los bloques estándar. En el parte derecha del panel Code se va construyendo la secuencia de programación mediante la conexión de los bloques que se arrastran desde la paleta lateral izquierda. 

💡 En el parte derecha del panel Code se va construyendo la secuencia de programación mediante la conexión de los bloques que se arrastran desde la paleta lateral izquierda. 

📋 Ejercicio 01: Mi Primer Proyecto con PictoBlox (El Vuelo del Murciélago)

💻Descripción

  • El personaje Bat volará de un lado a otro rebotando en el borde.
  • Realizará la acción de forma ininterrumpida. 
  • El fondo de escenario es un bosque elegido de la galería.

💻Fundamentos

  1. Evento al pulsar la bandera verde.
  2. Bucle indefinido.
  3. Movimiento de X pasos
  4. Cambio de disfraz
  5. Si se toca el borde, rebota.

💻Diseño

1. Elige el fondo de Escritorio (puedes escoger el que desees)

2. Elige el personaje

En este caso para conseguir que los giros sean volteos horizontales y no giros de 180º pulsa en la casilla Dirección y elige volteo horizontal

💻Programación

  • al presionar (bandera verde). Cuando pulse la bandera verde comenzará la ejecución de los bloques conectados a este bloque.
  • por siempre. Bucle que ejecutará de forma ininterrumpida lo que está contenido en su interior.
  • mover X pasos. Moverse hacia la derecha 10 pasos. Cada paso es un pixel o punto luminoso de la pantalla.
  • siguiente disfraz. Siguiente disfraz. Mostrar el siguiente disfraz del listado de disfraces que tiene ese sprite en su panel Disfraces.
  • rebotar si toca un borde. Si toca borde, rebota. 

💻Guardar y Compartir tu Proyecto

  • Clic en la casilla superior del proyecto y darle un nombre, por ejemplo: Proyecto 01. Después clic en el ícono de guardar (dependiendo del navegador se guardará tu proyecto en la carpeta de descargas o te pedirá donde guardar)
  • Para compartir tu proyecto clic en Archivo -> Generate file sharing link
  • Debes estar registrado en la plataforma o te aparecerá el siguiente mensaje:
  • Si estamos registrados nos informará que el enlace se está generando y que debemos esperar
  • Posteriormente nos aparecerá el enlace de nuestro proyecto para copiarlo y compartirlo, el mismo tendrá una duración de 30 días.

⚔️Desafío 01: Demuestra lo aprendido

  1. ¿Cómo podemos conseguir que Bat no se traslade tan rápido en su movimiento de un lado a otro?
  2. ¿Es posible que Bat mueva las alas un poco más despacio?
    • Pista: en el bucle se puede insertar un bloque esperar X segundos

📋 Ejercicio 02: El Vuelo del Ovni

💻Descripción

💡 En este ejercicio vamos a aprender a diseñar una animación con dos características nuevas:

  1. Incorporar imágenes externas no incluidas en la galería de PictoBlox.
  2. Definir un movimiento en diagonal sobre el escenario.

💻Recursos

💾 Clic aquí para la imagen del universo.jpg

💾 Clic aquí para la imagen del ovni.png

💻Diseño

1. Sube y elige la imagen universo.jpg como fondo del escenario.

2. Sube desde tu computadora el ovni.

💡 Tu escenario tendría que verse más o menos así:

💻Programación

⚠️ Recuerda: Para que el objeto no se «voltee» al rebotar si toca un borde, debes pulsa en la casilla Dirección y elige volteo horizontal (flechas del medio). 


Las Sentencias Condicionales

🧠 Una sentencia condicional es plantearse una pregunta para actuar de una forma u otra según la respuesta. Por ejemplo, si llueve, abriré el paraguas. Si por el contrario no llueve, lo cerraré. Si hace frío, me pondré el abrigo. Si hace calor, me lo quitaré. Si es de noche, encenderé una luz. Si por el contrario es de día, la apagaré.

💡 El bloque Si nose ejecutará cuando no se cumpla la condición principal.

📋 Ejercicio 03: El Acuario de Peces

💻Descripción

💡 Vamos a diseñar un acuario con varios peces moviéndose. En este caso la animación muestra dos características interesantes:

  1. Incorporar varios objetos móviles que se mueven de forma simultánea.
  2. Asegurar que cada objeto rebote al alcanzar uno de los bordes del escenario
  3. Hacemos uso de la condicional si X entonces
  4. hacer uso de números al azar entre X y Y
  5. Replicar código en varios objetos

💻Recursos

💾 Clic aquí para la imagen del fondomarino.jpg

💾 Clic aquí para la imagen del fish01.gif

💾 Clic aquí para la imagen del fish02.gif

💾 Clic aquí para la imagen del fish03.gif

💾 Clic aquí para la imagen del fish04.gif

💻Diseño

1. Sube y elige la imagen fondomarino.jpg como fondo del escenario.

2. Sube desde tu computadora todos los sprites de peces y selecciona a fish01.gif

💡 Tu escenario tendría que verse más o menos así:

💻Programación

📢 Repetir el código en los 4 sprites (peces), el código cambia para cada pez donde en vez de número al azar entre 1 y 4 = 1, el 1 se cambia por el número del pez.

⚠️ Recuerda: Para que el objeto no se «voltee» al rebotar si toca un borde, debes pulsa en la casilla Dirección y elige volteo horizontal (flechas del medio). 

¡Estamos listos, a construir!

💰Recompensa: 10 Monedas de Oro – 5 Cristales de Experiencia

✅ Con el siguiente enlace podrás ingresar a tu cuenta de PictoBlox:

PictoBlox: Learn coding and program robots online

➡️ RETO 01: El Paseo del Cangrejo

💡 Utiliza la información del ejercicio: «El vuelo del murciélago» para elaborar la animación que haga que el cangrejo abra y cierre sus pinzas además de moverse de izquierda a derecha.

Pista: Para buscar al cangrejo debes escribir: crab y para buscar la playa debes escribir: beach

➡️ RETO 02: Vuelo de la Bruja

💡 Utiliza la información del ejercicio «El vuelo del ovni» para elaborar la animación de esta práctica.

Recursos: Descarga la imagen del bosque y la bruja

💾 Clic aquí para la imagen del bosque.jpg

💾 Clic aquí para la imagen del bruja.png

➡️ RETO 03: El Acuario de Peces

💡 Utiliza la información ofrecida en el ejercicio «El Acuario de Peces» para realizar una animación similar con los objetos que se muestran en la siguiente imagen:

Recursos: Descarga la imagen de los botes

💾 Clic aquí para la imagen del bote01.png

💾 Clic aquí para la imagen del bote02.png

💾 Clic aquí para la imagen del bote03.png

💾 Clic aquí para la imagen del bote04.png

Pista: Para buscar la imagen de fondo debes escribir: City With Water


Recuerda

PictoBlox es una aplicación de codificación educativa basada en bloques para principiantes con capacidades mejoradas de interacción de hardware y tecnologías emergentes como robótica, IA y aprendizaje automático que hacen que aprender a codificar sea divertido y atractivo.