Crear juegos de rompecabezas en Puzzle Script

Puzzle Script es un motor de juego minimalista para crear rompecabezas para HTML5, tiene fuentes abiertas. Se pueden encontrar ejemplos de juegos listos aquí .

Parte 1. Creamos el primer juego en Puzzle Script.

Puzzle Script es un programa gratuito en línea que se utiliza para crear juegos de rompecabezas. Ella es mejor conocida por crear rompecabezas como mi The Nodus . En esta parte crearemos un juego, habiendo estudiado las funciones básicas de Puzzle Script, y en la próxima comenzaremos a programar.


Ve al sitio web del motor. Haga clic en Crear un juego para abrir el editor Puzzle Script .

Descargando ejemplos

Para comenzar, veamos algunos ejemplos. En la parte superior de la pantalla, abra la lista "Cargar ejemplo" y seleccione el primer ejemplo llamado "Básico". Ahora haga clic en "Ejecutar".



Aparecerá la pantalla del juego. Haga clic dentro de su ventana y presione Entrar en el teclado.


Intenta jugar el juego. Su objetivo es empujar los cuadros naranjas hacia los cuadrados de destino negros. Cuando hay un cuadro en cada objetivo, se pasará el nivel. Puede presionar Z para cancelar el movimiento, o R para reiniciar el nivel.

Haz el primer juego

Ahora crearemos varios niveles. Crearé uno junto con usted, y aconsejo a otros que propongan el mío. Haga clic en "Level Editor" en el menú superior.


Si no ve la pantalla del editor de niveles, haga clic en "Ejecutar" e inicie el juego. Una vez en el nivel, haga clic nuevamente en el botón "Editor de niveles". Esto te permitirá editar el nivel en el que eras justo.

Crea un nuevo nivel

En la parte superior están los objetos del juego. Al hacer clic izquierdo, se dibuja el objeto seleccionado. Haga clic derecho dibuja un objeto de "fondo". Hacer clic izquierdo en el borde del mapa aumenta su tamaño, hacer clic derecho lo reduce.


Para pasar un nivel, debe poner un cuadro en cada uno de los objetivos, por lo que en cada nivel debe haber un mínimo:

• 1 caja
• 1 gol
• 1 jugador

Haga clic derecho para convertir todo en hierba. Luego haga clic izquierdo en el borde del nivel para agrandarlo y finalmente dibuje un nivel que se parezca al que se muestra a continuación.

Agréguelo a la lista de niveles.

Una vez que haya terminado de crear el nivel, lo agregaremos a la lista de niveles. En el editor de niveles, haz clic en la letra blanca S junto a la lista de objetos del juego para guardar el nivel creado.


Un mensaje sobre una compilación exitosa y una cuadrícula de personajes divertidos se debe mostrar debajo del editor de niveles, como se muestra a continuación.


Estos divertidos personajes indican el nivel que acabamos de crear. Cada personaje representa un objeto separado. En el lado izquierdo de la pantalla, baja y encuentra LEYENDA. La leyenda proporciona una explicación de cada uno de los personajes:

. = Fondo
# = Muro
P = jugador
* = Caja
@ = Caja y objetivo
O = objetivo

Todo lo que está en el lado izquierdo de la pantalla es el código del juego, dividido en diferentes partes, como OBJETOS o LEYENDA. Baja a NIVELES. Aquí vemos los niveles que se usan en el ejemplo.


Para agregar un nuevo nivel, cree una nueva línea vacía en la parte inferior de la sección de nivel. Luego copie los caracteres generados para nuestro nivel y péguelos allí. Todos los niveles añadidos.


Lo probaremos Después de crear un nuevo nivel, debes presionar el botón "Ejecutar" en la parte superior de la pantalla nuevamente para reiniciar el juego con un nuevo nivel. A veces esto no funciona, y luego debe hacer clic en el botón "Reconstruir" y luego hacer clic en "Ejecutar" nuevamente.

Guardar y cargar un juego

Intenta crear algunos niveles más nuevos. Cuando esté listo para guardar el juego, vaya al principio del código e ingrese su propio nombre, el nombre del autor y la página de inicio, y luego haga clic en el botón "Guardar".



Un número limitado de guardados se almacena en el menú "Cargar" en su computadora. Sin embargo, hay un botón "Compartir" en la parte superior de la pantalla. Cuando hace clic en él, se genera un mensaje con dos enlaces web.


Uno de los enlaces es el código fuente de su proyecto. El segundo es un enlace a una versión jugable del juego que puedes compartir con amigos. Recomiendo crear periódicamente un nuevo enlace al código fuente y guardarlo en un documento de texto para que tenga una versión almacenada permanentemente del proyecto.

Exportación de juegos

También puede exportar el juego como un archivo html5, que luego puede cargar en portales de juegos, como itch.io , Kongregate o Newgrounds . Simplemente haga clic en "Exportar" y cargue el archivo html descargado en el portal del juego.

Nuestro proyecto de muestra se puede encontrar aquí .

Parte 2. Comenzando en Puzzle Script

En esta parte, aprenderemos cómo comenzar a programar en Puzzle Script .

Código

Abrir un proyecto de muestra . El código del programa está en el lado izquierdo de la pantalla, está dividido en partes: Objetos, Leyenda, Sonidos, etc. En la sección Reglas, se establecen reglas para la interacción de objetos. Entra en eso. Solo debe haber una línea de código:

[ > Player | Crate ] -> [ > Player | > Crate ]

Esta línea significa que si el jugador está cerca de la caja y se mueve en su dirección, el juego mueve al jugador y empuja la caja. Para explicar cómo funciona esto, debe comprender que el código Puzzle Script sigue esta estructura:

[ ] -> [ ]

Esto significa lo siguiente:

[ ] -> [ ]

Puzzle Script verifica las condiciones a la izquierda de la flecha, por ejemplo, si el objeto del jugador está al lado del cuadro de objeto. Si la condición es verdadera, entonces hacemos algo, por ejemplo, empujar la caja.

Ejemplos de condiciones

Aquí hay un ejemplo de una condición:

[ object1 | object2 ]

Este evento comprueba si object1 está al lado de object2. Puede verificar si dos objetos están uno al lado del otro colocando una | | ingresada presionando shift + \. Las condiciones siempre están encerradas [ ] .

[ crate | crate ]

El código anterior verifica si dos cuadros están uno al lado del otro.

[ crate | crate | crate ]

Esta condición verifica si hay tres casillas cerca.

[ crate target ]

Esta condición verifica si el cuadro está encima del objetivo porque la | | entre dos objetos. Los objetos pueden estar uno encima del otro si están ubicados en diferentes capas de colisiones, que cubriremos en las siguientes partes del tutorial.

Mantenemos la igualdad

Las reglas deben ser equilibradas. Tanto la verificación de la condición como el evento posterior deben describirse de la misma manera. Mostraré lo que eso significa.

[ player | crate ] -> [ player | ]

Esta línea de código destruye la caja si el jugador está al lado. No puedes escribir:

[ player | crate ] -> [ player ]

porque la condición de la izquierda verifica la presencia de objetos vecinos en dos espacios de cuadrícula separados, pero el evento describe solo un espacio de cuadrícula que ocupa el jugador. Puzzle Script necesita saber qué hacer con los espacios que marca. El código correcto para destruir la caja debe informar lo siguiente:

[ | ] -> [ | ]

[ player | crate ] -> [ player | ]

Es decir, incluso los espacios vacíos en el código importan. Sin embargo, la siguiente entrada es válida:

[ player target ] -> [ player ]

Como en la condición que estamos hablando solo de un espacio de cuadrícula, el evento describe el mismo espacio de cuadrícula.

Cómo mover cajas

Volvamos a la línea de código original.

[ > Player | Crate ] -> [ > Player | > Crate ]

En otras palabras:

[ | ] -> [ | ]

Flecha> enfatiza el movimiento.

A veces necesitamos escribir comentarios para recordar lo que hace el código. Puzzle Script ignora los comentarios, son solo para el usuario. Para escribir un comentario, debe poner el texto entre paréntesis. Escribimos un comentario sobre nuestra regla que describe lo que hace:

( )
[ > Player | Crate ] -> [ > Player | > Crate ]

Ahora, debajo del código de inserción del cuadro, escriba lo siguiente:

( )
[ < Player | Crate ] -> [ < Player | < Crate ]

La flecha invertida significa que si el jugador se aleja de la caja, tira de la caja. Haga clic en "Ejecutar" para probar esta acción. Debe poder empujar y arrastrar cajas. En la programación, incluso con un error tipográfico en una letra, es posible que la computadora no entienda el código, así que elimine todos los errores. Al realizar cambios en el código, haga clic en "Ejecutar" nuevamente para descargar los cambios. Si el juego no se comporta como debería, intente hacer clic en "Reconstruir" para borrar la memoria del programa y luego haga clic en "Ejecutar".

A veces es necesario desactivar una línea de código. Simplemente conviértalo en un comentario para ahorrar para el futuro. Comentemos el código para empujar cajas, de modo que el jugador solo pueda llevar cajas:

( )
([ > Player | Crate ] -> [ > Player | > Crate ])
( )
[ < Player | Crate ] -> [ < Player | < Crate ]

Si esto funcionó, comente el código para extraer las cajas e intente lo siguiente:

[ < Player | Crate ] -> [ < Player | > Crate ]

Si el jugador se aleja de la caja, el jugador y la caja se moverán en direcciones opuestas. Las flechas determinan en qué dirección se mueve o se moverá el objeto. Ahora comente esto e intente lo siguiente:

[ > Player | Crate ] -> [ Player | > Crate ]

La caja se mueve, pero el jugador permanece en su lugar. Experimente con ^ y v (letra v) para ver cómo se moverán los objetos.

Errores

Escribamos intencionalmente la regla incorrecta y veamos qué sucede. Ingrese la siguiente línea:

[ < Player | Crate ] -> [ < Player ]

Intenta ejecutar el programa. Debería ver un mensaje como este:

línea 81: en una regla, cada patrón que coincida a la izquierda debe tener un patrón correspondiente a la derecha de igual longitud (número de celdas).

Por lo general, Puzzle Script describe muy bien el error. Sin embargo, a veces Puzzle Script se confunde por sí mismo. En tales casos, debe revisar el código usted mismo y descubrir dónde está el error.

Algunos experimentos más

Intenta experimentar y escribe las reglas tú mismo. Aquí hay algunos ejemplos.

[ > Player | … | Crate ] -> [ > Player | … | > Crate ]

En el ejemplo anterior, el jugador empujará la caja si está en cualquier lugar en la misma línea del nivel, y el jugador se moverá a la caja.

[ > Player | Crate ] -> [ Crate | Player ]

Este código intercambia el reproductor y la caja.

[ > Player | Crate ] -> [ Player | Target ]

En este código, si el jugador está cerca de la caja y se mueve hacia ella, el jugador dejará de moverse, pero la caja se convertirá en un objetivo. Lo mejor de Puzzle Script es la facilidad de crear cosas nuevas y la posibilidad de experimentar.

Parte 3. Creando objetos

Todos los fragmentos gráficos en juegos en Puzzle Script indican objetos. Para crear juegos en Puzzle Script, debes crear tus propios objetos. En esta parte, le diré cómo crearlos y agregarlos a mi código.

Información general

Abrir un proyecto de muestra . El proceso de creación de un objeto consta de los siguientes pasos:

• Créalo en la lista de objetos.
• Agregar un elemento a una leyenda
• Agregar colisiones a una capa

Una vez realizados todos estos pasos, puede comenzar a utilizar el objeto.

Creación de objetos

Varios objetos ya existen. Cada juego debe tener un objeto de fondo. Todos los objetos se crean a partir de una cuadrícula de 5 x 5 píxeles y tienen al menos un color. El objeto de fondo se muestra a continuación.

Background
LIGHTGREEN GREEN
11111
01111
11101
11111
10111

Los números indican píxeles en la imagen. Cada número corresponde a su color. El primer color tiene el número 0, el segundo - 1, y así sucesivamente hasta 9. Puede haber hasta diez colores. En nuestro caso, cada 1 colorea el píxel en verde claro (Verde claro) y 0 en verde (Verde). El resultado se ve así:


Los objetos siempre se crean de la siguiente manera:

• Titulo
• Colores
• Imagen

El nombre siempre está en la línea superior. Los colores siempre están en la segunda línea, y la imagen toma las siguientes 5 líneas, 5 caracteres por línea, que forma una cuadrícula de 5 x 5. O puede hacer lo siguiente:

Background
LIGHTGREEN

Este código creará un objeto llamado "Fondo", que será una cuadrícula de 5 x 5 píxeles en verde claro. Si no describe la cuadrícula de la imagen, obtenemos un bloque de color sólido, que a veces puede ser útil.

Dar nombres a los objetos.

Los objetos se pueden invocar como desee, pero el nombre no puede comenzar con un símbolo y debe ser una sola palabra sin espacios. Dé nombres claros a los objetos, pero no vaya demasiado lejos. PlayerStill es un buen nombre, PlayerThatIsStandingStill es demasiado largo y detallado.

Colores

Debe declarar los colores que desea usar para el objeto y separarlos con un espacio. Puzzle Script tiene colores predefinidos:

• negro
• blanco
• gris
• gris oscuro
• gris claro
• gris
• gris oscuro
• gris claro
• rojo
• rojo oscuro
• rayo
• marrón
• marrón oscuro
• marrón claro
• naranja
• amarillo
• verde
• verde oscuro
• verde claro
• azul
• azul claro
• azul oscuro
• morado
• rosa
• transparente

También puede establecer colores en hexadecimal, lo que nos da una gama mucho más amplia de colores. Puede usar sitios web como este para seleccionar colores hexadecimales. Seleccione el color que desee y luego vuelva a escribir el código de color sobre la imagen. Los códigos de color hexadecimales se escriben en Puzzle Script de la siguiente manera:


#51A2BD #ff0000 #ffffff

El código de color siempre va precedido del carácter #.

Agregar un objeto a la leyenda

Después de crear el objeto, debe agregarlo a la leyenda. La leyenda se ve así:

. = Background
# = Wall
P = Player
* = Crate
@ = Crate and Target
O = Target

Cada símbolo representa un objeto en un nivel. Es decir, cuando vemos esa cuadrícula de caracteres:

#p.*.##
#.**.##
#..#..#
##....#
##...o#
#######

en realidad describe nuestro nivel:


A cada objeto creado se le debe asignar una letra, símbolo o número que designe este objeto en el nivel. Así:

P = player

Agrupar objetos en la leyenda

También podemos crear grupos de objetos en la leyenda. Por ejemplo, si tenemos varias cajas multicolores, entonces podemos hacer esto:

O = OrangeCrate
B = BlueCrate
G = GreenCrate

Eso nos permitirá usar cuadros en el nivel del editor. Pero para crear el código, puede agruparlos en Legend, así:

Crates = OrangeCrate or GreenCrate or BlueCrate

Y todos juntos se verán así:

=======
LEGEND
=======
O = OrangeCrate
B = BlueCrate
G = GreenCrate

Crates = OrangeCrate or GreenCrate or BlueCrate

¿Por qué hacer esto? Porque entonces, en lugar de crear tales reglas:

[ > Player | OrangeCrate ] -> [ > Player | > OrangeCrate ]
[ > Player | BlueCrate] -> [ > Player | > BlueCrate ]
[ > Player | GreenCrate] -> [ > Player | > GreenCrate]

simplemente puedes escribir:

[ > Player | Crates ] -> [ > Player | > Crates ]

Y este código funcionará para todo el grupo de objetos.

Además, en la sección Capas de colisión , puede hacer referencia a la capa en la que se encuentra el grupo, en lugar de ingresar cada objeto individual.

Capas de colisión

Por defecto, la sección de la capa de colisión es la siguiente:

Background
Target
Player, Wall, Crate

Cada línea selecciona objetos en su propia capa. El orden de las capas de objetos determina qué objetos estarán encima de los demás. Los objetos en la línea superior estarán en la capa inferior, la siguiente línea estará en la capa superior, y así sucesivamente. El fondo siempre debe estar en la línea superior para estar en la capa inferior. Los objetos en una capa no pueden estar uno encima del otro. Es decir, esto no puede ser:

[ player wall ] -> [ player wall ]

Puede hacer que los objetos en diferentes capas interactúen entre sí. Por ejemplo, puedes escribir:

[ > Player | Target ] -> [ > Player | > Target ]

Un experimento

Crea algunos objetos nuevos. Crea un tipo de cajas que solo puedas empujar. Cree otro cuadro que solo se pueda arrastrar. Crea un cuadro que desaparezca cuando lo toques. Continuando con los experimentos, recordará mejor cómo se hace todo.

Parte 4. Condiciones de victoria

A todos les encanta ganar. Nosotros, como jugadores, queremos ganar. En esta parte, aprenderemos cómo programar las condiciones para ganar un juego.

Condiciones de victoria

Descargue el proyecto de muestra y vaya a la sección de código de Condiciones de victoria. Deberías ver lo siguiente:

All Target on Crate

El juego se gana si hay un cuadro en cada gol. Si tiene 3 casillas y 2 goles, entonces gana al establecer solo 2 casillas en los objetivos. Si se intercambia:

All crate on target

entonces cada caja tendrá que estar en blanco.

Puede haber una o varias condiciones. En el caso de múltiples condiciones, todas deben cumplirse. Por ejemplo, podemos tener lo siguiente:

All Target on Crate
All Target2 on Crate2

Si el nivel tiene target y target2, entonces crate y crate2, respectivamente. Si en el nivel no hay uno de los objetos necesarios para cumplir una determinada condición de victoria, por ejemplo, no hay objetivo2, entonces esta condición se cumple automáticamente.

Diferentes tipos de condiciones de victoria.

Hay varios tipos diferentes de condiciones de victoria.

No Object

En este caso, la victoria llega cuando no hay uno de esos objetos en el nivel.

Some Object

Ganas cuando hay al menos un objeto del tipo especificado en el nivel.

Some Object1 on Object2

Al menos uno de los objetos de Object1 debe estar en Object2.

No Object1 On Object2

Esta condición es la opuesta a All Target on Crate . En este caso, necesitamos que todos estos objetos estén separados uno del otro, y no uno encima del otro. También puedes combinar diferentes condiciones de victoria entre sí.

Un experimento

Experimentaremos con diferentes condiciones de victoria. Intenta crear un juego en el que la victoria se produzca si todas las casillas no están en el objetivo. O crea un juego en el que necesites destruir todas las cajas de cierto tipo, pero hay otras cajas empujadas en tu camino.

Mi proyecto de ejemplo completo se puede ver aquí .

Parte 5. comando tardío

PuzzleScript tiene un comando muy útil llamado "tarde". El orden de origen de los eventos en el juego es importante, y a veces necesitas un código que se ejecuta más tarde para obtener los resultados deseados. En esta parte hablaré sobre el uso del comando tardío .

¿Por qué lo necesitamos?

Abra un proyecto de ejemplo , luego pegue el siguiente código en el juego y ejecútelo:

[ player | target ] -> [ player | ]

Se puede esperar que tan pronto como el jugador se pare al lado de la meta, la meta será destruida, pero esto no sucede. En cambio, el objetivo desaparece en el curso después de que el jugador se para a su lado. Entonces intente con otro código:

late [ player | target ] -> [ player | ]

Tan pronto como te pares al lado de la meta, desaparecerá. Sucedió porque todo lo designado como tarde ocurre después de que se ejecuta todo el resto del código. A veces esto es necesario.

Orden de eventos

Así se ejecuta el código en Puzzle Script con cada movimiento.

1. Puzzle Script descubre que el jugador quiere moverse
2. Siempre que sea posible, las reglas se leen y ejecutan de arriba a abajo.
3. El jugador se mueve si es posible
4. Aplican reglas tardías

La computadora comienza desde la línea superior de código y lee hacia abajo, línea por línea. comprobando cada condición. Entonces, cuando intentas moverte, Puzzle Script lee todas las reglas y verifica si las condiciones son verdaderas, y si es así, hace algo. Por ejemplo, la primera línea podría ser así:

[ player | spikeTrap ] -> [ | spikeTrap ]

Si el jugador no está parado al lado de la trampa de estaca, el código continúa la ejecución. Esto significa que el orden de escribir líneas de código es importante. Puede usar el comando tardío en algunos casos, que aprenderá con el tiempo en la práctica.

Formas de usar tarde en la práctica

En mi experiencia, es mejor usar el comando tardío cuando verifica si los objetos están uno encima del otro o uno al lado del otro, pero hay otros casos. Si verifica si un objeto está en otro, el evento no se registrará hasta el siguiente turno, a menos que use el comando tardío:

[ player spikeTrap ] -> [ spikeTrap ]

En el caso anterior, el jugador no será asesinado por una trampa con apuestas hasta el siguiente turno después de pasar a la trampa. Para hacer que el jugador muera al instante, solo agrega el comando tardío,

late [ player spikeTrap ] -> [ spikeTrap ]

Para reiniciar todo el nivel cuando el personaje muere, puedes hacer lo siguiente:

late [ player spikeTrap ] -> restart

Y el nivel se reiniciará cuando el jugador caiga en la trampa con apuestas.

Puedes ver el ejemplo del proyecto terminado aquí .

Parte 6. Trabajar con efectos de sonido.

Creamos un gran juego en Puzzle Script , pero ahora necesitamos agregarle sonidos. Como hacerlo ¡Ahora te lo diré!

Generación de sonido

Abrir un proyecto de muestra . Agrégale sonidos. Debajo de la pantalla del juego, puedes ver cuadrados negros con símbolos blancos. Se utilizan para generar sonido. Cada personaje genera un tipo único de sonido, y una cruz elimina los sonidos creados. Intenta hacer clic en los cuadrados y escucha los sonidos.


Los números amarillos son códigos únicos que deben copiarse y pegarse en lugares del código donde se necesitan sonidos.

Cómo usar sonidos

Una vez que encuentre el sonido correcto, debe insertarlo en la sección Sonidos del código del juego.


Los sonidos se pueden usar de varias maneras. Lo más fácil es crear un nuevo efecto de sonido (sfx). Deben estar numerados. Creamos un nuevo sfx, asignándole un número del 0 al 10 al insertar una ID de sonido numérico. En la lista Sonidos, cree un nuevo sfx llamado sfx0 y asígnele el sonido generado:

sfx0 36301705

Para usar el sonido, debe insertarlo en las reglas después del evento. Adjuntemos el sfx0 recién creado al evento de destrucción de caja (el evento ya está presente en el ejemplo del proyecto):

(The player destroys a crate)
[ > Player | CrateVanish ] -> [ Player | ] sfx0

Los sonidos también se pueden declarar para reproducción con ciertos eventos, por ejemplo:

Crate MOVE 36772507

En este caso, el sonido se reproducirá cuando mueva la caja. Genere un nuevo efecto de sonido para arrastrar y soltar objetos CratePull y hacer que suene cuando mueva CratePull:

CratePull MOVE 12735307

Los sonidos de los eventos deben declararse solo en la sección Sonidos: no es necesario mencionarlos en las reglas.

Lista de métodos de reproducción de sonido.

A continuación hay una lista de los diversos sonidos de eventos que puede usar, tomados de la documentación de Puzzle Script.

Acción de objeto 541566 : se reproduce cuando un objeto está expuesto a una acción durante un movimiento.

Object Create 641667 : se reproduce al crear un objeto específico.

EndGame 5416789 : se juega cuando finaliza el juego.

EndLevel 6417822 : se reproduce después de completar el nivel.

Object CantMove 781673 : se reproduce cuando un objeto intenta sin éxito moverse en cualquier dirección.

Player CantMove Down Left 464674 : se reproduce cuando un objeto intenta sin éxito moverse hacia abajo o hacia la izquierda.

CloseMessage 344456 : se reproduce cuando el jugador cierra el cuadro de mensaje.

Object Destroy 187975 : se reproduce cuando se destruye un objeto.

Object Move 264567 : se reproduce cuando un objeto se mueve con éxito en cualquier dirección.

Objeto Mover hacia abajo a la izquierda 765432 : se reproduce cuando el objeto se ha movido con éxito hacia abajo o hacia la izquierda.

Object Move Horizontal 345367 : se reproduce cuando el objeto se ha movido con éxito horizontalmente. También puedes usar Vertical.

Reiniciar 7865435 : se reproduce cuando un jugador presiona el botón de reinicio R.

SFX0 765743 : puede ser cualquier cosa, desde SFX0 hasta SFX10. Estos son eventos de sonido especiales que se pueden realizar a partir de las reglas.

ShowMessage 478483 : se reproduce cuando se muestra un mensaje.

StartGame 234626 : se juega al comienzo de un nuevo juego.

Startlevel 765436 : se reproduce al comienzo de cada nivel.

TitleScreen 876543 : se reproduce después de cargar el protector de pantalla.

Deshacer 436234 : se reproduce cuando un jugador presiona la tecla Cancelar (Z).

Puede especificar direcciones para moverse y desplazarse para que cuando se mueva en diferentes direcciones, se reproduzcan diferentes sonidos.

Un ejemplo listo del proyecto está aquí .

Parte 7. Reproducir música

Aprendimos a crear juegos en Puzzle Script, pero ¿no sería genial agregarles música? Es posible, y ahora te diré cómo hacerlo.

Nota: parece que en este momento esta función en Puzzle Script está rota, así que pase a la siguiente parte.

Que hacer

Abra el proyecto en blanco . La música funciona en Puzzle Script de la siguiente manera: puedes insertar un enlace a un solo video de Youtube en el juego. PuzzleScript reproducirá automáticamente todos los sonidos de este video. Abra Youtube y seleccione cualquier video, o use lo siguiente:

youtube.com/watch?v= CKAc3nYEatw

Para reproducir música de un video, necesitamos obtener una identificación de video única. La parte verde en la línea de arriba es una identificación única.


Debajo de la página de inicio del autor al comienzo del proyecto, agregue la etiqueta de YouTube y luego una ID de video única, por ejemplo, como esta:

youtube CKAc3nYEatw

Para asegurarse de que funciona correctamente, haga clic en "Compartir" y haga clic en el enlace del juego (no en el enlace del código fuente). Durante las pruebas dentro del editor, la música de Puzzle Script no se puede reproducir. Si desea que el juego tenga música, debe cargarlo como un video en Youtube e insertar una identificación única en su proyecto. Cada proyecto solo puede tener un video de Youtube.

Ejemplo de proyecto

Un ejemplo de proyecto Puzzle Script se puede encontrar aquí .

Parte 8. Cómo usar el comando Acción

Ya sabemos cómo mover, empujar y arrastrar bloques, pero ¿qué pasa si necesitamos hacer algo presionando una tecla determinada, como un espacio ?

Las posibilidades de entrada en PuzzleScript son bastante limitadas, principalmente teclas de flecha, Z para cancelar, R para reiniciar, y no podemos cambiarlas.Pero el motor nos da una llave extra para acciones - presionando la barra espaciadora o pulse la X .

Trabajar con el equipo de Acción sigue el formato descrito anteriormente. Utilizamos el formato de código básico de PuzzleScript:

[ ] -> [ ]

Si la condición es verdadera, entonces ejecutamos el evento. El comando de acción se usa de la misma manera, pero tiene sus propias reglas. Se ve así:

[ Action ] -> [ ]

Aquí hay un ejemplo del uso del comando Acción:

[ Action Player ] -> [ Crate ]

Primero, Acción es siempre la primera palabra de una condición.

En segundo lugar, si queremos influir en cierto objeto en el juego, debemos mencionar este objeto tanto en la condición como en el evento (si mencionamos otro objeto, el programa eliminará el original y lo reemplazará con un nuevo objeto, y si no especifica el objeto, entonces él solo se retirará).

Finalmente, la palabra Acción debe usarse solo en la condición , pero a veces vale la pena usarla tanto en la condición como en el evento. Hablaré de esto a continuación.

Comprueba el código que se muestra arriba en el proyecto del juego. Puedes comenzar con este ejemplo . Verás que cuando presionas la barra espaciadora o X, el jugador se convierte en una caja.

La condición dice [ Si presionamos la tecla Acción y hay un objeto Jugador en el nivel ] -> entonces [ reemplace el objeto jugador con un cuadro]

Ahora, intentemos el siguiente código en el ejemplo del proyecto:

[ Action Player | Crate ] -> [ Player | > Crate ]

Asegúrate de estar rodeado por todos lados de cuadros, como en la imagen de arriba. Notarás que una acción solo afecta una casilla a la vez. No sé exactamente cuál es el motivo, pero si desea influir en varios objetos con el comando Acción , debe especificarlo tanto en la condición como en el evento.

Reemplace el código con la versión actualizada:

[ Action Player | Crate ] -> [ Action Player | > Crate ]

Ahora podemos empujar todas las cajas a la vez. Si necesita aplicar una acción a varios objetos, coloque Acción tanto en la condición como en el evento.

Parte 9. Verificación de múltiples condiciones

Aprendamos a verificar varias condiciones, por ejemplo, la presencia de una bomba Y un bloque destructible.


Abrir un proyecto de muestra . Ahora agregue el siguiente código:

late [Player Switch][DoorClosed] -> [Player Switch][DoorOpen]

El código sigue este formato:

[ 1 ] [ 2 ] -> [ 1 ] [ 2 ]

Si la condición 1 es verdadera y la condición 2 es verdadera, entonces se ejecutan los pasos 1 y 2. En nuestro caso, en la condición 1, se verifica si el jugador está en Switch. En caso afirmativo, entonces se verifica la condición 2, es decir, ¿la presencia a nivel de una puerta cerrada? Si la condición es verdadera, el objeto DoorClosed se convierte en un objeto DoorOpen, abriendo la puerta.


Supongamos que necesitamos que la puerta se cierre cuando el héroe deja el interruptor, porque queremos que el jugador empuje la caja hacia el interruptor para abrir la puerta. Puedes escribir algo como esto:

late [Player | Switch][DoorOpen] -> [Player | Switch][DoorClosed]

Si el jugador está parado al lado del interruptor y en algún lugar del nivel hay una puerta abierta, entonces cerramos la puerta. Finalmente, necesitamos que la puerta permanezca abierta si empujamos la caja hacia el interruptor:

late [Crate Switch][DoorClosed] -> [Crate Switch][DoorOpen]

Ahora la puerta permanecerá abierta mientras el cajón esté en el interruptor.

Puedes ver el ejemplo del proyecto terminado aquí .

Parte 10. Crear puntos de interrupción

Quizás tengas una buena idea para jugar Puzzle Script, pero necesita puntos de control (puntos de control) para que el jugador se recupere de ellos en caso de muerte. Como hacerlo Bastante simple, y ahora explicaré cómo.

Crear puntos de interrupción

Abrir un proyecto de muestra . Ahora necesitamos programar un punto de interrupción. Solo una línea de código es suficiente para esto:

late [ Player FlagRed ] -> CHECKPOINT

FlagRed es un punto de control. Cuando el jugador está encima de la bandera, este código crea un punto de control (PUNTO DE CONTROL). Si no usa tarde, la función de punto de control no funcionará.

Prueba el juego. Vaya sobre el punto de control, y luego un poco más y presione R. Deberá comenzar desde el punto de control.

Múltiples puntos de control

Si hay varios puntos de control, el juego usa el último activado por el jugador.

Para evitar la reactivación de un punto de control ya utilizado, debe cambiarlo a otro objeto. Para hacer esto, cree una copia en blanco en la sección OBJETOS del código debajo de la bandera roja.

FlagWhite
White Orange
.1…
.00..
.000.
.1…
.1…

Ahora reescribe esta línea en la leyenda:

Flag = FlagRed or FlagWhite

Podemos crear un grupo de objetos. En este caso, Flag será FlagRed o FlagWhite. Si bien al menos uno de los objetos agrupados tiene asignado un símbolo (asignamos a FlagRed un símbolo F), no necesitaremos asignar símbolos a otros objetos del grupo, y solo puede acceder a ellos en el código, pero no en el editor de niveles. Luego puede asignar capas de colisión al grupo, lo cual hicimos. Un acceso a un grupo de objetos, por ejemplo, Flag, se refiere a todo el grupo. Por lo tanto:

[ > Player | Flag ] -> [ > Player | ]

Este código afectará tanto a la bandera roja como a la blanca.

Cambiar objeto de bandera

Aquí le mostramos cómo cambiar FlagRed a FlagWhite:

late [ Player FlagRed ] -> [ Player FlagWhite ]

Si al final del turno el jugador está en la bandera roja, entonces lo convertimos en blanco. Sin embargo, debe hacer que los gráficos de la bandera cambien después de crear el punto de interrupción, porque el código se lee de arriba a abajo. Prueba el programa.

Cambiar la segunda bandera

Hay dos banderas en el proyecto. Asegurémonos de que cuando se active la segunda bandera, la vieja bandera blanca se vuelva negra para que no se pueda volver a usar. Escribimos lo siguiente:

late [ Player FlagRed ][ FlagWhite] -> [ Player FlagRed ][FlagBlack]

El código dice: si el jugador está en la bandera roja y en algún lugar del juego hay banderas blancas, entonces debes hacer que las banderas blancas sean negras. Dado que el código se lee de arriba a abajo, debemos hacerlo en el siguiente orden:

late [ Player FlagRed ] -> CHECKPOINT
late [ Player FlagRed ][ FlagWhite] -> [ Player FlagRed ][FlagBlack]
late [ Player FlagRed ] -> [ Player FlagWhite ]

Si no comprende por qué el código debe estar en este orden, intente cambiar el orden de las líneas y pruebe el programa. Para resolver sus propios problemas, debe aprender a dar un paso atrás y reflexionar sobre lo que hace el código. Pero te daré una pista: cuando juegas, ¿dónde están las banderas rojas durante la última línea de código en el siguiente ejemplo incorrecto?

[ > Player | Crate ] -> [ > Player | > Crate ]
[ > Crate | Flag ] -> [ Crate | Flag ]
late [ Player FlagRed ] -> CHECKPOINT
late [ Player FlagRed ] -> [ Player FlagWhite ]
late [ Player FlagRed ][ FlagWhite] -> [ Player FlagRed ][FlagBlack]

Vea el proyecto de ejemplo terminado aquí . Además, te acabo de mostrar la forma más fácil de animar. En la siguiente parte, hablaré sobre la creación de animaciones más complejas, como explosiones.

Parte 11. Animaciones

Hay dos formas de crear animaciones en PuzzleScript. Uno de ellos usa el tiempo real, pero en esta parte no hablaré sobre eso. Otro se usa para animaciones rápidas de una sola vez, como una explosión o un personaje que desciende por una escalera vertical.

Abrir un proyecto de muestra . Crearemos una bomba y una serie de disparos de la explosión, y luego los animaremos.

Animación de objetos

Para animaciones en 2D, necesita varios dibujos de un objeto que se mueve de un estado a otro, por ejemplo, un sprite de un Mario corriendo. Contiene 4 cuadros de animación.


Para simular la transición de un cuadro de animación a otro, crearemos varios objetos en PuzzleScript que serán cuadros de animación, y luego usaremos el código para cambiar entre ellos.

Bomba

Crea tal objeto de bomba.

Bomb
black yellow grey
..1..
..1..
.000.
00020
.000.

Recuerde agregarlo a las capas y a la leyenda.

Para animar la explosión, necesitamos crear cada cuadro de la animación como un objeto separado, y luego cambiar entre ellos en el código. Creemos objetos de explosión.

Explosion1
black yellow grey red
..1..
..1..
.000.
00320
.000.

Explosion2
black yellow grey red
..1..
..1..
.333.
03330
.333.

Explosion3
black yellow grey red
..1..
.333.
33333
33333
.333.

Explosion4
black yellow grey red
.333.
33333
33333
33333
.333.

Explosion5
black yellow grey red
.333.
33333
33.33
33333
.333.

Explosion6
black yellow grey red
.333.
3...3
3...3
3...3
.333.

Explosion7
black yellow grey red
.....
.....
.....
.....
.....

Numerará correctamente los objetos para saber qué marco de la animación necesitamos. Después de agregarlos a las capas y a la leyenda, podemos agregar varias líneas de código.

[Explosion7] -> []
[Explosion6] -> [Explosion7]
[Explosion5] -> [Explosion6]
[Explosion4] -> [Explosion5]
[Explosion3] -> [Explosion4]
[Explosion2] -> [Explosion3]
[Explosion1] -> [Explosion2]
[Bomb] -> [Explosion1]

Intenta agregar este código, y luego coloca una bomba en el nivel y comienza el juego. Notarás que con cada movimiento, la animación de la bomba cambia en un cuadro. Al cambiar de objeto, creamos una animación.

El orden de cambio entre animaciones es crítico. El último cuadro debe estar en la parte superior y el primero, en la parte inferior. No olvide que el código se lee de arriba a abajo. Si los cuadros de la animación están en un orden diferente, nunca veremos los cambios. Solo veremos el último cuadro, y en nuestro caso la bomba simplemente desaparecerá. Cambiará al primer cuadro, luego al segundo y así sucesivamente, en un cuadro, incluso antes de que vea el gráfico. Al colocar el último cuadro al principio, en cada turno veremos el próximo cambio.

Usando de nuevo

Para animar todo junto, necesitamos un equipo nuevamente . Una vez más, significa que después de leer todo el código, PuzzleScript hará una pausa y luego volverá a leer el código ejecutando todos los comandos nuevamente . Se puede usar para la gravedad, deslizarse sobre hielo y, en nuestro caso, para animaciones. Todo lo que se necesita es reescribir el código de la siguiente manera:

[Explosion7] -> []
[Explosion6] -> [Explosion7] again
[Explosion5] -> [Explosion6] again
[Explosion4] -> [Explosion5] again
[Explosion3] -> [Explosion4] again
[Explosion2] -> [Explosion3] again
[Explosion1] -> [Explosion2] again
[Bomb] -> [Explosion1] again

Prueba el juego. Verá que toda la animación de la bomba se reproduce de inmediato. Si en su opinión es demasiado lento o rápido, entonces se puede cambiar la velocidad. Al comienzo del texto del programa, debajo de la página de inicio escriba el siguiente código:

again_interval 0.1

Esto es parte de lo que PuzzleScript llama preludio . Este es el lugar donde, antes del resto del código, puedes establecer reglas adicionales que determinan el comportamiento del juego. Ahora la animación debería reproducirse más rápido. Intente cambiar el número después de again_interval y verifique que haya cambiado.

Puedes ver el ejemplo del proyecto terminado aquí .

Parte 12. Gravedad

Por lo general, PuzzleScript se usa para crear juegos de arriba hacia abajo, pero de hecho, puede simular algunos elementos de los desplazadores laterales, aunque con reglas limitadas de PuzzleScript, es decir, seguirán siendo paso a paso. En esta parte te diré cómo implementar la gravedad.

Ejemplo de proyecto

Abrir un proyecto de muestra . Creé un nivel simple, tiene un jugador, una caja en la repisa y una puerta debajo. Queremos asegurarnos de que cuando un jugador empuja una caja desde una repisa, caiga al suelo. También queremos que el jugador caiga al suelo cuando abandone el borde.

Fall Stage 1

Aquí está la primera parte del código que usaremos:

down [ Player | no Object ] -> [ | Player ]
down [ Crate | no Object no Player ] -> [ | Crate ]

Intenta empujar la caja desde el borde. Notarás que después de mover la caja se cuelga en el aire, pero después de otro movimiento cae al suelo. Aquí suceden algunas cosas.

Primero, hablemos de la palabra clave down . Al agregar hacia abajo , limitamos la regla al hecho de que solo se aplica en la dirección hacia abajo. Es por eso que la caja se mueve hacia abajo. Si reemplazas hacia abajo con la derecha , verás que la caja está atascada en la pared derecha, como en el juego con antigravedad. Intenta hacerlo.

A continuación, haremos algo inusual. En lugar de verificar si el jugador está al lado de un objeto específico (por ejemplo, un cuadro), verificamos si está al lado de un objeto generalizado. Si observa la leyenda en el código de ejemplo, verá que hemos definido el objeto como un grupo de objetos, es decir, con cada uso de la palabra objeto, nos referimos a un grupo de objetos. Es decir, verificamos si hay alguno de estos objetos debajo del jugador. Si no, le ordenamos al jugador que ocupe este espacio vacío y deje el espacio anterior, debido a la palabra hacia abajo, siguiendo en dirección hacia abajo.

Pero también puedes notar que después de chocar con una repisa, la caja no cae hasta el siguiente movimiento, y que instantáneamente llega al suelo. Para eliminar este bloqueo retrasado, puede usar la palabra clave tardía:

late down [ Player | no Object ] -> [ | Player ]
late down [ Crate | no Object no Player ] -> [ | Crate ]

Pero, ¿cómo hacer que caiga gradualmente, cuadro por cuadro?

Fall Stage 2

Ahora usamos la palabra clave aleatoria . Reescribimos el código de la siguiente manera:

random down [ Player | no Object ] -> [ | Player ]
random down [ Crate | no Object no Player ] -> [ | Crate ]

Ejecuta el código. Funciona de manera muy similar al código anterior, pero con una diferencia importante. La caja se congela en el aire, pero cada vez que el jugador se mueve, cae una celda. Esto se debe a la palabra aleatorio . Estrictamente hablando, random está diseñado para crear juegos con elementos aleatorios, pero fue útil aquí. Obliga a la línea de código correspondiente a ejecutarse una vez por turno. PuzzleScript ejecuta cada regla en un movimiento tantas veces como sea posible, y solo entonces el jugador ve cambios gráficos. Por eso parece que la caja cae al suelo al instante. Pero cuando se usa la palabra al azar, permitimos que caiga solo una celda a la vez.

Fall Stage 3

Ahora agregaremos la palabra clave nuevamente :

random down [ Player | no Object ] -> [ | Player ] again
random down [ Crate | no Object no Player ] -> [ | Crate ] again

Lanza el juego. Todo es casi perfecto. La caja se congela por un tiempo en el aire, pero si te mueves nuevamente, cae gradualmente al suelo. Ya estamos familiarizados con la palabra clave nuevamente , en esencia, significa que al final del turno, PuzzleScript lee el código nuevamente e intenta ejecutar todos los comandos nuevamente como un movimiento separado, después de lo cual se detiene, luego los repite nuevamente tantas veces como sea posible. Lo importante aquí es que hace una pausa entre turnos nuevamente , lo que nos permite ver caer la caja.

Ultima etapa

Y el toque final. Para que la caja caiga al suelo inmediatamente después de ser empujada desde el borde, necesitamos agregar otra línea de código sobre la que acabamos de escribir:

[moving Player] -> [moving Player] again
random down [ Player | no Object ] -> [ | Player ] again
random down [ Crate | no Object no Player ] -> [ | Crate ] again

La palabra clave en movimiento utilizada entre corchetes [] delante del jugador significa que estamos verificando si el jugador se está moviendo. Esto significa que si un jugador se mueve, entonces le ordenamos que continúe moviéndose y ejecute el equipo nuevamente . Entonces, inmediatamente todo lo que use la palabra clave funcionará nuevamente ; en nuestro caso, es una animación de un cuadro desplegable.

Puedes ver el ejemplo del proyecto terminado aquí .

Parte 13. Verificando la dirección de viaje

Indicación de dirección

A veces sucede que necesita verificar algo en una sola dirección. Por ejemplo, debe hacer bloques que solo se puedan empujar horizontalmente, o crear un pato que solo pueda caminar hacia la izquierda.

Sea como fuere, podemos indicar que los eventos ocurren solo en ciertas direcciones.

Abra PuzzleScript, cree un juego basado en el ejemplo básico y reemplácelo con Reglas con el siguiente código:

[ Left Player ] -> [ Crate ]

Inicia el juego y mira qué sucede.

Si intentas ir a la izquierda, el jugador se convertirá en una caja. Este es un buen ejemplo de cómo funciona la dirección.

Ya estamos acostumbrados al formato en el que expliqué el código PuzzleScript:

[ ] -> [ ]

Si el evento es verdadero, entonces ocurre el evento.

Pero ahora, cuando necesitemos verificar las instrucciones, él seguirá las nuevas reglas:

[ Movement Direction Object Affected ] -> [ New State of Object ]

Ese es nuestro código anterior:

[ Left Player ] -> [ Crate ]

comprueba si el jugador se mueve hacia la izquierda ( izquierda ). Si es así, reemplazamos el reproductor con el objeto caja.

Tipos de destinos

Puede elegir entre los siguientes tipos de destinos:

• Arriba
• Abajo
• Izquierda
• Derecho
• Horizontal (verifica si hay movimiento horizontal)
• Vertical (verifica si hay movimiento vertical)

Parte 14. Crear movimientos personalizados

Por alguna razón, el juego puede necesitar un movimiento personalizado. Los patos solo pueden caminar hacia la izquierda, las cajas solo se pueden empujar horizontalmente, y así sucesivamente. Es muy facil de hacer. Echemos otro vistazo al formato de código básico de PuzzleScript:

[ ] -> [ ]

Si la condición es verdadera, entonces ocurre un evento. Para crear un movimiento personalizado, debe hacer lo siguiente:

[ Condition ] -> [ Movement Direction Object To Move ]

Así es como se vería el ejemplo:

[ Player | Crate ] -> [ Player | Left Crate ]

Descargue PuzzleScript , abra el ejemplo básico , pegue este código y vea qué sucede. Ve a la caja alrededor de la cual no hay paredes.

Verás que cuando un jugador está cerca del cuadro, el cuadro se empuja hacia la izquierda. Sin embargo, dado que no hay una palabra clave Late , esto sucede en el curso después de haber dado el primer paso hacia ella.

Al especificar en el Evento, además del objeto, la dirección de movimiento , por ejemplo , Izquierda , PuzzleScript intentará mover el objeto en la dirección especificada. Es por eso que la caja, y no el jugador, se mueve hacia la izquierda: la izquierda está al lado de la caja .

¿Recuerdas este código de la parte anterior?

[ ] -> [ ]

Si indica la dirección del movimiento en la condición al lado del objeto, entonces verifica si este objeto se mueve en esta dirección. Esta es una diferencia importante. Puedes reescribirlo así:

[ ] -> [ ]

Movimientos personalizados permitidos

Los movimientos personalizados se pueden crear con cualquiera de estas palabras:

• Arriba
• Abajo
• Izquierda
• Derecho

No puede usar Horizontal o Vertical , ya que PuzzleScript no entenderá en qué dirección desea mover el objeto, o para hacer esto, requerirá muchas soluciones. Es necesario indicar una dirección específica.

Parte 15. Comprobar celdas al lado de objetos

A veces es necesario verificar qué hay al lado del objeto. Esto es bastante fácil de hacer. Echemos otro vistazo al formato de código PuzzleScript:

[ ] -> [ ]

eso es

[ ] -> [ ]

Para verificar el lado del objeto, necesitamos agregar un elemento. El formato es el siguiente:

[ object1 | object2 ] -> [ object1 | object2 ]

Antes de la condición, verificamos en qué lado del objeto queremos realizar la verificación.

Dentro de la condición, suponemos que se necesitan al menos dos celdas. Una celda es, de hecho, cualquier objeto que esté en el mismo espacio y no uno al lado del otro.

[ ]

[ | | ]

La primera celda es el objeto cuyos lados estamos revisando. La segunda celda es el objeto cuya presencia estamos comprobando. Pruebe los siguientes ejemplos:

Left [ Player | Crate ] -> [ Player | ]

El código que se muestra arriba elimina cuadros si están en el cuadrado a la izquierda del jugador.

Left [ Crate | Crate ] -> [ Player | Crate ]

Este código verifica si el cuadro está a la izquierda de otro cuadro. Si es así, la casilla cuyo lado está marcado se convertirá en el nuevo objeto del jugador.

Left [ Crate | Crate ] -> [ Crate | Player ]

En el código anterior hay la misma marca, pero el cuadro de la izquierda se convierte en el objeto del jugador.

Left [ Crate | Crate | Crate ] -> [ Crate | Player | Crate ]

Este código también usa un patrón similar. El cuadro inmediatamente a la izquierda del marcado se convierte en un jugador si 3 cuadros están uno al lado del otro horizontalmente.

Left [ Crate | Crate | Crate ] -> [ Crate | Crate | Player ]

Si 3 casillas están una al lado de la otra horizontalmente, la más a la izquierda se convierte en un jugador.

Si prueba cada uno de estos ejemplos, comenzará a comprender el patrón. La primera celda es el objeto que verificamos para ver qué sigue. Las siguientes celdas, desde la más cercana a la más lejana, son los objetos que buscamos.

Palabras clave

• Arriba: comprueba un objeto
• Abajo: verifica debajo del objeto
• Izquierda: marca a la izquierda del objeto.
• Derecha: marca a la derecha del objeto
• Horizontal: marca a la izquierda y a la derecha del objeto.
• Vertical: marca encima y debajo del objeto