makey-scratch-hero

Makey:bit Scratch Gamer

30-60 min

Ages 8+

What Will You Make?

It’s time to play! Use Makey:bit as a controller for your games, to connect the real world with the digital world.

Pressing the buttons will turn on Makey’s LEDs, and you will use these to catch all the tools you can, to earn points, and increase the difficulty.

What Will You Learn?

We will use Scratch block programming to create a fun game, using variables, sounds, sensors, and operations. We will program our Makey:Bit, to interact with the NeoPixels in Makey’s eyes.

Grab your materials...let's get coding!

makey-scratch-materials

Our code is divided into 2 parts:

1) The neopixels with Makey:Bit

2) The game with Scratch

Neopixels + Makey:Bit

Step 1

We are going to open Make Code, here we can program with JavaScript, Python, and of course with a visual block language, the latter is the one we will use.

makey-scratch-step1

Step 2

We are going to go to the Makey-Bit-Projects project repository and download it, clicking on the green “code” button, we select the Zip format. When it finishes downloading, we open the “Makey-bit-scratch-gamer” folder where we have the complete code but divided into parts.

Step 3

We enter the Make Code platform, click on “import” and drag the file “microbit-Create-Makeybit-RGB.hex”, we are ready to start.

If you are new to the platform, the part on the left is our simulator, the middle part is the blocks menu, and the part on the right is our work table. In the upper part, we can change the programming language and the project configuration and in the lower part we have the section to download and save our program

Tip: The project is now ready to work with neopixels, but if you want to use it in another project you need to download its extension, go to Tool –> Extensions –> NeoPixel.

Step 4

We have two blocks of blue color, let’s start with “on start”, we are going to place inside our block “set strip” to NeoPixel on pin 16 with 2 leds as RGB (GRB format)” with this block, we specify that we have two NeoPixels on pin 16. Next, we drag the “strip clear” block, Then we put the “strip show” block

makey-scratch-step4

Step 5

We go to the blue “forever” block, we drag inside the first if “if button A+ B is pressed or button a is pressed or button b is pressed then”, inside the condition we place our second if “if button A+ B is pressed then” and in the first else we place the “if button A is pressed then” and in the last else we place the “strip clear” block.

What it’s doing is checking if we’re clicking any buttons, then checking which button we’re pressing to put the color on the neopixels and if not we turn off the leds.

Step 6

To bring the code to our Makey:bit we click on the three dots next to the “download” button, select “connect device”, follow the steps and download it.

It’s time to test our code, pressing the microbit buttons and we see the neopixels change color.

Great we are already halfway through the project, now we will work on the scratch game Scratch

Scratch + Makey:Bit

Step 7

We go to the Makey:bit Scratch Creator project, we click on “View inside” to start editing it.

On the left, we have our block menu, in the middle our artboard and on the right, we can test our project.

makey-scratch-step7

Step 8

On the right side, we select the “Button2” now in the work area we are going to place our purple block “change background to transparent” and the purple block “hide” under the block “when clicking on this object”

After the block “when the background changes to instructions”, we put next the purple “hide” block. We continue with the block “when the background changes to home” we put the purple block “show” next.

Step 9

Perfect now we select the “1-1” tool, we see the 3 yellow blocks of our main logic and the other blocks that we will need.

Below the yellow “when background changes to home” block, we are going to place the purple “hide” block. Then the “when the background changes to instructions” block, and we put the purple “hide” block.

makey-scratch-step9

Step 10

Now the last yellow block “when the background changes to transparent”, we put next the purple blocks of “show” and “change costume to 1”.

Next we put our blue “set Y to 210” block.

makey-scratch-step10

Step 11

Take the orange “forever” block that has a condition that only one tool per color appears on the screen. We place inside the condition the blue “turn -.1 degrees” block which also has a y-change block, which changes the speed taking into account the current points.

We place after the block “change y in – if touching the color-” and then we put our block “if position in Y < -170 then”.

What we are doing is that when it touches the corresponding color of Makey’s eyes, it changes our costume and gives us a point, but if on the contrary, it touches the ground, it takes away points and disappears.

Step 12

We are going to add a sound when you touch the tools and earn points, we go to the sounds section, here we can import one or create it, remember to check the sound block in the code to specify the name of the sound and it works perfectly.

Step 13

Let’s go to the last step and a very important one, adjust the colors that Scratch detects to earn points. We click on the green flag to start the game, we click on the hand with Makey:bit, the camera is activated. Now turn on Makey’s leds and place him in front of the camera, let’s start with the yellow color in the neo pixels, then in the work section and click on “touching color” we section the pointer, and select the color of the NeoPixels outline , also to have a better result the environment has to have little light.

Tip: To activate the camera, you must accept scratch permissions, we just click on the padlock on the left of the URL.

Step 14

Perfect it’s time to play and have fun, show it to your friends and have fun with Makey:bit!

Finished Project

makey-scratch-final

Resources

What Is Happening Here?

Coding

We are using a visual programming language to create a video game with Scratch, and programming Makey:bit with Make Code.

What Is Next?

It’s time to be creative in programming use different block objects or game dynamics. Then you can use the sensors that this board has like the microphone, accelerometer, and among others, to combine Makey:Bit with Scratch.

You can also find more information:

How to use Microbit with Scratch?: https://scratch.mit.edu/microbit

What is MakeCode and how to use it?: https://www.microsoft.com/es-es/makecode

Servo-Main-Project-Image
I like to Move it Move it: Adding Motors to Makey:bit by Diego
Animatronic Face
Makey:bit Animatronic Face by Kathy Ceceri

About MoonMakers

MoonMakers — led by Camila and Diego Luna —  are a community of creators passionate about knowledge. A Makerspace, an open space with different digital manufacturing machines. And a YouTube channel where we promote science, technology and the maker movement.

MoonMakers have collaborated with companies such as: Sesame Street, Make Community and in Mexico with Educational Television and Fundación Televisa, creating educational content.

We have given workshops throughout the Mexican Republic with: Talent Land, Secretary of Education in Jalisco, Conacyt, Centro Cultural España.

MoonMakers

Makey:bit Jugador de scratch

30-60 min

Ages 8+

¿Qué vas a hacer?

¡Es momento de jugar! Usa a Makey:bit como un control para tus juegos, para conectar el mundo real con el mundo digital.

Al presionar los botones se encenderán los leds de makey, y usarás estos para atrapar todas las herramientas que puedas, para ganar puntos y aumentar la dificultad.

¿Qué aprenderás?

Usaremos programación de bloques en scratch para crear un juego divertido, usando variables, sonidos, sensores y operaciones. Al igual que la programación de nuestra Makey:bit, para interactuar con los neopixels que tiene en los ojos de Makey.

Coge tus materiales... ¡vamos a codificar!

makey-scratch-materials

Nuestro código se divide en 2 partes:

1) los neopixeles con Makey:Bit

2) el juego con Scratch

Neopixels + Makey:Bit

Paso 1

Vamos a abrir Make Code, aquí podemos programar con JavaScript, Python y por supuesto con un lenguaje visual de bloques, este último es el que usaremos.

makey-scratch-step1

Paso 2

Vamos a ir al repositorio del proyecto Makey-Bit-Projects y lo descargamos, haciendo click en el botón verde “code”, seleccionamos el formato de Zip. Cuando termine de descargar vamos abrimos la carpeta “Makey-bit-scratch-gamer” donde tenemos el código completo pero dividido en partes.

Paso 3

Entramos en la plataforma de Make Code, hacemos clic en “importar” y arrastramos el archivo “microbit-Create-Makeybit-RGB.hex”, ya estamos listos para comenzar.

Si eres nuevo en la plataforma, la parte de la izquierda tenemos nuestro simulador, la de enmedio el menú de bloques, la de la derecha es nuestra mesa de trabajo. En la parte superior podemos cambiar el lenguaje de programación y la configuración del proyecto y en la parte inferior tenemos la sección para descarga y guardar nuestro programa

Tip: El proyecto ya está listo para trabajar con los neopixels, pero si quieres ocuparlo en otro proyecto necesitas descargar su extensión, vas a Herramienta -> Extensions -> neopixel.

Paso 4

Tenemos dos bloques de color azul, epezemos con “on start”, vamos a colocar dentro nuestro bloque de “set strip to NeoPixel en el pin 16 with 2 leds as RGB (GRB format)” con este bloque especificamos que tenemos dos neopixels en el pin 16. A continuación arrastramos el bloque “strip clear”, Después ponemos el bloque ”strip show”

makey-scratch-step4

Paso 5

Vamos al bloque azul “forever”, arrastramos dentro el primer if “if button a+ b is pressed or button a is pressed or button b is pressed then”, dentro de la condición colocamos nuestro segundo if “if button a+ b is pressed then” y en el primer else colocamos el “if button A is pressed then” y en el último else colocamos el bloque “strip clear”.

Lo que está haciendo es comprobar si estamos haciendo click en algún botón, luego comprueba qué botón estamos apretando para poner el color en los neopixels y si no apagamos los leds.

Paso 6

Para llevar el código a nuestra Makey:bit hacemos clic en los tres puntos al lado del botón “download”, seleccionamos “connect device”, seguimos los pasos y lo descargamos.

Es momento de probar nuestro código, apretando los botones de la microbit y vemos los neopixeles cambiar de color.

Genial ya estamos a la mitad del proyecto, ahora trabajaremos en el juego en scratch Scratch

Scratch + Makey:Bit

Paso 7

Vamos al proyecto Makey:bit Scratch Creator, hacemos click en “Ver dentro” para comenzar a editarlo.

En la parte de la izquierda tenemos nuestro menú de bloques, en la de enmedio nuestra mesa de trabajo y en la derecha podemos probar nuestro proyecto.

makey-scratch-step7

Paso 8

En la parte derecha, seleccionamos el “Boton2” ahora en la zona de trabajo vamos a colocar  nuestro bloque morado “cambiar fondo a Transparente” y el bloque morado “esconder” debajo de el bloque “Al hacer clic en este objeto”

Después del bloque “Cuando el fondo cambie a Instrucciones”, ponemos a continuación el bloque morado de “esconder”. Seguimos con el bloque de “Cuando el fondo cambie a Inicio” ponemos a continuación el bloque bloque morado de “mostrar”.

Paso 9

Perfecto ahora seleccionamos la herramienta “1-1”, vemos los 3 bloques amarrilos de nuestra lógica principal y los demás bloques que necesitaremos.

Debajo del bloque amarillo “Cuando el fondo cambie a Inicio”, vamos a colocar a el bloque morado de “esconder”. Luego el bloque “Cuando el fondo cambie a Instrucciones”, y colocamos el bloque morado de “esconder”.

makey-scratch-step9

Paso 10

Ahora el ultimo bloque amarillo “Cuando el fondo cambie a Transparente”, ponemos a continuacion los bloques morados de “mostrar” y “cambiar disfraz a 1”.

A continuación ponemos nuestro bloque azul “fijar y a 210”.

makey-scratch-step10

Paso 11

Ahora toma el bloque naranja “por siempre” que tiene una condición para que solo una herramienta por color aparezca en pantalla. Colocamos dentro de la condición el bloque azul “girar -.1 grados” que también  tiene un bloque de cambiar en y, que cambia la velocidad teniendo en cuenta los puntos actuales. Colocamos después del bloque “cambiar y en – sí tocando el color- ” y después ponemos nuestro bloque “si posición en y < -170 entonces”.

Lo que estamos haciendo es que cuando toque el color de los ojos de Makey correspondiente, nos cambia de disfraz y nos aumenta un punto, pero si al contrario toca el suelo nos quita puntos y desaparece.

Paso 12

Vamos a agregar un sonido cuando toques las herramientas y ganes puntos, vamos a la sección de sonidos, aquí podemos importar uno o crearlo, recuerda revisar el bloque de sonido en el código para especificar el nombre del sonido y  funcione a la perfección.

Paso 13

Vamos por el último paso y uno muy importante, ajustar los colores que detecta Scratch para ganar puntos. Hacemos clic en la bandera verde para iniciar el juego, hacemos clic en la mano con Makey:Bit, se activa la cámara. Ahora enciende los leds de Makey y colocalo frente a la camara, empezemos con el color amarillo en los neo pixeles, depsues en la sección de trabajo y hacemos clic en “tocando color” seccionamos el puntero, y selescionas el color del contorno de los neopixels, tambien para tener un mejor resultado el ambiente tiene que tener poca luz.

Tip:  Para activar la cámara, debes aceptar los permisos de scratch, solo hacemos clic en el candado a la izquierda de la URL.

Paso 14

Perfecto es hora de jugar y divertirse, muestraselo a tus amigos y diviértete junto a Makey:bit

Proyecto terminado

makey-scratch-final

Recursos

¿Qué está pasando aquí?

Codificación

Estamos usando un lenguaje de programación visual para crear un videojuego con Scratch, y programar a Makey:bit con Make Code.

¿Qué es lo siguiente?

Es momento de ser creativo en la programación usando diferentes bloque objetos o dinámicas de juego. Luego puedes usar los sensores que tiene esta placa como el micrófono, acelerómetro, y entre otros, para combinar a Makey:Bit con Scratch.

 

También puedes encontrar más información:

¿Como usar Microbit con Scratch?: https://scratch.mit.edu/microbit

¿Que es MakeCode y como usarlo?: https://www.microsoft.com/es-es/makecode

Servo-Main-Project-Image
I like to Move it Move it: Adding Motors to Makey:bit by Diego
Animatronic Face
Makey:bit Animatronic Face by Kathy Ceceri

Acerca de MoonMakers

MoonMakers — lideradas por Camila and Diego Luna — somos una comunidad de creadores apasionados por el conocimiento. Un Makerspace, un espacio abierto con diferentes máquinas de fabricación digital. Y un canal de YouTube donde promovemos la ciencia, la tecnología y el movimiento maker.

MoonMakers ha colaborado con empresas como: Sesame Street, Make Community y en México con Televisión Educativa y Fundación Televisa, creando contenido educativo.

Hemos imparto talleres por la República Mexicana con: Talent Land, Secretaría de educación en Jalisco, Conacyt, Centro Cultural España.

MoonMakers
FEEDBACK