¡Crea tu propio juego de Mario! Conceptos básicos de Scratch para niños y adultos

¡Crea tu propio juego de Mario! Conceptos básicos de Scratch para niños y adultos
Esta guía está disponible para descargar como PDF gratuito. Descarga este archivo ahora . Siéntase libre de copiar y compartir esto con sus amigos y familiares.

¿Sabías que cualquiera puede hacer un videojuego sin programación? Aunque hay varios lenguajes para principiantes, no tienes que pasar medio año aprendiendo Java o C ++ para crear un juego. Puede elegir entre muchas herramientas para varios tipos de juegos, pero una excelente opción para niños (y adultos) es la aplicación gratuita del MIT. Rasguño .





Scratch es una herramienta que te permite arrastrar y soltar activos para crear juegos o animaciones. Es fácil de entender, pero enseña los componentes básicos de la programación en el proceso. Veamos qué puedes crear en Scratch, luego recorre los pasos para crear un juego de Mario simple.



Conoce Scratch

Para comenzar con Scratch, diríjase a la pagina de inicio . Debe crear una cuenta de inmediato para que pueda guardar sus creaciones. Haga clic en el Únete a Scratch en la parte superior derecha de la ventana. Cree un nombre de usuario y contraseña, ingrese su fecha de nacimiento y sexo, luego el sistema le pedirá la dirección de correo electrónico de los padres. Ingrese el suyo si tiene uno, luego confirme su dirección para que pueda comentar sobre otros proyectos y compartir el suyo.





Ahora, puede saltar directamente. Haga clic en Crear en la barra de herramientas superior para iniciar el editor de Scratch. Si lo prefieres, también puedes descargar el editor sin conexión para trabajar sin conexión a Internet.

Elementos en pantalla

Cuando inicie el editor, verá la siguiente ventana. Analicemos sus elementos (vea la imagen de tamaño completo si la pequeña a continuación no está clara):



  1. Escenario - Muestra un resumen rápido de su juego. Todos los sprites activos y el fondo elegido aparecerán aquí. Puede mover los sprites si lo desea. Asigne un nombre a su proyecto en el campo de arriba.
  2. Fondo - Aquí puedes seleccionar un fondo para tu juego. Elija de la biblioteca de Scratch, pinte el suyo propio o importe un archivo. También puede tomar una imagen de la cámara de su PC, aunque la mayoría de las personas probablemente no necesitarán esta opción.
  3. Sprites - El centro de todos los sprites de tu proyecto. Al igual que los fondos, puede agregar los predeterminados, crear los suyos propios o cargar imágenes. Haga clic en el pequeño azul I en un objeto para cambiarle el nombre, cambiar su ángulo u ocultarlo.
  4. Área de trabajo - Dónde se lleva a cabo la mayor parte de su trabajo en Scratch. Utilice las pestañas de arriba (etiquetadas Guiones , Disfraces , y Sonidos para cambiar en qué estás trabajando.
    1. Guiones es para agregar bloques de código, que cubriremos pronto.
    2. Disfraces te permite crear poses adicionales para tus sprites. Esta pestaña cambiará a Telones de fondo si tiene uno seleccionado en el área 2 y de regreso a Disfraces cuando seleccionas un Sprite en el área 6 . Un editor de imágenes básico te permite realizar cambios en los gráficos de tu juego. También puede cambiar el nombre de los activos aquí.
    3. Sonidos , como era de esperar, es el centro para agregar y editar sonidos.
  5. Bloques - Dependiendo de cuál de las tres pestañas haya seleccionado, esta área cambiará entre bloques de código, disfraces / fondos de sprites y clips de sonido.
  6. Botones de control - La bandera verde comienza su juego, mientras que la forma de la señal de stop roja lo termina. Los usará para realizar pruebas.

Usando bloques

Ahora que se ha familiarizado con el editor de Scratch, hablemos de una de las partes más importantes de la herramienta: los bloques de código. En lugar de escribir código real, estos bloques le permiten definir el comportamiento de sus elementos. Se juntan como LEGO, lo que facilita ver cómo se afectan entre sí.

Haga clic en un objeto de la lista de la izquierda y asegúrese de seleccionar el Guiones tabulador para comenzar a arrastrar bloques para ese elemento. Tenga en cuenta que los bloques están codificados por colores y tienen bordes como un rompecabezas para mostrar cómo encajan. Las diez categorías y lo que hacen son:



  • Movimiento - Hacer que el objeto dado se mueva, ya sea por pasos, hacia otro objeto o mediante coordenadas directas.
  • Aspecto - Permite que el objeto se oculte o se muestre, cambie de vestuario, cambie de tamaño o se mueva entre capas.
  • Sonido - Reproduce sonidos, cambia el volumen o ajusta el tempo.
  • Lápiz - Dibujar con rotulador y cambiar su color y forma.
  • Datos - Te permite crear tus propias variables. Esto es extremadamente útil para elementos que Scratch no tiene incorporados.
  • Eventos - Criterios para iniciar otras acciones, como cuando haces clic en la bandera verde o presionas la barra espaciadora. ¡Necesitas estos bloques para que todos tus otros bloques realmente hagan algo!
  • Control - Se repite una acción, realiza una instrucción if-else o detiene algo.
  • Sintiendo - Coloca estos bloques en otros para realizar acciones cuando un objeto está tocando otro elemento o el usuario está presionando una tecla.
  • Operadores - Elementos matemáticos que le permiten realizar operaciones aritméticas o booleanas básicas en variables.
  • Más bloques - ¡Haz tus propios bloques si estos no son suficientes!

Un ejemplo simple

Tomemos un ejemplo simple para ilustrar cómo encajan estos bloques, paso a paso. Haremos que el gato de Scratch patee un balón de fútbol hacia la portería y eche un sonido cuando entre.

Primero, necesitas un fondo de fútbol genial. Dirígete al Fondo en la parte inferior izquierda y haga clic en el icono de imagen para elegir uno de los fondos de Scratch. Hay uno llamado Objetivo 1 eso funcionará perfectamente. A continuación, haga clic en el icono de sprite para agregar un nuevo sprite prefabricado. Deberías ver el Balón de fútbol en la lista: haz doble clic en él para agregarlo a tus sprites.



Ahora que los gráficos están listos, debe comenzar con algunos bloques. Seleccione el gato, ya que es él quien realiza la acción. Recuerda que el Eventos pestaña contiene muchos de los bloques de salida? Eche un vistazo y verá uno que se enciende cuando hace clic en la bandera verde. Ese es un punto de partida perfecto: arrástrelo al Guiones área de trabajo.

Una vez que comienzas, quieres que el gato corra y patee la pelota, ¿verdad? Eso suena como algo que caería bajo el Movimiento pestaña. Tienes varias opciones para hacer que el gato se mueva, como el Mover X pasos cuadra. Pero no podemos garantizar cuántos pasos tomará el gato para alcanzar la pelota. Hay un bloque mejor para esto: prueba el Deslizar X segundos para cuadra. Un segundo es un buen momento, y deberá hacer clic en el azul I icono del balón de fútbol para ver sus coordenadas. ¡Ingrese esos en el bloque y su primera acción estará completa!

Pateando la pelota

Una vez que el gato toca el balón de fútbol, ​​debe volar hacia la portería. Por lo tanto, seleccione el balón de fútbol para que pueda agregarle algunas acciones. Recuerde que cada acción debe comenzar con un Evento - la bandera verde está bien para este caso. Ahora, no quieres que la pelota de fútbol se mueva hasta que el gato la toque. Eche un vistazo al Control categoría para un bloque que nos permite limitar su comportamiento. los Esperar hasta bloquear suena bien!

Note como el Esperar hasta El bloque tiene una forma hexagonal alargada en su interior. Mucho de Sintiendo los bloques se ajustan a esta forma, así que échales un vistazo para encontrar el correcto. Ver el conmovedor bloquear en la parte superior de la lista? Puedes arrastrar eso justo dentro del agujero dentro Esperar hasta . Cambie el cuadro desplegable a Gato o lo que sea que hayas llamado el duende del gato.

Ahora solo necesitas hacer que el balón de fútbol vuele hacia la portería. los Deslizar X segundos para bloque en el Movimiento La categoría que usamos anteriormente para el gato funcionará bien. Encaja ese bloque debajo esperar hasta y coloque el puntero del mouse sobre la red de la portería. Verás X y Y coordenadas debajo del escenario - conéctelos en el Planeo cuadra. La pelota debe moverse bastante rápido cuando se la patea, así que intentemos 0,5 segundos por el momento.

Y la multitud se vuelve loca

¡El último paso es agregar sonido! Selecciona el Sonidos pestaña encima del área de trabajo para agregar una nueva. Haga clic en el icono de altavoz debajo Nuevo sonido para tomar uno de la biblioteca de Scratch. Hay uno llamado Alegría bajo la Humano categoría, que es perfecta. Haz doble clic en él para agregarlo y luego regresa al espacio de trabajo del balón de fútbol.

cómo eliminar eventos del calendario de iphone

Encontrarás un bloque etiquetado Reproducir sonido bajo la Sonido categoría. Encaja eso debajo del planeo bloquear y listo! Haga clic en la bandera verde para reproducir su animación. El gato correrá hacia la pelota, y cuando la toque, la pelota vuela hacia la portería y la multitud lo vitorea.

[video mp4 = 'https: //www.makeuseof.com/wp-content/uploads/2017/04/Scratch-Soccer-Example-Video.mp4'] [/ video]

¡Eso no fue demasiado difícil! Ahora que hemos investigado cómo se relacionan y encajan los bloques, veamos cómo puedes construir un juego de Mario usando Scratch.

Creación de un juego básico de Mario

El ejemplo de fútbol simple anterior muestra cómo puedes usar bloques para controlar sprites, pero no tiene ningún juego, animaciones o música. Profundicemos más y creemos un juego de Mario simple. Podríamos emplear miles de palabras en cada aspecto de la creación de un juego, así que nos ceñiremos a lo básico.

Tenga en cuenta: Como no soy un artista, para los propósitos de este tutorial estoy copiando los sprites de Mario de la web. Los gráficos de Mario son propiedad de Nintendo y no debes publicar ningún juego con sprites con derechos de autor. Esto se presenta solo como un ejemplo.

Importar gráficos

El primer paso es importar tus sprites y fondos a Scratch. Como estamos usando imágenes de la web, las descargaré y luego las subiré a Scratch. Crear lógica para que Mario pueda saltar sobre los enemigos para derrotarlos pero muere por tocar sus costados es demasiado avanzado para este tutorial, así que lo haremos recolectar monedas en su lugar.

Al final del tutorial, proporcionaré un archivo ZIP con los activos finales que utilicé. Si los usa, no tendrá que preocuparse por las instrucciones de manipulación de imágenes en el tutorial. Si quieres descargar todo tú mismo, continúa. Aquí están los sprites que descargué:

Scratch tiene un Cielo azul 3 background, que funcionará bien para nuestras necesidades.

Editar trajes de Sprite

Debido a que hay dos sprites que componen la animación de ejecución de Mario, debes agregarlos como disfraces separados. Use un editor de imágenes como Paint.NET para guardar los dos marcos de Mario como archivos separados; puede ignorar el tercero. Sube el primer sprite de Mario, luego selecciónalo y usa el Disfraces pestaña para cargar el otro sprite como su segundo disfraz. Dales nombres distinguibles, como Mario-1 y Mario-2 . Agrega el sprite saltarín como otro disfraz de Mario.

Use un editor de imágenes para extraer la nube de la imagen proporcionada anteriormente, luego cárguela como un nuevo objeto. No está animado, por lo que no es necesario agregar un disfraz por separado.

Para el suelo, necesitarás muchos bloques ya que Mario corre a lo largo de ellos. Use Paint.NET para agarrar los seis bloques en el medio del Bloques de tierra imagen, luego guárdelos como un archivo separado. Necesitará aproximadamente 12 bloques para cubrir toda la parte inferior de la pantalla una vez que los reduzca a un buen tamaño. Por lo tanto, debe colocar dos copias de estos seis bloques uno al lado del otro para su Suelo duende. Sube esto y luego haz dos duplicados de sprites terrestres en Scratch.

La moneda es un GIF animado, por lo que es un poco diferente. Siempre que lo subas, Scratch creará disfraces para cada fotograma de la animación. Esta imagen tiene 11 fotogramas en total, pero desafortunadamente también tiene un borde blanco alrededor, que se ve contra el fondo azul. Tendrás que abrir cada disfraz para la moneda dentro del editor de Scratch. Use la herramienta de pipeta para seleccionar el color de fondo azul, luego use la herramienta de cubo de pintura para cambiar los bordes blancos de la moneda a azul pálido.

Necesitarás cambiar el tamaño de los sprites usando el Crecer y Encogerse botones en la parte superior de la pantalla, justo encima del botón de bandera verde. Haga clic en cualquier botón, luego haga clic en el objeto que desea cambiar en el escenario a la izquierda. Esto también cambiará el tamaño de todos los disfraces. Estadio de béisbol por ahora; puede ajustar más tarde.

Importar sonidos

Al igual que los sprites, tomaremos un par de sonidos para desarrollar nuestro juego. Continúe y descargue estos, luego cárguelos usando el Sonidos pestaña. Mientras lo hace, mire en agregarlos como tonos de llamada geniales para su teléfono .

Animar las monedas

Ahora que todos los activos están listos, es hora de empezar a hacer que cobren vida. Empezaremos por las monedas, ya que son fáciles. Seleccione el objeto de la moneda y el Guiones pestaña. Dado que nuestras monedas son GIF animados, podemos usar una serie de bloques para desplazarnos constantemente por sus disfraces para que parezcan moverse.

Un guión de animación se parece a esto:

En resumen, este script establece la moneda en su estado predeterminado cuando hace clic en la bandera verde. A continuación, recorre los fotogramas sin cesar, a una velocidad que establezca como FPS variable en el Datos pestaña. Juega con ese número si no te gusta la velocidad.

Desmarque la casilla junto a Moneda-FPS en el Datos tab (esta es una variable personalizada que crea) por lo que no se muestra en la pantalla.

Haciendo que Mario se mueva

Ahora la parte difícil. Se requieren muchos pasos para hacer que Mario se mueva, y en realidad es un truco que desplaza los bloques del suelo para dar la apariencia de movimiento. En lugar de intentar explicar cada bucle de bloque, proporcionaré capturas de pantalla de bloques de código y explicaré sus aspectos más destacados.

Primero, necesita hacer cuatro variables en el Datos pestaña. Los cuatro son Para todos los sprites excepto por Velocidad , que es solo para Mario:

  • Gravedad es una constante que tira de Mario al suelo cuando salta.
  • En el suelo realiza un seguimiento de si Mario está tocando el suelo o no.
  • ScrollX mide el movimiento horizontal de la pantalla.
  • Velocidad (Solo Mario) controla la velocidad a la que Mario salta.

Animando el suelo

Ya ha hecho dos duplicados de su Suelo sprite haciendo clic derecho sobre él y eligiendo Duplicar . Arrastrar Ground-1 en el extremo izquierdo de la pantalla, por lo que su bloque más a la izquierda toca el extremo izquierdo de la pantalla. Luego, arrastre los otros sprites terrestres a la derecha del primero. Alinea los bordes y parecerá que el suelo es una pieza sólida.

Aquí está el bloque de código que necesitará para cada Suelo duende:

Esto coloca el suelo en la parte inferior de la pantalla, luego simplemente desplaza los bloques a medida que Mario se mueve. ScrollX es la posición de los bloques; 0 es la posición predeterminada que se inicia al hacer clic en la bandera verde. Notará que no puede moverse a la izquierda inmediatamente después de comenzar.

Para el segundo (y más) bloques de tierra, incremente el 0 dígito en DesplazamientoX + 480 * 0 uno por cada nuevo terreno. Esto lo compensará para que se desplace suavemente.

La lógica de Mario

Eso es todo lo que se necesita para los bloques, pero Mario tiene muchos más bloques de código. Esto es lo que hace cada uno de ellos, con un breve resumen:

Este bloque de código cambia el ScrollX variable cuando Mario se mueve. Siempre que presiona hacia la izquierda o hacia la derecha, Mario mira en la dirección apropiada y da un paso, aumentando ScrollX por 3. Si encuentra que Mario se pone boca abajo cuando se mueve hacia la izquierda, haga clic en el azul I en su sprite y asegúrese de que el Estilo de rotación se establece en la segunda opción. Esto lo volteará de izquierda a derecha en lugar de en un círculo.

cómo descargar un sitio web sin conexión

Aquí vemos el código que maneja los cambios de vestuario de Mario. Cuando Mario no está en el suelo, tiene el disfraz de saltar. Siempre que te mueves hacia la izquierda o hacia la derecha, Mario cambia entre fotogramas cada décima de segundo. Suelta las teclas de flecha y Mario pasa a su marco estándar de forma predeterminada.

Un simple fragmento de código que averigua el En el suelo variable. Si toca uno de los bloques del suelo, En el suelo es igual a 1 (verdadero). Cuando el esta saltando, En el suelo es 0 (falso).

Estos dos bloques de código manejan la velocidad de salto de Mario. A la izquierda hay un bloque que asegura que Mario no tenga ningún impulso si está en el suelo. Si está en el aire, su velocidad se reduce gradualmente por la gravedad, que es un valor constante. El bloque derecho hace que Mario salte cada vez que presionas la barra espaciadora. Suena su sonido de salto y la velocidad lo impulsa hacia el aire hasta que la gravedad se hace cargo.

Nuestro último bloque de código para Mario está listo. Cuando haces clic en la bandera verde para comenzar, comienza la música, todas las variables se establecen en sus valores predeterminados y Mario aparece en el medio de la pantalla.

Coleccionando monedas

Volvamos a las monedas. Necesitamos asegurarnos de que cuando Mario agarre uno, haga un sonido y desaparezca. Hagamos una secuencia de comandos separada para eso: separar las secuencias de comandos por función es una práctica importante en la programación. Un gran revoltijo de bloques hace que sea más difícil resolver el problema cuando algo sale mal.

Aquí está nuestro guión de colección de monedas:

Esto es bastante fácil: cada vez que Mario toca una moneda, se reproduce el sonido de la colección y la moneda se esconde. En el código de animación de la moneda, hemos colocado un Show bloquear para que las monedas vuelvan a aparecer cuando reinicie.

Desplazar monedas y nubes

¡Ya casi estás ahí! Dado que Mario no se mueve, pero el suelo se desplaza, debemos asegurarnos de que las monedas también se desplacen para que Mario pueda recogerlas. Así es como funciona:

Esto coloca la moneda en un Y valor (que es la posición vertical de la pantalla) donde Mario puede agarrarlo fácilmente. Luego usa una lógica similar a los bloques de tierra para desplazarse hacia Mario. Tenga en cuenta que hemos aumentado la velocidad de desplazamiento a 0.75 para que las monedas se muevan hacia Mario rápidamente. Para la segunda y tercera monedas, aumentamos el establecer y en campo a -40 y -20 por lo que están un poco más arriba y son más difíciles de agarrar para Mario. En el Establecer x en bloquear, aumentar el 150 * 1 para 150 * 3 y 150 * 5 para la segunda y tercera monedas para colocarlas más a la derecha, fuera de la pantalla.

Las nubes usan un bloque de código casi idéntico:

Nuevamente, esto coloca una nube a una altura específica, luego la desplaza mientras Mario se mueve. Para una segunda nube que está frente a Mario en lugar de detrás de él, cambie el establecer x en bloquear a (DesplazamientoX * 0.1) + (150 * 1) , al igual que las monedas.

Agregar bordes

Debido a la forma en que implementamos el suelo y las monedas, verá monedas atascadas en el borde de la pantalla hasta que aparezcan. Esto es antiestético, por lo que debe crear un sprite de borde rápido que sea del mismo color que el fondo para ocultarlo tanto en el lado izquierdo como en el derecho.

La forma más sencilla de hacerlo es hacer clic con el botón derecho en el escenario y hacer clic en Guardar imagen del escenario . Abra esto en Paint.NET y use la herramienta de pipeta para seleccionar el color de fondo azul. Agrega una nueva capa usando el diálogo de abajo a la derecha. Luego, use la herramienta Rectángulo para dibujar un rectángulo azul relleno a cada lado de la pantalla. Cubre aproximadamente la mitad de cada bloque, luego elimina la capa de fondo.

Guarde esto como un archivo PNG y cárguelo como un nuevo objeto llamado Frontera . Como dibujó los bordes sobre la pantalla, puede alinearlos perfectamente.

Luego, solo necesita unos pocos bloques para que el borde siempre esté al frente:

Expandiendo su juego

Prueba el producto final aquí !

Hemos creado juntos los conceptos básicos de un juego de Mario. Puedes agregar muchos elementos a tu juego desde aquí. Intenta agregar Super Mushrooms para potenciar a Mario, haciendo algunos pozos que Mario debe limpiar o creando una bandera de nivel final. Con los bloques de construcción que ha recogido aquí, puede agregar más sprites, variables y lógica para hacer lo que quiera. ¡Esperamos ver lo que se te ocurra!

Nos gustaría agradecer al usuario de Scratch dryd3418, ya que usamos parte del código de su Super Mario: Tutorial de desplazamiento y salto proyecto en nuestro propio proyecto para este artículo. Para obtener ayuda más detallada, incluidos los scripts que puede copiar, consulte otra guía del usuario para hacer un juego de Mario . Si desea tomar una ruta más fácil, consulte la Crea tu propio proyecto de Mario Game que te permite arrastrar y soltar sprites para hacer un juego simple.

Tenga en cuenta que en cualquier proyecto de Scratch, puede hacer clic en Ver el interior para abrir el proyecto en un editor como el que usó para su propio proyecto. Esto le permite echar un vistazo a los bloques que alguien usó para hacer que su proyecto funcione y puede ayudarlo cuando se quede atascado. He puesto mi proyecto a disposición de todos, así que siéntete libre de mirarlo y eche un vistazo al código si necesita ayuda. También he comprimido todos los recursos que usé en este juego, para que puedas descargarlos para ahorrar algo de tiempo.

¿Interesado en dar un paso adelante? Consulte Scratch para Arduino para crear proyectos en esa plataforma. Si estás listo para sumergirte, echa un vistazo a todo lo que necesitas para crear un juego de iPhone desde 'cero'.

películas para dormir en netflix

Para otras cosas divertidas que puede hacer con sus hijos, eche un vistazo a estos sitios de manualidades y proyectos de bricolaje para niños y adolescentes.

Cuota Cuota Pío Correo electrónico Cómo limpiar su PC con Windows usando el símbolo del sistema

Si su PC con Windows se está quedando sin espacio de almacenamiento, limpie la basura con estas rápidas utilidades del símbolo del sistema.

Leer siguiente Temas relacionados
  • Programación
  • Forma larga
  • Guía de formato largo
  • Rasguño
Sobre el Autor Ben Stegner(1735 Artículos publicados)

Ben es editor adjunto y director de incorporación de MakeUseOf. Dejó su trabajo de TI para escribir a tiempo completo en 2016 y nunca miró hacia atrás. Ha estado cubriendo tutoriales de tecnología, recomendaciones de videojuegos y más como escritor profesional durante más de siete años.

Más de Ben Stegner

Suscríbete a nuestro boletín

¡Únase a nuestro boletín de noticias para obtener consejos técnicos, reseñas, libros electrónicos gratuitos y ofertas exclusivas!

Haga clic aquí para suscribirse