From 98e82e1d8b0214a73d739787eab498c7a0b741b9 Mon Sep 17 00:00:00 2001 From: Quinton Ashley Date: Sat, 1 Jul 2023 23:44:43 -0500 Subject: [PATCH] 1.1.580 --- about/index.html | 2 +- assets/app_icon.png | Bin 22186 -> 0 bytes assets/favicon.ico | Bin 11925 -> 31836 bytes assets/favicon.png | Bin 3990 -> 11470 bytes assets/logo.png | Bin 36420 -> 0 bytes assets/logo.svg | 63 - assets/p5play_app_icon.png | Bin 0 -> 58791 bytes assets/p5play_brand.png | Bin 86669 -> 75165 bytes assets/p5play_brand_dark.png | Bin 167200 -> 76122 bytes assets/p5play_logo.png | Bin 0 -> 16358 bytes assets/p5play_logo.svg | 61 + editor/editor.js | 2 +- editor/index.html | 2 +- index.html | 1308 +++++++++---------- jam/index.html | 2 +- lang/es/index.html | 1334 ++++++++++---------- lang/es/learn/camera.html | 254 ++-- lang/es/learn/canvas.html | 214 ++-- lang/es/learn/group.html | 517 ++++---- lang/es/learn/index.html | 235 ++-- lang/es/learn/input_devices.html | 377 +++--- lang/es/learn/joints.html | 410 +++--- lang/es/learn/sprite.html | 1807 ++++++++++++++------------- lang/es/learn/sprite_animation.html | 609 ++++----- lang/es/learn/tiles.html | 262 ++-- lang/es/learn/world.html | 332 ++--- lang/ja/index.html | 1259 ++++++++++--------- lang/ja/learn/camera.html | 222 ++-- lang/ja/learn/canvas.html | 195 +-- lang/ja/learn/group.html | 441 +++---- lang/ja/learn/index.html | 228 ++-- lang/ja/learn/input_devices.html | 341 ++--- lang/ja/learn/joints.html | 412 +++--- lang/ja/learn/sprite.html | 1565 ++++++++++++----------- lang/ja/learn/sprite_animation.html | 522 ++++---- lang/ja/learn/tiles.html | 230 ++-- lang/ja/learn/world.html | 322 ++--- learn/camera.html | 246 ++-- learn/canvas.html | 208 +-- learn/group.html | 503 ++++---- learn/index.html | 233 ++-- learn/input_devices.html | 371 +++--- learn/joints.html | 410 +++--- learn/sprite.html | 1729 ++++++++++++------------- learn/sprite_animation.html | 573 ++++----- learn/style.css | 12 +- learn/tiles.html | 247 ++-- learn/world.html | 324 ++--- package.json | 2 +- pro/index.html | 2 +- v3/made_with_p5play.png | Bin 12903 -> 19582 bytes v3/p5play.js | 48 +- 52 files changed, 9495 insertions(+), 8941 deletions(-) delete mode 100644 assets/app_icon.png delete mode 100644 assets/logo.png delete mode 100644 assets/logo.svg create mode 100644 assets/p5play_app_icon.png create mode 100644 assets/p5play_logo.png create mode 100644 assets/p5play_logo.svg diff --git a/about/index.html b/about/index.html index cdd6688d..237e8d31 100644 --- a/about/index.html +++ b/about/index.html @@ -13,7 +13,7 @@
- - - - - - - - - - - - \ No newline at end of file + .testimonial-bio { + display: flex; + align-items: center; + justify-content: center; + gap: 16px; + margin-top: 10px; + } + + .testimonial-text span { + line-height: 1; + padding-right: 2px; + } + + .testimonial-bio>div { + line-height: 1.25; + } + + .testimonial-bio .name { + margin-bottom: 10px; + } + + .testimonial-text span, + .testimonial-bio .name { + font-size: 20px; + font-weight: bold; + } + + .testimonial-bio img { + width: 128px; + height: 128px; + border-radius: 10px; + } + + #shields img { + height: 24px; + opacity: 80%; + } + + #topNav .socials img:not(.github) { + opacity: 80%; + } + + #topNav .discord-logo { + height: 28px; + border-radius: 40%; + } + + #topNav .github { + background-color: #aaa; + border-radius: 50%; + } + + .credits div { + width: 100%; + font-weight: 500; + text-align: center; + margin: 20px; + margin-left: 0; + } + + .credits-lg { + font-size: 24px; + } + + .credits-sm { + font-size: 16px; + } + + + + + + diff --git a/jam/index.html b/jam/index.html index 569a6a13..76a956a8 100644 --- a/jam/index.html +++ b/jam/index.html @@ -13,7 +13,7 @@
+
+ + +
+
+ +

+ p5play es + un motor de juego de JS que utiliza + p5.js para gráficos y + Box2D para físicas. +

+

+ ¿Buscas convertir tus ideas en juegos en línea o arte interactivo? + ¡Prueba p5play! Fue diseñado por profesores de Ciencias de la + Computación para ser intuitivo para principiantes, lo que lo hace + popular en escuelas y universidades de todo el mundo. Pero, p5play + v3 no es solo para uso en el aula. Es una herramienta poderosa + construida sobre + planck.js, un port de + Box2D, el mismo simulador de físicas usado por los líderes de la + industria en juegos queridos como Tiny Wings y Angry Birds. +

+

+ ¡Comienza leyendo las + páginas de referencia "Learn"! +

+ -
-
-

- p5play es - un motor de juego de JS que utiliza - p5.js para gráficos y - Box2D para físicas. -

-

- ¿Buscas convertir tus ideas en juegos en línea o arte interactivo? - ¡Prueba p5play! Fue diseñado por profesores de Ciencias de la - Computación para ser intuitivo para principiantes, lo que lo hace - popular en escuelas y universidades de todo el mundo. Pero, p5play - v3 no es solo para uso en el aula. Es una herramienta poderosa - construida sobre - planck.js, un port de - Box2D, el mismo simulador de físicas usado por los líderes de la - industria en juegos queridos como Tiny Wings y Angry Birds. -

-

- ¡Comienza leyendo las - páginas de referencia "Learn"! -

- - -

- - - - - - - - - - -

-
- -
+
-
-

Únete a la comunidad 👾

-

- Haz preguntas y conoce a otras personas que crean arte interactivo - y juegos con p5play en nuestro - servidor de Discord de la comunidad. -

- - - Discord brand + +
+ +

Apoya este proyecto 🤝

+

+ p5play tiene una + licencia de código abierto + bajo GPL: ¡es gratis! +

+

+ Pero si usas p5play profesionalmente, por favor, ¡apoya el proyecto + en Patreon! +

+ +

+ + + patreon brand -

-
-

Apoya este proyecto 🤝

-

- p5play tiene una - licencia de código abierto - bajo GPL: ¡es gratis! -

-

- Pero si usas p5play profesionalmente, por favor, ¡apoya el proyecto en Patreon! -

- +

+
+
+ +

+ ¡No se requiere instalación! 🤩 +

- - - patreon brand - + Puedes utilizar cualquiera de estas plantillas de editores de + código en línea. Sin embargo, sugiero evitar el editor web de + p5.js, tiene muchos problemas. Recomiendo usar OpenProcessing.

+ + -
-

- ¡No se requiere instalación! 🤩 -

-

- Puedes utilizar cualquiera de estas plantillas de editores de - código en línea. Sin embargo, sugiero evitar el editor web de - p5.js, tiene muchos problemas. Recomiendo usar OpenProcessing. -

- - -
-
-

Desarrollo local 🔨

-

- Usa p5play en tu propio sitio web añadiendo estos enlaces a tu - archivo HTML. ¿El cortafuegos de tu escuela bloquea p5play.org? - Consulta las - preguntas frecuentes (FAQs) -

- - -

- p5play también está disponible en npm: npm i p5play -

-

- ¿Quieres usar p5play sin conexión? -

- -
+ +

+ p5play también está disponible en npm: npm i p5play +

+

+ ¿Quieres usar p5play sin conexión? +

+ +
-
-
-
-
-

Used by

-
- - Crimson Education - - - CODE.org - - - NYU Tisch - - - Girls Who Code - - - DePaul - - - LSU DDEM - - - HUNTER - - - Texas Tech University - +
+
+ +
-
+
-
-

- "He encontrado la biblioteca p5play como un recurso invaluable - para introducir a los estudiantes al diseño y desarrollo de - juegos. Nuestro equipo eligió usar esta biblioteca para nuestro - Programa de Verano de Diseño de Juegos debido a sus muchas - características personalizables, recursos bien documentados, y su - API fácil de usar que lo hacen accesible para estudiantes de todas - las edades y niveles de habilidad. -

-

- Gracias a los numerosos métodos y propiedades incluidos en esta - biblioteca, los estudiantes son capaces de llevar rápidamente sus - visiones de juego a la vida con código. Estos juegos van desde - juegos básicos de atrapar hasta juegos con múltiples niveles y - características desafiantes. -

-

- Además de los recursos bien documentados de la biblioteca, p5play - ofrece una gran cantidad de apoyo e inspiración para los - estudiantes y profesores en su comunidad. Esto incluye sus páginas - de aprendizaje interactivo que permiten a los estudiantes - experimentar con diferentes propiedades y métodos de la - biblioteca, su evento tri-anual Game Jam, y su canal de Discord - lleno de muchos recursos excelentes y oportunidades para encontrar - apoyo. -

-

- Nuestro equipo de Girls Who Code recomienda altamente esta - biblioteca a cualquier persona interesada en el desarrollo de - juegos. ¡No podemos esperar a ver todos los juegos que nuestros - estudiantes creen este verano con esta increíble biblioteca!" -

- -
- Amy +
+ +

+ "He encontrado la biblioteca p5play como un recurso invaluable + para introducir a los estudiantes al diseño y desarrollo de + juegos. Nuestro equipo eligió usar esta biblioteca para nuestro + Programa de Verano de Diseño de Juegos debido a sus muchas + características personalizables, recursos bien documentados, y su + API fácil de usar que lo hacen accesible para estudiantes de todas + las edades y niveles de habilidad. +

+

+ Gracias a los numerosos métodos y propiedades incluidos en esta + biblioteca, los estudiantes son capaces de llevar rápidamente sus + visiones de juego a la vida con código. Estos juegos van desde + juegos básicos de atrapar hasta juegos con múltiples niveles y + características desafiantes. +

+

+ Además de los recursos bien documentados de la biblioteca, p5play + ofrece una gran cantidad de apoyo e inspiración para los + estudiantes y profesores en su comunidad. Esto incluye sus páginas + de aprendizaje interactivo que permiten a los estudiantes + experimentar con diferentes propiedades y métodos de la + biblioteca, su evento tri-anual Game Jam, y su canal de Discord + lleno de muchos recursos excelentes y oportunidades para encontrar + apoyo. +

+

+ Nuestro equipo de Girls Who Code recomienda altamente esta + biblioteca a cualquier persona interesada en el desarrollo de + juegos. ¡No podemos esperar a ver todos los juegos que nuestros + estudiantes creen este verano con esta increíble biblioteca!" +

+ +
+ Amy +
+
Ashley Goetz
+
Curriculum Developer at
-
Ashley Goetz
-
Curriculum Developer at
- + Girls Who Code
-
-

- "Me encanta absolutamente lo que has hecho con las páginas de - Learn, qué referencia tan genial para propiedades importantes de - sprite, espero ver más de eso. Escarbando un poco en el código - fuente diría que [p5play v3] conserva mucho del atractivo de las - versiones anteriores y pude orientarme bastante rápido." -

- -
- Brad +
+
+ +

+ "Me encanta absolutamente lo que has hecho con las páginas de + Learn, qué referencia tan genial para propiedades importantes de + sprite, espero ver más de eso. Escarbando un poco en el código + fuente diría que [p5play v3] conserva mucho del atractivo de las + versiones anteriores y pude orientarme bastante rápido." +

+ +
+ Brad +
+
Bradley C Buchanan
-
Bradley C Buchanan
-
- Software Manager at - Discord -
-
- Former Software Manager at - Google -
-
- Former Software Manager at - Code.org -
+ Software Manager at + Discord
-
-
-
-

- "Muchas gracias por todo el trabajo Quinton. Con esta correcta - integración de físicas, es posible que comience a utilizar p5play - de nuevo en mis clases." -

- -
- Paolo
-
Paolo Pedercini
-
Creator of p5.play v1
-
- Professor at - Carnegie Mellon -
+ Former Software Manager at + Google
-
-
-
-

- "Añadí una unidad centrada en p5play a mi currículo de - Codificación Artística y Diseño de Juegos como una forma de - presentar la programación orientada a objetos. Los estudiantes se - adaptaron rápidamente a los sprites y grupos y estaban más que - emocionados con toda la interactividad incorporada en p5play. A - través de los juegos, los estudiantes pudieron solidificar su - comprensión de las propiedades y métodos sin siquiera darse cuenta - de que estaban aprendiendo algunos de los conceptos fundamentales - de la programación orientada a objetos. -

-

- Mis estudiantes pasaron tiempo haciendo juegos usando la - biblioteca p5play y estaban inmensamente orgullosos de sus logros. - Desde que hemos utilizado p5play, mis estudiantes ahora pueden - entender mejor las clases y han escrito incluso algunas de las - suyas propias." -

- -
- Marisa
-
Marisa Shuman
-
Computer Science Teacher at
- + Former Software Manager at + Code.org
-
-

- "p5play ha sido una gran adición a nuestro currículo. Nos ha - permitido explorar una salida más creativa para aprender la - programación orientada a objetos y ha sido invaluable en los - proyectos de sus estudiantes para sus exámenes. -

-

- Desde que introdujimos p5 y p5play, hemos visto un aumento de más - del 100% en los estudiantes y ahora estamos viendo grandes - beneficios en el aprendizaje de los estudiantes. Recomendaría - altamente la introducción de p5 & p5play en su currículo. - Ahora hemos desarrollado una serie personalizada de tutoriales en - video para permitir que más escuelas y colegios en el Reino Unido - introduzcan p5play a su currículo." -

- -
- Marisa +
+
+ +

+ "Muchas gracias por todo el trabajo Quinton. Con esta correcta + integración de físicas, es posible que comience a utilizar p5play + de nuevo en mis clases." +

+ +
+ Paolo +
+
Paolo Pedercini
+
Creator of p5.play v1
-
Rhys Drury
-
Head of Computing at
- + Professor at + Carnegie Mellon
-

- "Comparado con [Pearson Edxcel] GCSE, lo que hemos aprendido aquí ha - sido mucho más beneficioso. Con GCSE, usamos Tkinter en Python que - fue útil para hacer aplicaciones básicas. Sin embargo, ahora usando - p5play podemos hacer juegos mucho más avanzados que son interesantes - y prácticos." - Estudiante en Wyke -

- -

- "Aprender p5play realmente me ha ayudado a interesarme más en la - codificación, ya que facilita la creación de juegos. Hace que el - proceso sea menos consumidor de tiempo y más divertido." - - Estudiante en Wyke +

+
+ +

+ "Añadí una unidad centrada en p5play a mi currículo de + Codificación Artística y Diseño de Juegos como una forma de + presentar la programación orientada a objetos. Los estudiantes se + adaptaron rápidamente a los sprites y grupos y estaban más que + emocionados con toda la interactividad incorporada en p5play. A + través de los juegos, los estudiantes pudieron solidificar su + comprensión de las propiedades y métodos sin siquiera darse cuenta + de que estaban aprendiendo algunos de los conceptos fundamentales + de la programación orientada a objetos.

- -

- "Usar la biblioteca p5play en JavaScript para hacer programas - gráficos es mucho mejor que aprender Python, porque puedes ver cómo - tu código de programa influye en algo en pantalla." - Estudiante en - Wyke +

+ Mis estudiantes pasaron tiempo haciendo juegos usando la + biblioteca p5play y estaban inmensamente orgullosos de sus logros. + Desde que hemos utilizado p5play, mis estudiantes ahora pueden + entender mejor las clases y han escrito incluso algunas de las + suyas propias."

- -
- -
-
- Creator of p5play : Quinton Ashley | - @quinton-ashley - | info@p5play.org -
+
+ Marisa
- Creator of p5.play v1 : Paolo Pedercini | - molleindustria.org - | info@molleindustria.it -
-
Current Contributors: Oliver Zell, Caleb Foss, and Bobby S.
-
- Huge thanks to my student testers: Chayarat Wangweera, Zhiyuan Guo, - Aarnav Gupta, and Carter Noa! +
Marisa Shuman
+
Computer Science Teacher at
+
-
-
+
+
+ +

+ "p5play ha sido una gran adición a nuestro currículo. Nos ha + permitido explorar una salida más creativa para aprender la + programación orientada a objetos y ha sido invaluable en los + proyectos de sus estudiantes para sus exámenes. +

- p5play.org fue creado por Quinton Ashley. Copyright ©2022-2023. - ¿Buscas la - versión legado - de p5play? + Desde que introdujimos p5 y p5play, hemos visto un aumento de más + del 100% en los estudiantes y ahora estamos viendo grandes + beneficios en el aprendizaje de los estudiantes. Recomendaría + altamente la introducción de p5 & p5play en su currículo. + Ahora hemos desarrollado una serie personalizada de tutoriales en + video para permitir que más escuelas y colegios en el Reino Unido + introduzcan p5play a su currículo."

- + +
+ Marisa +
+
Rhys Drury
+
Head of Computing at
+ +
+
+
+ +

+ "Comparado con [Pearson Edxcel] GCSE, lo que hemos aprendido aquí ha + sido mucho más beneficioso. Con GCSE, usamos Tkinter en Python que + fue útil para hacer aplicaciones básicas. Sin embargo, ahora usando + p5play podemos hacer juegos mucho más avanzados que son interesantes + y prácticos." - Estudiante en Wyke +

+ + +

+ "Aprender p5play realmente me ha ayudado a interesarme más en la + codificación, ya que facilita la creación de juegos. Hace que el + proceso sea menos consumidor de tiempo y más divertido." - + Estudiante en Wyke +

+ + +

+ "Usar la biblioteca p5play en JavaScript para hacer programas + gráficos es mucho mejor que aprender Python, porque puedes ver cómo + tu código de programa influye en algo en pantalla." - Estudiante en + Wyke +

+ + +
+ +
+
+ Creator of p5play : Quinton Ashley | + @quinton-ashley + | info@p5play.org +
+
+ Creator of p5.play v1 : Paolo Pedercini | + molleindustria.org + | info@molleindustria.it +
+
Current Contributors: Oliver Zell, Caleb Foss, and Bobby S.
+
+ Huge thanks to my student testers: Chayarat Wangweera, Zhiyuan Guo, + Aarnav Gupta, and Carter Noa! +
-
- - - - - - - - - - - - \ No newline at end of file + .testimonial-bio { + display: flex; + align-items: center; + justify-content: center; + gap: 16px; + margin-top: 10px; + } + + .testimonial-text span { + line-height: 1; + padding-right: 2px; + } + + .testimonial-bio>div { + line-height: 1.25; + } + + .testimonial-bio .name { + margin-bottom: 10px; + } + + .testimonial-text span, + .testimonial-bio .name { + font-size: 20px; + font-weight: bold; + } + + .testimonial-bio img { + width: 128px; + height: 128px; + border-radius: 10px; + } + + #shields img { + height: 24px; + opacity: 80%; + } + + #topNav .socials img:not(.github) { + opacity: 80%; + } + + #topNav .discord-logo { + height: 28px; + border-radius: 40%; + } + + #topNav .github { + background-color: #aaa; + border-radius: 50%; + } + + .credits div { + width: 100%; + font-weight: 500; + text-align: center; + margin: 20px; + margin-left: 0; + } + + .credits-lg { + font-size: 24px; + } + + .credits-sm { + font-size: 16px; + } + + + + + + diff --git a/lang/es/learn/camera.html b/lang/es/learn/camera.html index c63bbeec..f9b43a73 100644 --- a/lang/es/learn/camera.html +++ b/lang/es/learn/camera.html @@ -1,42 +1,46 @@ - - - - p5play : Camera - - - - - -
- - -
- -
-

Cámara

-

- En este ejemplo, la cámara sigue el movimiento del eje x del - jugador. -

- - -
-
-

Cámara Encendida/Apagada

-

- Por defecto, allSprites.draw() se llama al final del - bucle de dibujo de p5.js. Sin embargo, si quieres controlar cuándo - se dibujan los sprites y los grupos, puedes dibujarlos por separado. -

-

- El jugador y el entorno de tu juego deben ser dibujados con la - cámara encendida. -

-

- Los sprites de la IU o HUD, representados por cuadrados naranjas en - estos ejemplos, deben ser dibujados cuando la cámara está apagada. -

-

- camera.zoom se puede utilizar para acercar y alejar la - cámara. -

-

- camera.zoomTo(target, speed) es una función asincrónica - que se puede utilizar para acercar y alejar suavemente la cámara. - Acepta un segundo parámetro opcional, la cantidad que se acercará o - alejará por frame. -

-

- mouse.x almacena la posición x del ratón en relación - con el mundo, que puede ser mayor que el canvas. - camera.mouse.x almacena la posición x del ratón en - relación con el canvas. -

- - -
-
-

- Eventos de Ratón con la Cámara -

-

- En este ejemplo, la cámara se mueve hacia la izquierda y hacia la - derecha utilizando una onda senoidal. -

-

- El sprite grande se dibuja en el espacio del mundo cuando la cámara - está encendida. El sprite grande no se mueve, pero parece que lo - hace porque la cámara se está moviendo. -

-

- El sprite pequeño se dibuja cuando la cámara está apagada en el - espacio de la pantalla (UI). Si quisieras hacer un elemento de UI en - tu juego, como un sprite de botón de pausa, deberías hacerlo cuando - la cámara está apagada. -

- - +
+ +
+ +
+
+ Creado por Quinton Ashley (@quinton-ashley) derechos de autor 2022-2023 +
+
-
- -
-
- Creado por Quinton Ashley (@quinton-ashley) derechos de autor 2022-2023 -
- - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + diff --git a/lang/es/learn/canvas.html b/lang/es/learn/canvas.html index 722946bf..f7172d12 100644 --- a/lang/es/learn/canvas.html +++ b/lang/es/learn/canvas.html @@ -1,82 +1,88 @@ - - - - p5play : Canvas - - - + + - -
- -
-
-

Temas Avanzados

-

- Estas páginas de referencia destacan algunas de las características - más avanzadas de p5play. -

-

- ¡Probablemente deberías leer las otras páginas de referencia - primero! -

- -

Canvas

-

- La clase Canvas es un envoltorio alrededor de la - versión de p5play de la función createCanvas de p5.js, - que se utiliza para crear un elemento de canvas HTML5. La versión de - p5play también proporciona algunas características adicionales. -

-

- Si no se pasan parámetros a new Canvas(), se creará un - canvas que llenará toda la ventana. -

-

- Usa canvas.w y canvas.h para obtener el - ancho y la altura del canvas. -

-

- También puedes pasar una proporción de aspecto al constructor de - Canvas. Esto creará el canvas más grande posible que se ajuste - dentro de la ventana, manteniendo la proporción de aspecto dada. Por - ejemplo, new Canvas('2:1') creará un canvas que es el - doble de ancho que alto. -

- -
-
-

modo pixelado

-

- Otra característica añadida es el preset "pixelado". ¡Úsalo para - crear juegos retro al estilo de 8-bit o 16-bit! -

-

- Por defecto, el preset "pixelado" escala el canvas para que se - ajuste a la pantalla mientras mantiene su proporción de aspecto, - pero también puedes definir una escala personalizada pasando un - número después del nombre del preset. -

-

- Por ejemplo, "pixelado x2" creará un canvas que se mostrará al doble - del tamaño del ancho y la altura especificados. -

- -
- - -
+ -
-
- Página anterior - - Siguiente página +
+
+ Página anterior + -
-
- Creado por Quinton Ashley (@quinton-ashley) derechos de autor 2022-2023 -
-
+ Siguiente página + +
+
+ Creado por Quinton Ashley (@quinton-ashley) derechos de autor 2022-2023 +
+ + + + + + + + + - - - - - - - + - \ No newline at end of file + diff --git a/lang/es/learn/group.html b/lang/es/learn/group.html index 28995bd7..a71408ea 100644 --- a/lang/es/learn/group.html +++ b/lang/es/learn/group.html @@ -1,56 +1,60 @@ - - - - p5play : Group - - - - - -
- -
-
-

¿Qué es un Grupo?

-

- En p5play, un Grupo es una colección y un plano para sprites con - características y comportamientos similares. ¡Por ejemplo los puntos - en Pac-Man! -

-

- La propiedad group.length se puede usar para comprobar - cuántos sprites hay en un grupo. En este ejemplo, la condición del - bucle while es verdadera siempre que el grupo de puntos tenga menos - de 24 sprites. -

-

- En el mini ejemplo, new dots.Sprite crea un sprite que - hereda el color del grupo de puntos, la posición y y el diámetro. A - cada punto se le asigna una posición x única. -

-

- Llamo a esto "herencia suave" porque un grupo actúa como un plano - para los nuevos sprites del grupo. -

- - -

- Puedes acceder a un sprite en un grupo por índice porque los grupos - son arrays. Puedes usar cualquiera de los métodos estándar de array - de JavaScript en un grupo. -

- - -

- ¡Establecer una propiedad de un grupo a un valor diferente afectará - a todos los sprites en el grupo! Llamo a esto "herencia dinámica". -

- - -

- Usar funciones de movimiento como group.moveTowards, - hará que todos los sprites en un grupo se muevan. -

- - -
-
-

- Establecedores de propiedades de función de flecha -

-

- En p5play, cuando estableces una propiedad de sprite en un grupo a - una función de flecha, cada nuevo sprite creado usando ese grupo - utilizará la función para evaluar la propiedad. -

-

- Cuando group.amount se ajusta, el grupo creará o - eliminará automáticamente sprites para coincidir con la cantidad - establecida. -

-

- En este mini ejemplo, a cada sprite de gema se le asigna una - posición x e y aleatoria. -

- - -
-
-

Superposición de grupo

-

- La función de superposición no es sólo para manejar si dos sprites - se superponen. También puedes comprobar si un sprite se superpone - con un sprite en un grupo. -

-

- En este mini ejemplo, la función collect recibe como entradas al - jugador y la gema en el grupo de gemas con la que el sprite del - jugador se está superponiendo. Esa gema se elimina. -

-

- También puedes usar las funciones de superposición y colisión en - grupos. -

- - -
-
-

Grupo allSprites

-

- p5play crea un grupo allSprites que contiene todos los - sprites en un sketch. -

- - -
-
-

- Establecedores de funciones de flecha indexados -

-

- ¡Incluso puedes usar su índice al evaluar una propiedad de sprite de - grupo! -

-

- i es el índice del sprite en el grupo, que se da como - un parámetro de entrada a las funciones de propiedad del grupo - cuando se evalúan. -

- - -
-
-

Sub Grupos

-

- En este mini ejemplo hay dos subgrupos del grupo boxes: - smallBoxes y bigBoxes. -

-

- Los nuevos sprites creados usando el grupo - bigBoxes heredarán rasgos del grupo - boxes pero no del grupo smallBoxes. -

-

- El grupo boxes contiene todos los sprites en los grupos - smallBoxes y bigBoxes. -

-

- La función group.removeAll se puede usar para eliminar - todos los sprites de un grupo. -

- - -
-
-

Culling

-

- Por defecto, los sprites se eliminan cuando se van 10000 píxeles - fuera de la pantalla en relación con la posición de la cámara. Esto - es para evitar que el mundo se haga demasiado grande, lo que - ralentizaría la simulación física. -

-

- Para cambiar esto, establece - allSprites.autoCull = false y usa la función - group.cull para establecer un límite de culling - diferente. Incluso puede cull sprites que no tienen un collider - físico. -

-

- Un último parámetro opcional se puede utilizar para especificar una - función de callback que se llamará cuando un sprite sea cullado. La - respuesta por defecto al culling es eliminar el sprite que salió del - límite de culling pero al establecer tu propia función puedes hacer - algo más. La función de callback recibe el sprite que fue cullado y - un recuento total de cuántos sprites fueron cullados en ese - fotograma. En este ejemplo, la cantidad de bolas disminuye si más de - una bola es cullada en un fotograma. -

- - -

vida

-

- Otra forma de limitar cuánto tiempo existe un sprite es establecer - su propiedad life, que es el número de fotogramas que - el sprite existe. Cuando la vida del sprite se acaba, será - eliminado. Esto es útil para crear objetos temporales como - proyectiles y campos de fuerza. -

-

- ¡Prueba este pequeño juego! Haz clic con el ratón para crear una - pelota de playa e intenta mantenerla en el aire con el chorro de - agua. -

- - -
-
-

Propiedades Personalizadas

-

- ¡Puedes añadir tus propias propiedades a los sprites y grupos, al - igual que con cualquier otro objeto de JavaScript! -

-

- Además, cuando añades propiedades personalizadas a un grupo, serán - heredadas por los nuevos sprites del grupo. Incluso puedes usar - funciones de flecha como establecedores de propiedades. -

- - +
+ +
+ +
+
+ Creado por Quinton Ashley (@quinton-ashley) derechos de autor 2022-2023 +
+
-
- -
-
- Creado por Quinton Ashley (@quinton-ashley) derechos de autor 2022-2023 -
- - - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + + diff --git a/lang/es/learn/index.html b/lang/es/learn/index.html index 1070180e..6956e42b 100644 --- a/lang/es/learn/index.html +++ b/lang/es/learn/index.html @@ -1,131 +1,138 @@ - - - - p5play : Learn - - - - - -
- + + + + + + + p5play : Learn + + + + + +
+ -
-
- -
-
- -
-

Referencia

-

- Estas páginas de referencia "Aprender" proporcionan mini-ejemplos - interactivos para las características más importantes de p5play. - Fueron escritas por Quinton Ashley, creador de p5play v3 y se - ofrecen como un recurso público para la comunidad de p5play. -

-

- ¿No puedes encontrar lo que estás buscando? Prueba con la - documentación completa de - p5play, - p5.js, o - p5.sound - o mira algunas - demos. -

- -
- +
-
- Creado por Quinton Ashley (@quinton-ashley) derechos de autor 2022-2023 -
-
- - - - - - - + } + + + + - \ No newline at end of file + diff --git a/lang/es/learn/input_devices.html b/lang/es/learn/input_devices.html index 226c27eb..f860da31 100644 --- a/lang/es/learn/input_devices.html +++ b/lang/es/learn/input_devices.html @@ -1,58 +1,62 @@ - - - - p5play : Input - - - + + - -
- + + + + p5play : Input + + + -
+ +
+ -
-

Dispositivos de entrada

-

Aquí están los dispositivos de entrada disponibles en p5play:

-
    -
  • kb o keyboard para el teclado
    • -
  • mouse para el ratón
    • -
  • - contro o controllers para los - controladores de juegos -
    • -
-

- Todos estos dispositivos de entrada utilizan las mismas funciones - simples para obtener el estado de una entrada: presses, - pressing y released. -

-

- También almacenan el estado de todas sus entradas como propiedades. - Por ejemplo, kb.space almacena cuántos frames ha estado - presionando el usuario la tecla espacio. Se reinicia cuando el - usuario suelta la entrada. -

- - -
- - - - -
-
-

Teclado

-

- En los juegos de PC, las teclas WASD se utilizan comúnmente para - controlar el movimiento del personaje del jugador. En p5play puedes - usar los nombres de las direcciones 'up', 'down', 'left' y 'right' - para detectar las presiones de las teclas WASD y las teclas de - flecha. -

-

- Si quieres usar WASD y las teclas de flecha por separado puedes usar - estos nombres de teclas para detectar las presiones de las teclas de - flecha: 'ArrowUp', 'ArrowDown', 'ArrowLeft' y 'ArrowRight'. Usar las - teclas IJKL para el movimiento es común para apoyar a los jugadores - zurdos o a los segundos jugadores en juegos locales de dos - jugadores. Estas teclas pueden ser referenciadas usando: 'up2', - 'down2', 'left2', y 'right2'. Algunos teclados no empiezan con - QWERTY en la fila superior. p5play mapea otros layouts de teclado al - layout estándar inglés QWERTY. Por ejemplo, las teclas WASD para los - usuarios del teclado francés AZERTY son ZQSD. Esto puede ser - desactivado estableciendo p5play.standardizeKeyboard en - falso. - Más info -

- - -
-
-

Multi-Entrada

-

- Este mini-sketch muestra cómo una acción puede ser realizada - presionando la tecla espacio o haciendo clic con el ratón. La - entrada de ratón por defecto es 'left' para el botón izquierdo del - ratón o clic normal. -

- - - -
-
-

Ratón Sprite

-

- Los sprites con colisionadores físicos tienen su propio objeto ratón - para detectar las entradas del ratón en el sprite. Los objetos - sprite.mouse son justo como el objeto de entrada - mouse, excepto que tienen funciones adicionales. -

-

- hovers y hovering detectan cuando el - usuario mueve el ratón sobre un sprite. -

-

- dragging detecta cuando el usuario hace clic y mantiene - un botón del ratón en el sprite mientras mueve el ratón. Nota que - mouse.x es la posición x del ratón en el lienzo y - sprite.mouse.x es la posición x del ratón relativa al - sprite. -

- - -
-
-

Controladores de juegos

-

- El objeto contro o controllers proporciona - el estado de entrada de los botones del controlador de juegos: -

-

- "a", "b", "x", "y", "l" (gatillo izquierdo), "r" (gatillo derecho), - "lt" (gatillo izquierdo), "rt" (gatillo derecho), "up", "down", - "left", "right" (dpad), "start" y "select" -

-

- También proporciona las posiciones del eje x y - y de los sticks analógicos: leftStick y - rightStick. Los valores del eje varían entre -1 y 1, - donde 0 es el centro. -

-

- El objeto contro también es un array que contiene todos - los controladores de juegos conectados detectados por tu navegador - web. Accede a los controladores conectados por índice. Por ejemplo, - contro[0] y contro[1] son los primeros y - segundos controladores. Por defecto contro hace - referencia a contro[0]. -

-

- ¡Pruébalo! Presiona cualquier botón en tu controlador de juegos - conectado para que sea detectado por p5play. -

- - -
-
-

Tocar

-

Ejemplo próximamente!

- -
+ +
+ +

Tocar

+

Ejemplo próximamente!

+ +
-
-
+ Siguiente página + +
+
+ Creado por Quinton Ashley (@quinton-ashley) derechos de autor 2022-2023 +
+
+ + + + + + + + - - - - - - - + - \ No newline at end of file + diff --git a/lang/es/learn/joints.html b/lang/es/learn/joints.html index ce945d96..c59aa8ce 100644 --- a/lang/es/learn/joints.html +++ b/lang/es/learn/joints.html @@ -1,48 +1,52 @@ - - - - p5play : Joints - - - - - -
- -
-
-

Joints

-

- A joint connects the physics colliders of two sprites, limiting - their movement relative to each other. -

-

- Joint constructors accept two sprites as input. At least one of the - sprites in a joint must have a dynamic physics collider. -

-

- Every sprite has a sprite.joints array, which contains - all the joints it's currently connected to. -

- - -

GlueJoint

-

- Do you like crafting in Legend of Zelda: Tears of the Kingdom? Then - you'll love glue joints! -

-

- A GlueJoint is the simplest type of joint, it just - glues two sprites together. The sprites don't have to be touching - and they won't un-glue unless you remove the joint. -

-

- But wait, why use a glue joint instead of - sprite.addCollider? -

-
    -
  • each sprite can have its own physics properties
    • -
  • each sprite can detect collisions separately
    • -
  • removing a joint doesn't remove the sprites
    • -
-

- Try gluing and un-gluing the stick and ball sprite in the mini - example. If you want a challenge, throw the ball straight up in the - air and try to stick it to the top of the stick! -

- - -
-
- -

DistanceJoint

-

- By default, a DistanceJoint is attached at the center - of each sprite that it's connected to. To shift the joint's - attachment points, edit its offsetA and - offsetB vectors. -

-

- Adjusting the joint's springiness ratio changes the - amount it can stretch and compress. -

-

- 0.0 = steel rod (default)
0.2 = stiff - spring
0.4 = tight spring
0.6 = - bouncy spring
0.8 = slinky
1.0 - = bungee cord -

-

- You can also adjust the joints's damping ratio to - change how quickly it loses vibrational energy. -

- - -
-
-

WheelJoint

-

- A WheelJoint connects a vehicle body to a wheel. Use - wheel joints to create drive-able vehicles! -

-

- Every wheel joint has a motor, which can be enabled by setting the - joint's speed to the desired motor speed, - maxPower to a positive value, or - motorEnabled to true. -

-

- Disabling a wheel joint motor is like putting a car in neutral, it - causes the wheel to roll freely. The joint's speed must be set to - zero for the wheel to brake. -

-

- By default, wheel joints have a maxPower of 1000, - springiness of 0.1, damping of 0.7, and - angle of attachment angle of 90 degrees. -

-

- Try driving the car in this example! Can you make it to the end of - the road? Customize the car by changing the position of its wheels - and the angle at which they're attached. -

- - - -
-
-

HingeJoint

-

- A HingeJoint enables one or two sprites to rotate - around the same attachment point. -

-

- Hinge joints with a small maxPower and default - speed of zero apply braking force to resist being - moved. -

-

- Try clicking around this example to drop small boxes on the seesaw. - How many boxes can you put on the seesaw before it tips? -

- - -
-
-

SliderJoint

-

- A SliderJoint constrains the motion of two sprites to - sliding along a common axis, without rotation. -

-

- The joint's range determines how far apart the - connected sprites can be from each other. Changing the joint's - angle changes the direction the sprites can slide in. -

-

- By default the joint's motor is enabled with a speed of - 0, so maxPower determines how much the joint can resist - sliding. -

-

- Try dropping boxes on the scale by clicking with your mouse. How - many boxes can you stack on the scale before it reaches its limit? - Try changing its angle too. -

- - +
+ +
+ +
+
+ Creado por Quinton Ashley (@quinton-ashley) derechos de autor 2022-2023 +
+
-
- -
-
- Creado por Quinton Ashley (@quinton-ashley) derechos de autor 2022-2023 -
-
- - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + diff --git a/lang/es/learn/sprite.html b/lang/es/learn/sprite.html index d6f92231..61c18c50 100644 --- a/lang/es/learn/sprite.html +++ b/lang/es/learn/sprite.html @@ -1,54 +1,58 @@ - - - - p5play : Sprite - - - - - -
- - -
- -
-

Configuración

-

- El código dentro de la función setup de p5.js (o q5.js) - se ejecuta cuando comienza el programa. El constructor - new Canvas() crea una sección de la pantalla en la que - el programa puede dibujar. -

-

- La función draw de p5.js se ejecuta 60 veces por - segundo por defecto. La función background se puede - usar para llenar el canvas con un color cada vez que se dibuja. -

-

- ¡Intenta cambiar el ancho y la altura del canvas (los números dentro - del constructor Canvas), luego reinicia el programa de - ejemplo! -

- - -
-

¿Qué es un sprite?

-

¡Un sprite es un fantasma!

-

- Los desarrolladores de videojuegos usan la palabra "sprite" para - referirse a personajes, objetos, o cualquier otra cosa que se mueva - sobre un fondo. -

-

- El constructor new Sprite() crea un objeto sprite, el cual contiene - variables que definen la posición, tamaño y apariencia de un sprite. -

-

- ¡Intenta editar las propiedades de los sprites de caja y círculo en - los mini ejemplos a continuación! -

- -
- - -
-
- - - - - - -
+
-
- - - - - - -
-
-
-

¡Pruébalo!

-

- Intenta convertir el sprite llamado ball en un - círculo azul con un diámetro de 30 y colócalo en la esquina - superior derecha del canvas. -

- - -
- - -
-

Física de los sprites

-

- El colisionador de un sprite se utiliza para detectar colisiones con - otros sprites. Por defecto, los sprites tienen un colisionador de - física 'dynamic' que permite que el sprite se mueva - libremente y sea afectado por la gravedad. -

-

- Los colisionadores 'static' no pueden moverse. Los - colisionadores 'kinematic' pueden moverse - programáticamente pero no por otros sprites. Además, no colisionarán - con otros colisionadores kinemáticos. Establecer el tipo de - colisionador de un sprite a 'none' lo elimina de la - simulación física. -

-

- El tipo de colisionador también puede establecerse usando la primera - letra del nombre del tipo de colisionador: 'd', - 's', 'k', o 'n'. -

-

- ¡Haz clic en el icono de recargar en la esquina superior derecha de - un mini ejemplo para volver a reproducirlo! -

- - -
- - -
+
-
- - -
-
-
-

¡Pruébalo!

-

- Intenta crear un sprite llamado peg con un - colisionador estático y forma de círculo. Crea un sprite - block con un colisionador dinámico y forma de caja. - Posiciona el bloque de modo que golpee el clavo y caiga hacia la - derecha. -

-

- Cada vez que la función draw de p5.js termina, los - sprites se dibujan y actualizan automáticamente. Nota que - world se crea cuando se carga p5play pero por defecto - no hay gravedad. Intenta establecer - world.gravity.y en un número positivo. -

-

- Para un desafío adicional, intenta restablecer la posición - original del bloque después de que caiga. -

- - -
- - -
- -

Movimiento de los sprites

-

¡Cambiar la posición de un sprite lo teletransporta!

-

Intenta hacer clic alrededor de este mini-ejemplo.

- - -

- El siguiente ejemplo muestra qué sucede si un sprite se - teletransporta cada vez que la función de dibujo de p5.js renderiza - un frame. -

-

- Si quieres que un sprite interactúe físicamente con otros sprites - mientras se mueve, ¡no lo teletransportes! -

- - -

- Todos los otros métodos de movimiento en esta página funcionan - cambiando las velocidades de los ejes x e y del sprite. - velocity también conocida como vel es un - Vector de p5.js, puedes usar cualquier función de Vector en él. -

-

- Puede que tengas que reiniciar este ejemplo para ver moverse al - sprite. -

- - -

- Mueve el sprite indefinidamente estableciendo su - direction y speed. -

-

- También puedes establecer la dirección de un sprite usando un nombre - de dirección como: 'up', 'down', 'left', 'right', 'upLeft', - 'upRight', 'downLeft', 'downRight'. -

-

- Nota que p5play convierte estos nombres de dirección a sus - correspondientes valores de ángulo. -

- - -

- La función move mueve un sprite a través de una - distancia fija. La dirección y la velocidad del movimiento pueden - especificarse como parámetros de la función o establecerse por - separado. -

- - -

- La función moveTowards mueve un sprite hacia una - posición, a un porcentaje de la distancia a esa posición. -

-

- En este ejemplo, el jugador se mueve el 10% de la distancia al ratón - en cada llamada de dibujo de p5.js. Su velocidad, y la fuerza que - ejerce sobre el bloque, es proporcional a la distancia que se mueve. -

- - -

- La función moveTo genera un impulso que mueve un sprite - a una posición a una velocidad constante. -

-

- Pero ten en cuenta que si el sprite es actuado por una fuerza como - la gravedad o choca con otro sprite, su velocidad y dirección se - verán afectadas y puede que no llegue a la posición objetivo. -

-

- Cualquier función de movimiento que acepte un objeto con propiedades - x e y podría en su lugar ser llamada con números de posición (x, y). -

- - -

- Esperamos que los ejemplos en esta página te ayuden a entender - algunas de las opciones de movimiento disponibles en p5play. -

-

- Ten en cuenta que las funciones move, moveTo y moveTowards anulan el - movimiento actual de un sprite, obligándolo a moverse en una nueva - dirección. ¡Eso podría no ser siempre lo que quieres! -

-

- Para aprender más sobre el movimiento de sprites, lee las páginas de - "Secuenciación de Movimientos" y "Movimiento Avanzado". -

- - -
-
-

Imagen de sprite

-

- sprite.image o sprite.img puede - establecerse en una p5.Image o una ruta de url a un archivo de - imagen. -

-

- Si necesitas que una imagen se cargue antes de que comience tu - programa, es mejor usar - loadImage - dentro de la función preload de p5.js. -

-

- sprite.scale cambia el tamaño tanto del colisionador - del sprite como de su apariencia visual. Un valor de escala de 2 - duplica el tamaño del sprite. -

-

- Intenta presionar el botón izquierdo del ratón. Cuando la propiedad - sprite.debug está establecida en true puedes ver el - colisionador del cuerpo físico del sprite. ¡Puedes hacer que el - tamaño del colisionador sea diferente del tamaño de la imagen! -

- - -

¡Haz Pixel Art!

-

- Puedes usar la función spriteArt para crear imágenes de - pixel art para tus sprites. Toma una cadena como entrada y devuelve - una imagen. Cada carácter en la cadena representa el valor de color - de un píxel en la imagen. -

-

- El segundo parámetro de entrada a la función - spriteArt es la escala de la imagen. -

- - -

- La paleta predeterminada usa colores predeterminados de p5.js pero - ¡también puedes cambiar la paleta de colores! -

- - -
-
-
-

Crea Sprites más rápido

-

- Dentro del constructor de Sprite, new Sprite(), - puedes especificar la posición, el tamaño y el tipo de - colisionador del sprite. -

-

- Como viste en las páginas de referencia de Sprite anteriores, no - necesitas agregar ninguna entrada al constructor de Sprite para - crear un sprite. Pero si quieres establecer el tamaño de un sprite - en el constructor, necesitarás especificar su posición primero. -

-

- Por defecto, si no se dan entradas al constructor de Sprite, los - nuevos sprites se posicionan en el centro del lienzo, con un ancho - y altura de 50 píxeles, y un colisionador dinámico. -

- - -
-
- - -
-
-

¡Pruébalo!

-

Intenta crear dos sprites usando el constructor de sprite.

- - -
-
-

Colisiones

-

- En el primer fotograma en que un sprite colisiona con otro sprite, - la función collides devuelve true. -

-

- Mientras un sprite está colisionando con otro sprite, la función - colliding devuelve el número de fotogramas que ha - ocurrido la colisión. -

-

- En el primer fotograma después de que dos sprites colisionaron, la - función collided devuelve true. -

- - - - -
-
-

Superposiciones

-

- ¡Los sprites colisionan por defecto, pero también pueden - superponerse! -

- - -

Capa

-

- Por defecto, los sprites se dibujan en el orden en que fueron - creados. Puedes cambiar el orden de dibujo editando la propiedad - .layer del sprite. Los sprites con el valor de capa más - alto se dibujan primero. -

- - -

- En el primer fotograma en que un sprite se superpone con otro - sprite, la función overlaps devuelve true. -

-

- Mientras un sprite se superpone con otro sprite, la función - overlapping devuelve el número de fotogramas que ha - ocurrido la superposición. -

-

- En el primer fotograma después de que dos sprites se superpongan, la - función overlapped devuelve true. -

-

- Ten en cuenta que las interacciones físicas entre sprites, - incluyendo colisiones y superposiciones, no pueden detectarse - correctamente cuando un sprite es teletransportado, ¡su posición - cambia directamente! -

- - -
-

¡Pruébalo!

-

- Intenta hacer que el sprite azul cambie a rojo solo si se superpone - con el sprite rojo. -

-

- Tenga en cuenta que este ejemplo utiliza tonos personalizados de - azul y rojo mediante la utilización de la función - color de p5.js -

- - -
-

- Cambiar entre superposiciones y colisiones -

-

- Por defecto, si compruebas si hay una superposición entre dos - sprites, ya no colisionarán. Puedes anular esto comprobando si hay - una colisión entre los sprites. -

-

- En este ejemplo, al presionar la tecla de espacio se permite - temporalmente al jugador atravesar la pared como un fantasma. -

- - -
-
- - -

Rotación de Sprite

-

- Cambiar directamente la propiedad rotation de un sprite - lo teletransportará al ángulo de rotación especificado. -

-

- ¡No teletransportes un sprite si quieres que interactúe físicamente - con otros sprites mientras está rotando! -

- - -

- Todos los otros métodos de rotación en esta página funcionan - cambiando la rotationSpeed del sprite. -

- - -

- Usa la función rotate para rotar un sprite una - cantidad. -

-

- El segundo parámetro opcional es la velocidad a la que rota el - sprite por fotograma. -

- - -

- Usa la función rotateTo para rotar un sprite a un - ángulo. La velocidad de rotación se puede dar como un segundo - parámetro opcional. -

-

- Alternativamente, si a la función se le da un objeto con coordenadas - x, y, el sprite girará para enfrentar esa posición. El ángulo "de - frente" es el ángulo en el que debería estar el sprite cuando está - enfrentando la posición objetivo. Intenta cambiarlo de 0 a 90. - Cuando hagas clic, el lado largo del sprite girará para enfrentar el - ratón. -

- -
- - -
-

- Usa la función rotateTowards para girar un sprite hacia - un ángulo o hacia una posición. -

-

- El segundo parámetro opcional es la velocidad de seguimiento, un - porcentaje de la distancia que el sprite se mueve en cada fotograma - al ángulo de rotación objetivo, 0.1 (10%) por defecto. -

- - -

- Usa la propiedad offset para mover el cuerpo físico del - sprite en relación con su centro. -

-

- Cuando sprite.debug es true, el centro del sprite está - marcado con una pequeña cruz verde. El punto central es donde se - encuentran las coordenadas x e y del sprite. También es el centro de - rotación. -

- - -
-
-

- Secuenciación de movimientos -

-

- Estos ejemplos utilizan un sprite Turtle que es - simplemente un sprite regular que es verde y tiene forma de - triángulo para ese aspecto clásico de la programación de tortugas. -

-

- Puedes usar la palabra clave await dentro de una - función async para esperar a que un movimiento termine - antes de continuar con el siguiente movimiento. Esto es útil para - hacer que un sprite se mueva en secuencia. -

- - -

- Las funciones move, moveTo, - rotate, y rotateTo todas devuelven una - Promise que se resuelve a true cuando el movimiento ha - terminado. -

-

- Pero, si el movimiento del sprite se interrumpe por un nuevo - movimiento o una colisión que cambia significativamente la - trayectoria del sprite, la promesa se resolverá a false. -

- - -
-
-

Atributos físicos

-

- Los Sprites tienen atributos físicos que afectan cómo interactúan - con el mundo. Echa un vistazo a los mini-ejemplos para ver estos - atributos en acción. -

- - - -
- - -
-
- - - - -
-
- - - - -
-

- Por defecto, la mass se asigna en función del tamaño - del sprite. Cuanto mayor sea el sprite, más masa tendrá. La masa - también puede ser ajustada manualmente. -

-

- Intenta cambiar la masa de uno de los sprites en este mini-ejemplo. -

- - -
-

Bugs en planck

-

- p5play usa el motor de física planck, que normalmente ofrece - interacciones físicas de apariencia realista, pero no es perfecto. -

-

- En este mini-ejemplo, la bola tiene una bounciness de - 1, así que cada vez que la bola rebota debería volver a su posición - inicial. Sin embargo, debido a un bug en planck, la bola rebota cada - vez más alto cada vez que golpea el suelo. -

- - -

- Esperemos que el bug se solucione en una futura versión de planck o - p5play, pero hasta entonces aquí tienes una solución alternativa. -

-

- El bug de bounciness es más notorio cuando un - colisionador rebota en una superficie plana. Aquí tienes una - solución alternativa que sobrescribe la velocidad y de la bola - después de que colisiona con el suelo. -

- - -

- En este ejemplo, el color del bloque es rojo cuando está - colisionando con la plataforma móvil. Aunque podrías esperar que el - bloque se mantenga rojo mientras está siendo levantado por la - plataforma, parpadea entre rojo y azul. -

-

- En la vida real, cuando una persona sube a un ascensor y este sube, - diríamos que esa persona estaría colisionando con el suelo del - ascensor durante todo el trayecto. -

-

- En planck, sin embargo, cuando los colisionadores son desplazados - por otros colisionadores, constantemente colisionan y dejan de - colisionar entre sí. -

- - -
-
-

Colisionadores de Cadena

-

- Hay tres modos de cadena diferentes: vértice, distancia y línea. -

-

- Para usar el modo vértice, proporciona al constructor Sprite un - array de arrays de vértices. Cada array de vértices debe contener - coordenadas [x, y]. En estos mini-ejemplos, la posición (x, y) del - sprite está resaltada por un pequeño cuadrado negro. -

-

- ¡Intenta cambiar los vértices del sprite de cadena en el - mini-ejemplo para que la bola se quede en el suelo! -

- - -

- Para usar el modo distancia, proporciona al constructor Sprite una - posición (x, y) y un array de arrays de distancia. Estos arrays - deben contener distancias [x, y] relativas al vértice anterior. La - posición (x, y) será el primer vértice de la cadena. -

-

El modo distancia es el mejor para crear cadenas súper largas.

-

- Intenta añadir 5 distancias para hacer que el suelo suba y baje en - una cadena de suelo rocoso. -

- - -

- Para usar el modo línea, proporciona al constructor Sprite una - posición (x,y) y una lista de longitudes de línea y ángulos. Cada - ángulo es relativo al ángulo de la línea anterior. -

-

- Es mejor usar el modo línea para cadenas pequeñas y/o simétricas. -

-

- Nota que la posición (x, y) de la cadena del modo línea se ubica en - el promedio de todos sus vértices, lo cual puede no ser un punto en - la cadena. -

-

¡Intenta cambiar las longitudes de estas líneas y sus ángulos!

- - -
-
-

Colisionadores de Polígonos

-

- Los polígonos regulares pueden crearse proporcionando al constructor - Sprite una longitud de lado y el nombre del polígono. -

-

- Estos son los nombres que puedes usar: triángulo, cuadrado, - pentágono, hexágono, septágono, octágono, eneágono, decágono, - hendecágono y dodecágono. -

- - -

- Si el inicio y el final de una cadena están en el mismo punto y la - forma resultante es convexa, ¡se convierte automáticamente en un - polígono! -

- - -

- Independientemente de si un sprite es un polígono o una cadena, - todos los cuerpos físicos que comienzan y terminan en el mismo punto - tienen su posición (x, y) ubicada en el centro de la forma, no en el - primer vértice. Esta posición se calcula promediando todos los - vértices de la forma. -

- - -

- Puedes forzar a que un polígono convexo sea una cadena estableciendo - sprite.shape = 'chain' -

-

- Los polígonos regulares pueden crearse a partir de una lista con la - longitud de línea, ángulo y repetición. -

-

- La fórmula para el ángulo de un polígono regular es 360 / n, donde n - es el número de lados. Haz que ese ángulo sea negativo para orientar - el polígono con uno de sus bordes en la parte superior. -

-

¡Intenta hacer una cadena en forma de cuadrado!

- - -

- Aquí está el código para hacer una estrella regular con cinco - puntos. -

-

- Nota que debido a que la estrella es una forma cóncava, no puede - tener un colisionador de polígono. -

-

¡Intenta cambiar el número de puntos!

- - -

¡Ahora puedes ver cómo se hizo el logotipo de p5play!

-

- Incluso las cadenas cerradas como esta están hechas de líneas y - están vacías por dentro. En el ejemplo de la página principal de - p5play, puedes ver cómo los colisionadores de cadena pueden contener - muchos otros sprites dentro de ellos! -

- - -

- Nota que los colisionadores de cadena cerrada no son tan buenos para - ser colisionadores dinámicos. Esta es una limitación del motor de - física Box2D que utiliza p5play. -

- - -
-
-

Dibujo personalizado

-

- A veces no podrás usar animaciones predibujadas para obtener el tipo - de efecto visual que quieres para un sprite en movimiento. -

-

- Afortunadamente, puedes personalizar la función - draw del sprite y hacer que muestre cualquier cosa que - quieras! -

-

- Ten en cuenta que dentro de la función de dibujo del sprite, el - centro del sprite se traduce a la posición (0, 0). -

-

- Este mini ejemplo rota la elipse del sprite en la dirección en la - que se está moviendo y hace que la elipse se estire en esa dirección - proporcionalmente a su velocidad. ¡Un poco complicado! -

-

Actualización personalizada

-

- También puedes definir una función de actualización personalizada - para un sprite que se ejecuta al final del bucle de dibujo o cuando - se llama a updateSprites. Puedes poner cualquier comportamiento - específico del sprite que quieras allí. -

- - -
-
-

escala

-

- Cambiar sprite.scale escalará el colisionador del - sprite y la apariencia visual por la cantidad especificada. -

-

- Presiona una tecla numérica para ver el sprite escalar uniformemente - por esa cantidad. -

-

Presiona "d" para duplicar la escala del sprite.

-

- Presiona "x" o "y" para escalar el sprite en esa dirección por una - cantidad aleatoria. Pero ten en cuenta que si el sprite se escala de - manera desigual, la imagen se distorsionará y permanecerá así - incluso cuando se escale uniformemente de nuevo. -

- - -
-
-

Colisionadores Combo

-

- Usando la función addCollider, puedes agregar varios - colisionadores a un sprite. -

-

- ¡Pero solo usa esta función cuando realmente sea necesario para el - juego! -

-

- Normalmente, si algo requiere muchos colisionadores, como las - paredes de un laberinto, simplemente deberías crear varios sprites, - cada uno con su propio colisionador. -

-

- Además, incluso si la imagen de un sprite es compleja, típicamente - una caja o círculo será suficiente para las interacciones físicas, - especialmente para sprites pequeños. -

-

- Sin embargo, a veces, realmente necesitarás crear un sprite con - varios colisionadores. ¡Por ejemplo, si quieres modelar un flipper - de pinball! -

- - -
-
-

- Si quieres que un sprite siga a otro sprite, es posible que te - sientas tentado a usar moveTo repetidamente sin esperar - a que el sprite alcance su destino. Sin embargo, para obtener un - mejor rendimiento, prueba a utilizar la función - angleTo, que obtiene el ángulo entre un sprite y una - posición. Este ángulo se puede utilizar para cambiar la dirección en - la que se mueve el sprite. -

-

- En este ejemplo, se utiliza la función - dist de p5.js - para calcular la distancia entre el jugador y su aliado. -

- - - -

- Las funciones move anulan las velocidades de un sprite, pero ¿qué - pasa si quieres que un sprite respete otras fuerzas que actúan sobre - él, como la gravedad? -

-

- Puedes sumar o restar directamente a las velocidades de un sprite, o - usar las funciones applyForce. -

- - +
+ +
+
- - - - - - - - - - - \ No newline at end of file + Siguiente página + +
+
+ Creado por Quinton Ashley (@quinton-ashley) derechos de autor 2022-2023 +
+ + + + + + + + + + + + + + diff --git a/lang/es/learn/sprite_animation.html b/lang/es/learn/sprite_animation.html index 864a1884..f5b0e7e6 100644 --- a/lang/es/learn/sprite_animation.html +++ b/lang/es/learn/sprite_animation.html @@ -1,57 +1,61 @@ - - - - p5play : Animation - - - - - -
- - -
- -
-

Cómo cargar animaciones

-

- Una animación es una serie de imágenes que se muestran una después - de la otra a una velocidad suficiente para dar la apariencia de - movimiento. -

-

- La función loadAni tiene tres modos diferentes: - secuencia, lista y hoja de sprites. -

-

- En este mini ejemplo, la animación de la nube respirando se carga - utilizando una secuencia numerada de imágenes dada la ruta a la - primera imagen y el índice de la última imagen en la secuencia. -

-

- La función animation es similar a la función - image de p5.js. Úsala en la función draw de p5.js para - mostrar una animación en una posición. -

- - -

- En este mini ejemplo, la función loadAnimation recibe - una lista de imágenes. -

-

- La propiedad ani.frameDelay define cuántos frames se - muestra una imagen en la animación antes de que se muestre la - siguiente imagen. El valor predeterminado es 4. Los valores más - altos hacen que la animación se reproduzca más lentamente. Un - retraso de frame de 1 haría que la animación se reproduzca lo más - rápido posible. -

-

¡Pruébalo! Intenta cambiar el frameDelay en este mini-ejemplo.

- - -

- Este mini ejemplo carga una animación desde una hoja de sprites, que - es una sola imagen que contiene todos los frames de una animación. - Echa un vistazo a la hoja de sprites en este sketch que se muestra - sólo para que puedas ver cómo es una. -

-

- En el modo de hoja de sprites, se puede utilizar un objeto atlas - para especificar el tamaño de cada frame y cuántos frames de - animación hay. -

-

- Si realmente necesitas usar una animación cuando tu programa - comienza, deberías cargarla en la función preload de p5.js en lugar - de en setup. -

- - -
-
-

Animando

-

p5play te da control total sobre tus animaciones.

-

- ¡Intenta usar tu teclado para probar algunas de las diferentes - formas de controlar las animaciones! -

- - +
+
+
+ +

Sprites con Animaciones

+

+ La función sprite.addAni puede agregar una animación a un sprite. + También puede cargar la animación, al igual que loadAni. Como un + primer parámetro de entrada opcional, puedes proporcionar un + nombre para la animación. +

+

+ Intenta presionar el botón izquierdo del ratón. Cuando la + propiedad sprite.debug está configurada como + verdadera, puedes ver el colisionador del cuerpo físico del + sprite. +

+ + +

+ Controlar la Animación de un Sprite +

+

+ sprite.ani almacena la animación actual del sprite, + que puede cambiarse al nombre de una animación diferente. +

+

+ sprite.mirror puede ser utilizado para voltear el + sprite horizontal o verticalmente. +

+

+ Intenta presionar izquierda y derecha para hacer mover el + fantasma. +

+

+ Intenta presionar la barra espaciadora para detener la animación. +

+
-
-
-

Sprites con Animaciones

-

- La función sprite.addAni puede agregar una animación a un sprite. - También puede cargar la animación, al igual que loadAni. Como un - primer parámetro de entrada opcional, puedes proporcionar un - nombre para la animación. -

-

- Intenta presionar el botón izquierdo del ratón. Cuando la - propiedad sprite.debug está configurada como - verdadera, puedes ver el colisionador del cuerpo físico del - sprite. -

- -

- Controlar la Animación de un Sprite -

-

- sprite.ani almacena la animación actual del sprite, - que puede cambiarse al nombre de una animación diferente. -

-

- sprite.mirror puede ser utilizado para voltear el - sprite horizontal o verticalmente. -

-

- Intenta presionar izquierda y derecha para hacer mover el - fantasma. -

-

- Intenta presionar la barra espaciadora para detener la animación. -

- -
- -
-
-

Grupos con Animaciones

-

- Si un grupo tiene sólo una animación, los nuevos sprites del grupo - utilizarán esa animación. De lo contrario, por defecto el sprite - obtiene la última animación cargada. -

-

- Observa que en este mini-ejemplo si colocas manchas demasiado cerca, - se alejarán hasta que sus colisionadores ya no estén superpuestos. - El tamaño del colisionador se toma del tamaño de la animación. -

-

¡Intenta hacer clic con el ratón para añadir nuevas manchas!

- - +
+
+
+ +

+ Hojas de Sprites con Múltiples Animaciones +

+

+ Para cargar múltiples animaciones desde la misma imagen de la hoja + de sprites, primero configura la propiedad + spriteSheet del sprite o grupo. +

+

+ A continuación, utiliza la función addAnimations / + addAnis. Aceptan un objeto que utiliza los nombres de + las animaciones como claves y los atlas de las hojas de sprites + como valores. +

+

+ ¡Usar un objeto atlas es mucho más fácil que especificar + manualmente las coordenadas de cada frame! +

+

Los objetos atlas pueden tener las siguientes propiedades:

+

+ x, y, pos, + w/width, + h/height, + size/frameSize, row, + col, frames/frameCount, + delay/frameDelay, y + rotation. +

+

+ En el ejemplo del "héroe", el tamaño del sprite del héroe se + establece en 32x32 píxeles en el constructor Sprite. + Ese tamaño se utiliza como multiplicador para el valor de la fila + dado. +

+

+ Haz clic en este enlace para ver la + hoja de sprites completa + utilizada en el ejemplo. +

+

+ Si realmente quieres apreciar lo bueno que es p5play, intenta + comparar el código de mi ejemplo con + esta + demo de Phaser. ¡Ja! +

+

+ Recomiendo hacer que cada frame en una animación tenga el mismo + tamaño y ponerlos en orden de izquierda a derecha. Si no, tendrás + que especificar manualmente la posición de cada frame, lo cual se + puede hacer utilizando una matriz de coordenadas en lugar de un + objeto atlas. +

+ + +

anis

+

+ Cada sprite y grupo tiene un objeto animations / + anis que almacena sus animaciones. Las claves son + nombres de animación y los valores son objetos de animación. + Funciona como lo hacen los grupos, utilizando herencia suave y + dinámica. +

+

+ La propiedad ani.offset se utiliza para ajustar la + posición de una animación en relación con la posición del sprite. +

+

+ Cuando sprite.pixelPerfect está configurado como + verdadero, el sprite se dibuja en coordenadas enteras, mientras + que mantiene la posición precisa de su colisionador. ¡Esto es útil + para los juegos de arte pixelado! +

+
-
-
-

- Hojas de Sprites con Múltiples Animaciones -

-

- Para cargar múltiples animaciones desde la misma imagen de la hoja - de sprites, primero configura la propiedad - spriteSheet del sprite o grupo. -

-

- A continuación, utiliza la función addAnimations / - addAnis. Aceptan un objeto que utiliza los nombres de - las animaciones como claves y los atlas de las hojas de sprites - como valores. -

-

- ¡Usar un objeto atlas es mucho más fácil que especificar - manualmente las coordenadas de cada frame! -

-

Los objetos atlas pueden tener las siguientes propiedades:

-

- x, y, pos, - w/width, - h/height, - size/frameSize, row, - col, frames/frameCount, - delay/frameDelay, y - rotation. -

-

- En el ejemplo del "héroe", el tamaño del sprite del héroe se - establece en 32x32 píxeles en el constructor Sprite. - Ese tamaño se utiliza como multiplicador para el valor de la fila - dado. -

-

- Haz clic en este enlace para ver la - hoja de sprites completa - utilizada en el ejemplo. -

-

- Si realmente quieres apreciar lo bueno que es p5play, intenta - comparar el código de mi ejemplo con - esta demo de Phaser. ¡Ja! -

-

- Recomiendo hacer que cada frame en una animación tenga el mismo - tamaño y ponerlos en orden de izquierda a derecha. Si no, tendrás - que especificar manualmente la posición de cada frame, lo cual se - puede hacer utilizando una matriz de coordenadas en lugar de un - objeto atlas. -

- -

anis

-

- Cada sprite y grupo tiene un objeto animations / - anis que almacena sus animaciones. Las claves son - nombres de animación y los valores son objetos de animación. - Funciona como lo hacen los grupos, utilizando herencia suave y - dinámica. -

-

- La propiedad ani.offset se utiliza para ajustar la - posición de una animación en relación con la posición del sprite. -

-

- Cuando sprite.pixelPerfect está configurado como - verdadero, el sprite se dibuja en coordenadas enteras, mientras - que mantiene la posición precisa de su colisionador. ¡Esto es útil - para los juegos de arte pixelado! -

- -
-
- - -
-
-

- Secuenciación de Animaciones -

-

- sprite.ani puede ser configurado como un objeto de - animación, nombre de animación, o matriz de nombres de animación que - se reproducirán en secuencia. -

-

- Por defecto, si el bucle está habilitado, la última animación de la - secuencia será en bucle. Para hacer un bucle de toda la secuencia, - utiliza '**' como el último nombre de la animación. Si - en cambio quieres que la secuencia se detenga al final, utiliza - ';;' como el último nombre de la animación. -

-

- Este ejemplo muestra cómo el personaje del héroe puede ser movido - alrededor de la pantalla usando WASD o las flechas del teclado! -

- - - +
+
+ +

+ Secuenciación de Animaciones Avanzada +

+

+ Por detrás, configurar sprite.ani utiliza la función + asincrónica sprite.changeAni. Puedes usar esta función + directamente para esperar a que las animaciones terminen de + reproducirse. +

+

¡Ejemplo próximamente!

+ +
+ +
+
+ Página anterior + -
-

- Secuenciación de Animaciones Avanzada -

-

- Por detrás, configurar sprite.ani utiliza la función - asincrónica sprite.changeAni. Puedes usar esta función - directamente para esperar a que las animaciones terminen de - reproducirse. -

-

¡Ejemplo próximamente!

- -
+ Siguiente página +
+
+
+ Creado por Quinton Ashley (@quinton-ashley) derechos de autor 2022-2023 +
+
-
- -
-
- Creado por Quinton Ashley (@quinton-ashley) derechos de autor 2022-2023 -
- - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + diff --git a/lang/es/learn/tiles.html b/lang/es/learn/tiles.html index 609ceabc..5039356e 100644 --- a/lang/es/learn/tiles.html +++ b/lang/es/learn/tiles.html @@ -1,69 +1,74 @@ - - - - p5play : Tiles - - - - - -
- - -
- -
-

Azulejos

-

- Para el Super Mario Bros. original, el desarrollador principal, - Shigeru Miyamoto, y el diseñador de niveles, Takashi Tezuka, - utilizaron papel cuadriculado para trazar los niveles - y luego tuvieron a su equipo de programadores escribiendo las - coordenadas de cada sprite en el juego. ¡Eso es mucho trabajo! -

-

- Afortunadamente para ti, en p5play el constructor - Tiles puede hacer sprites en una cuadrícula basándose - en las posiciones de los caracteres en una cadena de texto! -

-

- El primer parámetro de entrada es una cadena de texto o un array de - cadenas de texto, cada línea o cadena en el array representa una - fila de azulejos. -

-

- El segundo y tercer parámetros de entrada son las coordenadas x e y - de la parte superior izquierda (primer) azulejo en la cuadrícula de - azulejos. -

-

- El cuarto y quinto parámetros de entrada son el ancho y alto - respectivamente de cada azulejo y cualquier espacio que quieras - añadir entre azulejos. -

-

¡Pruébalo!

-

Intenta editar el diseño de los ladrillos "P5".

-

- Nota que los espacios " " o puntos "." se utilizan para indicar que - no se deben hacer sprites en esa posición en la cuadrícula de - azulejos. En este ejemplo, el carácter "=" se utiliza para - bricks. -

- - -
-
-

Coordenadas de Azulejos

-

- Puedes cambiar el valor en píxeles de los valores de coordenadas - para todos los sprites configurando - allSprites.tileSize. Por ejemplo, si el tamaño del - azulejo es 8, entonces una posición x/y de 1 representa 8 píxeles, 2 - representa 16 píxeles, 3 representa 24 píxeles, etc. Nota que esta - configuración también afecta a cómo se especifican las coordenadas - de animación. -

-

- En este mini-ejemplo las líneas de cuadrícula se dibujan solo como - referencia visual. -

-

- También nota que simplemente utilizando la función - move con la dirección "up" hace que el jugador se mueva - hacia arriba una distancia de 1 azulejo. -

-

- Con sólo dos reglas de colisión, el jugador puede empujar los - bloques y los bloques pueden empujarse entre sí también. Se ajustan - a la cuadrícula después de moverse. -

-

- Lo realmente agradable es que puedes configurar - tileSize en función de cada sprite. Si se configura - para un grupo, entonces todos los sprites en ese grupo utilizarán - ese tamaño de azulejo! -

- - +
+ +
+ +
+
+ Creado por Quinton Ashley (@quinton-ashley) derechos de autor 2022-2023 +
+
-
- -
-
- Creado por Quinton Ashley (@quinton-ashley) derechos de autor 2022-2023 -
- - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + diff --git a/lang/es/learn/world.html b/lang/es/learn/world.html index 784f8e13..ed9eae20 100644 --- a/lang/es/learn/world.html +++ b/lang/es/learn/world.html @@ -1,62 +1,67 @@ - - - - p5play : World - - - - - -
- -
- -
-
-

Mundo

-

- Cada instancia de p5play tiene su propio objeto - world, que se puede utilizar para controlar la - simulación física. -

-

- La propiedad más importante de este objeto es - gravity, que tiene componentes x e y. -

- -

Dormir

-

world.allowSleeping es verdadero por defecto.

-

- Un sprite comienza a "dormir" cuando deja de moverse y no - colisiona con nada nuevo. Los sprites "durmiendo" son ignorados - durante la simulación física, lo que generalmente evita que el - motor de física Box2D tenga que hacer cálculos innecesarios. - Aunque esto es bueno para el rendimiento, a veces puede causar - problemas. -

-

- Puedes despertar un sprite que duerme estableciendo - sprite.sleeping en falso. También puedes desactivar - el dormir en base a cada sprite estableciendo - sprite.allowSleeping en falso. -

- -
-
- - -
-
-

Manipulación del tiempo

-

- Por defecto, después de cada vez que se ejecuta la función de dibujo - de p5.js, p5play llama a tres funciones en este orden: -

-
    -
  • allSprites.draw(): dibuja todos los sprites
    • -
  • world.step(): avanza la simulación física
    • -
  • - allSprites.update(): actualiza sprite.ani y - sprite.mouse -
    • -
-

- Pero también puedes tomar control manual de estos procesos - llamándolos tú mismo. -

-

- ¡En el mini-ejemplo, intenta presionar espacio para activar y - desactivar el slow-motion! -

-

sprite.draw y group.draw

-

- Puedes utilizar las funciones sprite.draw y - group.draw para controlar manualmente cuándo se dibujan - los sprites individuales y los grupos dentro del bucle de dibujo de - p5.js. Cualquier sprite que no se dibuje manualmente se dibujará - automáticamente al final del bucle de dibujo de p5.js a menos que la - propiedad autoDraw del sprite esté establecida en falso directamente - o por uno de sus grupos padres. Para prevenir el dibujo automático - completamente establece allSprites.autoDraw = false. -

-

- Ten en cuenta que tendrás que activar y desactivar manualmente la - cámara si quieres utilizarla con sprites dibujados manualmente. -

- - -

world.step

-

- world.step comprueba las colisiones y calcula las - posiciones y velocidades de todos los sprites después de avanzar la - simulación física en 1/60 de segundo por defecto. No se puede - avanzar en el tiempo a los sprites individualmente. -

-

- Antes de usar world.step en tu función de dibujo de - p5.js, asegúrate de dibujar todos los sprites. ¡De lo contrario, se - dibujarán en la posición incorrecta! -

-

- Establece world.autoStep = false para desactivar el - avance automático. Entonces puedes llamar a - world.step manualmente cuando quieras avanzar la - simulación física. -

- -

sprite.update y group.update

-

- ¿Qué hace sprite.update? Se encarga de actualizar la - animación del sprite y los eventos del ratón. También ejecuta la - función de actualización personalizada del usuario si se ha - establecido alguna. Para prevenir la actualización automática - completamente establece allSprites.autoUpdate = false. -

-

- ¿Por qué esta funcionalidad está separada del paso del mundo? Porque - en una pantalla de pausa el mundo físico podría estar pausado, pero - las animaciones y eventos de ratón del menú de pausa todavía podrían - actualizarse. -

- -
+ +

world.step

+

+ world.step comprueba las colisiones y calcula las + posiciones y velocidades de todos los sprites después de avanzar la + simulación física en 1/60 de segundo por defecto. No se puede + avanzar en el tiempo a los sprites individualmente. +

+

+ Antes de usar world.step en tu función de dibujo de + p5.js, asegúrate de dibujar todos los sprites. ¡De lo contrario, se + dibujarán en la posición incorrecta! +

+

+ Establece world.autoStep = false para desactivar el + avance automático. Entonces puedes llamar a + world.step manualmente cuando quieras avanzar la + simulación física. +

+ + +

sprite.update y group.update

+

+ ¿Qué hace sprite.update? Se encarga de actualizar la + animación del sprite y los eventos del ratón. También ejecuta la + función de actualización personalizada del usuario si se ha + establecido alguna. Para prevenir la actualización automática + completamente establece allSprites.autoUpdate = false. +

+

+ ¿Por qué esta funcionalidad está separada del paso del mundo? Porque + en una pantalla de pausa el mundo físico podría estar pausado, pero + las animaciones y eventos de ratón del menú de pausa todavía podrían + actualizarse. +

+ + -
-
- Página anterior - - Siguiente página +
+
+ Página anterior + -
-
- Creado por Quinton Ashley (@quinton-ashley) derechos de autor 2022-2023 -
-
- - - - - - - - - - - \ No newline at end of file + Siguiente página + +
+
+ Creado por Quinton Ashley (@quinton-ashley) derechos de autor 2022-2023 +
+ + + + + + + + + + + + + + diff --git a/lang/ja/index.html b/lang/ja/index.html index ed54dc92..9087b887 100644 --- a/lang/ja/index.html +++ b/lang/ja/index.html @@ -1,91 +1,100 @@ - - - - p5play - - - - - - - - - - - - - -
- - -
-
- + +
+
+ -
-
+ +
+
+ +
+
+ +

+ p5playは、グラフィックスのためのp5.jsと物理学のためのBox2Dを使用した JavaScript + のゲームエンジンです。 +

+

+ オンラインゲームやインタラクティブアートにアイデアを具現化したいですか？p5play + をチェックしてみてください！それは初心者に直感的であるためにコンピューターサイエンスの教師によって設計され、世界中の学校と大学で人気があります。しかし、p5play + v3 は教室での使用だけでなく、Box2D - Tiny Wings や Angry Birds + のような愛されているゲームで業界のリーダーによって使用されている同じ物理シミュレーターのポートであるplanck.js上に構築された強力なツールです。 +

+

+ "学び"リファレンスページを読んで始めてください！ +

+ -
-
-

- p5playは、グラフィックスのためのp5.jsと物理学のためのBox2Dを使用した JavaScript のゲームエンジンです。 -

-

- オンラインゲームやインタラクティブアートにアイデアを具現化したいですか？p5play - をチェックしてみてください！それは初心者に直感的であるためにコンピューターサイエンスの教師によって設計され、世界中の学校と大学で人気があります。しかし、p5play - v3 は教室での使用だけでなく、Box2D - Tiny Wings や Angry Birds - のような愛されているゲームで業界のリーダーによって使用されている同じ物理シミュレーターのポートであるplanck.js上に構築された強力なツールです。 -

-

- "学び"リファレンスページを読んで始めてください！ -

- - -

- - - - - - - - - - -

-
- -
+
-
-

コミュニティに参加する 👾

-

- p5play - でインタラクティブアートとゲームを作っている他の人々と出会い、質問してください。 -

- - - Discord brand + +
+ +

+ このプロジェクトをサポートする 🤝 +

+

+ p5play は GPL の下でオープンソースライセンスされています：それは無料です！ +

+

+ しかし、あなたがプロとして p5play を使用しているなら、Patreon でプロジェクトをサポートしてください！ +

+ +

+ + + patreon brand -

-
-

- このプロジェクトをサポートする 🤝 -

-

- p5play は GPL の下でオープンソースライセンスされています：それは無料です！ -

-

- しかし、あなたがプロとして p5play を使用しているなら、Patreon でプロジェクトをサポートしてください！ -

- +

+
+
+ +

+ インストールは必要ありません！🤩 +

- - - patreon brand - + これらのオンラインコードエディタテンプレートのいずれかを使用できます。しかし、p5.js + ウェブエディタは避けることをお勧めします、それには多くの問題があります。OpenProcessing + の使用を推奨します。

+ + -
-

- インストールは必要ありません！🤩 -

-

- これらのオンラインコードエディタテンプレートのいずれかを使用できます。しかし、p5.js - ウェブエディタは避けることをお勧めします、それには多くの問題があります。OpenProcessing - の使用を推奨します。 -

- - -
-
-

ローカル開発 🔨

-

- HTML - ファイルにこれらのリンクを追加することで、自分のウェブサイトで - p5play を使用できます。学校のファイアウォールが p5play.org - をブロックしていますか？ - FAQsをご覧ください。 -

- - -

p5play も npm で利用可能です：npm i p5play

-

- p5play をオフラインで使用したいですか？ -

- -
+ +

p5play も npm で利用可能です：npm i p5play

+

+ p5play をオフラインで使用したいですか？ +

+ +
-
-
-
-
-

Used by

-
- - Crimson Education - - - CODE.org - - - NYU Tisch - - - Girls Who Code - - - DePaul - - - LSU DDEM - - - HUNTER - - - Texas Tech University - +
+
+ +
-
+
-
-

- 「p5play - ライブラリは、学生たちにゲームデザインと開発を紹介するための貴重なリソースとなっています。私たちのチームは、その多くのカスタマイズ可能な機能、よく文書化されたリソース、そして全ての年齢とスキルレベルの学生にアクセス可能な使いやすい - API - のために、このライブラリをゲームデザイン夏季プログラムで使用することを選択しました。 -

-

- このライブラリに含まれる多くのメソッドとプロパティのおかげで、学生たちは自分たちのゲームのビジョンを迅速にコードで生き生きとさせることができます。これらのゲームは、基本的なキャッチャーゲームから、複数のレベルと挑戦的な機能を持つゲームまで様々です。 -

-

- ライブラリのよく文書化されたリソースに加えて、p5play - は学生と教師のコミュニティに対する多大なサポートとインスピレーションを提供しています。これには、学生がライブラリの異なるプロパティとメソッドをいじることを可能にするインタラクティブな学習ページ、年に - 3 回開催される Game Jam - イベント、そして多くの素晴らしいリソースとサポートを見つける機会が満載の - Discord チャンネルが含まれます。 -

-

- 私たちの Girls Who Code - チームは、ゲーム開発に興味がある誰もがこのライブラリを強く推奨します。私たちはこの素晴らしいライブラリを使用して生徒たちが今年の夏に作り出すすべてのゲームを楽しみにしています！」 -

- -
- Amy +
+ +

+ 「p5play + ライブラリは、学生たちにゲームデザインと開発を紹介するための貴重なリソースとなっています。私たちのチームは、その多くのカスタマイズ可能な機能、よく文書化されたリソース、そして全ての年齢とスキルレベルの学生にアクセス可能な使いやすい + API + のために、このライブラリをゲームデザイン夏季プログラムで使用することを選択しました。 +

+

+ このライブラリに含まれる多くのメソッドとプロパティのおかげで、学生たちは自分たちのゲームのビジョンを迅速にコードで生き生きとさせることができます。これらのゲームは、基本的なキャッチャーゲームから、複数のレベルと挑戦的な機能を持つゲームまで様々です。 +

+

+ ライブラリのよく文書化されたリソースに加えて、p5play + は学生と教師のコミュニティに対する多大なサポートとインスピレーションを提供しています。これには、学生がライブラリの異なるプロパティとメソッドをいじることを可能にするインタラクティブな学習ページ、年に + 3 回開催される Game Jam + イベント、そして多くの素晴らしいリソースとサポートを見つける機会が満載の + Discord チャンネルが含まれます。 +

+

+ 私たちの Girls Who Code + チームは、ゲーム開発に興味がある誰もがこのライブラリを強く推奨します。私たちはこの素晴らしいライブラリを使用して生徒たちが今年の夏に作り出すすべてのゲームを楽しみにしています！」 +

+ +
+ Amy +
+
Ashley Goetz
+
Curriculum Developer at
-
Ashley Goetz
-
Curriculum Developer at
- + Girls Who Code
-
-

- 「Learn - ページで行ったことは本当に素晴らしい、重要なスプライトプロパティの参考になる、それ以上のものを見るのを楽しみにしています。ソースを少し掘り下げてみると、[p5play - v3]は以前のバージョンの魅力をたくさん残していて、私はすぐに取り組むことができました。」 -

- -
- Brad +
+
+ +

+ 「Learn + ページで行ったことは本当に素晴らしい、重要なスプライトプロパティの参考になる、それ以上のものを見るのを楽しみにしています。ソースを少し掘り下げてみると、[p5play + v3]は以前のバージョンの魅力をたくさん残していて、私はすぐに取り組むことができました。」 +

+ +
+ Brad +
+
Bradley C Buchanan
-
Bradley C Buchanan
-
- Software Manager at - Discord -
-
- Former Software Manager at - Google -
-
- Former Software Manager at - Code.org -
+ Software Manager at + Discord
-
-
-
-

- 「Quinton、すべての作業に感謝します。この適切な物理学の統合のおかげで、私はクラスで再び - p5play を使用し始めるかもしれません！」 -

- -
- Paolo
-
Paolo Pedercini
-
Creator of p5.play v1
-
- Professor at - Carnegie Mellon -
+ Former Software Manager at + Google
-
-
-
-

- 「私はオブジェクト指向プログラミングを誘発するために、私の芸術的コーディングとゲームデザインのカリキュラムに - p5play - を中心にしたユニットを追加しました。学生たちはすぐにスプライトとグループに適応し、p5play - に組み込まれたすべてのインタラクティビティについて大いに興奮しました。ゲームを通じて、学生たちはプロパティとメソッドの理解を固めることができ、オブジェクト指向プログラミングのコアコンセプトを学んでいることにすら気づかなかった。 -

-

- 私の生徒たちは p5play - ライブラリを使ってゲームを作り、彼らの成果に大いに誇りを持っていました。p5play - を使ってから、私の生徒たちはクラスをよりよく理解することができ、自分たちのクラスをいくつか書くことさえありました！」 -

- -
- Marisa
-
Marisa Shuman
-
Computer Science Teacher at
- + Former Software Manager at + Code.org
-
-

- 「p5play - は私たちのカリキュラムに大いに役立っています。それは私たちにオブジェクト指向プログラミングを学ぶためのより創造的なアウトレットを探求する機会を与え、彼らの学生プロジェクトの試験において非常に価値のあるものとなっています。 -

-

- p5 と p5play を導入してから、私たちは学生の数が - 100％以上増加し、学生の学習に多大な利益をもたらしています。私は p5 - と p5play - をカリキュラムに導入することを強く推奨します。私たちは今、より多くの学校やカレッジが - p5play - をカリキュラムに導入できるように、オーダーメイドのビデオチュートリアルシリーズを開発しました。」 -

- -
- Marisa +
+
+ +

+ 「Quinton、すべての作業に感謝します。この適切な物理学の統合のおかげで、私はクラスで再び + p5play を使用し始めるかもしれません！」 +

+ +
+ Paolo +
+
Paolo Pedercini
+
Creator of p5.play v1
-
Rhys Drury
-
Head of Computing at
- + Professor at + Carnegie Mellon
-

- 「[Pearson Edxcel] GCSE - と比較して、ここで学んだことははるかに有益でした。GCSE では、Python - の Tkinter - を使用して基本的なアプリケーションを作成することが有益でした。しかし、今では +

+
+ +

+ 「私はオブジェクト指向プログラミングを誘発するために、私の芸術的コーディングとゲームデザインのカリキュラムに p5play - を使用して、より進んだゲームを作ることができ、それらは興味深く実用的です。」 - - Wyke の生徒 + を中心にしたユニットを追加しました。学生たちはすぐにスプライトとグループに適応し、p5play + に組み込まれたすべてのインタラクティビティについて大いに興奮しました。ゲームを通じて、学生たちはプロパティとメソッドの理解を固めることができ、オブジェクト指向プログラミングのコアコンセプトを学んでいることにすら気づかなかった。 +

+

+ 私の生徒たちは p5play + ライブラリを使ってゲームを作り、彼らの成果に大いに誇りを持っていました。p5play + を使ってから、私の生徒たちはクラスをよりよく理解することができ、自分たちのクラスをいくつか書くことさえありました！」

-

+

+ Marisa +
+
Marisa Shuman
+
Computer Science Teacher at
+ +
+
+
+
+ +

「p5play - を学ぶことは、私がコーディングに更に興味を持つのに非常に助けになりました。なぜなら、それはゲームを作ることを非常に簡単にしてくれるからです。それはプロセスを時間がかからないものにし、より楽しいものにします！」 - - Wyke の学生 + は私たちのカリキュラムに大いに役立っています。それは私たちにオブジェクト指向プログラミングを学ぶためのより創造的なアウトレットを探求する機会を与え、彼らの学生プロジェクトの試験において非常に価値のあるものとなっています。

- -

- 「グラフィカルなプログラムを作るために JavaScript で p5play - ライブラリーを使うことは、Python - を学ぶよりもはるかに良いです。なぜなら、あなたのプログラムコードが画面上の何かに影響を及ぼすのを見ることができるからです。」 - - Wyke の学生 +

+ p5 と p5play を導入してから、私たちは学生の数が + 100％以上増加し、学生の学習に多大な利益をもたらしています。私は p5 + と p5play + をカリキュラムに導入することを強く推奨します。私たちは今、より多くの学校やカレッジが + p5play + をカリキュラムに導入できるように、オーダーメイドのビデオチュートリアルシリーズを開発しました。」

- -
- -
-
- Creator of p5play : Quinton Ashley | - @quinton-ashley - | info@p5play.org -
+
+ Marisa
- Creator of p5.play v1 : Paolo Pedercini | - molleindustria.org - | info@molleindustria.it -
-
Current Contributors: Oliver Zell, Caleb Foss, and Bobby S.
-
- Huge thanks to my student testers: Chayarat Wangweera, Zhiyuan Guo, - Aarnav Gupta, and Carter Noa! +
Rhys Drury
+
Head of Computing at
+
-
-
-

- p5play.org は Quinton Ashley によって作成されました。Copyright - ©2022-2023。p5play の旧バージョンを探していますか？ -

-
-
- - - - - - - - - - - - \ No newline at end of file + .testimonial-bio { + display: flex; + align-items: center; + justify-content: center; + gap: 16px; + margin-top: 10px; + } + + .testimonial-text span { + line-height: 1; + padding-right: 2px; + } + + .testimonial-bio>div { + line-height: 1.25; + } + + .testimonial-bio .name { + margin-bottom: 10px; + } + + .testimonial-text span, + .testimonial-bio .name { + font-size: 20px; + font-weight: bold; + } + + .testimonial-bio img { + width: 128px; + height: 128px; + border-radius: 10px; + } + + #shields img { + height: 24px; + opacity: 80%; + } + + #topNav .socials img:not(.github) { + opacity: 80%; + } + + #topNav .discord-logo { + height: 28px; + border-radius: 40%; + } + + #topNav .github { + background-color: #aaa; + border-radius: 50%; + } + + .credits div { + width: 100%; + font-weight: 500; + text-align: center; + margin: 20px; + margin-left: 0; + } + + .credits-lg { + font-size: 24px; + } + + .credits-sm { + font-size: 16px; + } + + + + + + diff --git a/lang/ja/learn/camera.html b/lang/ja/learn/camera.html index 88d7aa8a..dcde4944 100644 --- a/lang/ja/learn/camera.html +++ b/lang/ja/learn/camera.html @@ -1,39 +1,43 @@ - - - - p5play : Camera - - - - - -
- - -
- -
-

カメラ

-

この例では、カメラがプレイヤーの x 軸の動きを追います。

- - -
-
-

カメラのオン/オフ

-

- デフォルトでは、allSprites.draw()は p5.js - の描画ループの終了時に呼び出されます。しかし、スプライトとグループが描画されるタイミングを制御したい場合は、それらを別々に描画することができます。 -

-

- ゲームのプレイヤーと環境は、カメラがオンの状態で描画するべきです。 -

-

- UI または HUD - のスプライトは、この例ではオレンジの四角で表されており、カメラがオフのときに描画されるべきです。 -

-

- camera.zoomは、カメラをズームインおよびズームアウトするために使用できます。 -

-

- camera.zoomTo(target, speed)は、カメラをスムーズにズームインおよびズームアウトするために使用できる非同期関数です。これはオプションの - 2 つ目のパラメーターを取り、それはフレームごとにズームする量です。 -

-

- mouse.xは、キャンバスよりも大きい可能性があるワールドに対するマウスの x - 位置を保存します。camera.mouse.xは、キャンバスに対するマウスの - x 位置を保存します。 -

- - -
-
-

カメラとマウスイベント

-

この例では、カメラは sin 波を使用して左右に移動します。

-

- 大きなスプライトは、カメラがオンのときにワールドスペースで描画されます。大きなスプライトは移動しませんが、カメラが移動しているために移動しているように見えます。 -

-

- 小さなスプライトは、カメラがオフのスクリーンスペース（UI）で描画されます。あなたがゲーム内の - UI - 要素、例えばポーズボタンのスプライトを作りたい場合、カメラがオフのときに作成するべきです。 -

- - +
+ +
+ +
+
+ クリントン・アシュリー（@quinton-ashley）によって作成されました 著作権 + 2022-2023 +
+
-
- -
-
- クリントン・アシュリー（@quinton-ashley）によって作成されました 著作権 - 2022-2023 -
- - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + diff --git a/lang/ja/learn/canvas.html b/lang/ja/learn/canvas.html index 4ea5e52e..3f713334 100644 --- a/lang/ja/learn/canvas.html +++ b/lang/ja/learn/canvas.html @@ -1,71 +1,78 @@ - - - - p5play : Canvas - - - + + - -
- -
-
-

高度なトピック

-

- これらのリファレンスページでは、p5play - のより高度な機能のいくつかを強調しています。 -

-

他のリファレンスページを先に読むことをお勧めします！

- -

Canvas

-

- Canvasクラスは、p5play バージョンの p5.js - のcreateCanvas関数のラッパーで、HTML5 - のキャンバス要素を作成するために使用されます。 p5play - のバージョンにはいくつかの追加機能も提供されます。 -

-

- new Canvas()にパラメータが渡されない場合、ウィンドウ全体を埋めるキャンバスが作成されます。 -

-

- canvas.wとcanvas.hを使用してキャンバスの幅と高さを取得します。 -

-

- また、Canvas - コンストラクタにアスペクト比を渡すこともできます。これにより、指定されたアスペクト比を維持しながら、ウィンドウに収まる最大のキャンバスが作成されます。例えば、new Canvas('2:1')は、幅が高さの 2 倍のキャンバスを作成します。 -

- -
-
-

pixelated モード

-

- 追加された機能のもう 1 つは、"pixelated"プリセットです。8 ビットや - 16 ビットスタイルのレトロなゲームを作るために使用します！ -

-

- デフォルトでは、"pixelated"プリセットはキャンバスを画面に合わせてスケーリングし、そのアスペクト比を維持しますが、プリセット名の後に乗数を渡すことでカスタムスケールを定義することもできます。 -

-

- たとえば、"pixelated x2"は、指定された幅と高さの 2 - 倍のサイズで表示されるキャンバスを作成します。 -

- -
- - -
+ -
-
- 前のページ - - 次のページ +
+
+ 前のページ + -
-
- クリントン・アシュリー（@quinton-ashley）によって作成されました 著作権 - 2022-2023 -
-
+ 次のページ + +
+
+ クリントン・アシュリー（@quinton-ashley）によって作成されました 著作権 + 2022-2023 +
+ + + + + + + + + - - - - - - - + - \ No newline at end of file + diff --git a/lang/ja/learn/group.html b/lang/ja/learn/group.html index f9bf7b64..73eea8a2 100644 --- a/lang/ja/learn/group.html +++ b/lang/ja/learn/group.html @@ -1,53 +1,57 @@ - - - - p5play : Group - - - - - -
- -
-
-

グループとは何ですか？

-

- p5play - では、グループは、同様の特性と振る舞いを持つスプライトのコレクションであり、設計図でもあります。例えば、Pac-Man - のドット！ -

-

- group.lengthプロパティは、グループにいくつのスプライトがあるかを確認するために使用できます。この例では、ドットのグループが - 24 個未満のスプライトを持つ限り、while ループの条件が真です。 -

-

- このミニ例では、new dots.Spriteは、ドットのグループの色、y - 位置、直径を継承するスプライトを作成します。各ドットには一意の x - 位置が割り当てられます。 -

-

- 私はこれを「ソフト継承」と呼びます。なぜなら、グループは新しいグループスプライトの設計図として機能するからです。 -

- - -

- グループは配列なので、インデックスでグループ内のスプライトにアクセスできます。グループには、標準の - JavaScript の配列メソッドを使用することができます。 -

- - -

- グループのプロパティを異なる値に設定すると、グループ内のすべてのスプライトに影響を及ぼします！私はこれを「動的継承」と呼んでいます。 -

- - -

- group.moveTowardsのような移動関数を使用すると、グループ内のすべてのスプライトが移動します。 -

- - -
-
-

- アロー関数プロパティセッター -

-

- p5play - では、グループ内のスプライトプロパティをアロー関数に設定すると、そのグループを使用して作成された新しいスプライトは、その関数を使用してプロパティを評価します。 -

-

- group.amountが調整されると、グループは自動的に設定した量に合わせてスプライトを作成したり削除したりします。 -

-

- このミニ例では、各宝石のスプライトにはランダムな x 座標と y - 座標が割り当てられます。 -

- - -
-
-

グループの重なり

-

- overlap 関数は、2 - つのスプライトが重なっているかどうかを処理するためだけのものではありません。グループ内のスプライトとスプライトが重なっているかどうかも確認できます。 -

-

- このミニ例では、collect - 関数は入力としてプレーヤーと、プレーヤースプライトが重なっている宝石グループ内の宝石を受け取ります。その宝石は削除されます。 -

-

グループにも overlap 関数と collide 関数を使用できます。

- - -
-
-

allSprites グループ

-

- p5play - は、スケッチ内のすべてのスプライトを含むallSpritesグループを作成します。 -

- - -
-
-

- インデックス付きアロー関数セッター -

-

- グループスプライトのプロパティを評価するときは、そのインデックスを使用することさえできます！ -

-

- iはグループ内のスプライトのインデックスで、それらが評価されるときにグループプロパティ関数への入力パラメータとして与えられます。 -

- - -
-
-

サブグループ

-

- このミニ例では、boxesグループの 2 - つのサブグループ、smallBoxesとbigBoxesがあります。 -

-

- bigBoxesグループを使用して作成された新しいスプライトは、boxesグループから特性を継承しますが、smallBoxesグループからは継承しません。 -

-

- boxesグループには、smallBoxesグループとbigBoxesグループのすべてのスプライトが含まれています。 -

-

- group.removeAll関数を使用して、グループからすべてのスプライトを削除することができます。 -

- - -
-
-

カリング

-

- デフォルトでは、スプライトはカメラの位置に対して 10000 - ピクセル画面外に行くと削除されます。これは、世界が大きくなりすぎて物理シミュレーションが遅くなるのを防ぐためです。 -

-

- これを変更するには、allSprites.autoCull = falseを設定し、group.cull関数を使用して異なるカリング境界を設定します。物理コライダーを持たないスプライトさえカリングすることができます。 -

-

- オプションの最後のパラメータは、スプライトがカリングされたときに呼び出されるコールバック関数を指定するために使用できます。カリングへのデフォルトの応答は、カリング境界を超えたスプライトを削除することですが、自分の関数を設定することで、他のことを行うことができます。コールバック関数は、カリングされたスプライトとそのフレームでカリングされたスプライトの合計数を受け取ります。この例では、1 - フレームで 1 - つ以上のボールがカリングされた場合、ボールの数が減ります。 -

- - -

life

-

- スプライトが存在する期間を制限する別の方法は、そのlifeプロパティを設定することです。これはスプライトが存在するフレーム数です。スプライトの寿命が尽きると、それは削除されます。これは、発射体やフォースフィールドなどの一時的なオブジェクトを作成するのに便利です。 -

-

- この小さなゲームを試してみてください！マウスをクリックしてビーチボールを作成し、水流で空中に保つようにしてみてください。 -

- - -
-
-

カスタムプロパティ

-

- スプライトとグループに独自のプロパティを追加できます。これは他の - JavaScript オブジェクトと同じです！ -

-

- また、グループにカスタムプロパティを追加すると、それらは新しいグループスプライトによって継承されます。プロパティセッターとしてアロー関数を使用することさえできます。 -

- - +
+ +
+
- - - - - - - - - - - - \ No newline at end of file + 次のページ + +
+
+ クリントン・アシュリー（@quinton-ashley）によって作成されました 著作権 + 2022-2023 +
+ + + + + + + + + + + + + + + diff --git a/lang/ja/learn/index.html b/lang/ja/learn/index.html index 26f220a4..3d95624a 100644 --- a/lang/ja/learn/index.html +++ b/lang/ja/learn/index.html @@ -1,126 +1,136 @@ - - - - p5play : Learn - - - - - -
- + + + + + + + p5play : Learn + + + + + +
+ -
-
- -
-
- -
-

リファレンス

-

- これらの「学習」リファレンスページは、p5play - の最も重要な機能のための対話式ミニ例を提供します。これらは、p5play - v3 の作成者である Quinton Ashley によって書かれ、p5play - コミュニティのための公共のリソースとして提供されています。 -

-

- お探しのものが見つからない場合は、完全なp5play、p5.js、またはp5.soundのドキュメンテーションを試してみるか、いくつかのデモをご覧ください。 -

- -
- +
-
- クリントン・アシュリー（@quinton-ashley）によって作成されました 著作権 - 2022-2023 -
-
- - - - - - - + } + + + + - \ No newline at end of file + diff --git a/lang/ja/learn/input_devices.html b/lang/ja/learn/input_devices.html index b4c477cc..fa1e4f14 100644 --- a/lang/ja/learn/input_devices.html +++ b/lang/ja/learn/input_devices.html @@ -1,52 +1,56 @@ - - - - p5play : Input - - - + + - -
- + + + + p5play : Input + + + -
+ +
+ -
-

入力デバイス

-

p5play で利用可能な入力デバイスは次のとおりです:

-
    -
  • kbまたはkeyboardはキーボード
    • -
  • mouseはマウス
    • -
  • - controまたはcontrollersはゲームコントローラー -
    • -
-

- これらの入力デバイスはすべて、入力の状態を取得するためのシンプルな関数、presses、pressing、releasedを使用します。 -

-

- また、彼らの全ての入力の状態をプロパティとして保存します。例えば、kb.spaceはユーザーがスペースキーを押し続けているフレーム数を保存します。ユーザーが入力を解放するとリセットされます。 -

- - -
- - - - -
-
-

キーボード

-

- PC ゲームでは、WASD - キーが一般的にプレイヤーキャラクターの移動を制御するために使用されます。p5play - では、'up'、'down'、'left'、'right'の方向名を使用して WASD - キーと矢印キーの押下を検出できます。 -

-

- WASD - と矢印キーを別々に使用したい場合は、これらのキー名を使用して矢印キーの押下を検出できます: - 'ArrowUp', 'ArrowDown', 'ArrowLeft' そして 'ArrowRight'。 - 左利きのプレイヤーやローカルで 2 - 人プレイするセカンドプレイヤーをサポートするために、IJKL - キーでの移動が一般的です。これらのキーは次のように参照できます: - 'up2', 'down2', 'left2', 'right2'。 一部のキーボードは最上行が - QWERTY で始まりません。p5play - は他のキーボードレイアウトを標準的な英語の QWERTY - レイアウトにマッピングします。例えば、フランスの AZERTY - キーボードのユーザーの WASD キーは ZQSD - です。これはp5play.standardizeKeyboardを false - に設定することで無効にできます。詳細情報 -

- - -
-
-

マルチ入力

-

- このミニスケッチは、スペースキーを押すかマウスをクリックすることで一つのアクションが実行できる方法を示しています。デフォルトのマウス入力は、左マウスボタンまたは通常のクリックのための'left'です。 -

- - - -
-
-

スプライトマウス

-

- 物理的なコライダーを持つスプライトは、スプライト上のマウス入力を検出するための自身のマウスオブジェクトを持っています。 - sprite.mouseオブジェクトは、mouse入力オブジェクトと同様ですが、追加の機能があります。 -

-

- hoversとhoveringは、ユーザーがマウスをスプライト上に移動したときに検出します。 -

-

- draggingは、ユーザーがマウスボタンをクリックし続けてマウスを移動するときに検出します。 - mouse.xはキャンバス上のマウスの x - 位置であり、sprite.mouse.xはスプライトに対するマウスの - x 位置です。 -

- - -
-
-

ゲームコントローラー

-

- controまたはcontrollersオブジェクトは、ゲームコントローラーのボタンの入力状態を提供します： -

-

- "a", "b", "x", "y", "l" (左バンパー), "r" (右バンパー), "lt" - (左トリガー), "rt" (右トリガー), "up", "down", "left", "right" - (dpad), "start", "select" -

-

- また、アナログスティックのxおよびy軸の位置も提供します：leftStickおよびrightStick。軸の値は-1 - から 1 の範囲で、0 は中央です。 -

-

- controオブジェクトはまた、Web - ブラウザによって検出されたすべての接続されたゲームコントローラーを含む配列でもあります。接続されたコントローラーはインデックスでアクセスします。例えば、contro[0]とcontro[1]は最初と - 2 - 番目のコントローラーです。デフォルトではcontroはcontro[0]を参照します。 -

-

- 試してみてください！接続されたゲームコントローラーの任意のボタンを押すと、p5play - によって検出されます。 -

- - -
-
-

タッチ

-

例は近日公開予定です！

- -
+ +
+ +

タッチ

+

例は近日公開予定です！

+ +
-
-
+ 次のページ + +
+
+ クリントン・アシュリー（@quinton-ashley）によって作成されました 著作権 + 2022-2023 +
+
+ + + + + + + + - - - - - - - + - \ No newline at end of file + diff --git a/lang/ja/learn/joints.html b/lang/ja/learn/joints.html index 9ec001f9..7bd29f39 100644 --- a/lang/ja/learn/joints.html +++ b/lang/ja/learn/joints.html @@ -1,48 +1,52 @@ - - - - p5play : Joints - - - - - -
- -
-
-

Joints

-

- A joint connects the physics colliders of two sprites, limiting - their movement relative to each other. -

-

- Joint constructors accept two sprites as input. At least one of the - sprites in a joint must have a dynamic physics collider. -

-

- Every sprite has a sprite.joints array, which contains - all the joints it's currently connected to. -

- - -

GlueJoint

-

- Do you like crafting in Legend of Zelda: Tears of the Kingdom? Then - you'll love glue joints! -

-

- A GlueJoint is the simplest type of joint, it just - glues two sprites together. The sprites don't have to be touching - and they won't un-glue unless you remove the joint. -

-

- But wait, why use a glue joint instead of - sprite.addCollider? -

-
    -
  • each sprite can have its own physics properties
    • -
  • each sprite can detect collisions separately
    • -
  • removing a joint doesn't remove the sprites
    • -
-

- Try gluing and un-gluing the stick and ball sprite in the mini - example. If you want a challenge, throw the ball straight up in the - air and try to stick it to the top of the stick! -

- - -
-
- -

DistanceJoint

-

- By default, a DistanceJoint is attached at the center - of each sprite that it's connected to. To shift the joint's - attachment points, edit its offsetA and - offsetB vectors. -

-

- Adjusting the joint's springiness ratio changes the - amount it can stretch and compress. -

-

- 0.0 = steel rod (default)
0.2 = stiff - spring
0.4 = tight spring
0.6 = - bouncy spring
0.8 = slinky
1.0 - = bungee cord -

-

- You can also adjust the joints's damping ratio to - change how quickly it loses vibrational energy. -

- - -
-
-

WheelJoint

-

- A WheelJoint connects a vehicle body to a wheel. Use - wheel joints to create drive-able vehicles! -

-

- Every wheel joint has a motor, which can be enabled by setting the - joint's speed to the desired motor speed, - maxPower to a positive value, or - motorEnabled to true. -

-

- Disabling a wheel joint motor is like putting a car in neutral, it - causes the wheel to roll freely. The joint's speed must be set to - zero for the wheel to brake. -

-

- By default, wheel joints have a maxPower of 1000, - springiness of 0.1, damping of 0.7, and - angle of attachment angle of 90 degrees. -

-

- Try driving the car in this example! Can you make it to the end of - the road? Customize the car by changing the position of its wheels - and the angle at which they're attached. -

- - - -
-
-

HingeJoint

-

- A HingeJoint enables one or two sprites to rotate - around the same attachment point. -

-

- Hinge joints with a small maxPower and default - speed of zero apply braking force to resist being - moved. -

-

- Try clicking around this example to drop small boxes on the seesaw. - How many boxes can you put on the seesaw before it tips? -

- - -
-
-

SliderJoint

-

- A SliderJoint constrains the motion of two sprites to - sliding along a common axis, without rotation. -

-

- The joint's range determines how far apart the - connected sprites can be from each other. Changing the joint's - angle changes the direction the sprites can slide in. -

-

- By default the joint's motor is enabled with a speed of - 0, so maxPower determines how much the joint can resist - sliding. -

-

- Try dropping boxes on the scale by clicking with your mouse. How - many boxes can you stack on the scale before it reaches its limit? - Try changing its angle too. -

- - +
+ +
+ +
+
+ クリントン・アシュリー（@quinton-ashley）によって作成されました 著作権 + 2022-2023 +
+
-
- -
-
- クリントン・アシュリー（@quinton-ashley）によって作成されました 著作権 - 2022-2023 -
-
- - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + diff --git a/lang/ja/learn/sprite.html b/lang/ja/learn/sprite.html index c3739861..881a22c6 100644 --- a/lang/ja/learn/sprite.html +++ b/lang/ja/learn/sprite.html @@ -1,53 +1,57 @@ - - - - p5play : Sprite - - - - - -
- - -
- -
-

p5.js のセットアップ

-

- p5.js (または q5.js)の - setup - 関数内のコードは、プログラムが開始するときに実行されます。new Canvas() - コンストラクタは、プログラムが描画できる画面のセクションを作成します。 -

-

- p5.js の draw 関数はデフォルトで 1 秒間に 60 - 回実行されます。background - 関数は、キャンバスが描画されるたびにそれを色で塗りつぶすために使用できます。 -

-

- キャンバスの幅と高さを変更してみてください（Canvas - コンストラクタ内の数字）、それから例のプログラムを再起動してみてください！ -

- - -
-

スプライトとは何ですか？

-

スプライトは幽霊です！

-

- ビデオゲーム開発者は、キャラクター、アイテム、または背景の上を移動する他のものを指すために - "スプライト"という単語を使用します。 -

-

- new Sprite() - コンストラクタは、スプライトの位置、サイズ、および外観を定義する変数を含むスプライトオブジェクトを作成します。 -

-

- 下のミニ例でボックスと円のスプライトのプロパティを編集してみてください！ -

- -
- - -
-
- - - - - - -
+
-
- - - - - - -
-
-
-

試してみてください！

-

- スプライト名 ball を直径 30 - の青い円に変えて、キャンバスの右上の角に配置してみてください。 -

- - -
- - -
-

スプライトの物理

-

- スプライトの衝突判定器は、他のスプライトとの衝突を検出するために使用されます。デフォルトでは、スプライトには - 'dynamic' - の物理衝突判定器があり、スプライトが自由に移動し、重力に影響を受けることができます。 -

-

- 'static' の衝突判定器は移動できません。'kinematic' - の衝突判定器はプログラム的に移動することができますが、他のスプライトによっては移動できません。また、他のキネマティック衝突判定器と衝突しません。スプライトの衝突判定器タイプを - 'none' - に設定すると、物理シミュレーションからそれが削除されます。 -

-

- 衝突判定器のタイプは、衝突判定器のタイプ名の最初の文字を使用して設定することもできます：'d'、's'、'k'、または - 'n'。 -

-

- ミニ例を再生するには、右上のリロードアイコンをクリックしてください！ -

- - -
- - -
+
-
- - -
-
-
-

試してみてください！

-

- 静的な衝突判定器と円形の形状を持つスプライト名 - peg - を作成してみてください。動的な衝突判定器とボックス形状のスプライト - block - を作成します。ブロックを配置して、それがペグに当たって右に落ちるようにします。 -

-

- p5.js の - draw - 関数が終了するたびに、スプライトは自動的に描画され更新されます。world - は p5play - がロードされるときに作成されますが、デフォルトでは重力はありません。world.gravity.y - を正の数に設定してみてください。 -

-

- さらなるチャレンジとして、ブロックが落ちた後に元の位置にリセットしてみてください。 -

- - -
- - -
- -

スプライトの移動

-

スプライトの位置を変更すると、それはテレポートします！

-

このミニ例を試してみて、周りをクリックしてみてください。

- - -

- 次の例では、p5.js の draw - 関数がフレームをレンダリングするたびに、スプライトがテレポートすると何が起こるかを示しています。 -

-

- スプライトが移動している間に他のスプライトと物理的に相互作用する場合、それをテレポートさせないでください！ -

- - -

- このページの他のすべての移動方法は、スプライトの x 軸と y - 軸の速度を変更することで動作します。velocity 別名 - velは p5.js の Vector で、それには任意の Vector - 関数が使用できます。 -

-

- この例を見るためには、スプライトを動かすために再起動する必要があるかもしれません。 -

- - -

- スプライトのdirectionとspeedを設定することで、スプライトを無限に移動させます。 -

-

- また、スプライトの方向を 'up', 'down', 'left', 'right', 'upLeft', - 'upRight', 'downLeft', 'downRight' - などの方向名を使って設定することもできます。 -

-

- p5play - はこれらの方向名を対応する角度値に変換することに注意してください。 -

- - -

- move関数は、スプライトを固定距離移動させます。移動の方向と速度は、関数のパラメータとして指定することも、別々に設定することもできます。 -

- - -

- moveTowards関数は、スプライトをある位置に向かって、その位置までの距離のパーセンテージだけ移動させます。 -

-

- この例では、プレイヤーは p5.js の draw - 呼び出し毎に、マウスまでの距離の - 10％を移動します。そのスピードと、ブロックに対する力は、移動する距離に比例します。 -

- - -

- moveTo関数は、スプライトを一定の速度である位置に移動させるためのインパルスを生成します。 -

-

- しかし、スプライトが重力のような力に作用されたり、他のスプライトにぶつかったりすると、その速度と方向が影響を受けて目的地に到達しない可能性があることに注意してください。 -

-

- x と y - のプロパティを持つオブジェクトを受け入れる任意の移動関数は、代わりに(x, - y)の位置数値を使用して呼び出すことができます。 -

- - -

- このページの例示が、p5play - で利用可能な移動オプションの一部を理解するのに役立つことを願っています。 -

-

- ただし、move、moveTo、および - moveTowards - 関数は、スプライトの現在の動きを上書きし、新たな方向に動かすことを強制します。これが必ずしも望む結果であるとは限りません！重力など、それに作用する他の力を考慮に入れてスプライトを移動させる方法を学ぶには、高度なスプライト移動に関するページを読んでください。 -

- - -
-
-

スプライトの画像

-

- sprite.image または - sprite.img は、p5.Image または画像ファイルへの URL - パスに設定できます。 -

-

- プログラムが開始する前に画像をロードする必要がある場合は、p5.js の - preload 関数内で - loadImage - を使用するのが最善です。 -

-

- sprite.scale - は、スプライトの衝突判定器と視覚的な外観の両方のサイズを変更します。スケール値 - 2 はスプライトのサイズを 2 倍にします。 -

-

- 左マウスボタンを押してみてください。 - sprite.debug プロパティが true - に設定されると、スプライトの物理ボディの衝突判定器が見えます。衝突判定器のサイズを画像のサイズとは異なるサイズにすることができます！ -

- - -

ピクセルアートを作ろう！

-

- spriteArt - 関数を使用して、スプライト用のピクセルアート画像を作成できます。これは文字列を入力として受け取り、画像を返します。文字列内の各文字は、画像内のピクセルの色値を表します。 -

-

- spriteArt 関数への 2 - つ目の入力パラメータは、画像のスケールです。 -

- - -

- デフォルトのパレットはデフォルトの - p5.js の色 - を使用しますが、色パレットもカスタマイズできます！ -

- - -
-
-
-

スプライトの作成を高速化

-

- Sprite コンストラクタ、new Sprite() - の内部では、スプライトの位置、サイズ、衝突判定器のタイプを指定できます。 -

-

- 前のスプライト参照ページで見たように、スプライトを作成するために - Sprite - コンストラクタに何も入力を追加する必要はありません。しかし、コンストラクタでスプライトのサイズを設定したい場合は、最初にその位置を指定する必要があります。 -

-

- デフォルトでは、Sprite - コンストラクタに入力が与えられない場合、新しいスプライトはキャンバスの中央に位置し、幅と高さが - 50 ピクセル、動的な衝突判定器が付いています。 -

- - -
-
- - -
-
-

試してみてください！

-

- スプライトコンストラクタを使用して 2 - つのスプライトを作成してみてください。 -

- - -
-
-

衝突

-

- スプライトが別のスプライトと衝突する最初のフレームでは、collides - 関数が true を返します。 -

-

- スプライトが別のスプライトと衝突している間、colliding - 関数は衝突が発生しているフレーム数を返します。 -

-

- 2 つのスプライトが衝突した後の最初のフレームでは、collided - 関数が true を返します。 -

- - - - -
-
-

オーバーラップ

-

スプライトはデフォルトで衝突しますが、重なることもできます！

- - -

レイヤー

-

- デフォルトでは、スプライトは作成された順番に描画されます。描画の順序を変更するには、スプライトの - .layer - プロパティを編集します。レイヤー値が最も高いスプライトが最初に描画されます。 -

- - -

- スプライトが別のスプライトと重なる最初のフレームでは、overlaps - 関数が true を返します。 -

-

- スプライトが別のスプライトと重なっている間、overlapping - 関数は重なりが発生しているフレーム数を返します。 -

-

- 2 つのスプライトが重なった後の最初のフレームでは、overlapped - 関数が true を返します。 -

-

- スプライトがテレポートされたり、その位置が直接変更されたりした場合、スプライト間の物理的な相互作用、衝突や重なりを適切に検出することはできません！ -

- - -
-

試してみてください！

-

- 青いスプライトが赤いスプライトと重なっている場合に限り、赤に変わるようにしてみてください。 -

-

- この例では、p5.js color - 関数を利用してカスタムの青と赤を使用しています。 -

- - -
-

- overlaps と collides を切り替える -

-

- デフォルトでは、2 - つのスプライト間の重なりをチェックすると、それらはもはや衝突しません。スプライト間の衝突をチェックすることで、これを上書きすることができます。 -

-

- この例では、スペースキーを押すと、プレイヤーは一時的に壁をすり抜けることができます。 -

- - -
-
- - -

スプライトの回転

-

- スプライトのrotationプロパティを直接変更すると、指定された回転角度にテレポートします。 -

-

- スプライトが回転している間に他のスプライトと物理的に相互作用することを望むなら、スプライトをテレポートさせないでください！ -

- - -

- このページの他のすべての回転方法は、スプライトのrotationSpeedを変更することによって動作します。 -

- - -

- rotate関数を使用して、スプライトを指定した量だけ回転させます。 -

-

- オプションの 2 - つ目のパラメータは、スプライトがフレームごとに回転する速度です。 -

- - -

- rotateTo関数を使用して、スプライトを角度に回転させます。回転速度はオプションの - 2 つ目のパラメータとして与えることができます。 -

-

- また、この関数に x, y - 座標を持つオブジェクトが与えられた場合、スプライトはその位置に向かって回転します。"facing"角度は、スプライトが目標位置に対面する際の角度です。これを - 0 から 90 - に変更してみてください。クリックすると、スプライトの長辺がマウスに向かって回転します。 -

- -
- - -
-

- rotateTowards関数を使用して、スプライトを角度に向けて回転させるか、位置に対面するように回転させます。 -

-

- オプションの 2 - つ目のパラメータは、追跡速度であり、これはスプライトが各フレームで目標の回転角度に移動する距離のパーセントです。デフォルトでは - 0.1（10%）です。 -

- - -

- offsetプロパティを使用して、スプライトの物理ボディをその中心に対して移動させます。 -

-

- sprite.debugが true - のとき、スプライトの中心は小さな緑色の十字線で表示されます。中心点は、スプライトの - x および y 座標がある場所です。また、これは回転の中心でもあります。 -

- - -
-
-

移動のシーケンス化

-

- これらの例では、ただの通常のスプライトであるTurtleスプライトを使用しています。 - それは緑色で、三角形になっていて、古典的なタートルプログラミングの見た目を持っています。 -

-

- async関数内でawaitキーワードを使用すると、次の移動を続ける前に移動が終了するのを待つことができます。これは、スプライトを順番に動かすのに便利です。 -

- - -

- move、moveTo、rotate、およびrotateTo関数はすべて、移動が終了したときに - true に解決するPromiseを返します。 -

-

- しかし、スプライトの移動が新しい移動またはスプライトの軌道を大幅に変更する衝突によって中断されると、promise - は false に解決します。 -

- - -
-
-

物理的属性

-

- スプライトには、世界との相互作用に影響を与える物理的属性があります。これらの属性がどのように作用するかを見るために、ミニ例をご覧ください。 -

- - - -
- - -
-
- - - - -
-
- - - - -
-

- デフォルトでは、mass - はスプライトのサイズに基づいて割り当てられます。スプライトが大きいほど、質量は多くなります。質量は手動で設定することもできます。 -

-

このミニ例の一つのスプライトの質量を変更してみてください。

- - -
-

planck のバグ

-

- p5play は planck - 物理エンジンを使用していますが、通常は現実的に見える物理的相互作用を出力しますが、それは完全ではありません。 -

-

- このミニ例では、ボールはbouncinessが 1 - なので、ボールがバウンドするたびに、それはその開始位置に戻るはずです。しかし、planck - のバグにより、ボールは地面に当たるたびに増加的に高く跳ねます。 -

- - -

- planck か p5play - の将来のバージョンでバグが修正されることを願っていますが、それまではここに一つの回避策を提供します。 -

-

- bounciness - のバグは、衝突体がフラットな面からバウンドするときに最も目立ちます。これは地面と衝突した後にボールの - y 速度を上書きする回避策です。 -

- - -

- この例では、ブロックが動くプラットフォームと衝突しているとき、その色は赤です。プラットフォームによって持ち上げられている間、ブロックが赤色のままであることを期待するかもしれませんが、赤と青の間で点滅します。 -

-

- 現実世界では、人がエレベーターに乗って上昇すると、その人がエレベーターの床と一緒に衝突すると言うでしょう。 -

-

- しかし、planck - では、衝突体が他の衝突体によって移動させられたとき、それらは互いに衝突し、解除されます。 -

- - -
-
-

チェインコライダー

-

- 3 つの異なるチェインモードがあります：vertex、distance、および - line。 -

-

- vertex モードを使用するには、Sprite - コンストラクタに頂点配列の配列を提供します。各頂点配列は[x, - y]座標を含むべきです。これらのミニ例では、スプライトの(x, - y)位置は小さな黒い四角で強調表示されています。 -

-

- ミニ例のチェインスプライトの頂点を変更して、ボールが床に留まるようにしてみてください！ -

- - -

- distance モードを使用するには、Sprite コンストラクタに(x, y)位置と - distance 配列の配列を提供します。これらの配列は、前の頂点に対する[x, - y]距離を含むべきです。(x, y)位置はチェインの最初の頂点になります。 -

-

distance モードは、超長いチェインを作成するのに最適です。

-

- 5 - つの距離を追加して、地面が起伏する岩地チェイン上で転がるようにしてみてください。 -

- - -

- line モードを使用するには、Sprite - コンストラクタに(x,y)位置と線の長さと角度のリストを提供します。各角度は前の線の角度に対する相対値です。 -

-

line モードは、小さなおよび/または対称的なチェインに最適です。

-

- line モードのチェインの(x, - y)位置は、全ての頂点の平均に位置しますが、これはチェイン上の点ではないかもしれません。 -

-

これらの線の長さと角度を変更してみてください！

- - -
-
-

ポリゴンコライダー

-

- 通常のポリゴンは、スプライトコンストラクタに辺の長さとポリゴンの名前を提供することで作成できます。 -

-

- 使用できる名前は以下の通りです: - 三角形、四角形、五角形、六角形、七角形、八角形、九角形、十角形、十一角形、十二角形。 -

- - -

- チェーンの始点と終点が同じ点にある場合、かつ、結果として得られる形状が凸形状であれば、それは自動的にポリゴンになります！ -

- - -

- スプライトがポリゴンであるかチェーンであるかに関わらず、始点と終点が同じ点にあるすべての物理ボディは、その(x, - y)位置が形状の中心に位置することに注意してください、最初の頂点ではありません。この位置は、形状のすべての頂点を平均して計算されます。 -

- - -

- sprite.shape = 'chain'と設定することで、凸形状のポリゴンを強制的にチェーンにすることができます。 -

-

- 通常のポリゴンは、線の長さ、角度、リピートをリストにして作成することができます。 -

-

- 正規ポリゴンの角度の公式は 360 / n です。ここで、n - は辺の数です。この角度を負にすると、ポリゴンがその辺の一つを上に向けて配置されます。 -

-

四角形のチェーンを作ってみてください！

- - -

ここには、五角星を作るコードがあります。

-

- 星が凹形状であるため、ポリゴンコライダを持つことはできないことに注意してください。 -

-

ポイントの数を変更してみてください！

- - -

これで p5play のロゴの作り方がわかります！

-

- このような閉じたチェーンでさえ、内部は空で、線で作られています。p5play - のホームページの例では、チェーンコライダが他の多くのスプライトを内包することができることがわかります！ -

- - -

- 閉じたチェーンコライダは、ダイナミックコライダとしてあまり良くないことに注意してください。これは - p5play が使用している Box2D 物理エンジンの制約です。 -

- - -
-
-

カスタム描画

-

- スプライトの動きに対して求める視覚効果を得るために、事前に描かれたアニメーションを使用できない場合があります。 -

-

- 幸いなことに、スプライトのdraw関数をカスタマイズして、任意の表示を行うことができます！ -

-

- スプライトの draw 関数内部では、スプライトの中心が位置(0, - 0)に移動されることに注意してください。 -

-

- このミニ例では、スプライトの楕円を移動方向に回転させ、その方向に比例して楕円を伸ばします。これはちょっと複雑です！ -

-

カスタムアップデート

-

- また、描画ループの終わりまたは updateSprites - が呼ばれたときに実行されるスプライトのカスタムアップデート関数を定義することもできます。そこには、任意のスプライト固有の振る舞いを入れることができます。 -

- - -
-
-

スケール

-

- sprite.scaleを変更すると、指定された量でスプライトのコライダーと視覚的な外観がスケーリングされます。 -

-

数字キーを押すと、スプライトがその量だけ均一にスケールします。

-

"d"キーを押すと、スプライトのスケールが倍になります。

-

- "x"キーまたは"y"キーを押すと、スプライトがその方向にランダムな量だけスケールします。ただし、スプライトが不均等にスケーリングされた場合、画像は歪んでしまい、再度均一にスケーリングされてもそのままになります。 -

- - -
-
-

コンボコライダー

-

- addCollider関数を使用すると、スプライトに複数のコライダーを追加することができます。 -

-

- しかし、この機能は、ゲームプレイに本当に必要なときだけ使用してください！ -

-

- 通常、迷路の壁のように多くのコライダーを必要とするものは、それぞれが独自のコライダーを持つ複数のスプライトを作成するべきです。 -

-

- また、スプライトの画像が複雑でも、通常はボックスや円で物理的な相互作用には十分で、特に小さなスプライトにはそれが適しています。 -

-

- しかし、時には、本当に複数のコライダーを持つスプライトを作成する必要があります。例えば、ピンボールのフリッパーをモデル化したい場合などです！ -

- - -
-
-

- スプライトを別のスプライトに追従させたい場合、moveToを何度も使用し、スプライトが目的地に到達するのを待たないで使うことが考えられます。しかし、パフォーマンスを向上させるためには、angleTo関数を試してみてください。これは、スプライトと位置との間の角度を取得します。この角度は、スプライトが移動する方向を変更するために使用できます。 -

-

- この例では、p5.js dist関数が使用されて、プレイヤーとその味方との間の距離を計算しています。 -

- - - -

- move - 関数はスプライトの速度を上書きしますが、重力のような他の力が作用するのを尊重させたい場合はどうすればよいでしょうか？ -

-

- スプライトの速度を直接加算または減算することができます、または - applyForce 関数を使用することもできます。 -

- - +
+ +
+
- - - - - - - - - - - \ No newline at end of file + 次のページ + +
+
+ クリントン・アシュリー（@quinton-ashley）によって作成されました 著作権 + 2022-2023 +
+ + + + + + + + + + + + + + diff --git a/lang/ja/learn/sprite_animation.html b/lang/ja/learn/sprite_animation.html index 3824a585..30711f89 100644 --- a/lang/ja/learn/sprite_animation.html +++ b/lang/ja/learn/sprite_animation.html @@ -1,55 +1,59 @@ - - - - p5play : Animation - - - - - -
- - -
- -
-

- アニメーションの読み込み方法 -

-

- アニメーションは、十分な速度で連続して表示される一連の画像で、運動の様子を表現します。 -

-

- loadAni関数には、シーケンス、リスト、スプライトシートの - 3 つのモードがあります。 -

-

- このミニ例では、クラウドブリージングアニメーションは、最初の画像へのパスとシーケンス内の最後の画像のインデックスが指定された番号付き画像のシーケンスを使用して読み込まれます。 -

-

- animation関数は p5.js - のimage関数に似ています。 p5.js の draw - 関数で使用して、位置にアニメーションを表示します。 -

- - -

- このミニ例では、loadAnimation関数に画像のリストが与えられます。 -

-

- ani.frameDelayプロパティは、アニメーションの画像が次の画像が表示される前に表示されるフレーム数を定義します。 - デフォルトは 4 です。 - 値が大きいほどアニメーションの再生速度が遅くなります。 - フレームディレイが 1 - の場合、アニメーションは可能な限り早く再生されます。 -

-

- 試してみてください！ このミニ例の frameDelay - を変更してみてください。 -

- - -

- このミニ例では、スプライトシートからアニメーションを読み込みます。スプライトシートとは、アニメーションのすべてのフレームを含む単一の画像です。このスケッチのスプライトシートを見て、それがどのように見えるかを確認してください。 -

-

- スプライトシートモードでは、アトラスオブジェクトを使用して各フレームのサイズとアニメーションのフレーム数を指定できます。 -

-

- プログラムが開始したときにアニメーションを本当に必要とする場合は、setup - の代わりに p5.js の preload 関数で読み込む必要があります。 -

- - -
-
-

アニメーション

-

p5play はアニメーションに対する完全な制御を提供します。

-

- キーボードを使用して、アニメーションを制御するさまざまな方法を試してみてください！ -

- - +
+
+
+ +

+ アニメーション付きスプライト +

+

+ sprite.addAni関数を使用して、スプライトにアニメーションを追加できます。 + また、loadAniと同様にアニメーションを読み込むこともできます。 + 最初の入力パラメータとしてオプションで、アニメーションの名前を指定できます。 +

+

+ 左マウスボタンを押してみてください。 + sprite.debugプロパティが true に設定されていると、 + スプライトの物理ボディコライダーを見ることができます。 +

+ + +

+ スプライトのアニメーションを制御する +

+

+ sprite.aniにはスプライトの現在のアニメーションが格納されており、 異なる + アニメーションの名前に設定することで変更できます。 +

+

+ sprite.mirrorはスプライトを + 水平または垂直に反転させるために使用できます。 +

+

左と右を押してゴーストを動かしてみてください。

+

スペースバーを押してアニメーションを停止してみてください。

+
-
-
-

- アニメーション付きスプライト -

-

- sprite.addAni関数を使用して、スプライトにアニメーションを追加できます。 - また、loadAniと同様にアニメーションを読み込むこともできます。 - 最初の入力パラメータとしてオプションで、アニメーションの名前を指定できます。 -

-

- 左マウスボタンを押してみてください。 - sprite.debugプロパティが true に設定されていると、 - スプライトの物理ボディコライダーを見ることができます。 -

- -

- スプライトのアニメーションを制御する -

-

- sprite.aniにはスプライトの現在のアニメーションが格納されており、 異なる - アニメーションの名前に設定することで変更できます。 -

-

- sprite.mirrorはスプライトを - 水平または垂直に反転させるために使用できます。 -

-

左と右を押してゴーストを動かしてみてください。

-

スペースバーを押してアニメーションを停止してみてください。

- -
- -
-
-

アニメーション付きグループ

-

- グループに 1 - つのアニメーションしかない場合、新しいグループスプライトはそのアニメーションを使用します。 - それ以外の場合、スプライトはデフォルトで最後に読み込まれたアニメーションを取得します。 -

-

- このミニ例では、スプラットをあまりにも近づけると、そのコライダーが重ならなくなるまで離れて動きます。 - コライダーのサイズはアニメーションのサイズから取得されます。 -

-

マウスをクリックして新しいスプラットを追加してみてください！

- - +
+
+
+ +

+ 複数のアニメーションを持つスプライトシート +

+

+ 同じスプライトシート画像から複数のアニメーションを読み込むには、まずスプライトまたはグループのspriteSheetプロパティを設定します。 +

+

+ 次に、addAnimations / + addAnis関数を使用します。 + 彼らはアニメーション名をキーとして、スプライトシートアトラスを値として使用するオブジェクトを受け入れます。 +

+

+ アトラスオブジェクトを使用する方が、各フレームの座標を手動で指定するよりもはるかに簡単です！ +

+

アトラスオブジェクトは次のプロパティを持つことができます：

+

+ x、y、pos、w/width、h/height、size/frameSize、row、col、frames/frameCount、delay/frameDelay、そしてrotation。 +

+

+ "hero"例では、Spriteコンストラクタでヒーロースプライトのサイズが + 32x32 ピクセルに設定されています。 + そのサイズは与えられた行値の乗数として使用されます。 +

+

+ このリンクをクリックして、例で使用されている完全なスプライトシートを見てください。 +

+

+ あなたが本当に p5play + がどれだけ良いかを感謝したいなら、私の例のコードをこの + Phaser デモと比較してみてください。 ハ！ +

+

+ アニメーションの各フレームを同じサイズにして左から右に順に並べることをお勧めします。 + そうでなければ、各フレームの位置を手動で指定する必要があります。これは、アトラスオブジェクトの代わりに座標の配列を使用して行うことができます。 +

+ + +

anis

+

+ すべてのスプライトとグループには、そのアニメーションを格納するanimations + / + anisオブジェクトがあります。キーはアニメーションの名前で、値はアニメーションオブジェクトです。これはグループが動作するのと同じように、ソフトとダイナミックな継承を利用します。 +

+

+ ani.offsetプロパティは、アニメーションの位置をスプライトの位置に対して調整するために使用されます。 +

+

+ sprite.pixelPerfectが true + に設定されている場合、スプライトは整数の座標に描画されますが、その衝突体の正確な位置は保持されます。これはピクセルアートゲームに役立ちます！ +

+
-
-
-

- 複数のアニメーションを持つスプライトシート -

-

- 同じスプライトシート画像から複数のアニメーションを読み込むには、まずスプライトまたはグループのspriteSheetプロパティを設定します。 -

-

- 次に、addAnimations / - addAnis関数を使用します。 - 彼らはアニメーション名をキーとして、スプライトシートアトラスを値として使用するオブジェクトを受け入れます。 -

-

- アトラスオブジェクトを使用する方が、各フレームの座標を手動で指定するよりもはるかに簡単です！ -

-

アトラスオブジェクトは次のプロパティを持つことができます：

-

- x、y、pos、w/width、h/height、size/frameSize、row、col、frames/frameCount、delay/frameDelay、そしてrotation。 -

-

- "hero"例では、Spriteコンストラクタでヒーロースプライトのサイズが - 32x32 ピクセルに設定されています。 - そのサイズは与えられた行値の乗数として使用されます。 -

-

- このリンクをクリックして、例で使用されている完全なスプライトシートを見てください。 -

-

- あなたが本当に p5play - がどれだけ良いかを感謝したいなら、私の例のコードをこの Phaser デモと比較してみてください。 ハ！ -

-

- アニメーションの各フレームを同じサイズにして左から右に順に並べることをお勧めします。 - そうでなければ、各フレームの位置を手動で指定する必要があります。これは、アトラスオブジェクトの代わりに座標の配列を使用して行うことができます。 -

- -

anis

-

- すべてのスプライトとグループには、そのアニメーションを格納するanimations - / - anisオブジェクトがあります。キーはアニメーションの名前で、値はアニメーションオブジェクトです。これはグループが動作するのと同じように、ソフトとダイナミックな継承を利用します。 -

-

- ani.offsetプロパティは、アニメーションの位置をスプライトの位置に対して調整するために使用されます。 -

-

- sprite.pixelPerfectが true - に設定されている場合、スプライトは整数の座標に描画されますが、その衝突体の正確な位置は保持されます。これはピクセルアートゲームに役立ちます！ -

- -
-
- - -
-
-

- アニメーションのシーケンシング -

-

- sprite.aniは、アニメーションオブジェクト、アニメーションの名前、または順序に再生されるアニメーションの名前の配列に設定することができます。 -

-

- デフォルトでは、ループが有効になっている場合、シーケンスの最後のアニメーションがループされます。シーケンス全体をループするには、最後のアニメーション名として'**'を使用します。代わりに、シーケンスを最後に停止させたい場合は、最後のアニメーション名として';;'を使用します。 -

-

- この例では、ヒーローキャラクターを WASD - または矢印キーを使用して画面上を移動させる方法を示しています！ -

- - - +
+
+ +

+ 高度なアニメーションのシーケンシング +

+

+ 裏側では、sprite.aniの設定はsprite.changeAni非同期関数を使用します。この関数を直接使用して、アニメーションが再生を終えるのを待つことができます。 +

+

例は近日公開予定！

+ +
+ +
+
+ 前のページ + -
-

- 高度なアニメーションのシーケンシング -

-

- 裏側では、sprite.aniの設定はsprite.changeAni非同期関数を使用します。この関数を直接使用して、アニメーションが再生を終えるのを待つことができます。 -

-

例は近日公開予定！

- -
+ 次のページ +
+
+
+ クリントン・アシュリー（@quinton-ashley）によって作成されました 著作権 + 2022-2023 +
+
-
- -
-
- クリントン・アシュリー（@quinton-ashley）によって作成されました 著作権 - 2022-2023 -
- - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + diff --git a/lang/ja/learn/tiles.html b/lang/ja/learn/tiles.html index 4ab6bb74..0376c65a 100644 --- a/lang/ja/learn/tiles.html +++ b/lang/ja/learn/tiles.html @@ -1,60 +1,65 @@ - - - - p5play : Tiles - - - - - -
- - -
- -
-

タイル

-

- オリジナルのスーパーマリオブラザーズのリードデベロッパーである宮本茂とレベルデザイナーの手塚卓志は、グラフ用紙を使用してレベルをプロットし、ゲーム内のすべてのスプライトの座標をプログラマーのチームに入力させました。それはたくさんの作業です！ -

-

- 幸いなことに、p5play - では、Tilesコンストラクタを使って、文字列の文字の位置に基づいてグリッド上にスプライトを作ることができます！ -

-

- 最初の入力パラメータは文字列または文字列の配列で、配列の各行または文字列はタイルの行を表します。 -

-

- 2 番目と 3 - 番目の入力パラメータは、タイルグリッドの左上（最初の）タイルの x - 座標と y 座標です。 -

-

- 4 番目と 5 - 番目の入力パラメータは、各タイルの幅と高さ、そしてタイル間に追加したいスペースです。 -

-

試してみてください！

-

"P5"ブロックのレイアウトを編集してみてください。

-

- スペース " " やピリオド "." - は、タイルグリッドのその位置にスプライトを作らないことを示すために使用されます。この例では、"=" - 文字は bricks に使用されます。 -

- - -
-
-

タイル座標

-

- すべてのスプライトの座標値のピクセル値を変更するには、allSprites.tileSizeを設定します。例えば、タイルのサイズが - 8 の場合、x/y の位置 1 は 8 ピクセル、2 は 16 ピクセル、3 は 24 - ピクセルを表します。この設定はアニメーション座標の指定方法にも影響します。 -

-

- このミニ例では、視覚的な参照のためにグリッド線が描かれています。 -

-

- また、単純にmove関数をヘディング "up" - で使用すると、プレイヤーは 1 タイルの距離を上に移動します。 -

-

- 2 - つの衝突ルールだけで、プレイヤーはブロックを押して動かすことができ、ブロックも互いに押し合うことができます。移動した後にグリッドにスナップします。 -

-

- 本当に素晴らしいのは、スプライトごとに - tileSize - を設定できることです。グループに設定すると、そのグループのすべてのスプライトがそのタイルサイズを使用します！ -

- - +
+ +
+ +
+
+ クリントン・アシュリー（@quinton-ashley）によって作成されました 著作権 + 2022-2023 +
+
-
- -
-
- クリントン・アシュリー（@quinton-ashley）によって作成されました 著作権 - 2022-2023 -
- - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + diff --git a/lang/ja/learn/world.html b/lang/ja/learn/world.html index 6d6ee724..5e46da56 100644 --- a/lang/ja/learn/world.html +++ b/lang/ja/learn/world.html @@ -1,59 +1,64 @@ - - - - p5play : World - - - - - -
- -
- -
-
-

ワールド

-

- p5play - の各インスタンスには、物理シミュレーションを制御するために使用できる独自の - world オブジェクトがあります。 -

-

- このオブジェクトの最も重要なプロパティは - gravity で、x 成分と y 成分を持っています。 -

- -

スリープ

-

world.allowSleeping はデフォルトで true です。

-

- スプライトは、動きを止めて新たに何も衝突しないときに "sleeping" - 状態になります。 "Sleeping" - スプライトは物理シミュレーション中に無視されるため、通常は Box2D - 物理エンジンソルバが不必要な計算を行う必要がなくなります。これはパフォーマンスには良いですが、場合によっては問題を引き起こすこともあります。 -

-

- スプライトを起こすには sprite.sleeping を false - に設定します。また、 sprite.allowSleeping を false - に設定することで、スプライトごとにスリープを無効にすることもできます。 -

- -
-
- - -
-
-

時間の制御

-

- デフォルトでは、p5.js の draw 関数が実行されるたびに、p5play - は以下の 3 つの関数をこの順序で呼び出します： -

-
    -
  • - allSprites.draw() ： すべてのスプライトを描画します -
    • -
  • world.step() ： 物理シミュレーションを進めます
    • -
  • - allSprites.update() ： sprite.ani と sprite.mouse - を更新します -
    • -
-

- しかし、これらのプロセスを自分で呼び出すことで手動で制御することもできます。 -

-

- ミニ例では、スペースを押してスローモーションを切り替えてみてください！ -

-

sprite.draw と group.draw

-

- p5.js の draw - ループ内で個々のスプライトとグループを描画するタイミングを手動で制御するために、sprite.draw - と - group.draw - 関数を使用できます。手動で描画されなかったスプライトは、スプライトの - autoDraw プロパティが直接または親グループのいずれかによって false - に設定されていない限り、p5.js の draw - ループの終わりに自動的に描画されます。自動描画を完全に防ぐには - allSprites.autoDraw = false を設定します。 -

-

- 手動で描画したスプライトを使ってカメラをオンにしたりオフにしたりする場合は、手動でオンオフを切り替える必要があります。 -

- - -

world.step

-

- world.step は、デフォルトで 1/60 - 秒進行した物理シミュレーションの後で、すべてのスプライトの衝突をチェックし、位置と速度を計算します。スプライトは個別に時間を進めることはできません。 -

-

- p5.js の draw 関数で - world.step - を使用する前に、すべてのスプライトを描画しておくことが重要です。そうしないと、スプライトが間違った位置に描画されます！ -

-

- 自動ステップを無効にするには - world.autoStep = false - を設定します。それから、物理シミュレーションを進行させたいときにいつでも手動で - world.step を呼び出すことができます。 -

- -

- sprite.update と group.update -

-

- sprite.update - は何をしますか？これは、スプライトのアニメーションとマウスイベントの更新を担当します。また、ユーザーが何かを設定した場合は、ユーザーのカスタム更新関数も実行します。完全な自動更新を防ぐには - allSprites.autoUpdate = false を設定します。 -

-

- なぜこの機能はワールドステップから分離されているのですか？というのも、一時停止画面では物理ワールドが一時停止している可能性がありますが、一時停止メニューの - UI - アニメーションとマウスイベントは引き続き更新される可能性があるからです。 -

- -
+ +

world.step

+

+ world.step は、デフォルトで 1/60 + 秒進行した物理シミュレーションの後で、すべてのスプライトの衝突をチェックし、位置と速度を計算します。スプライトは個別に時間を進めることはできません。 +

+

+ p5.js の draw 関数で + world.step + を使用する前に、すべてのスプライトを描画しておくことが重要です。そうしないと、スプライトが間違った位置に描画されます！ +

+

+ 自動ステップを無効にするには + world.autoStep = false + を設定します。それから、物理シミュレーションを進行させたいときにいつでも手動で + world.step を呼び出すことができます。 +

+ + +

+ sprite.update と group.update +

+

+ sprite.update + は何をしますか？これは、スプライトのアニメーションとマウスイベントの更新を担当します。また、ユーザーが何かを設定した場合は、ユーザーのカスタム更新関数も実行します。完全な自動更新を防ぐには + allSprites.autoUpdate = false を設定します。 +

+

+ なぜこの機能はワールドステップから分離されているのですか？というのも、一時停止画面では物理ワールドが一時停止している可能性がありますが、一時停止メニューの + UI + アニメーションとマウスイベントは引き続き更新される可能性があるからです。 +

+ + -
-
- 前のページ - - 次のページ +
+
+ 前のページ + -
-
- クリントン・アシュリー（@quinton-ashley）によって作成されました 著作権 - 2022-2023 -
-
- - - - - - - - - - - \ No newline at end of file + 次のページ + +
+
+ クリントン・アシュリー（@quinton-ashley）によって作成されました 著作権 + 2022-2023 +
+ + + + + + + + + + + + + + diff --git a/learn/camera.html b/learn/camera.html index 7f61d662..0ef7a469 100644 --- a/learn/camera.html +++ b/learn/camera.html @@ -1,41 +1,45 @@ - - - - p5play : Camera - - - - - -
- - -
- -
-

Camera

-

- In this example the camera follows the player's x axis movement. -

- - -
-
-

Camera On/Off

-

- By default, allSprites.draw() is called at the end of - the p5.js draw loop. However, if you want to control when sprites - and groups are drawn, you can draw them separately. -

-

- The player and environment of your game should be drawn with the - camera on. -

-

- UI or HUD sprites, represented by orange squares in this examples, - should be drawn when the camera is off. -

-

- camera.zoom can be used to zoom the camera in and out. -

-

- camera.zoomTo(target, speed) is an async function that - can be used to smoothly zoom the camera in and out. It takes an - optional second parameter, the amount it will zoom per frame. -

-

- mouse.x stores the x position of the mouse in relation - to the world, which can be larger than the canvas. - camera.mouse.x stores the x position of the mouse in - relation to the canvas. -

- - -
-
-

- Mouse Events with the Camera -

-

- In this example the camera is moving left and right using a sin - wave. -

-

- The big sprite is drawn in the world space when the camera is on. - The big sprite doesn't move, but it looks like it does because the - camera is moving. -

-

- The small sprite is drawn when the camera is off. If you wanted to - make a UI element in your game, like a pause button sprite, you - should make it when the camera is off. -

- - +
+ +
+ +
+
+ Created by Quinton Ashley (@quinton-ashley) Copyright 2022-2023 +
+
-
- -
-
- Created by Quinton Ashley (@quinton-ashley) Copyright 2022-2023 -
- - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + diff --git a/learn/canvas.html b/learn/canvas.html index af8679c5..b781cd13 100644 --- a/learn/canvas.html +++ b/learn/canvas.html @@ -1,79 +1,85 @@ - - - - p5play : Canvas - - - + + - -
- -
-
-

Advanced Topics

-

- These reference pages highlight some of the more advanced features - of p5play. -

-

You should probably read the other reference pages first!

- -

Canvas

-

- The Canvas class is a wrapper around p5play's version - of the p5.js createCanvas function, which is used to - create an HTML5 canvas element. p5play's version also provides a few - extra features. -

-

- If no parameters are passed to new Canvas(), it will - create a canvas that fills the entire window. -

-

- Use canvas.w and canvas.h to get the width - and height of the canvas. -

-

- You can also pass an aspect ratio to the Canvas constructor. This - will create the largest possible canvas that fits within the window, - while maintaining the given aspect ratio. For example, - new Canvas('2:1') will create a canvas that is twice as - wide as it is tall. -

- -
-
-

pixelated mode

-

- Another Canvas feature is the - "pixelated" preset. Use it for making 8-bit or 16-bit - style retro games! -

-

- By default, the "pixelated" preset scales the canvas to - fit the screen while retaining its aspect ratio, but you can also - define a custom scale by passing a multiplier after the preset name. -

-

- For example, "pixelated x2" will create a canvas that's - displayed at twice the size of the specified width and height. -

- -
- - -
+ -
-
- Previous Page - - Next Page +
+
+ Previous Page + -
-
- Created by Quinton Ashley (@quinton-ashley) Copyright 2022-2023 -
-
+ Next Page + +
+
+ Created by Quinton Ashley (@quinton-ashley) Copyright 2022-2023 +
+ + + + + + + + + - - - - - - - + - \ No newline at end of file + diff --git a/learn/group.html b/learn/group.html index c954532b..4a34ac4c 100644 --- a/learn/group.html +++ b/learn/group.html @@ -1,54 +1,58 @@ - - - - p5play : Group - - - - - -
- -
-
-

What is a Group?

-

- In p5play a Group is a collection of and blueprint for sprites with - similar traits and behaviors. For example the dots in Pac-Man! -

-

- The group.length property can be used to check how many - sprites are in a group. In this example the while loop condition is - true as long as the dots group has less than 24 sprites. -

-

- In the mini example, new dots.Sprite creates a sprite - that inherits the dots group's color, y position, and diameter. Each - dot is assigned a unique x position. -

-

- I call this "soft inheritance" because a group acts as a blueprint - for new group sprites. -

- - -

- You can access a sprite in a group by index because groups are - arrays. You can use any of the standard JavaScript array methods on - a group. -

- - -

- Setting a group's property to a different value will affect all the - sprites in the group! I call this "dynamic inheritance". -

- - -

- Using movement functions like group.moveTowards, will - cause all the sprites in a group to move. -

- - -
-
-

- Arrow function property setters -

-

- In p5play, when you set a sprite property in a group to an arrow - function, each new sprite created using that group will use the - function to evaluate the property. -

-

- When group.amount gets adjusted, the group will - automatically create or remove sprites to match the set amount. -

-

- In this mini example, each gem sprite is assigned a random x and y - position. -

- - -
-
-

Group overlap

-

- The overlap function isn't just for handling if two sprites overlap. - You can also check if a sprite overlaps with a sprite in a group. -

-

- In this mini example the collect function receives as inputs the - player and the gem in the gems group that the player sprite is - overlapping. That gem gets removed. -

-

- You can use the overlap and collide functions on groups as well. -

- - -
-
-

allSprites Group

-

- p5play creates an allSprites group that contains all - the sprites in a sketch. -

- - -
-
-

- Indexed arrow function setters -

-

- When evaluating a group sprite's property you can even use its - index! -

-

- i is the index of the sprite in the group, which is - given as an input parameter to group property functions when they - are evaluated. -

- - -
-
-

Sub Groups

-

- In this mini example there are two sub groups of the - boxes group: smallBoxes and - bigBoxes. -

-

- New sprites created using the bigBoxes group will - inherit traits from the boxes group but not from the - smallBoxes groups. -

-

- The boxes group contains all the sprites in the - smallBoxes and bigBoxes groups. -

-

- The group.removeAll function can be used to remove all - the sprites from a group. -

- - -
-
-

Culling

-

- By default, sprites are removed when they go 10000 pixels offscreen - relative to the camera's position. This is to prevent the world from - getting too big, which would slow down the physics simulation. -

-

- To change this, set allSprites.autoCull = false. Use - the group.cull function to set a different cull - boundary, and note that it can even cull sprites that don't have a - physics collider. -

-

- An optional last parameter can be used to specify a callback - function that will be called when a sprite is culled. The default - response to culling is to remove the sprite that exited the cull - boundary, but by setting your own function you can do something - else. The callback function receives the sprite that was culled and - a total count of how many sprites were culled on that frame. Note - that in this example, the amount of balls decreases if more than one - ball is culled in one frame. -

- - -

life

-

- Another way to limit how long a sprite exists is to set its - life property, which is the number of frames that the - sprite exists for. When the sprite's life is up, it will be removed. - This is useful for creating temporary objects like projectiles and - force fields. -

-

- Try out this little game! Click the mouse to create a beach ball and - try keeping it in the air with the water stream. -

- - -
-
-

Custom Properties

-

- You can add your own properties to sprites and groups, just like - with any other JavaScript object! -

-

- Also when you add custom properties to a group, they will be - inherited by new group sprites. You can even use arrow functions as - property setters. -

- - +
+ +
+ +
+
+ Created by Quinton Ashley (@quinton-ashley) Copyright 2022-2023 +
+
-
- -
-
- Created by Quinton Ashley (@quinton-ashley) Copyright 2022-2023 -
- - - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + + diff --git a/learn/index.html b/learn/index.html index 218492c5..84c77a36 100644 --- a/learn/index.html +++ b/learn/index.html @@ -1,130 +1,137 @@ - - - - p5play : Learn - - - - - -
- + + + + + + + p5play : Learn + + + + + +
+ -
-
- -
-
- -
-

Reference

-

- These "Learn" reference pages provide interactive mini-examples for - p5play's most important features. They were written by Quinton - Ashley, creator of p5play v3 and are offered as a public resource - for the p5play community. -

-

- Can't find what you're looking for? Try the full - p5play, - p5.js, or - p5.sound - documentation or look at some - demos. -

- -
- +
-
- Created by Quinton Ashley (@quinton-ashley) Copyright 2022-2023 -
-
- - - - - - - + } + + + + - \ No newline at end of file + diff --git a/learn/input_devices.html b/learn/input_devices.html index 152efd25..0b676b17 100644 --- a/learn/input_devices.html +++ b/learn/input_devices.html @@ -1,58 +1,62 @@ - - - - p5play : Input - - - + + - -
- + + + + p5play : Input + + + -
+ +
+ -
-

Input Devices

-

Here are the input devices available in p5play:

-
    -
  • kb or keyboard for the keyboard
    • -
  • mouse for the mouse
    • -
  • - contro or controllers for game - controllers -
    • -
-

- These input devices all use the same simple functions for getting - the state of an input: presses, pressing, - and released. -

-

- They also store the state of all their inputs as properties. For - example, kb.space stores how many frames the user has - been pressing the space key. It gets reset when the user releases - the input. -

- - -
- - - - -
-
-

Keyboard

-

- In PC games the WASD keys are commonly used to control the player - character's movement. In p5play you can use the direction names - 'up', 'down', 'left', and 'right' to detect WASD key and arrow key - presses. -

-

- If you want to use WASD and the arrow keys separately you can use - these key names to detect arrow key presses: 'ArrowUp', 'ArrowDown', - 'ArrowLeft' and 'ArrowRight'. Using the IJKL keys for movement is - common to support left handed players or second players in local two - player games. These keys can be referenced using: 'up2', 'down2', - 'left2', and 'right2'. Some keyboards don't start with QWERTY on the - top row. p5play maps other keyboard layouts to the standard English - QWERTY layout. For example, the WASD keys for French AZERTY keyboard - users are ZQSD. This can be disabled by setting - p5play.standardizeKeyboard to false. - More info -

- - -
-
-

Multi-Input

-

- This mini-sketch shows how one action can be performed by either - pressing the space key or clicking the mouse. The default mouse - input is 'left' for the left mouse button or normal click. -

- - - -
-
-

Sprite Mouse

-

- Sprites with physics colliders have their own mouse object for - detecting mouse inputs on the sprite. - sprite.mouse objects are just like the - mouse input object, except they have additional - functions. -

-

- hovers and hovering detect when the user - moves the mouse over a sprite. -

-

- dragging detects when the user clicks and holds a mouse - button on the sprite while moving the mouse. Note that - mouse.x is the x position of the mouse on the canvas - and sprite.mouse.x is the x position of the mouse - relative to the sprite. -

- - -
-
-

Game Controllers

-

- The contro or controllers object provides - the input state of game controller buttons: -

-

- "a", "b", "x", "y", "l" (left bumper), "r" (right bumper), "lt" - (left trigger), "rt" (right trigger), "up", "down", "left", "right" - (D-pad), "start", and "select" -

-

- It also provides the x and y axis - positions of the analog sticks: leftStick and - rightStick. The axis values range between -1 and 1, - where 0 is the center. -

-

- The contro object is also an array that contains all - the connected game controllers detected by your web browser. Access - connected controllers by index. For example, - contro[0] and contro[1] are the first and - second controllers. By default contro references - contro[0]. -

-

- Try it out! Press any button on your connected game controller for - it to be detected by p5play. -

- - -
-
-

Touch

-

Example coming soon!

- -
+ +
+ +

Touch

+

Example coming soon!

+ +
-
-
- Previous Page - - Next Page +
+
+ Previous Page + -
-
- Created by Quinton Ashley (@quinton-ashley) Copyright 2022-2023 -
-
+ Next Page + +
+
+ Created by Quinton Ashley (@quinton-ashley) Copyright 2022-2023 +
+
+ + + + + + + + - - - - - - - + - \ No newline at end of file + diff --git a/learn/joints.html b/learn/joints.html index 93b0d52f..b0626da7 100644 --- a/learn/joints.html +++ b/learn/joints.html @@ -1,48 +1,52 @@ - - - - p5play : Joints - - - - - -
- -
-
-

Joints

-

- A joint connects the physics colliders of two sprites, limiting - their movement relative to each other. -

-

- Joint constructors accept two sprites as input. At least one of the - sprites in a joint must have a dynamic physics collider. -

-

- Every sprite has a sprite.joints array, which contains - all the joints it's currently connected to. -

- - -

GlueJoint

-

- Do you like crafting in Legend of Zelda: Tears of the Kingdom? Then - you'll love glue joints! -

-

- A GlueJoint is the simplest type of joint, it just - glues two sprites together. The sprites don't have to be touching - and they won't un-glue unless you remove the joint. -

-

- But wait, why use a glue joint instead of - sprite.addCollider? -

-
    -
  • each sprite can have its own physics properties
    • -
  • each sprite can detect collisions separately
    • -
  • removing a joint doesn't remove the sprites
    • -
-

- Try gluing and un-gluing the stick and ball sprite in the mini - example. If you want a challenge, throw the ball straight up in the - air and try to stick it to the top of the stick! -

- - -
-
- -

DistanceJoint

-

- By default, a DistanceJoint is attached at the center - of each sprite that it's connected to. To shift the joint's - attachment points, edit its offsetA and - offsetB vectors. -

-

- Adjusting the joint's springiness ratio changes the - amount it can stretch and compress. -

-

- 0.0 = steel rod (default)
0.2 = stiff - spring
0.4 = tight spring
0.6 = - bouncy spring
0.8 = slinky
1.0 - = bungee cord -

-

- You can also adjust the joints's damping ratio to - change how quickly it loses vibrational energy. -

- - -
-
-

WheelJoint

-

- A WheelJoint connects a vehicle body to a wheel. Use - wheel joints to create drive-able vehicles! -

-

- Every wheel joint has a motor, which can be enabled by setting the - joint's speed to the desired motor speed, - maxPower to a positive value, or - motorEnabled to true. -

-

- Disabling a wheel joint motor is like putting a car in neutral, it - causes the wheel to roll freely. The joint's speed must be set to - zero for the wheel to brake. -

-

- By default, wheel joints have a maxPower of 1000, - springiness of 0.1, damping of 0.7, and - angle of attachment angle of 90 degrees. -

-

- Try driving the car in this example! Can you make it to the end of - the road? Customize the car by changing the position of its wheels - and the angle at which they're attached. -

- - - -
-
-

HingeJoint

-

- A HingeJoint enables one or two sprites to rotate - around the same attachment point. -

-

- Hinge joints with a small maxPower and default - speed of zero apply braking force to resist being - moved. -

-

- Try clicking around this example to drop small boxes on the seesaw. - How many boxes can you put on the seesaw before it tips? -

- - -
-
-

SliderJoint

-

- A SliderJoint constrains the motion of two sprites to - sliding along a common axis, without rotation. -

-

- The joint's range determines how far apart the - connected sprites can be from each other. Changing the joint's - angle changes the direction the sprites can slide in. -

-

- By default the joint's motor is enabled with a speed of - 0, so maxPower determines how much the joint can resist - sliding. -

-

- Try dropping boxes on the scale by clicking with your mouse. How - many boxes can you stack on the scale before it reaches its limit? - Try changing its angle too. -

- - +
+ +
+ +
+
+ Created by Quinton Ashley (@quinton-ashley) Copyright 2022-2023 +
+
-
- -
-
- Created by Quinton Ashley (@quinton-ashley) Copyright 2022-2023 -
-
- - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + diff --git a/learn/sprite.html b/learn/sprite.html index b169ef57..ed7bd34f 100644 --- a/learn/sprite.html +++ b/learn/sprite.html @@ -1,55 +1,59 @@ - - - - p5play : Sprite - - - - - -
- - -
- -
-

Setup and Draw

-

- The code inside the p5.js (or - q5.js) - setup function runs when the program starts. The - new Canvas() constructor creates a section of the - screen that the program can draw on. -

-

- The p5.js draw function is run 60 times per second by - default. The background function can be used to fill - the canvas with a color each time it is drawn. -

-

- Try changing the width and height of the canvas (the numbers inside - the Canvas constructor), then restart the example - program! -

- - -
-

What is a sprite?

-

A sprite is a ghost!

-

- Video game developers use the word "sprite" to refer to characters, - items, or anything else that moves above a background. -

-

- The new Sprite() constructor creates a sprite object, - which contains variables that define a sprite’s position, size, and - appearance. -

-

- Try editing the properties of the box and circle sprites in the mini - examples below! -

- -
- - -
-
- - - - - - -
+
-
- - - - - - -
-
-
-

Try it out!

-

- Try turning the sprite named ball into a blue circle - with a diameter of 30 and place it at the top right corner of the - canvas. -

- - -
- - -
-

Sprite physics

-

- A sprite's collider is used to detect collisions with other sprites. - By default, sprites have a 'dynamic' physics collider - that allows the sprite to move freely and be affected by gravity. -

-

- 'static' colliders can't be moved. - 'kinematic' colliders can be moved programmatically but - not by other sprites. They also won't collide with other kinematic - colliders. Setting a sprite's collider type to - 'none' removes it from the physics simulation. -

-

- The collider type can also be set using the first letter of the - collider type name: 'd', 's', - 'k', or 'n'. -

-

- Click the reload icon on the top right corner of a mini example to - replay it! -

- - -
- - -
+
-
- - -
-
-
-

Try it out!

-

- Try creating a sprite named peg with a static - collider and circle shape. Create a sprite block with - a dynamic collider and box shape. Position the block so that it - hits the peg and falls to the right. -

-

- Each time the p5.js draw function finishes, sprites - are automatically drawn and updated. Note that - world is created when p5play loads but by default - there's no gravity. Try setting world.gravity.y to a - positive number. -

-

- For an extra challenge, try resetting the block to its original - position after it falls. -

- - -
- - -
- -

Sprite movement

-

Changing a sprite's position teleports it!

-

Try clicking around this mini-example.

- - -

- The next example shows what happens if a sprite is teleported every - time the p5.js draw function renders a frame. -

-

- If you want a sprite to physically interact with other sprites while - it's moving, don't teleport it! -

- - -

- All of the other movement methods on this page work by changing the - sprite's x and y axis velocities. velocity aka - vel is a p5.js Vector, you can use any Vector functions - on it. -

-

You may have to restart this example to see the sprite move.

- - -

- Move the sprite indefinitely by setting its - direction and speed. -

-

- You can also set a sprite's direction using a direction name such - as: 'up', 'down', 'left', 'right', 'upLeft', 'upRight', 'downLeft', - 'downRight'. -

-

- Note that p5play converts these direction names to their - corresponding angle values. -

- - -

- The move function moves a sprite across a fixed - distance. The direction and speed of the movement can be specified - as parameters to the function or set separately. -

- - -

- The moveTowards function moves a sprite towards a - position, at a percentage of the distance to that position. -

-

- In this example, the player moves 10% of the distance to the mouse - on every p5.js draw call. Its speed, and the force it exerts on the - block, is proportional to the distance it moves. -

- - -

- The moveTo function generates an impulse that moves a - sprite to a position at a constant speed. -

-

- But note that if the sprite is acted on by a force like gravity or - bumps into another sprite, its speed and direction will be affected - and it may not reach the target position. -

-

- Any movement function that accepts an object with x and y properties - could instead be called with (x, y) position numbers. -

- - -

- Hopefully the examples on this page helped you understand some of - the sprite movement options available in p5play. -

-

- But, note that the move, moveTo, and - moveTowards functions override a sprite's current - motion, forcing it to move in a new direction. That might not always - be what you want! Read the page on advanced sprite movement to learn - how to move a sprite with respect to other forces acting on it, such - as gravity. -

- - -
-
-

Sprite image

-

- sprite.image or sprite.img can be set to a - p5.Image or a url path to an image file. -

-

- If you need an image to be loaded before your program starts, it's - best to use - loadImage - inside the p5.js preload function. -

-

- sprite.scale changes the size of both the sprite's - collider and visual appearance. A scale value of 2 doubles the size - of the sprite. -

-

- Try pressing the left mouse button. When the - sprite.debug property is set to true you can see the - sprite's physics body collider. You can make the size of the - collider different from the size of the image! -

- - -

Make Pixel Art!

-

- You can use the spriteArt function to create pixel art - images for your sprites. It takes a string as input and returns an - image. Each character in the string represents the color value of a - pixel in the image. -

-

- The second input parameter to the spriteArt function is - the scale of the image. -

- - -

- The default palette uses default - p5.js colors but - you can customize the color palette too! -

- - -
-
-
-

Create Sprites faster

-

- Inside the Sprite constructor, new Sprite(), you can - specify the sprite's position, size, and collider type. -

-

- As you saw on the previous Sprite reference pages, you don't need - to add any inputs to the Sprite constructor to create a sprite. - But, if you do want to set a sprite's size in the constructor - you'll need to specify its position first. -

-

- By default, if no inputs are given to the Sprite constructor, a - new sprite is positioned at the center of the canvas, with a width - and height of 50 pixels, and a dynamic collider. -

- - -
-
- - -
-
-

Try it out!

-

Try creating two sprites using the sprite constructor.

- - -
-
-

Collisions

-

- On the first frame that a sprite collides with another sprite, the - collides function returns true. -

-

- While a sprite is colliding with another sprite, the - colliding function returns the number of frames the - collision has occurred for. -

-

- On the first frame after two sprites collided, the - collided function returns true. -

- - - - -
-
-

Overlaps

-

Sprites collide by default but they can also overlap!

- - -

Layer

-

- By default sprites are drawn in the order they were created in. You - can change the draw order by editing sprite's - .layer property. Sprites with the highest layer value - get drawn first. -

- - -

- On the first frame that a sprite overlaps with another sprite, the - overlaps function returns true. -

-

- While a sprite is overlapping with another sprite, the - overlapping function returns the number of frames the - overlap has occurred for. -

-

- On the first frame after two sprites overlapped, the - overlapped function returns true. -

-

- Note that physical interactions between sprites, including - collisions and overlaps, can't be properly detected when a sprite is - teleported, its position is directly changed! -

- - -
-

Try it out!

-

- Try making the blue sprite change to red only if it's overlapping - with the red sprite. -

-

- Note that this example uses custom shades of blue and red by - utilizing the - p5.js color - function. -

- - -
-

- Switch between overlaps and collides -

-

- By default if you check for an overlap between two sprites, they - will no longer collide. You can override this by checking for a - collision between the sprites. -

-

- In this example, pressing the space key temporarily allows the - player to ghost through the wall. -

- - -
-
- - -

Sprite rotation

-

- Directly changing the rotation property of a sprite - will teleport it to the specified rotation angle. -

-

- Don't teleport a sprite if you want it to physically interact with - other sprites while it's rotating! -

- - -

- All of the other rotation methods on this page work by changing the - sprite's rotationSpeed. -

- - -

- Use the rotate function to rotate a sprite by an - amount. -

-

- The optional second parameter is the speed at which the sprite - rotates per frame. -

- - -

- Use the rotateTo function to rotate a sprite to an - angle. Rotation speed can be given as an optional second parameter. -

-

- Alternatively, if the function is given an object with x, y - coordinates, the sprite will rotate to face that position. The - "facing" angle is the angle that the sprite should be at when facing - the target position. Try changing it from 0 to 90. When you click, - the long side of the sprite will rotate to face the mouse. -

- -
- - -
-

- Use the rotateTowards function to rotate a sprite - towards an angle or towards facing a position. -

-

- The optional second parameter is the tracking speed, a percent of - the distance the sprite moves on each frame to the target rotation - angle, 0.1 (10%) by default. -

- - -

- Use the offset property to move the sprite's physics - body relative to its center. -

-

- When sprite.debug is true, the center of the sprite is - marked with a small green crosshair. The center point is where the - sprite's x and y coordinates are located. It is also the center of - rotation. -

- - -
-
-

Movement sequencing

-

- These examples use a Turtle sprite which is just a - regular sprite that's green and shaped like a triangle for that - classic turtle programming look. -

-

- You can use the await keyword inside an - async function to wait for a movement to finish before - continuing with the next movement. This is useful for making a - sprite move in a sequence. -

-

- The delay function can be used to wait for a specified - number of milliseconds. 1000 milliseconds is equal to 1 second! -

- - -

- The move, moveTo, rotate, and - rotateTo functions all return a - Promise that resolves to true when the movement is - finished. -

-

- But, if the sprite's movement is interrupted by a new movement or a - collision that significantly changes the sprite's trajectory, the - promise will resolve to false. -

- - -
-
-

Physical attributes

-

- Sprites have physical attributes that affect how they interact with - the world. Take a look at the mini-examples to see these attributes - in action. -

- - - -
- - -
-
- - - - -
-
- - - - -
-

- By default, mass is assigned based on the sprite's - size. The larger the sprite, the more mass it has. Mass can also be - set manually. -

-

- Try changing the mass of one of the sprites in this mini-example. -

- - -
-

planck Bugs

-

- p5play uses the planck physics engine, which usually outputs - realistic looking physical interactions, but it's not perfect. -

-

- In this mini-example the ball has a bounciness of 1, so - each time the ball bounces it should return to its starting - position. However, due to a bug in planck, the ball bounces - incrementally higher each time it hits the ground. -

- - -

- Hopefully the bug will be fixed in a future version of planck or - p5play, but until then here's a workaround. -

-

- The bounciness bug is most noticeable when a collider - bounces off a flat surface. Here's a workaround that overrides the - ball's y velocity after it collides with the ground. -

- - -

- Also, you may expect friction to affect circle physics - colliders, but sadly it doesn't! Use the - rotationDrag property instead. -

- - -
-
-

Chain Colliders

-

- There are three different chain modes: vertex, distance, and line. -

-

- To use vertex mode, provide the Sprite constructor with an array of - vertex arrays. Each vertex array should contain [x, y] coordinates. - In these mini-examples the sprite's (x, y) position is highlighted - by a small black square. -

-

- Try changing the vertexes of the chain sprite in the mini-example to - make the ball stay on the floor! -

- - -

- To use distance mode, provide the Sprite constructor an (x, y) - position and an array of distance arrays. These arrays should - contain [x, y] distances relative to the previous vertex. The (x, y) - position will be the first vertex in the chain. -

-

Distance mode is best for creating super long chains.

-

- Try adding 5 distances to make the ground roll up and down on a - rocky ground chain. -

- - -

- To use line mode, provide the Sprite constructor an (x,y) position - and a list of line lengths and angles. Each angle is relative to the - previous line's angle. -

-

It's best to use line mode for small and/or symmetrical chains.

-

- Note that the line mode chain's (x, y) position is located at the - average of all its vertices, which may not be a point on the chain. -

-

Try changing the lengths of these lines and their angles!

- - -
-
-

Polygon Colliders

-

- Regular polygons can be created by providing the Sprite constructor - with a side length and the name of the polygon. -

-

- Here are the names you can use: triangle, square, pentagon, hexagon, - septagon, octagon, enneagon, decagon, hendecagon, and dodecagon. -

- - -

- If the start and end of a chain is at the same point and the - resulting shape is convex, it automatically becomes a polygon! -

- - -

- Regardless of whether a sprite is a polygon or a chain, all physics - bodies that start and end at the same point have their (x, y) - position located at the center of the shape, not at the first - vertex. This position is calculated by averaging all of the shape's - vertexes. -

- - -

- You can force a convex polygon to be a chain by setting - sprite.shape = 'chain' -

-

- Regular polygons can be created from a list with the line length, - angle, and repeat. -

-

- The formula for the angle of a regular polygon is 360 / n, where n - is the number of sides. Make that angle negative to orient the - polygon with one of its edges on top. -

-

Try making a square shaped chain!

- - -

Here's the code for making a regular star with five points.

-

- Note that because the star is a concave shape it can't have a - polygon collider. -

-

Try changing the number of points!

- - -

Now you can see how the p5play logo was made!

-

- Even closed chains like this one are made of lines and they're empty - on the inside. In the example on the p5play homepage, you can see - how chain colliders can contain many other sprites inside them! -

- - -

- Note that closed chain colliders aren't so good at being dynamic - colliders. This is a limitation of the Box2D physics engine that - p5play uses. -

- - -
-
-

Custom draw

-

- Sometimes you won't be able to use pre-drawn animations to get the - kind of visual effect you want for a sprite in motion. -

-

- Fortunately, you can customize the sprite's - draw function and make it display anything you want! -

-

- Note that inside the sprite's draw function the center of the sprite - is translated to position (0, 0). -

-

- This mini example rotates the sprite's ellipse to the direction it's - moving and makes the ellipse stretch in that direction proportional - to it's speed. Kind of complicated! -

-

Custom Update

-

- You can also define a custom update function for a sprite that runs - at the end of the draw loop or when updateSprites is called. You can - put any sprite specific behavior you want in there. -

- - -
-
-

scale

-

- Changing sprite.scale will scale the sprite's collider - and visual appearance by the specified amount. -

-

- Press a number key to see the sprite scale uniformly by that amount. -

-

Click your mouse or touch tap to double the sprite's scale.

-

- Press "x" or "y" to scale the sprite in that direction by a random - amount. But note that if the sprite gets scaled unevenly, the image - will get distorted and stay that way even when scaled uniformly - again. -

- - -
-
-

Combo Colliders

-

- By using the addCollider function you can add multiple - colliders to a sprite. -

-

- But only use this feature when it's really necessary for gameplay! -

-

- Usually if something requires a lot of colliders, like the walls of - a maze, you should just create multiple sprites, each with their own - collider. -

-

- Also, even if a sprite's image is complex, typically a box or circle - will be just fine for physics interactions, especially for small - sprites. -

-

- Yet sometimes, you will truly need to create a sprite with multiple - colliders. For example, if you want to model a pinball flipper! -

- - -
-
-

Advanced Movement

-

- If you want a sprite to follow another sprite, you may be tempted to - use moveTo repeatedly, without waiting for the sprite - to reach its destination. But for better performance, try using the - angleTo function, which gets the angle between a sprite - and a position. This angle can be used to change the direction that - the sprite moves in. -

-

- In this example, the [p5.js dist](p5.js dist) function is used to - calculate the distance between the player and its ally. -

- - - -

- The move functions override a sprite's velocities, but - what if you want a sprite to respect other forces acting on it, such - as gravity? -

-

- You can add or subtract from a sprite's velocities directly, or use - the applyForce function. -

- - +
+ +
+
- - - - - - - - - - - \ No newline at end of file + Next Page + +
+
+ Created by Quinton Ashley (@quinton-ashley) Copyright 2022-2023 +
+ + + + + + + + + + + + + + diff --git a/learn/sprite_animation.html b/learn/sprite_animation.html index e5916631..43c2e36b 100644 --- a/learn/sprite_animation.html +++ b/learn/sprite_animation.html @@ -1,56 +1,60 @@ - - - - p5play : Animation - - - - - -
- - -
- -
-

How to load animations

-

- An animation is a series of images that are displayed one after the - other at a fast enough rate to give the appearance of motion. -

-

- The loadAni function has a three different modes: - sequence, list, and sprite sheet. -

-

- In this mini example, the cloud breathing animation is loaded using - a numbered sequence of images given the path to the first image and - the index of the last image in the sequence. -

-

- The animation function is similar to the p5.js - image function. Use it in the p5.js draw function to - display an animation at a position. -

- - -

- In this mini example the loadAnimation function is - given a list of images. -

-

- The ani.frameDelay property defines how many frames an - image in the animation is displayed before the next image is - displayed. The default is 4. Higher values make the animation play - slower. A frame delay of 1 would make the animation play as fast as - possible. -

-

Try it out! Try changing the frameDelay in this mini-example.

- - -

- This mini example loads an animation from a sprite sheet, which is a - single image that contains all the frames of an animation. Take a - look at the sprite sheet in this sketch which is displayed just so - you can see what one looks like. -

-

- In sprite sheet mode, an atlas object can be used to specify the - size of each frame and how many frames of animation there are. -

-

- If you really need to use an animation when your program starts, you - should load it in the p5.js preload function instead of setup. -

- - -
-
-

Animating

-

p5play gives you total control over your animations.

-

- Try using your keyboard to test out some of the different ways to - control animations! -

- - +
+
+
+ +

Sprites with Animations

+

+ The sprite.addAni function can add an animation to a + sprite. It can also load the animation, just like + loadAni. As an optional first input parameter, you + can provide a name for the animation. +

+

+ Try pressing the left mouse button. When the + sprite.debug property is set to true you can see the + sprite's physics body collider. +

+ + +

+ Control a Sprite's Animation +

+

+ sprite.ani stores the sprite's current animation, + which can be changed by setting it to the name of a different + animation. +

+

+ sprite.mirror can be used to flip the sprite + horizontally or vertically. +

+

Try pressing left and right to make the ghost move.

+

Try pressing the space bar to stop the animation.

+
-
-
-

Sprites with Animations

-

- The sprite.addAni function can add an animation to a - sprite. It can also load the animation, just like - loadAni. As an optional first input parameter, you - can provide a name for the animation. -

-

- Try pressing the left mouse button. When the - sprite.debug property is set to true you can see the - sprite's physics body collider. -

- -

- Control a Sprite's Animation -

-

- sprite.ani stores the sprite's current animation, - which can be changed by setting it to the name of a different - animation. -

-

- sprite.mirror can be used to flip the sprite - horizontally or vertically. -

-

Try pressing left and right to make the ghost move.

-

Try pressing the space bar to stop the animation.

- -
- -
-
-

Groups with Animations

-

- If a group has only one animation, new group sprites will use that - animation. Otherwise by default the sprite gets the last animation - loaded. -

-

- Note that in this mini-example if you put splats too close together - they'll move apart until their colliders are no longer overlapping. - The size of the collider is taken from the size of the animation. -

-

Try clicking the mouse to add new splats!

- - +
+
+
+ +

+ Sprite Sheets with Multiple Animations +

+

+ To load multiple animations from the same sprite sheet image, + first set the spriteSheet property of the sprite or + group. +

+

+ Next, use the addAnimations / + addAnis function. They accept an object that uses + animation names as keys and sprite sheet atlases as values. +

+

+ Using an atlas object is way easier than manually specifying the + coordinates of every frame! +

+

Atlas objects can have the following properties:

+

+ x, y, pos, + w/width, + h/height, + size/frameSize, row, + col, frames/frameCount, + delay/frameDelay, and + rotation. +

+

+ In the "hero" example the size of the hero sprite is set to 32x32 + pixels in the Sprite constructor. That size is used + as a multiplier to the row value given. +

+

+ Click this link to see the full + questKid sprite sheet used in + the example. +

+

+ If you'd like to truly appreciate how good p5play is, try + comparing the code from my example to + this + Phaser demo. Ha! +

+

+ I recommend making every frame in an animation the same size and + putting them in order from left to right. If not you'll need to + manually specify the position of each frame, which can be done + using an array of coordinates instead of an atlas object. +

+ + +

anis

+

+ Every sprite and group has an animations / + anis object that stores its animations. The keys are + animation names and values are animation objects. It works like + groups do, utilizing soft and dynamic inheritance. +

+

+ The ani.offset property is used to adjust the + position of an animation relative to the sprite's position. +

+

+ When sprite.pixelPerfect is set to true, the sprite + will be drawn at integer coordinates, while retaining the precise + position of its collider. This is useful for pixel art games! +

+
-
-
-

- Sprite Sheets with Multiple Animations -

-

- To load multiple animations from the same sprite sheet image, - first set the spriteSheet property of the sprite or - group. -

-

- Next, use the addAnimations / - addAnis function. They accept an object that uses - animation names as keys and sprite sheet atlases as values. -

-

- Using an atlas object is way easier than manually specifying the - coordinates of every frame! -

-

Atlas objects can have the following properties:

-

- x, y, pos, - w/width, - h/height, - size/frameSize, row, - col, frames/frameCount, - delay/frameDelay, and - rotation. -

-

- In the "hero" example the size of the hero sprite is set to 32x32 - pixels in the Sprite constructor. That size is used - as a multiplier to the row value given. -

-

- Click this link to see the full - questKid sprite sheet used in - the example. -

-

- If you'd like to truly appreciate how good p5play is, try - comparing the code from my example to - this Phaser demo. Ha! -

-

- I recommend making every frame in an animation the same size and - putting them in order from left to right. If not you'll need to - manually specify the position of each frame, which can be done - using an array of coordinates instead of an atlas object. -

- -

anis

-

- Every sprite and group has an animations / - anis object that stores its animations. The keys are - animation names and values are animation objects. It works like - groups do, utilizing soft and dynamic inheritance. -

-

- The ani.offset property is used to adjust the - position of an animation relative to the sprite's position. -

-

- When sprite.pixelPerfect is set to true, the sprite - will be drawn at integer coordinates, while retaining the precise - position of its collider. This is useful for pixel art games! -

- -
-
- - -
-
-

Animation Sequencing

-

- sprite.ani can be set to an animation object, animation - name, or array of animation names that will be played in sequence. -

-

- By default if looping is enabled, the last animation in the sequence - will be looped. To loop the entire sequence, use - '**' as the last animation name. If instead you want - the sequence to stop at the end, use ';;' as the last - animation name. -

-

- This example shows how the hero character can be moved around the - screen using WASD or the arrow keys! -

- - - +
+
+ +

+ Advanced Animation Sequencing +

+

+ Behind the scenes, setting sprite.ani uses the + sprite.changeAni async function. You can use this + function directly to wait for animations to finish playing. +

+

Example coming soon!

+ +
+ +
+
+ Previous Page + -
-

- Advanced Animation Sequencing -

-

- Behind the scenes, setting sprite.ani uses the - sprite.changeAni async function. You can use this - function directly to wait for animations to finish playing. -

-

Example coming soon!

- -
+ Next Page +
+
+
+ Created by Quinton Ashley (@quinton-ashley) Copyright 2022-2023 +
+
-
- -
-
- Created by Quinton Ashley (@quinton-ashley) Copyright 2022-2023 -
- - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + diff --git a/learn/style.css b/learn/style.css index 14a7c80a..962fe46d 100644 --- a/learn/style.css +++ b/learn/style.css @@ -1,11 +1,11 @@ html { - --pink: #ed225d; - --blue: #c0eeff; + --pink: #ff0a51; + --blue: #b7ebff; - --pink0: #ed225d; + --pink0: #ff0a51; --pink1: #ff1c5c; - --blue0: #c0eeff; + --blue0: #b7ebff; --blue1: #2880c2; --blue2: #f0f8ff; @@ -24,8 +24,8 @@ body.dark { /* --pink0: #ff1c5c; */ /* --blue0: #2880c2; */ - --blue0: #69aada; - --blue1: #69aada; + --blue0: #4eaee9; + --blue1: #4eaee9; --blue2: #002340; --primary: #c8c3bc; diff --git a/learn/tiles.html b/learn/tiles.html index 8fea296a..5dcbc6f2 100644 --- a/learn/tiles.html +++ b/learn/tiles.html @@ -1,66 +1,70 @@ - - - - p5play : Tiles - - - - - -
- - -
- -
-

Tiles

-

- For the original Super Mario Bros. lead developer, Shigeru Miyamoto, - and level designer, Takashi Tezuka, - used graph paper to plot out the levels - and then had their team of programmers type the coordinates of every - sprite in the game. That's a lot of work! -

-

- Fortunately for you, in p5play the Tiles constructor - can make sprites on a grid based on the positions of characters in a - string! -

-

- The first input parameter is a string or array of strings, each line - or string in the array representing a row of tiles. -

-

- The second and third input parameters are the x and y coordinates of - the top left (first) tile in the tiles grid. -

-

- The fourth and fifth input parameters are the width and height - respectively of each tile and any spacing you might want to add - between tiles. -

-

Try it out!

-

Try editing the "P5" brick layout.

-

- Note that spaces " " or periods "." are used to indicate that no - sprites should be made at that position on the tiles grid. In this - example, the "=" character is used for bricks. -

- - -
-
-

Tile coordinates

-

- You can change the pixel value of coordinate values for all sprites - by setting allSprites.tileSize. For example, the tile - size is 8, then an x/y position of 1 represents 8 pixels, 2 - represents 16 pixels, 3 represents 24 pixels, etc. Note this setting - affects how animation coordinates are specified too. -

-

- In this mini-example grid lines are drawn purely for visual - reference. -

-

- In this example, moving a sprite across a distance of 1 tile causes - it to move 32 pixels. -

-

- With just two collision rules the player can push around the blocks - and blocks can push each other too. They snap to the tile grid after - moving. -

-

- What's really nice is that you can set tileSize on a - per sprite basis. If set for a group then all sprites in that group - will use that tile size! -

- - +
+ +
+ +
+
+ Created by Quinton Ashley (@quinton-ashley) Copyright 2022-2023 +
+
-
- -
-
- Created by Quinton Ashley (@quinton-ashley) Copyright 2022-2023 -
- - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + diff --git a/learn/world.html b/learn/world.html index bf346204..2e625c16 100644 --- a/learn/world.html +++ b/learn/world.html @@ -1,60 +1,65 @@ - - - - p5play : World - - - - - -
- -
- -
-
-

World

-

- Each instance of p5play has its own world object, - that can be used to control the physics simulation. -

-

- The most important property of this object is - gravity, which has x and y components. -

- -

Sleeping

-

world.allowSleeping is true by default.

-

- A sprite starts "sleeping" when it stops moving and doesn't - collide with anything new. "Sleeping" sprites get ignored during - physics simulation, which usually prevents the Box2D physics - engine solver from having to make unnecessary calculations. While - this is good for performance, sometimes it can cause problems. -

-

- You can wake up a sleeping sprite by setting - sprite.sleeping to false. You can also disable - sleeping on a per sprite basis by setting - sprite.allowSleeping to false. -

- -
-
- - -
-
-

Controlling Time

-

- By default, after each time the p5.js draw function is run, p5play - calls three functions in this order: -

-
    -
  • allSprites.draw() : draws all sprites
    • -
  • - world.step() : progresses the physics simulation -
    • -
  • - allSprites.update() : updates animations and mouse - events -
    • -
-

- But you can also take manual control of these processes by calling - them yourself. -

-

In the mini-example, try pressing space to toggle slow-motion!

-

sprite.draw and group.draw

-

- You can use the sprite.draw and - group.draw functions to manually control when - individual sprites and groups are drawn inside the p5.js draw loop. - Any sprites not drawn manually will be automatically drawn at the - end of the p5.js draw loop, unless the sprite's autoDraw property is - set to false directly or by one of its parent groups. To prevent - automatic drawing completely set - allSprites.autoDraw = false. -

-

- Note that if you want to manually draw sprites you'll also have to - manually turn the camera on and off. -

- - -

world.step

-

- The world.step function checks for collisions and - calculates the positions and velocities of all sprites after - progressing the physics simulation by 1/60th of a second by default. - Sprites can't be progressed forward in time individually. -

-

- Before you use world.step in your p5.js draw function, - be sure to draw all the sprites. Otherwise, they will be drawn in - the wrong position! -

-

- Set world.autoStep = false to disable automatic - stepping. Then you can call world.step manually - whenever you want to progress the physics simulation. -

- -

- sprite.update and group.update -

-

- What does sprite.update do? It's responsible for - updating the sprite's animation and mouse events. It also runs the - user's custom update functions if they set any. To prevent automatic - updating completely set allSprites.autoUpdate = false. -

-

- Why is this functionality separated from the world step? Because on - a pause screen the physics world could be paused, but pause menu UI - animations and mouse events could still be processed. -

- -
+ +

world.step

+

+ The world.step function checks for collisions and + calculates the positions and velocities of all sprites after + progressing the physics simulation by 1/60th of a second by default. + Sprites can't be progressed forward in time individually. +

+

+ Before you use world.step in your p5.js draw function, + be sure to draw all the sprites. Otherwise, they will be drawn in + the wrong position! +

+

+ Set world.autoStep = false to disable automatic + stepping. Then you can call world.step manually + whenever you want to progress the physics simulation. +

+ + +

+ sprite.update and group.update +

+

+ What does sprite.update do? It's responsible for + updating the sprite's animation and mouse events. It also runs the + user's custom update functions if they set any. To prevent automatic + updating completely set allSprites.autoUpdate = false. +

+

+ Why is this functionality separated from the world step? Because on + a pause screen the physics world could be paused, but pause menu UI + animations and mouse events could still be processed. +

+ + -
-
- Previous Page - - Next Page +
+
+ Previous Page + -
-
- Created by Quinton Ashley (@quinton-ashley) Copyright 2022-2023 -
-
- - - - - - - - - - - \ No newline at end of file + Next Page + +
+
+ Created by Quinton Ashley (@quinton-ashley) Copyright 2022-2023 +
+ + + + + + + + + + + + + + diff --git a/package.json b/package.json index 4ecd98e7..f29ee7e1 100644 --- a/package.json +++ b/package.json @@ -77,5 +77,5 @@ "make": "electron-forge make", "publish": "electron-forge publish" }, - "version": "1.1.579" + "version": "1.1.580" } diff --git a/pro/index.html b/pro/index.html index 76966e2e..6ac78219 100644 --- a/pro/index.html +++ b/pro/index.html @@ -13,7 +13,7 @@