1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
---
title: Botones
slug: Games/Tutorials/2D_breakout_game_Phaser/Buttons
tags:
- 2D
- Botones
- JavaScript
- Lienzo
- Phaser
- Principiante
- Tutorial
- juegos
translation_of: Games/Tutorials/2D_breakout_game_Phaser/Buttons
original_slug: Games/Tutorials/2D_breakout_game_Phaser/Botones
---
<div>{{GamesSidebar}}</div>
<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Animations_and_tweens", "Games/Workflows/2D_Breakout_game_Phaser/Randomizing_gameplay")}}</p>
<div class="summary">
<p>Este es el <strong>paso 15 </strong>de 16 del tutorial <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser">Gamedev Phaser</a>. Puedes encontrar el código fuente como debería quedar después de completar el tutorial en <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson15.html">Gamedev-Phaser-Content-Kit/demos/lesson15.html</a>.</p>
</div>
<p><span class="seoSummary">En lugar de comenzar el juego de inmediato, podemos dejar la decisión en el jugador añadiendo un botón de Inicio que pueda pulsar. Vamos a investigar cómo hacerlo.</span></p>
<h2 id="Variables_nuevas">Variables nuevas</h2>
<p>Necesitamos una variable para almacenar un valor booleano que represente si el juego se está jugando actualmente o no, y otra para representar a nuestro botón. Añade las siguientes lineas a tu declaración de variables:</p>
<pre class="brush: js">var playing = false;
var startButton;
</pre>
<h2 id="Cargando_el_botón_de_spritesheet">Cargando el botón de spritesheet</h2>
<p>Podemos cargar el botón de spritesheet de la misma manera que cargamos la animación del movimiento de la pelota. Añade lo siguiente al botón de la función <code>preload()</code>:</p>
<pre class="brush: js">game.load.spritesheet('button', 'img/button.png', 120, 40);
</pre>
<p>El marco de un solo botón mide 120 pixels de ancho y 40 pixels de alto.</p>
<p>También se debe tomar el botón de spritesheet de <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/img/button.png">Github</a>, y guardarlo en el directorio <code>/img</code>.</p>
<h2 id="Añadiendo_el_botón_al_juego">Añadiendo el botón al juego</h2>
<p>Para añadir el botón al juego usaremos el método <code>add.button</code>. Añade las siguientes lineas del botón a la función <code>create()</code>:</p>
<pre class="brush: js">startButton = game.add.button(game.world.width*0.5, game.world.height*0.5, 'button', startGame, this, 1, 0, 2);
startButton.anchor.set(0.5);
</pre>
<p>Los parámetros del método <code>button()</code> son los siguientes:</p>
<ul>
<li>Las coordenadas x e y del botón.</li>
<li>El nombre del elemento gráfico que se mostrará en el botón.</li>
<li>Una función de callback que se ejecutará cuando se presione el botón.</li>
<li>Una referencia a <code>this</code> para especificar el contexto de ejecución.</li>
<li>Los marcos que usaremos para los eventos <em>over</em>, <em>out</em> and <em>down</em>.</li>
</ul>
<div class="note">
<p><strong>Nota</strong>: El evento over es igual al hover, out es cuando el puntero se mueve fuera del botón y down cuando el botón es presionado.</p>
</div>
<p>Ahora necesitamos definir la función <code>startGame()</code> referenciada en el siguiente código:</p>
<pre class="brush: js">function startGame() {
startButton.destroy();
ball.body.velocity.set(150, -150);
playing = true;
}
</pre>
<p>Cuando se presiona el botón, se borra el botón, se establecen la velocidad inicial de la pelota y la variable <code>playing</code> a <code>true</code>.</p>
<p>Para terminar con esta sección, vuelve a la función <code>create()</code>, encuentra la linea <code>ball.body.velocity.set(150, -150);</code>, y bórrala. Solo queremos que la pelota se mueva cuando se presione el botón, no antes.</p>
<h2 id="Mantener_la_paleta_inmóvil_antes_de_que_comience_el_juego">Mantener la paleta inmóvil antes de que comience el juego</h2>
<p>Funciona como se esperaba, pero aún podemos mover la paleta cuando el juego aún no ha comenzado, lo que parece un poco tonto. Para impedir esto, podemos aprovechar la variable <code>playing</code> y hacer que la paleta solo se mueva cuando el juego haya empezado. Para hacer esto, ajustamos la función <code>update()</code> así:</p>
<pre class="brush: js">function update() {
game.physics.arcade.collide(ball, paddle, ballHitPaddle);
game.physics.arcade.collide(ball, bricks, ballHitBrick);
if(playing) {
paddle.x = game.input.x || game.world.width*0.5;
}
}
</pre>
<p>De esta manera la paleta es inamovible hasta que todo esté cargado y preparado, pero sí cuando el juego actual comience.</p>
<h2 id="Compara_tu_código">Compara tu código</h2>
<p>Puedes comprobar el código acabado en esta lección en la demo de abajo, y jugar para entender mejor cómo funciona:</p>
<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/1rpj71k4/","","400")}}</p>
<h2 id="Siguientes_pasos">Siguientes pasos</h2>
<p>La última cosa que haremos en esta serie de artículos es hacer el juego más interesante añadiendo algo de aleatorización a la forma en la que la pelota rebota con la paleta.</p>
<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Animations_and_tweens", "Games/Workflows/2D_Breakout_game_Phaser/Randomizing_gameplay")}}</p>
|
