(Este tutorial no es mio es de AllanR publicado originalmente el 28 de noviembre 2013 - 1 Revision, pero como me como me ha sido de gran ayuda lo he puesto en epañol si tienen algun problema contactar con AllanR.
(https://www.scirra.com/users/allanr )
Este es mi primer tutorial!
Alguien me pidió que mirar a un viejo proyecto en el que deslizar la pantalla para cambiar de una página a otra - similar a desplazarse a través de un álbum de fotos en un teléfono inteligente.
Si desea ver el proyecto original, se puede encontrar aquí: dropbox.com/s/i0tnhmtb1nx3nlm/swipe_on_one_layout.capx
El proyecto original requiere el plugin de lona (incluso a través de él en realidad no usarlo) y parecía innecesariamente compleja. Por lo tanto, me echó un vistazo y terminó reescribir toda la cosa. Yo quería hacer limpio, fácil de entender, y flexible para que pueda añadir páginas con el mínimo esfuerzo.
¡Entonces empecemos!
Si desea probar el producto terminado, se puede ver funcionando aquí:
rieperts.com/games/Swipe/index.html
O probar la versión desplazamiento suave aquí:
rieperts.com/games/Swipe2
##Variables globales
##
En primer lugar, he eliminado la mayor parte de las variables globales de la original, y añadí un par de hacer que funcione con cualquier número de páginas.
scirra.com/images/articles/swipe_variables.png
En mi proyecto tengo 5 páginas, cada página es de 480 píxeles de ancho por 800 píxeles de alto. Las páginas están numeradas del 0 al 4. La razón por la que empecé a numerar las páginas desde cero en lugar de uno se debe a que la primera página comienza en una coordenada X de cero (página 2 comienza en 480, página 3 comienza en 960, etc.), por lo la numeración de las páginas de cero ayuda a mantener el desplazamiento para el cálculo más fácil de entender.
CurrentPage nos dice qué página estamos actualmente. Lo tengo por defecto a cero (la primera página), pero se puede cambiar que para ser cualquier página que desea iniciar en.
NumberPages nos dice cuántas páginas hay. Inicialmente se establece en cero, y luego calcular que al comienzo de la disposición. Esto sólo hace que sea más fácil para agregar o quitar páginas - usted no tiene que acordarse de volver atrás y actualizar total, debe ser lo suficientemente inteligente como para darse cuenta de eso por sí mismo!
A continuación tenemos PageWidth. Primera vez que utiliza la variable de sistema WindowWidth para determinar automáticamente el ancho, pero que no siempre estaba a la altura con el resultado correcto. Se hizo trabajar en la computadora de escritorio y mi iPhone, pero cuando lo probé en un ordenador portátil de la anchura era la mitad de lo que debería haber sido. No sé si el problema tiene algo que ver con el ordenador portátil, un antiguo conductor, un error en Construct2, la falta de conocimiento de mi parte, o un problema del navegador. Al final, he añadido mi propia variable PageWidth para resolver el problema - pero ahora hay que acordarse de actualizar dicha variable global, si desea cambiar el ancho de la página.
Las tres últimas variables ayudan a decidir cuando hemos birlado lo suficiente para pasar a la página siguiente. SwipeThreshold es la distancia que debe deslizar antes de que la página va a cambiar. SwipeStartX nos dice en qué parte de la pantalla que empezamos a deslizar, y swipeDistance nos dice lo lejos que han escamoteado hasta ahora.
El código
Una vez que el diseño se inicia, se calcula el número de páginas que hay, entonces nos desplazamos a la página actual. El punto que Construct2 desplaza a es la mitad de la ventana visible, por lo que para la primera página que necesitamos para desplazarse al ancho de página la página x + actual (ancho de página / 2) o, en mi diseño, 0 x 480 + 240, que funciona a 240. para desplazarse a la segunda página se calcularía 1 x 480 + 240, o 720.
OK, ahora se está mostrando la primera página y que nos espera de pasar el dedo!
scirra.com/images/articles/swipe_code.png
Sólo hay tres eventos para tener en cuenta: inicio, toque en contacto, y al final táctil.
La primera vez que toque la pantalla, toque de inicio, sólo se recuerda el valor de X en el que tocó por primera vez.
Aunque todavía estamos tocando la pantalla, en contacto, calcula cuánto hemos birlado. Si estamos deslizando el dedo hacia la derecha a la izquierda, entonces el punto en el que primero toca la pantalla será más grande que el punto actual, por lo swipeDistance será positivo. De lo contrario, si se nos pasa de izquierda a derecha y de swipeDistance será un número negativo.
Una vez que sabemos lo lejos que hemos birlado, a continuación, se desplaza a la pantalla de esa cantidad: todo lo que tiene que hacer es añadir swipeDistance hasta el punto que nos desplazamos originalmente. Si swipeDistance es positivo que se está desplazando más cerca del extremo derecho de la disposición (tratando de llegar a la página siguiente). Si swipeDistance es negativa entonces que se está desplazando hacia el extremo izquierdo de la disposición (tratando de llegar a la página anterior).
Por último, cuando ya no estamos swiping, toque final, tenemos que ver si hemos birlado lo suficiente como para pasar a la página siguiente (o anterior), por lo que se compara el valor absoluto de swipeDistance a swipeThreshold. Si es mayor que el umbral, entonces tenemos que pasar a una nueva página si es posible, si no queremos volver al punto de partida.
Por lo tanto, si swipeDistance es negativo, se resta uno del currentPage (siempre y cuando es mayor que cero, por lo que no podemos ir a menos de la primera página)
Si swipeDistance es positivo, entonces sumamos uno a currentPage (siempre y cuando es menos de NumberPages - 1, por lo que no podemos ir más allá de la última página)
La última línea de código que nos desplaza a la currentPage (que puede o no puede haber cambiado). Usted se dará cuenta que no hay condiciones en esa línea. Es parte del bloque "en cualquier extremo toque", y que necesita para funcionar ya sea que consigues si te pasan más que el umbral o no. Si currentPage cambiado, entonces tenemos que ir a la nueva página. Sin embargo, se nos robó menor que el umbral, entonces tenemos que volver a colocar la pantalla de nuevo a la página actual, ya que había sido parcialmente desplazado hacia otra página.
La disposición
La disposición sólo tiene que ser un múltiplo de la anchura de la ventana. En mi ejemplo, la ventana es de 480 píxeles de ancho y quería 5 páginas por lo que el diseño es de 2400 píxeles en total.
Puede añadir botones o texto, o cualquier otra cosa que desee en cualquiera de las páginas.
scirra.com/images/articles/swipe_layout.png
Pensamientos finales
Después de jugar con él por un tiempo, lo primero que quería hacer era hacer las páginas de un ciclo en un bucle continuo. No era muy difícil de hacer eso, pero hizo el código más complicado y hay que duplicar la página del lado derecho en el lado izquierdo, y duplicar la página del lado izquierdo al lado derecho si lo desea para desplazarse sin problemas - y que hace que sea mucho más difícil de añadir o eliminar páginas.
Puede haber otras maneras de hacer que envuelven alrededor, por lo que si se llega a algo mejor que me haga saber!
También pensé en añadir un temporizador para que sea desplazarse automáticamente a la página siguiente después de unos segundos. Eso no debería ser muy difícil tampoco, pero esto ya parecía estar empujando los límites de un tutorial para principiantes.
El último pensamiento que tuve fue que sería bueno si se deslizó en la página siguiente después de haber terminado deslizar, en lugar de desplazarla allí - lo que haría más parecido a la galería de fotos en mi teléfono. Una vez más, esto no debería ser demasiado difícil. Por lo tanto, tal vez voy a hacer una versión avanzada de esto algún día! O si alguien quiere probarlo, me gustaría ver lo que te ocurrió.
¡Gracias por leer!
ACTUALIZACIÓN 25 de Feb, 2014
Acabo de añadir el archivo capx con desplazamiento suave (swipe2.capx) que había ligado en los comentarios. Si tuviera tiempo para trabajar en él había varias cosas que quería mejorar, pero esto debe darle algo con qué trabajar.
El archivo capx para la versión que podría envolver alrededor era demasiado complicado y confuso para compartir. Algún día puede volver a intentarlo, y si encuentro una manera más fácil de hacerlo voy a añadir que a la sección de descargas.
Abra su potencial completo gamedev
Actualiza a la edición personal de Construct 2 , tiene forma más características y no deteniendo de hacer dinero y utilizar su creatividad total, como la edición gratuita hace. Es un pago único y todos Construct 2 actualizaciones Editor son gratis de por vida!