Editor de código y reproductor

Pyxen reúne un editor de código y tu juego en marcha en la misma ventana. Escribes Pyxen Script en el panel de código y juegas a tu juego en la Vista previa, a su lado.

Editor de código

El editor colorea Pyxen Script y comprueba tu código mientras escribes: un problema aparece en su línea, con el motivo.

En el Mac, y en el iPad con teclado físico, funcionan los atajos habituales: seleccionar, copiar, pegar, deshacer, rehacer. Un ratón o un trackpad colocan el cursor con precisión.

Los parámetros mientras escribes

Escribe el ( de una llamada, world.get( o hero.tween(, y una tarjeta encima de la línea muestra lo que la llamada espera: sus parámetros, el que estás escribiendo resaltado, su línea de la referencia y Referencia › para abrir su página. Te sigue de una coma a otra y dentro de las llamadas anidadas, y desaparece cuando escribes el ) que la cierra. Tus propias funciones también tienen su tarjeta, con la primera línea de su docstring.

La lista bajo la línea ofrece primero lo que encaja: los nombres de entidades escritos en tu proyecto para world.get(, los nombres de easing tras ease=, las palabras clave que la llamada aún no ha recibido y, después, los nombres de siempre. Solo conoce los nombres escritos tal cual: una entidad nombrada mientras corre el juego no aparecerá.

Pulsa Esc una vez para cerrar la lista y dos veces para ocultar la tarjeta de esa llamada. Cmd+Mayús+Espacio (Editar › Mostrar parámetros) la trae de vuelta, y Ctrl+Espacio (Editar › Mostrar sugerencias) abre la lista. En el iPad, toca la tarjeta para abrir la referencia; con el teclado en pantalla, la tecla . de la fila de escritura escribe , dentro de una llamada.

Los assets mientras escribes

Entre las comillas de un nombre que espera una llamada, Sprite(", Sound(", Music(", Text(…, font=" o GridMap(tilemap=", la lista ofrece los assets de ese tipo de tu proyecto y después los de cada paquete de assets, cada uno con su imagen: el primer mosaico de una imagen (o la imagen entera) con su tamaño y sus animaciones, una fuente que escribe el texto de la llamada, un mapa en pequeño. Tras animation=" ofrece las animaciones de la imagen nombrada en la misma llamada, cada una reproduciéndose. El que tienes seleccionado se muestra más grande junto a la lista, con Abrir en Sprite › (o el panel de su tipo) para abrirlo.

Los sonidos y la música tienen ▶: haz clic en él, o pulsa Opción+Retorno (Editar › Mostrar selector) sobre el seleccionado, para escucharlo. Nada suena mientras recorres la lista, y Esc lo detiene. Un sonido de un banco de sonidos se escribe "banco/sonido".

La lista solo conoce los nombres escritos tal cual: un nombre guardado en una variable o formado por partes no tiene lista, y la tarjeta dice que se calcula durante el juego. Con la opción Reducir movimiento del sistema, las animaciones se quedan quietas.

En un argumento de mosaico, Sprite("tiles", tile=( o level.set(…, tile=( en un mapa, el selector de mosaicos se abre bajo la línea con la imagen que nombra la llamada y su cuadrícula encima. Haz clic en un mosaico o arrastra sobre varios: los números se escriben en tu código mientras eliges, en píxeles para un sprite, (x, y, w, h), y en celdas para un mapa, (column, row). Si escribes tú los números, la selección los sigue. Retorno la conserva (en el iPad, Listo), Esc devuelve lo que había y un solo Deshacer retira toda la selección. El selector se abre solo con un tile=( vacío; para un mosaico ya escrito, haz clic en su pequeña imagen justo antes de los números, o pulsa Opción+Retorno (Edición › Mostrar selector) y usa las flechas (con Mayúsculas para más mosaicos). Un número calculado a partir de una constante, como HERO * 16, se muestra discontinuo, y el selector lo avisa antes de escribir números encima. Una imagen sin cuadrícula se elige al tamaño que ya dan los números, si no, de 16 en 16 píxeles.

Mantén Cmd y pasa el puntero sobre el nombre de un recurso en tu código, como "ninja" en Sprite("ninja", animation="run"): el nombre se subraya y una tarjeta muestra el recurso, con su imagen, su tamaño y sus animaciones. Cmd+clic lo abre en su editor, en lo que nombra la llamada: el editor de sprites en la animación run, el rectángulo de un tile=(16, 0, 16, 16) seleccionado, o el sonido de un banco, Sound("sfx/coin"), elegido en su banco de sonidos. Un nombre que tu proyecto no tiene no abre nada.

Y de vuelta: el panel de un recurso muestra Usado en el código con cuántas líneas de tus scripts lo nombran. Elige una en su menú para ir a esa línea. Si la barra del panel es demasiado estrecha, está al principio del menú ⋯ del panel.

Un nombre que tu proyecto no tiene, como "ninjaa" en Sprite("ninjaa"), se subraya en ámbar antes de ejecutar el juego. Pon el cursor sobre él y una tarjeta dice Nada en el proyecto se llama «ninjaa»., con Usar «ninja» para escribir el nombre más parecido en su lugar, y Nueva imagen… para crearlo (Nuevo mapa de mosaicos…, Nueva fuente… o Nuevo banco de sonido… para esos tipos). Una animación que la imagen no tiene se subraya igual, y también tile= y animation= en el mismo Sprite, que no se pueden usar juntos. Son avisos, no errores: el juego se ejecuta igualmente, porque un nombre puede venir de un pack de assets que añadas después. Solo se comprueban los nombres escritos como texto.

Ir a símbolo

Pulsa Cmd+Mayús+O (Editar › Ir a símbolo…) para listar las funciones y los nombres de tu proyecto, y las entradas de la referencia. Escribe para filtrar y elige uno para ir a él.

Ir a la definición

Cmd+clic en un nombre de función o de variable, o Cmd+J (Editar › Ir a la definición) con el cursor sobre él, te lleva a donde está definido. Funciona entre los archivos de tu proyecto: si una función está definida en utils.py y se llama en main.py, Cmd+clic te lleva directamente. Si un nombre tiene varias definiciones, o ninguna en tu proyecto, Ir a símbolo se abre con él.

Usa Opción+flecha para mover el cursor palabra a palabra en lugar de carácter a carácter. Con Mayús, selecciona palabra a palabra: útil para seleccionar rápido un nombre de variable o una llamada a función.

Tamaño del texto y temas

Pulsa Cmd+= para agrandar el código y Cmd+- para reducirlo, o elige Presentación › Aumentar el texto y Reducir el texto. En Ajustes › Editor, ajusta el tamaño de 10 a 32 puntos y elige uno de los diez temas del código: Automático sigue la apariencia con Pyxen Dark o Pyxen Light; los demás son Pyxen Deep Dark, Pyxen Deep Light, Dracula, GitHub Light, One Dark, One Light, Solarized Dark y Solarized Light.

En una ventana de iPad estrecha

Cuando la ventana mide menos de 900 puntos de ancho (un iPad de 11 pulgadas en vertical, Split View, Slide Over), Pyxen muestra un panel cada vez, los demás como pestañas encima, y sus herramientas están en la bandeja, al pie de la ventana. Toca su asa para hacerla más alta o más baja, o arrástrala hacia abajo para plegarla. La bandeja del panel de código tiene:

Con el teclado en pantalla, las teclas del código están en la fila sobre el teclado; con un teclado físico, el panel de código no tiene bandeja.

Ejecutar tu juego

Elige Ejecutar (Cmd+R) para comprobar, compilar y ejecutar tu código. El juego empieza en la Vista previa. Detener (Cmd+.) lo termina, y Pausa, en la barra de la Vista previa, lo deja en un fotograma.

Si tu código tiene un error, Pyxen muestra el mensaje en su línea. Corrígelo y vuelve a ejecutarlo.

Inspector de fotogramas

Cuando pausas un juego en ejecución, el inspector de fotogramas se activa. Este es el depurador integrado de Pyxen.

El inspector te permite:

Control temporal

Pyxen graba hasta 300 fotogramas de historial mientras tu juego se ejecuta, diez segundos a 30 fotogramas por segundo. Cuando está pausado, puedes navegar hacia atrás y adelante en el tiempo.

Cada fotograma guarda sus entidades y lo que dibujó, dentro de un presupuesto de memoria: un juego exigente, con muchas entidades o mucho draw, guarda menos fotogramas, primero se van los más antiguos, y la barra de tiempo muestra hasta dónde llega. Ajusta el presupuesto en Ajustes › Vista previa del juego › Depurador › Memoria del historial. Empieza en el valor recomendado para tu dispositivo, escrito debajo, que guarda 300 fotogramas de la mayoría de los juegos.

Esto significa que puedes:

El control temporal convierte la depuración de adivinanza en observación. En vez de añadir sentencias print y re-ejecutar, pausas, retrocedes y miras.

Flujo de trabajo

Un flujo de trabajo típico en Pyxen:

  1. Escribe o edita código en el editor
  2. Ejecutarlo para probar
  3. Si algo se ve mal, pausa el juego
  4. Retrocede en el tiempo para encontrar el fotograma donde falló
  5. Inspecciona entidades para ver qué estado fue inesperado
  6. Detén, corrige el código, repite