Tutorial Squeak Cyberbaby
Tutorial Squeak CyberBaby
[editar]Algunas cosas antes de empezar
[editar]1. Este proyecto, busca realizar un juego basado en Squeak un version de Small Talk. La idea es realizar un juego donde el usuario se encargue de cuidar un bebe humano, el cual pida que sean suplidas sus necesidades básicas. Para comenzar desarrollaremos la cara del bebe y haremos una introducción al manejo de Etoys en Squeak.
1.1. Luego de tener instalado squeak en Windows o Linux (el link contiene los pasos para instalarlos bajo linux), abrimos el programa y comenzamos a trabajar.
1.2. La pantalla inicial que nos muestra Squeak, es lo que llamaremos de aquí en adelante mundo (es la traducion de World, palabra que utiliza Squeak para definir este espacio: la pantalla inicial).
1.3. Dentro de Squeak en los bordes de la pantalla encontraremos pestañas que desplegaran herramientas y opciones de gran ayuda a la hora de trabajar: Squeak: una pestaña naranja oscuro que aparece en el centro del borde izquierdo; Navigator: una pestaña naranja, claro que aparece en la eszquina inferior izquierda de la pantalla; Widgets y Supplies: dos pestañas azul y roja respectivamente, que aparecen en la esquina inferior derecha; y por último Tools: una pestaña naranja más clara en el borde derecho de la pantalla.
1.4. Para entender un poco mas el entorno gráfico de Squeak, es recomendable realizar el tutorial haciendo del squeak un lugar más personal, este tutorial realizado por Diego Gomez Deck, es una buena introducción al entorno de Squeak.
Al proyecto:
Cara y Ojos activos
[editar]En la pestaña navigator abrimos, damos click en nuevo (New), esto nos abrirá un nuevo proyecto sobre el cual comenzaremos a trabajar, para lo cual hacemos un click sobre la ventana del proyecto que se abre.
2.Comenzaremos por crear la cara y hacer que los ojos sigan al cursor:
2.1. Lo primero es crear la cara, se puede hacer con la opcion del pincel en la pestaña navigator, luego de crear la cara se debe seleccionar la propiedad Acept Drops, en el menú de la cara, de la siguiente forma:
2.3. Luego de tener la cara lista lo primero que hize fue dibujar los ojos, esto lo puedo hacer de dos formas, la primera es usando la opcion Make a Painting en la pestaña Navigator y la segunda consiste en arrastrar hasta el proyecto la opción curve desde la pestaña de Supplies, eso es decision de cada uno, luego de tener los ojos listos se almacenan en un contenedor, lo cual se debe ver algo así:
2.4. Lo siguiente es crear un punto de referencia del raton, para la cual con la herramienta Make a Painting dibujamos un punto rojo en el mundo (en este paso decidi cambiar los ojos por dos puntos negros, dibujados también con Make Paiting, a este punto rojo lo llamamos PosRaton, la idea es crear un punto que tenga la posición del ratón (mouse) y restarle la posición del ojo en los ejes X y Y.
2.5. Ahora debemos crear un guión o Script de PosRaton y poder continuar con el paso anterior, para esto desde los alos de PosRaton abrimos el visualizador y arrastramos al mundo desde la flecha, la opción PosRaton X y dentro del script que aparece arrastramos la línea Pos raton Y. Debe quedar algo así:(en las imágenes se encuentra con explicación gráfica todo)
2.6. En cualquier parte del mundo(world) damos clic al tercer botón del mouse para abrir los alos, desde los alos abrimos el visualizador del mundo y nos ubicamos en la categoria "campo de juego", luego arrastramos las líneas "World's X del raton" y "Worlds's Y del raton" sobre los números que aparecen al final de las líneas "PosRaton X" y "PosRaton Y":
2.7.Abrimos el visualizador del OjoIzq, y arrastramos las líneas "ojoIzq X" y "OjoIzq Y", sobre los "1" aquí aparecen al final de las líneas anteriores en el Script, luego cambiamos los signo "+" por signos "-" dando click sobre los signos.
Hasta aquí hemos ubicado la pocisión del mouse con respecto al OjoIzq en el mundo(world), para esto le asignamos a un punto cualquiera la posición del mouse y a esta le restamos la posición del ojo.
Ahora debemos elegir qué imagen de ojo usar, de acuerdo a la posición del mouse con respecto al ojo.
2.8. Debemos crear un nuevo script vacío del Contenedor_ojoIzq, para lo cual abrimos los halos del mundo y desde la categoria guiones, arrastramos la línea script a cualquier parte vacía del mundo:
2.9. Es necesario crear una nueva variable que guarde el valor del angulo con respecto al ojo, para esto abrimos el visualizador de PosRaton y damos click en "Add new variable" a la cual llamaremos Octant y luego la arrastramos al guión vacío del contenedor_OjoIzq:
2.10. Al arrastrar al Script la línea de la nueva variable "octant" debemos debemos asignarle un valor por eso desde el visualizador de PosRaton le arrastramos a esta línea nueva, la línea thetha, que tiene el valor del ángulo y luego lo dividimos por 45 (pues 360/45 = 8 que es la cantidad de ojitos que tenemos en el contenedor), al final debe quedar algo así:
2.11. Ahora la idea es continuar con las herramientas hasta aquí adquiridas para lograr en el Script del Contenedor_OjoIzq, algo así:
Listo ya hicimos que un ojo siguiera al cursor del mouse, ahora solo falta el otro ojo, para lo cual el porcedimiento es el mismo de los pasos 2.4 a 2.11 pero cambiando el PosRaton por PosRaton2, el Contenedor_OjoIzq por el Contenedor_OjoDer y el OjoIzq por el OjoDer, sobra decir que todo es en dos nuevos Scripts.
Enviar mensajes al bebe
[editar]3. El siguiente paso en el proyecto es lograr enviar mensajes al Bebe y que el sea capaz de responderlos.
3.1. Lo primero es elaborar un nuevo contenedor con las bocas que queremos tenga nuestro bebe, para esto usamos la opción make painter, y luego pintamos un pequeño punto en el lugar de la cara que queremos se sitúe la boca y lo llamamos boca.
3.2. Abrimos un visualizador del punto boca y buscamos lo opción gráfico (graphic, la arrastramos hasta el mundo (world) en cualquier parte vacía:
3.3. Abrimos el visualizador de la primera boca, y buscamos la opción gráfico, y la arrastramos sobre la línea script que creamos en el paso anterior, pero la arrastramos no desde la flecha.
3.4. Ahora damos un click sobre la palabra Boca en el Script para evocar un botón que me de la posibilidad de ejecutarlo:
3.5. Listo, ya tenemos el botón de la primera boca, la idea es crear tantos botones como bocas tengamos en el contenedor, por último debemos hacer click sobre los botones para probarlos.
En este punto aprendimos como enviarle mensajes a los objetos, en este caso en particular le enviamos mensajes al punto en la cara.
4.Ahora la idea es poner a interactuar al usuario de acuerdo a las reacciones del bebé, para esto vamos a programar los estados de ánimo del bebé para que sean aleatorios, así el usuario responde a la acción del bebé enviándole mensajes desde objetos en el mundo.
4.1.Lo primero es hacer que los estados de ánimo del bebé sean aleatorios, para esto dentro de un guiòn parecido al de las caras, hacemos que estas cambien de forma aleatoria.
Nota:
Tuve problemas con las imágenes proximamente las subiré de nuevo.
Yo acepto tener multi-license en mis aportes, a menos que lo declare de otra manera, bajo GFDL, Creative Commons Attribution Share-Alike license draft version 1.0 and version 2.0 version 2.0 y Creative Commons Attribution Non-Commercial Share-Alike license version 2.0. Si usted desea usar mis contribuciones protegidas bajo los terminos de Creative Commons, por favor revise CC dual-license y Multi-licensing guides.