1. Code
  2. Game Development

Introducción a Scratch

Una de las mejores cosas de mi semana es el Club del Código que dirijo en una escuela de mi localidad. Cada Jueves, paso una hora con algunos compañeros codificadores ayudándoles a aprender los fundamentos de la codificación.
Scroll to top

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

Una de las mejores cosas de mi semana es el Club del Código que dirijo en una escuela de mi localidad. Cada Jueves, paso una hora con algunos compañeros codificadores ayudándoles a aprender los fundamentos de la codificación.

Junto con otros clubes del código y organizaciones y grupos similares, nuestro grupo comenzó a programar utilizando Scratch. Scratch es una herramienta online que ayuda a los niños a aprender los fundamentos de como funciona el código y les permite crear sus propias animaciones, juegos y más.

Además de ser una herramienta, Scratch es una comunidad: usuarios pueden compartir sus proyectos, hacer copias de los proyectos de otros y "remezclarlos", algo como copiar código en Github y consiste en copiar el proyecto de alguien y añadir sus propias mejoras o cambios en él. En lugar de esperar a que los aprendices escriban su código desde scratch, Scratch les proporciona un conjunto de bloques: líneas de código que ellos arrastran al lugar adecuado para crear su código.

En ésta serie de tutoriales te daré una introducción detallada a Scratch y como utilizarlo. Ésta primera parte dará una visión general de como funciona Scratch y sus principales componentes y conceptos. Cubriré:

  • Iniciando
  • proyectos
  • recursos: fondos, sprites (objetos), disfraces y sonidos
  • scripts
  • donde obtener ayuda

Primero, aquí está como iniciarse en Scratch.

Iniciando en Scratch

Scratch fue primero desarrollado en el 2003 en el Instituto Tecnologico de Massachussetts. Comenzó como un software descargable pero ahora es una herramienta online. Es totalmente gratuita y es financiada por aportaciones de varias organizaciones, incluídas la Fundación Nacional para la Ciencia, Microsoft, Google y la Fundación LEGO.

Para iniciar, solo visita el sitio web de Scratch y registrate para una cuenta con tu dirección de correo electrónico.

En la esquina superior derecha de la pantalla, da click en Join Scratch (Unirse a Scratch). Verás la siguiente pantalla:

Join ScratchJoin ScratchJoin Scratch

Crea un nombre de usuario y una contraseña para tí mismo, y luego da click en el botón Next (siguiente) para ir a la siguiente pantalla.

Join ScratchJoin ScratchJoin Scratch

Aquí se te pedirá que proporciones información sobre tí, la cual Scratch usa para monitorear el tipo de personas que utilizan la plataforma. Da click en Next de nuevo para continuar:

Join ScratchJoin ScratchJoin Scratch

Proporciona tu dirección de correo electrónico y recibirás un mensaje de confirmación. Tienes que dar click en el enlace en tu mensaje si quieres compartir tus proyectos (si no quieres compartir, puedes continuar sin hacer ésto, pero tendrás un permanente recordatorio en la parte superior de tu pantalla cada vez que ingreses).

Después de que has proporcionado tu dirección de correo electrónico y dado click en Next, verás una pantalla de bienvenida:

Join ScratchJoin ScratchJoin Scratch

Ahora cuando des click en OK Let's Go! o ingreses a tu cuenta, verás la página de inicio con detalles de lo que está pasando en la comunidad de Scratch, incluyendo actividad de las personas que sigues. Como puedes ver en la captura de pantalla, ¡estoy siguiendo a unas cuantas personas que han estado ocupadas!

ScratchScratchScratch

Desde ésta pantalla puedes explorar los proyectos de otras personas, ponerte al tanto de lo que han estado haciendo tus amigos, y accesar a tus propios proyectos.

Proyectos

Cada vez que creas algo en Scratch, estarás trabajando en un project (proyecto). Puedes crear tantos proyectos como quieras, compartirlos y copiarlos. Cada proyecto es independiente y no puede ser vinculado a otros proyectos.

Puedes accesar a tus proyectos de dos maneras desde la pantalla de inicio: dando click en el directorio de la parte superior derecha de la barra de administración con el ícono 'S' o dando click en tu nombre de usuario en la parte suplerior derecha y luego dando click en My Stuff en el menú desplegable que aparece.

Ésto te llevará a la pantalla de My Stuff:

ScratchScratchScratch

Ésta pantalla muestra todos los proyectos que has creado así como los studios de los que eres miembro. Puedes usar studios para compartir tu trabajo con un grupo de amigos u otros usuarios de Scratch-yo uso un studio para compartir trabajo entre miembros del Club del Código que dirijo.

Para crear un nuevo proyecto, simplemente das click en el botón +New Project arriba de tus proyectos. Ésto te lleva a la pantalla de proyecto:

ScratchScratchScratch

Si estás en la página de inicio, puedes crear un nuevo proyecto sin ir a la pantalla My Stuff. Da click en el elemento Create en el menú de administración y éste abrirá un nuevo proyecto para tí.

Cada nuevo proyecto se ve así, a menos que estés trabajando con una copia de un proyecto existente que estás remezclando.

La ventana de proyecto incluye varias áreas clave:

  • El stage (escenario), con un sprite de gato en el lugar en que puedes trabajar o borrar.
  • Debajo del stage, los backdrops (fondos) y los sprites (objetos) que estás usando en tu proyecto.
  • A la izquierda del stage, la sección de scripts. Ésta contiene bloques de código (llamados scripts) que puedes usar en tu proyecto. Esta sección tiene otras dos pestañas: Costumes (disfraces) y Sounds (sonidos). Explicaré como trabajan estos en la próxima sección de éste tutorial.
  • El canvas (lienzo), que es donde colocas tus scripts y creas o editas disfraces y sonidos. Puedes colocar múltiples scripts en el lienzo.

Una vez que has trabajado en tu proyecto, necesitarás guardarlo. Dale un nombre que puedas recordar escribiendo uno en el campo arriba del stage (¡he perdido la pista de cuantas veces le he dicho a los estudiantes que sus proyectos necesitan un mejor nombre que Sin Título!

A la izquierda del ícono del directorio My Stuff en la barra de administración habrá algún texto que se leerá Saved (Guardado) o Save now (Guardar ahora). Si se lee Saved, entonces tu proyecto ha sido guardado asi que no necesitas hacer nada. Si se lee, Save now, da click en el texto y Scratch guardará las modificaciones por tí.

Recursos: Fondos, Sprites , Disfraces y Sonidos

Cada proyecto que creas necesitará algunos recursos. Hay cuatro tipos de recursos: backdrops (fondos), sprites (objetos), costumes (disfraces) y sounds (sonidos). Disfraces y sonidos son asignados a sprites, asi que inicias creando el sprite, y luego puedes darle un número de disfraces y sonidos. Utiliza scripts para cambiar el disfraz del sprite cuando algo ocurre, o para activar un sonido cuando algo pasa.

Aquí hay un proyecto de ejemplo llamado Rock Band, que yo creé para mi Club del Código. Incluye varios sprites, cada uno tiene disfraces y sonidos. Da click en la bandera verde para empezar el proyecto  y luego da click en la cantante y los instrumentos para hacer que cambien sus disfraces y sonidos.

Puedes hacer una copia de él tu mismo en Scratch y trabajar en él si gustas. Ésto se llama remezclando y significa que puedes tomar proyectos existentes y agregar tu propia modificación a ellos. Para hacer ésto, ve a la página de proyecto y da click en el botón See inside (Ver adentro). Ésto te llevará a la pantalla de proyecto con la que estarás familiarizado de la sección anterior de éste tutorial:

See InsideSee InsideSee Inside

Si has ingresado a Scratch, verás un botón de Remix a la izquierda del botón de See project page (Ver página de proyecto) en la parte superior derecha de la pantalla. No es visible en la captura de pantalla de arriba que el proyecto es mío asi que no puedo remezclarlo. Ésto creará un nuevo proyecto en tu cuenta que puedes ver y editar.

La captura de pantalla muestra que éste proyecto tiene dos fondos: puedes ver el activo debajo del stage principal, a la izquierda. Puedes usar scripts para cambiar los fondos mientras avanza tu proyecto o tu usuario se mueve a través de los niveles de un juego, por ejemplo.

El proyecto también tiene cuatro sprites, que puedes ver debajo del stage. También tiene una imagen de fondo. Puedes crear sprites y fondos tú mismo al subir imágenes, o puedes importarlos de la librería proporcionada con Scratch, que es una manera mucho más sencilla de iniciar. Aprenderás como hacer ésto después en ésta serie de tutoriales.

Cada uno de los sprites en mi proyecto tiene dos vestuarios: en la captura de pantalla de abajo puedes ver los disfraces para el sprite Drum1:

SpritesSpritesSprites

Importé estos dos disfraces de la librería de Scratch y agregué un script que cambia el vestuario cuando el usuario da click en el bombo.

Si quieres crear tus propios sprites, hazlo creando disfraces aquí, utilizando las herramientas de dibujo proporcionadas o imortando un archivo png.

Observemos la sección de Sounds (Sonidos). En la captura de pantalla de abajo puedes ver que el sprite Singer1 tiene dos sonidos asociados a él:

SoundsSoundsSounds

De nuevo, he usado un script en mi proyecto para ejecutar éstos sonidos cuando el usuario da click en el sprite de la cantante. Puedes grabar tus propios sonidos desde Scratch si quieres, o importarlos desde la librería proporcionada.

Scripts

Scripts son lo que hacen tus recursos en Scratch. Consisten en bloques de código que arrastras hacia el lienzo, y se dividen en 10 categorías:

  • Motion (Movimiento): scripts que colocan tus sprites y los hacen mover.
  • Looks (Apariencia): scripts que cambian la forma en que los sprites se aprecian, incluyendo cambiar su vestuario y ocultarlos.
  • Sound (Sonido): scripts para reproducir sonidos y cambiar el volumen.
  • Pen (Lápiz): scripts que permiten al usuario escribir o dibujar en el proyecto.
  • Data (Variables): scripts que te permiten definir y trabajar con variables, por ejemplo mantener la puntuación o el tiempo en un juego.
  • Events (Eventos): estos hacen que las cosas ocurran, e incluyen la pulsación de la bandera de inicio, el usuario da click en el sprite o una transmisión que puedes crear y hacer que tus sprites reaccionen a ella.
  • Control: éstos incluyen bucles, declaraciones condicionales y pausas.
  • Sensing (Sensores): éstos scripts pueden darse cuenta cuando cosas ocurren como si el ratón es usado o sprites se tocan. También incluyen interacciones como formular una pregunta al usuario.
  • Operators (Operadores): usa éstos para comparar valores, quizá basados en la respuesta del usuario a una pregunta o en una variable que has definido. Por ejemplo, podrías contar el número de veces que el usuario da click en la cosa equivocada y usa un operador para revisar cuando éste llega a un número dado para que puedas desplegar un mensaje.
  • More Blocks (Más Bloques): aquí es donde agregas tus propios bloques personalizados.

Scripts te dan una gran cantidad de variedad y flexibilidad y pueden ser combinados de formas poderosas para crear proyectos avanzados. Mientras trabajamos en ésta serie de tutoriales, te mostraré como utilizar diferentes tipos de bloques para crear animaciones, interacciones y juegos.

Cada script que creas se relacionará a un sprite o al fondo, lo que significa que es independiente de tus sprites. Por ejemplo, en mi proyecto Rock Band, el sprite Drum1 tiene scripts que controlan lo que ocurre cuando el sprite es clickeado:

ScriptsScriptsScripts

Los otros sprites tienen scripts similares, y el fondo tiene también sus propios scripts:

ScriptsScriptsScripts

Éstos relacionan a ajustes de volumen, que son independientes de los sprites individuales.

Como puedes ver de éstos ejemplos, cada sprite puede tener múltiples scripts aplicados a él. De hecho, cuando comienzas a trabajar con proyectos más avanzados, seguir la pista de todos éstos scripts y lo que hacen puede ser muy confuso, especialmente si necesitas depurar tu proyecto. Aquí está el lienzo para otro de mis proyectos, Flappy Parrot, que tiene más (y más largos) scripts:

Flappy ParrotFlappy ParrotFlappy Parrot

Para no perderte entre tantas cosas, puedes añadir comentarios a tus scripts. Para hacer ésto, da click derecho en el script, y en el menú que aparece, da click en add comment (agregar comentario), y escribe tu comentario. Debajo puedes ver que he agregado un comentario a uno de mis scripts:

Flappy ParrotFlappy ParrotFlappy Parrot

Puedes hacer comentarios tan detallados como quieras, y te ayudarán si regresas a tu proyecto después de algún tiempo y no puedes recordar lo que hace cada cosa.

Obteniendo Ayuda

Una de las grandes cosas sobre Scratch es que hay un vasto contenido para ayudarte a entender la plataforma e iniciarte. Aquí están algunos de los recursos disponibles:

  • Ayuda específica contextual: click derecho en cualquier bloque o recurso y da click en ayudar en el menú de acceso rápido para ver información sobre lo que hace ese bloque o recurso.
  • Consejos: da click en el ícono del signo de interrogación en la extrema derecha de la pantalla proyecto (a la derecha del lienzo) para ver consejos.
  • Tutoriales: da click en el signo de interrogación tips (consejos) para accesar a los tutoriales para ayudarte a iniciar. Puedes crear un nuevo proyecto y ver éstos de tu pantalla de proyecto para que puedas seguir el tutorial mientras trabajas.
  • How To (Como hacer): otra opción en la sección de consejos es How To, que te da información sobre como crear tipos específicos de proyecto.
  • Pantallas de Ayuda: da click en Help (Ayuda) en la barra de administración para accesar a una variedad de pantallas de ayuda, incluyendo proyectos de inicio, tarjetas Scratch, videotutoriales y guías para utilizar Scratch.
  • ScratchEd: una comunidad online para educadores que usan Scratch con estudiantes.
  • El Scratch Wiki incluye información exhaustiva sobre los componentes de Scratch.

Resumen

Scratch es una fantástica y gratuita herramienta que ayuda a niños (¡y adultos también!) a aprender como codificar sin tener que escribir código. Significa que pueden aprender como el código es estructurado y lo que hace sin la frustración de tener que aprender sintaxis y los ayuda a iniciarse rápidamente.

También es muy divertido de usar y tiene una enorme comunidad de usuarios cuyos proyectos puedes ver y copiar, lo cual te ayuda a aprender de una forma práctica.

En éste tutorial has aprendido sobre cómo funciona Scratch y los principales componentes de un proyecto Scratch. Mientras trabajas en ésta serie aprenderás como usar todos estos componentes para crear tus propios proyectos. En la próxima parte comenzaremos a crear tu escenario y sprites.

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!