ncoge

mi sitio de apuntes

Práctica 1 de Stencyl

Crash Course: Hagamos un juego!

Introducción

Vamos a hacer un juego usando material prehecho y descargable desde la página web de stencyl.

  • Part 1: Crear un juego nuevo

  • Part 2: Obtener los recursos

  • Part 3: Modificar los actores

  • Part 4: Crear un escenario

  • Part 5: Probar el juego

Descarga e instala Stencyl.

Aviso

Algunas pantallas puede que tengan aspecto de la versión 2.0 de stencyl y no de la última

Descargar los Materiales

Este Crash Course hace uso del Crash Course Kit, puedes descargarlo de aquí.

1) Descomprime el fichero en tu-carpeta-de-usuario/stencylworks/games/

2) Puedes ver la carpeta de juegos pulsando el siguiente botón.

(1 of 5): Crear a juego nuevo

Welcome Center

Al iniciar el programa es la primera pantalla que aparecerá.

Desde aquí pues crear o abrir un juego nuevo, también puedes navegar por los juegos creados por otras personas.

Creando un juego nuevo

1) Haz click sobre Click here to create new Game.

2) Si ya descomprimiste el paquete Crash Course, podrás hacer Click en Crash Course Kit, después haz click sobre next.

3) En la siguiente ventana elige el nombre de tu juego y el tamaño. Para el tamaño elige 640 alto y 480 ancho.

4) Ahora serás redirigido a el Dashboard, es el área donde podrás manejar tus recursos para el juego (gráficos, sonidos, lógica del juego, etc) y sus settings.

(2 of 5): Fuentes del juego

En el Dashboard, podremos crear o importar nuevas fuentes. En el Crash Course, vienen incluidas fuentes que usaremos, vamos a repasarlas.

Actores

Cualquier cosa que se mueva o se pueda interactuar con ella.

1) Haz click en Actor Types del Dashboard.

Nota: Verás un 2 a su derecha. Indica el número total de actores en tu juego actualmente

2) En Actor Types listing verás 2 tipos de actores. Uno llamado Mambo, y el otro Pronger. Mambo será el actor del jugador. Pronger será el enemigo.

3) Si hacemos doble-click en el icono Mambo, Stencyl abrirá el Actor Editor.

Actor Editor nos permitirá definir las características del actor, apariencia, como se comporta físicamente o sus “behaviours” (conjuntos de acciones ante un evento)

El Actor secundario

1) Volvemos al Dashboard haciendo click sobre esta pestaña.

2) Abre Pronger, el actor que será tu enemigo.


Tilesets

Tileset: Es una colección de piezas rectangulares que será usadas para generar el escenario del juego.

1) Regresemos al Dashboard, y haz click sobre Tilesets.

2) Abre con doble-click Grass Land Tileset.

3) Se abre el Tileset Editor.

Sonidos

Click sobre el botón Sounds en el Dashboard. Verás dos sonidos Stomp y Jump.

Behaviors (comportamientos)

Por último podemos echar un vistazo a Behaviors. Estos son los que podremos usar en nuestro juego.

Nota: Behaviors controlan toda la lógica del juego y la interacción con el jugador.

Vamos a ver rápidamente en que consisten estos Behaviors. Double-click sobre Walking para abrirlo en Behavior Editor.

Aquí vemos como se pueden programar acciones arrastrando piezas como si fuera un puzzle.

Nota: ¿Prefieres teclear código? También existe un Code Editor para insertar código dentro del Behavior Editor.

Guardar

Cuando se trabaja con cualquier cosa en el mundo de la informática siempre se debe guardar el trabajo continuamente para no perderlo. Pulsa Ctrl+S (o Command+S en Mac).

(3 of 5): Editando los Actores

Sin Behaviors los actores importados no pueden hacer mucho aún.

Vamos a darles vida usando los Behaviors incluidos en el kit descargado de Crash Course.

Editando a Mambo

Abre desde el Dashboard con double-click el actor Mambo desde el grupo Actor Types.

1) Aparecerá directamente la opción Appearance como seleccionada esta nos dice la apariencia del actor. Click sobre Properties.

2) Comprueba que Mambo es un miembro del grupo players. Esto nos asegurará que Stencyl manejará las colisiones como deseamos.

Definición: Los grupos nos permiten agrupar actores en diferentes asociaciones para poder darles características comunes. .

3) Mira las opciones Collision and Physics. Contienen características sobre su comportamiento, pero por ahora no los tocaremos.

4) Vamos a Behaviors, es donde realmente vamos a cambiar a los actores:

5)Click sobre Add Behavior button en la esquina inferior izquierda. Selecciona el Walking Behavior, finalmente haz click sobre el botón Choose.

6) Volvemos al Actor Editor. Comprueba que hemos añadido Walking Behavior en la lista de la izquierda, también aparecen sus atributos en la ventana principal.

Definición: Los atributos son valores editables que modifican los Behaviors.

7) Vamos a cambiar estos atributos.

Primero, cambiamos la tecla de movimiento a la derecha e izquierda.

8) Ahora elegimos la animación que deseamos pulsando el botón Choose an Animationy eligiendo la secuencia que queramos.

¡Hemos acabado con nuestra primera Behavior!

Para añadir mas Behaviors, click sobre el botón Add Behavior en la esquina inferior izquierda.

  • Jumping: Elige la tecla saltar y las animaciones a derecha e izquierda. Finalmente, añade el sonido de salto para que stencyl lo reproduzca cuando Mambo salte.

     

  • Stomp on Enemies: Selecciona el stompable group a Enemies y la tecla de saltar.

  • Die in Pit and Reload: Nada a configurar.

Editando Pronger

Pronger será mas simple que Mambo. Ábrelo desde el Dashboard).

1) Click sobre el botón Properties, y encuentra las opciones de grupo.

2) Selecciona Enemies.

3) Vamos a añadir solo una Behavior. Click sobre el botón Behaviors y añade Stompable Behavior (localízalo sobre la categoría Collisions). Edítalo con los atributos que siguen en la imagen:

Note: Esta Behavior hace que Pronger sea pisable” como Goomba en Super Mario Bros. Pronger morirá cuando le golpeen desde arriba y reproducirá un sonido cuando ocurra. Si haces click en el botón Edit Behavior, podrás ver el código asociado a este Behavior, incluso cambiarlo.

(4 of 5): Hagamos el escenario

Escenarios son los niveles del juego decorados con piezas y los actores que hemos creado.


Creando una nueva escena

1) Desde el Dashboard, click sobre la categoría Scenes, luego sobre el rectángulo click to create one.

2) Elige un nombre identificativo.

3) Vamos a crear un fondo (background) parecido al cielo seleccionando en Color “Vertical Gradient” Selecciona 2 colores, cambia los blancos por azules.

4) Al acabar se parecerá a la imagen, pulsa sobre Create

5) El Scene Designer se abrirá. El interface te puede recordar a un programa de dibujo sencillo e intuitivo.

Colocando las piezas

Vamos a añadir algunos tiles (piezas) a la escena. Ellas formarán el suelo donde estarán colocados los actores.

1) Primero, elige el lápiz de la barra de herramientas a mano izquierda del editor.

2) En la sección Palette haz Click en la esquina superior izquierda, sobre el cuadrado de “hierba”.

3)Coloca el cursor en la parte inferior izquierda del escenario y haz click para añadir la pieza.

4) Después elige la pieza del medio de la paleta de tiles.

5) En el escenario a continuación de la pieza colocada en el paso anterior, haz click y sin soltar arrastra el ratón hacia la derecha hasta completar toda la fila inferior a excepción de la esquina de la derecha que después cerraremos.

6) Ahora hazlo con la última pieza, la de la derecha del todo.

7)Colócala donde toca en el escenario.

Truco: Puedes seleccionar mas de una pieza de la paleta sin soltar el ratón para colocarlas todas juntas en el escenario.

 


Colocando a los Actores

Añadiremos a Mambo y Pronger a la escena.

1)Click sobre la pestaña Actors, selecciona a Mambo.

Si mueves el ratón por el escenario verás que el actor sigue al puntero, colócalo encima del suelo generado con anterioridad y haz click con el botón izquierdo.

Truco: dejando la tecla Shift apretada, puedes añadir un actor a la escena usando su rejilla asociada.

2) Ahora Pronger coloca 3 de ellos en la escena. Debe quedar como sigue:


Añadiendo Gravedad

Click sobre la opción Physics que está entre Events y Background en la parte de arriba de la pantalla, sobre la opción Vertical Gravity, escribe “85” para simular la gravedad del mundo real.

 

(5 of 5): ¡Probemos el juego!

Click sobre Test Game button en la parte de arriba de tu juego para probarlo.

Podrás mover al actor con los cursores y saltar con la barra espaciadora.

Intenta empujar y saltar sobre los actores Pronger. Si te sales de la escena comprobarás que el juego se reinicia.

Nota: Puedes probar el juego directamente en tu navegador web si pulsas Ctrl+Enter (o Command-Enter on Mac).

¡Enhorabuena!

Has hecho tu primer juego en stencyl y solo has probado sus posibilidades por encima.

Errores conocidos

Cuando salgo de la escena el juego no se recarga.
Hacia el final de la parte 3 en la sección donde se edita a Mambo tienes que añadir el behaviour Die in Pit and Reload a Mambo.

Mambo y Pronger no colisionan.
No olvides poner a Pronger en el grupo de Enemies.

Recibo un error ejecutando el juego en Flash. La pantalla sale en blanco.
Por favor escribe un post en nuestro foro y añade ti juego a el exportándolo. (Usa File > Export Game… para hacer esto)

Mejóramelo

Haz que al chocar con Pronger, si la colisión no es desde abajo, muera.

.

.

.

.

.

. Por si no te aclaras, pero mejor que lo hagas solo si quieres aprender aquí mi  solución:

  • Añade el behaviour Die on collision with actor type 

  • Modifícalo para que solo muera si la colisión es lateral por que sino no podrás matar a Pronger al chafarlo.

2 Comentarios

  1. hola amigo una pregunta como puedo agregarle una musica de fondo a mi juego es que no se, e probado varias formas armando los codigos como por ejemplo que cuando se inicie el nivel la musica se activa pero cuando doy a probar juego me sale un erro que la musica no es compatible

    • ncoge

      7 Noviembre, 2015 at 11:15 am

      da la sensación de que tienes que convertir el audio a otro formato, puede ser el bitrate o que la codificación no le gusta, con audacity puedes convertir el audio, prueba distintos formatos. Suerte 🙂

Deja un comentario

Tu dirección de correo electrónico no será publicada.

*

© 2017 ncoge

Tema por Anders NorenArriba ↑