Skip to content

Commit

Permalink
1.1.581
Browse files Browse the repository at this point in the history
  • Loading branch information
@quinton-ashley
quinton-ashley committed Jul 2, 2023
1 parent 98e82e1 commit b2bd1b2
Show file tree
Hide file tree
Showing 36 changed files with 8,207 additions and 8,738 deletions.
4 changes: 2 additions & 2 deletions assets/p5play_logo.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@ <h3 id="p5play-is-a-javascript-game-engine-that-uses-p5js-for-graphics-and-box2d
function dropSprite() {
len = (height * random(0.1, 0.3)) / sides;
let penta = new Sprite(mouse.x || x, mouse.y || y, len, 'pentagon');
penta.color = '#c0eeff';
penta.color = '#b7ebff';
}
</script>

Expand Down
1,334 changes: 651 additions & 683 deletions lang/es/index.html
View file

Large diffs are not rendered by default.

254 changes: 123 additions & 131 deletions lang/es/learn/camera.html
View file
Original file line number Diff line number Diff line change
@@ -1,46 +1,42 @@
<!DOCTYPE html>
<html lang="es">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>p5play : Camera</title>
<link rel="icon" href="/assets/favicon.png">
<link rel="stylesheet" href="/learn/style.css">
</head>

<body class="dark">
<article>
<nav id="topNav">
<a href="index.html" id="logoLink" class="active">
<img alt="p5play logo" src="/assets/p5play_logo.svg" class="logo">
<span>p5play</span>
</a>
<hr>
<a href="sprite.html">Sprite</a>
<a href="group.html">Group</a>
<a href="sprite_animation.html">Ani</a>
<a href="input_devices.html">Input</a>
<a href="camera.html" class="active">Camera</a>
<a href="joints.html">Joints</a>
<a href="canvas.html">...</a>
<hr>
<a id="darkMode" onclick="toggleDarkMode()" tabindex="0" role="button">
<div id="darkModeIcon"></div>
</a>
</nav>

<div class="break"></div>

<div id="page-0" class="page">
<md id="md0-0">
<h2 id="cámara">Cámara</h2>
<p>
En este ejemplo, la cámara sigue el movimiento del eje x del
jugador.
</p>
</md>
<script type="mie/p5" id="sidescrolling-camera">
<!DOCTYPE html><html lang="es"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>p5play : Camera</title>
<link rel="icon" href="/assets/favicon.png">
<link rel="stylesheet" href="/learn/style.css">
</head>

<body class="dark">
<article>
<nav id="topNav">
<a href="index.html" id="logoLink" class="active">
<img alt="p5play logo" src="/assets/p5play_logo.svg" class="logo">
<span>p5play</span>
</a>
<hr>
<a href="sprite.html">Sprite</a>
<a href="group.html">Group</a>
<a href="sprite_animation.html">Ani</a>
<a href="input_devices.html">Input</a>
<a href="camera.html" class="active">Camera</a>
<a href="joints.html">Joints</a>
<a href="canvas.html">...</a>
<hr>
<a id="darkMode" onclick="toggleDarkMode()" tabindex="0" role="button">
<div id="darkModeIcon"></div>
</a>
</nav>

<div class="break"></div>

<div id="page-0" class="page">
<md id="md0-0"><h2 id="cámara">Cámara</h2>
<p>
En este ejemplo, la cámara sigue el movimiento del eje x del
jugador.
</p>
</md>
<script type="mie/p5" id="sidescrolling-camera">
let player, floor;

function setup() {
Expand All @@ -60,41 +56,40 @@ <h2 id="cámara">Cámara</h2>
camera.x = player.x;
}
</script>
</div>
<div id="page-1" class="page">
<md id="md1-0">
<h2 id="cámara-encendidaapagada">Cámara Encendida/Apagada</h2>
<p>
Por defecto, <code>allSprites.draw()</code> 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.
</p>
<p>
El jugador y el entorno de tu juego deben ser dibujados con la
cámara encendida.
</p>
<p>
Los sprites de la IU o HUD, representados por cuadrados naranjas en
estos ejemplos, deben ser dibujados cuando la cámara está apagada.
</p>
<p>
<code>camera.zoom</code> se puede utilizar para acercar y alejar la
cámara.
</p>
<p>
<code>camera.zoomTo(target, speed)</code> 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.
</p>
<p>
<code>mouse.x</code> almacena la posición x del ratón en relación
con el mundo, que puede ser mayor que el canvas.
<code>camera.mouse.x</code> almacena la posición x del ratón en
relación con el canvas.
</p>
</md>
<script type="mie/p5" id="overhead-camera">
</div>
<div id="page-1" class="page">
<md id="md1-0"><h2 id="cámara-encendidaapagada">Cámara Encendida/Apagada</h2>
<p>
Por defecto, <code>allSprites.draw()</code> 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.
</p>
<p>
El jugador y el entorno de tu juego deben ser dibujados con la
cámara encendida.
</p>
<p>
Los sprites de la IU o HUD, representados por cuadrados naranjas en
estos ejemplos, deben ser dibujados cuando la cámara está apagada.
</p>
<p>
<code>camera.zoom</code> se puede utilizar para acercar y alejar la
cámara.
</p>
<p>
<code>camera.zoomTo(target, speed)</code> 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.
</p>
<p>
<code>mouse.x</code> almacena la posición x del ratón en relación
con el mundo, que puede ser mayor que el canvas.
<code>camera.mouse.x</code> almacena la posición x del ratón en
relación con el canvas.
</p>
</md>
<script type="mie/p5" id="overhead-camera">
let player;

function setup() {
Expand Down Expand Up @@ -133,29 +128,28 @@ <h2 id="cámara-encendidaapagada">Cámara Encendida/Apagada</h2>
}
}
</script>
</div>
<div id="page-2" class="page">
<md id="md2-0">
<h2 id="eventos-de-ratón-con-la-cámara">
Eventos de Ratón con la Cámara
</h2>
<p>
En este ejemplo, la cámara se mueve hacia la izquierda y hacia la
derecha utilizando una onda senoidal.
</p>
<p>
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.
</p>
<p>
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.
</p>
</md>
<script type="mie/p5" id="mouse-camera">
</div>
<div id="page-2" class="page">
<md id="md2-0"><h2 id="eventos-de-ratón-con-la-cámara">
Eventos de Ratón con la Cámara
</h2>
<p>
En este ejemplo, la cámara se mueve hacia la izquierda y hacia la
derecha utilizando una onda senoidal.
</p>
<p>
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.
</p>
<p>
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.
</p>
</md>
<script type="mie/p5" id="mouse-camera">
let big, small;

function setup() {
Expand Down Expand Up @@ -187,35 +181,33 @@ <h2 id="eventos-de-ratón-con-la-cámara">
small.draw();
}
</script>
</div>

<div class="break"></div>
<div id="toc">
<a id="prevPage" class="navLink">Página anterior</a>
<div id="pageNav" class="submenu">
<a data-page="0" href="camera.html?page=0">Uso Básico</a>
<a data-page="1" href="camera.html?page=1">Encendido/Apagado</a>
<a data-page="2" href="camera.html?page=2">Eventos del Ratón con la Cámara</a>
</div>
<a id="nextPage" class="navLink">Siguiente página</a>
</div>
<div class="break"></div>
<footer id="credits" class="text-small">
Creado por Quinton Ashley (@quinton-ashley) derechos de autor 2022-2023
</footer>
</article>

<script src="/v3/q5.min.js"></script>
<script src="/v3/planck.min.js"></script>
<script src="/v3/p5play.js"></script>

<script>
window.mie = { autoLoad: false };
</script>
<script src="/learn/mie.js"></script>
<script src="/learn/learn.js"></script>


</body>

</html>
<div class="break"></div>
<div id="toc">
<a id="prevPage" class="navLink">Página anterior</a>
<div id="pageNav" class="submenu">
<a data-page="0" href="camera.html?page=0">Uso Básico</a>
<a data-page="1" href="camera.html?page=1">Encendido/Apagado</a>
<a data-page="2" href="camera.html?page=2">Eventos del Ratón con la Cámara</a>
</div>
<a id="nextPage" class="navLink">Siguiente página</a>
</div>
<div class="break"></div>
<footer id="credits" class="text-small">
Creado por Quinton Ashley (@quinton-ashley) derechos de autor 2022-2023
</footer>
</article>

<script src="/v3/q5.min.js"></script>
<script src="/v3/planck.min.js"></script>
<script src="/v3/p5play.js"></script>

<script>
window.mie = { autoLoad: false };
</script>
<script src="/learn/mie.js"></script>
<script src="/learn/learn.js"></script>


</body></html>
Loading

0 comments on commit b2bd1b2

Please sign in to comment.