Transcripciones
1. Introducción: Hola. Mi nombre es Jarrett, vocal en Illustrator, y hago algunos proyectos de código para la diversión Ocasionalmente había mucha gente preguntándome sobre estas ilustraciones de
paralaje que he estado haciendo donde uso diferentes capas para especie de crear un tres D efecto con tu obra de arte. Y así por fin lo estoy haciendo tutorial al respecto. Entonces esto se va a basar en HTML, CSS y JavaScript junto con estoy haciendo mis capas inapropiadas. Y esta es una clase avanzada. Entonces si no has tomado mi clase de inicio apropiada, incluyo un enlace a eso en las notas para el curso. Probablemente recomendaría pasar por eso primero. Si tienes preguntas sobre dibujo, uh, pero voy a tener un par de cosas nuevas aquí dentro, y lo repasaré un poco. Pero también sólo algunos códigos de descargo de responsabilidad es intrínsecamente complicado. Si no sabes nada de código, esto va a ser probablemente una especie de tirarte en el extremo profundo solo un poquito. Yo sí trato de ir lo más simple que puedo y mantenerlo no demasiado complicado, pero va a haber cosas que simplemente van mal, y no voy a poder Teoh, explicarlas todas o ayudarte con todas esas cosas. Y lo siento de antemano, pero te recomendaría que vayas a tomar un curso rápido en HTML y CSS y JavaScript . Sé que las escuelas W tres tienen algunas cosas de introduccion rapida o piense que el código Academy tiene algunas buenas , y creo que cualquiera de esas sería una forma genial, rápida de usar tu tiempo antes de hacer esto. Pero si eres un desarrollador experimentado y estás pasando por esta clase, tal vez ayude a las personas que lo están pasando mal y también ten en cuenta que soy artista, no desarrollador, principalmente. Entonces ve fácil en mi código. No seas demasiado mezquino, pero voy a estar haciendo esto en un iPad pro con lápiz de manzana on Va a estar funcionando y procrear. Eres bienvenido a utilizar Photoshopped Clip Studio. No sé qué usa la gente. Cualquier está haciendo programa que pueda que puedas trabajar con capas y luego voy a estar codificando en Kota en un iPad pro. Yo sí tengo un teclado si tienes un teclado,
Bluetooth, USB, USB, lo que sea. Usando esto mi teclado. Yo lo recomiendo porque durante el software de sonido teclado sería un dolor. Pero eres bienvenido a hacer lo que quieras, y entonces yo sólo voy a estar haciéndolo en partes. Entonces, uh, sí, empecemos.
2. Dibujar 1 Concepto y miniaturas: Está bien, vamos a empezar con algunos bocetos para esto. Y, uh, sólo
voy a entrar en mis bocetos apilar aquí y apropiado. Voy a dar click al plus arriba en la parte superior derecha para crear un nuevo lienzo. Y debido a que esto son solo bocetos subrayando el tamaño de la pantalla, realmente no importa,
pues los bocetos probablemente crearán un nuevo documento en cuanto empiece camino en la
obra real cualquier semana. Entonces, um, si no has tomado mi anterior clase apropiada, te recomendaría ir allí para una visión más completa de cómo trabajo en procreate y tipos de cosas. Se puede dio Um pero voy a tratar de tocar algunas cosas aquí. Algunos del pozo, en realidad, en primer lugar, qué vamos a hablar de lo que realmente estamos tratando de lograr aquí antes de ir a ajustes
apropiados y cosas así. Entonces, um, ir a safari. Entonces este es mi sitio web, Um y así el efecto que estamos tratando de recrear es este tipo de paralaje de tres d donde puedes moverlo. Se puede ver que las capas se mueven en relación entre sí, por lo que se siente como si tuviera una caja de sombra. Es algo genial. Y también puedes mover tu dispositivo, y a medida que lo inclinas, puedes ver que la ilustración responde al giroscopio Así que eso es bastante genial. Entonces un par de cosas en las que vamos a querer pensar mientras trabajamos en bocetos para esto son, um, tipo de qué elementos quieres de fondo. De lo que quieres en primer plano, algo de lo que debes estar consciente es una especie de cómo las cosas se superponen aquí. Cuando estoy trabajando en una ilustración completa, eso no es para movimiento mucho del tiempo. Al igual
que, digamos, si algo estaba detrás de este Bush, simplemente no voy a conducir de vuelta allí. Es como, qué tipo de cortar las cosas aquí mismo o algo así como, digamos, esta cosa del clip, que dices que no me importa. Nadie va a ver eso porque está escondido detrás de un arbusto. Entonces sí necesitas estar consciente de que a medida que avancen las cosas, algo de eso quedará expuesto, y puedes ver que en realidad lo he hecho en esta pieza. Si como que le dices eso a otros lejanos a través de la sutil sección donde he
dejado de molestar con las sombras porque creo que me decidí a mitad de camino en esta que iba a hacer algo fresco con ella con las capas puestas. Y obviamente no hice un trabajo perfecto para que algo en lo que pensar como estás haciendo tus bocetos y a medida que vas a crear arte final, Otra cosa en la que pensar es que puedes ver que mientras inclino esto, puedes ver que ordenas de ver más de lo que originalmente ves en los bordes, así sucesivamente, solo te
mostraré lo que he hecho es que he creado una especie de marco de máscara alrededor del exterior, así que no lo puedes ver aquí porque el marco es blanco y el fondo es blanco. Pero si voy por aquí, esta es una versión sin eso en su lugar. Entonces porque tengo estos elementos que van justo hasta el borde, no
quiero este efecto donde se puede ver que las cosas salen del borde y las capas ven un poco raras de esa manera. Siento que ese tipo de rompe un poco el efecto tres d para mí. Podría ser que estás totalmente bien con eso. Depende de lo que vayas a buscar. Pero si para mí personalmente, si voy por un defecto en el fondo es una especie de sangrado completo y algunos
elementos diferentes son de sangría completa. No quiero ver tipo de algunas cosas salir del borde y otras I Simplemente corta rompe la ilusión. Creo que eso voy a estar creando tipo de mascota. Voy a estar pensando en eso como también hago el boceto. Um, la otra cosa es, creo que hay otra. Um, puedes ver a medida que lo mueves. Se obtiene este efecto de inclinación fresco. Y este me gusta mucho porque la espada en primer plano y en el fondo, el acceso es una especie de entre esos. Entonces el tipo de fondo se mueve hacia la izquierda tipo de movimiento hacia la derecha, y creo que eso es algo genial porque hace que se sienta como si la espada estuviera saliendo de la página. El fondo es una especie de entrar un poco a la página, así que quiero recrear ese efecto en esta pieza que voy a hacer así que quiero
pensar en lo que podría ser mi fondo, Cuál podría ser mi primer plano, que tipo de flotador arriba. Así que puedo obtener este efecto fresco donde,
uh, uh, se
siente como si estuviera girando alrededor del centro, y simplemente se siente más como si hubiera más profundidad en él. De acuerdo, entonces esas son algunas cosas en las que pensar. Hablaré de ellos un poco más como hago bocetos. Uh, pero sí, volvamos a nuestros bocetos de ello. Entonces lo primero de lo que quiero hablar es solo tipo de configurada en apropiado realmente rápidamente. Entonces sí tengo algunas configuraciones personalizadas que podrías estar un poco perdido si no las tienes configuradas. Entonces sólo voy a pasar por lo que he configurado aquí. Entonces si has abierto un documento que hicimos antes, ¿golpeaste este rancho en la parte superior izquierda? Uh, puedes ver que hay todas estas pequeñas opciones. El único que estamos viendo en este momento es la prensa. Puedes encender una interfaz ligera si prefieres que yo tiendo a preferir oscuro generalmente y luego si eres zurdo, Quizás encuentres que esto es bonito. Se pueden mover los deslizadores de opacidad y tamaño hacia el otro lado. Entonces si estuvieras haciendo así, que no me gusta a veces ajustar los con la mano que no estoy secando con así sucesivamente . Entonces voy a dejar la maldición del pincel alrededor. Eso es algo de preferencia personal, sobre todo porque estoy intentando y tomando un video. Eso es un poco agradable. Se puede ver donde mis pinceles si estás mirando la pantalla del iPad en lugar del video de mis manos. Um, estos otros Así que este es el más importante aquí abajo porque lo que estoy haciendo son
controles de gestos , y esto es algo más avanzado. Pero sólo quiero mostrarles el camino que no he montado. Uh, así que no me voy a preocupar demasiado por ninguno de esos cuentagotas que he configurado hasta la
casita se está refiriendo. Teoh esta plaza aquí es su botón modificador. Entonces si sostengo eso hacia abajo, um, entonces efecto lo que hace el lápiz. Entonces si volvemos a los controles de gestos eso no he configurado. Entonces mi herramienta recolectora de color cuentagotas de ojos ocurre cuando sostengo ese cuadrado y, uh, usé el lápiz de manzana. O puedo tocar y sostener la pantalla para poner mi cuentagotas, um, forma
rápida. No he cambiado, y él sintió ajustes ahí. Y luego menú rápido, éste tienes que encender para que no se encienda por defecto en el caso. Si no lo has usado antes. Eso Lo que tengo es que no me he puesto a tocar. Por lo que en cuanto toque la pantalla, aparecerá el menú
rápido con el dedo y no con el lápiz de manzana. Y también tengo un set de pantalla completa para que se encienda automáticamente mientras lo intento. puede o no gustarte. Creo que como que me gusta,
pero probablemente ir de ida y vuelta un poco sobre también se puede rematar con cuatro dedos para
entrar en pantalla completa. Um, pero déjame mostrarles a los de aquí realmente rápidamente a través de esto. Interesante. Si he personalizado algo más como no Oh, sí
tengo capas como esa. Nos meteremos en eso más tarde, así que no leas tan rápido sobre eso. Menú, Uh, sólo tipo de tocar la pantalla y se puede ver este menú aparece. No puedo recordar exactamente cuáles son las opciones predeterminadas aquí, pero para personalizarlas, tocas y mantén pulsado, y luego puedes elegir entre un montón de acciones diferentes que quieres hacer aquí. Eso la forma en que lo tengo es que tengo pintura por aquí. Borrar en Alfa Lock, del que hablaré más adelante sobre el tamaño real. Lo cual, uh, no
digas que estoy alejado de mi lienzo. Si tuviera tamaño real, hace que mi lienzo sea el tamaño que realmente sería si fuera a imprimir o algo así. Um, se
puede alternar de ida y vuelta entre donde se reanudó y el tamaño real. Um, y luego tengo Phil capa y agrego texto. No estoy realmente vendido de haber tenido texto en este menú rápido ahora mismo, porque la mayoría de los proyectos en los que estoy trabajando no implican mucho texto s. voy a cambiar eso ahora mismo para voltear horizontalmente para que puedas ver que pone el lienzo cada, Uh Vale, Así que ese es menú rápido para ti y nuestros gestos. Entonces lo otro que conozco mucho de ustedes va a preguntar es qué pincel voy
a estar usando. Entonces para esto, para mi cara de bocetos, voy a estar usando el lápiz técnico, y eso es un pincel por defecto y procreate. Creo que está bajo bosquejo, así que puedes ver que tienes esta biblioteca fresca cuando tocas pinceles. Y luego de este lado izquierdo tienes todo un montón de diferentes conjuntos de pinceles y la mayoría de estos que no he escuchado nuestros predeterminados. Eso dibujando lápiz técnico y he creado mi propio juego de pinceles con todo un montón de pinceles que me gusta usar todo el tiempo. El modo en que harías eso es de este lado izquierdo. Desplázate hacia abajo y puedes hacer clic en este plus y puedes hacer un nuevo conjunto. En realidad no quiero eso. Y luego Pero digamos que sí quería que pudieras entrar aquí toca el pincel que
quieres mover a tu set para duplicar, y luego tocas y mantén pulsado Andi con otro toque de dedo en el nuevo set y podrías simplemente dejarlo caer ahí mismo. Entonces, uh, eso es bastante útil. Creo que solo voy a eliminar Eso dicho, Vuelve a mis favoritos en entonces Sólo una cosa más es así que digamos que dibujo algo y luego me voy a carrera. Creo que por defecto corre. No puedo recordar algo grande pincel así que ven a borrar y es grande y no quiero que
sea grande porque quiero una especie de encontrar el control sobre lo que estoy corriendo. Entonces si voy a mi pincel y estoy en lápiz técnico ahí y luego toco y sostén mi resort que usará automáticamente cualquier pincel que esté usando para pintura para tu maquinilla de afeitar y redes en ambos sentidos. Entonces si tenía algo en reserva Capitán, aguanten nuestro pase. Capitán le dijo al Capitán sobre el tiempo pasado de que funciona, uh, en el cepillo que cambiaría a lo que he estado usando para la navaja y Samos mucho si usas eso. Entonces, solo empecemos a dibujar por un minuto. Entonces a medida que empezamos en el intento real, uh, primero no te mostraría esta característica de forma rápida si aún no lo has probado. Esto es nuevo como un creer procreate olvidó. Para que se pueda ver una especie de verdadero un rectángulo. Y luego si tipo de paro y aguanto al final, simplemente endereza las líneas para mí, y puedo como que reorganizar dónde está en la pantalla, y esto es súper útil por muchas razones. Pero para lo que voy a hacer aquí es sólo una especie de crear pequeños marcos para mis miniaturas . Uh, así que he hecho esta forma y luego porque no es un rectángulo perfecto, lo
quiero en su forma, y sólo voy a hablar de rectángulo. Se puede ver que esa redirección antes, um, si se quiere hacer un cuadrado perfecto o un círculo perfecto o algo así, sólo
voy a señalar esto ahora. Puedes hacer todo lo posible para dejar caer cuadrado perfecto, y no es perfecto, realidad lo hizo OK en esa, pero así que todavía estás sosteniendo el lápiz hacia abajo en la pantalla. Se puede ver que todavía estoy moviendo mi forma por ahí si agrego un dedo más a la pantalla que se ajusta al cuadrado perfecto y que brota también un rotaciones de 15 grados. 15. Realmente no quiero cuadrar para esto. Voy más por como una orientación de retrato nuestro trabajo. Pero puedes hacer lo que quieras. Todavía cuadrada. Pero, ya
sabes, obtienes un rectángulo en ese interruptor para girar las cosas para mí. Entonces eso se trata de la relación de aspecto que busco. Yo quería estar a Tommy lo hará sólo un poco más delgado. Vamos a quedarnos con algo así. Um y luego también eso ha funcionado con círculos y triángulos también. Si por casualidad quieres crear tu obra en un triángulo o algo así, podrías hacer un triángulo, puedes hacer un círculo, y lo mismo aplica. Si mantuviste otro dedo en la pantalla, cambiará entre restringir a un triángulo de círculo perfecto y, uh, tipo de la izquierda. Eso se puede ver muy bien aquí, pero se puede hacer interés, y los labios son ovalados. Y no fue a eso también. Un dedo, bueno, tipo de cambiarlo a una versión más perfecta del mismo. De acuerdo, así que quiero empezar con mi rectángulo, y probablemente voy a hacer un par de bocetos aquí, así que sólo voy a usar mi círculo de herramientas de selección alrededor de todo el asunto. Probablemente no necesité hacer eso porque Eso es lo único en la capa ahora mismo. Pero fuerza del hábito, supongo. Y así y puedes deslizar hacia abajo con tres dedos en la pantalla y eso te dará tu menú de
corte copy paste. O puedes abrir capas simplemente deslizar de derecha a izquierda en esa capa y duplicar. Y así voy a hacer eso y luego duplicar este rectángulo que dibujé aquí y luego duplicar eso otra vez. Entonces tengo tres rectángulos diferentes que puedo conducir y luego fusionar esos en una sola capa porque realmente no quiero un montón de jugadores de unos bocetos de miniaturas diferentes. Yo sólo voy a pellizcar esos juntos en mi menú de capas, y se pueden ver juntos sólo un año. Um, tengo todos estos bocetos que puedo para que estas pequeñas plantillas rectangulares trabajen desde los bocetos. Um, quiero hablar de un par de cosas que estoy buscando en estos bocetos, y luego voy a cambiar a probablemente lapse de tiempo, y sólo voy a caer por un rato. Se puede ver el proceso aquí, pero así, como mencioné cuando te estaba mostrando esas obras de arte. Yo como que quiero trabajar dentro de un marco aquí. Simplemente pienso en esta obra de arte con el marco desde el principio. Entonces esto va a ser una especie de cosa de mi cerebro máscara blanca que voy a tener algunas cosas detrás ella, pero sólo se revelará tipo de cuando inclines el dispositivo o muevas el ratón o el dedo en la pantalla. Um, y entonces la otra cosa en la que quiero pensar es, uh, una especie de lo que hay en el fondo. Entonces tal vez tenga algunas nubes o algo así. Estamos buscando nube,
pero, pero, um, y tal vez algunas estrellas en el fondo y esas podrían moverse sólo un poco en relación con el cielo tipo de, pero y entonces tal vez tengo, como, una figura en primer plano, sólo una especie de flotando aquí. Dice lo mejor que he conducido nunca porque no solo paso un tiempo y dibujo este minuto, sino que solo quiero hablar de algunas de las cosas que busco en estos bocetos. Um, así que quiero esta figura en primer plano. Si esta fue la idea por la que
voy, como que quiero flotar, así que parece que está frente a esta máscara y entonces tal vez tendré una capa de sombra que va al fondo. Y luego quiero que estas nubes parezcan como si estuvieran detrás. El fondo de la máscara y el cielo se ven como si estuviera detrás de la máscara también. Y entonces tal vez si quiero sólo un poco más de profundidad, podría agregar algunos elementos flotantes de una estrella frente a la máscara aquí para que estarían tal vez detrás de la figura o frente a la figura en términos de tres D. Pero lo harán. Se romperán un poco el marco, y creo que eso podría parecer bastante guay en este contexto. Para que veas que estoy usando mi menú rápido. Yo solo No tienes Teoh tap y luego tap. Simplemente puedes pasar. Slide no gustó lo que quieres. Y eso sí significa que a veces estoy seleccionando algo sobre accidente, ya que probablemente te darás cuenta mientras trabajo. Uh, estoy bastante bien con eso, porque en general me acelera la manzana hacia arriba. Algo de lo que sí quieres estar al tanto cuando estás configurando después de un menú rápido es um no incluir nada aquí que vas a hacer en accidente que no te darás cuenta de que
lo hiciste , si eso tiene sentido. Entonces, por ejemplo, solía haber fusionado capas aquí como crearía una nueva capa, dibujaría algo que la fusionaría, y ni siquiera recuerdo exactamente por qué estaba haciendo eso. Pero capas fusionadas es algo que a menos que no tengas que estar mirando la parte superior de la pantalla con cosita que dice fusionada, tal vez no
te des cuenta que sucedió hasta un poco más tarde. Entonces no quieres acciones destructivas que no te darás cuenta. Por lo que algunos de estos son destructivos, técnicamente, como capa de relleno. Pero me voy a dar cuenta de que hice eso. Eso Eso es sólo algo. Piensa en si estás pensando en tu rápida configuracion de menú. Um, vale, así que voy a dejar caer un poco, uh, llegar a un par de ideas más, probablemente encontrar ahora en un poquito, y entonces esperemos que al final de esta sección, vamos a tener al menos un boceto que puedes pasar para crear una obra de arte completa que funcionará bien con un efecto de paralaje. Entonces, empecemos. - Creo que estamos listos para seguir estos bocetos. Uh, así que tengo tres bocetos. Estoy bastante contento con todos ellos puestos. Entonces tú decides cuál realmente quiero usar para este proyecto de paralaje. Podría volver a estos otros bocetos para algo más u otro proyecto como este más adelante. Pero por ahora, sólo
necesitamos elegir uno. Y, um, creo que he pasado de un poco más simple de lo que me gustaría a un poco más complicado de lo que me gustaría. Entonces me estoy inclinando hacia este medio para este proyecto en particular. Uh, así que al siguiente paso es, vamos a moverlo a un campus separado y luego, uh, terminarlo en color y todo así, y esa va a ser la siguiente lección. Pero antes de pasar a su me gustaría apenas empezar la siguiente lección ya con nuestro boceto en
miniatura en su lugar en ese campus. Entonces voy a copiar el boceto aquí afuera, así que estoy usando mi herramienta de selección,
uh, uh, y solo delineando,
um, um, este boceto, asegúrate de que estoy en la capa correcta para copiar eso, y solo hay una capa, por lo que debería ser genial. Y luego voy a deslizar hacia abajo con tres dedos en la pantalla y acaba de pulsar Copiar allá y eso copia mi obra aquí. Y luego vuelvo a la galería. Voy a dar click en Plus y creo que eso estuvo bastante cerca de una relación de aspecto 43. Eso Porque quiero usar esta ilustración como voy a querer la obra de
arte de mayor resolución así como una resolución más baja para las cosas de código. Voy a empezar con una resolución más alta. Probablemente voy a hacer 4000 por 3000. Eso tengo aquí dentro, pero sólo voy a mostrarte cómo crearías eso,
porque esa no es una de las opciones por defecto. Por lo que abajo en la parte inferior de este menú plus, tengo muchos extras aquí dentro. Pero si creas tamaño personalizado aquí, puedes tocar 4000. En realidad, quería 3000 por 4000. Eso ya es 4000. Puedes elegir el DP I. Eso realmente no importa a menos que estés usando pulgadas o milímetros o algo así . Um uh, al
menos no para nuestros propósitos aquí. Si estás en un iPad con p tres. A mí me gusta usar el color Petri porque puedes conseguir unos rojos y verdes realmente bonitos. Um, y entonces solo voy a llamar a este proyecto de relax y se hizo, y eso va a crear un nuevo lienzo para mí. Y voy a golpear otra vez con tres dedos y pegarle pasta, y eso pone mi obra de arte aquí. Se puede ver que es mucho más pequeño que éste. Truco genial aquí que probablemente te volverá a mostrar más tarde, ya que estamos trabajando en la obra real, es si toco y sostengo este icono de transformación aquí arriba, que no puedes ver porque estoy tocando y sosteniendo en él. Uh, este pequeño icono del cursor del ratón es para una transformación, Así que si sólo tratara de panoramizar o acercar el lienzo que mueve esto sobre seleccionado. Pero si toco y sostengo esta flecha, entonces puedo mover el lienzo sin deshacerme de mi selección en ir a golpear este ajuste a sondear botón abajo en la parte inferior, y eso automáticamente solo llena el lienzo con mi obra de arte on de, dependiendo de si tienes activada esta opción Magnetics, que se comporta de manera diferente. por lo que si apagaste, entonces hará Ah, visita llamada ajuste de aspecto donde mantiene tu relación de aspecto. Pero asegúrate de que toda la obra de arte cabe en el lienzo donde si tienes Magnetics activado y encaja para lienzos, sí que rellena el aspecto,
lo que mantiene tu relación de aspecto pero llena todo el lienzo. Probablemente quiero algo un poco entre esos solo para asegurarme de que en realidad tengo , ya
sabes, voy a ir con fit porque quiero asegurarme de que mi frontera alrededor de esto sea lo suficientemente grande. Estoy apagando Magnetics poniéndose en forma al lienzo y luego voy a tocar esa flecha y entonces estamos listos para ir en la siguiente lección. Entonces nos vemos por ahí.
3. Dibuja 2 el boceto: De acuerdo, Entonces en serio, lo único que estamos tratando de lograr en esta parte del tutorial es afinar este boceto. Entonces voy a pasar un par de minutos haciendo eso, y probablemente lo pondré a tiempo. Lapse mientras trabajo, realmente no
hay mucho secreto para ello,
aparte de poner mucho tiempo y pasar y asegurarme de que todo esté limpio y listo para salir. Pero el objetivo de toda esta lección es que para el final, vas a tener ilustraciones terminadas que están coloreadas con capas que estaban listas para exportar
a un proyecto de paralaje. Y entraré un poco más de detalle cuando lleguemos a ese punto. No quiero ir demasiado a fondo sobre cómo estoy dibujando en procreativo porque tengo otra clase sobre eso, y ese no es realmente punto total de esta clase. Pero por ahora, sólo
voy a trabajar en este boceto, y señalaré algunas cosas que llegan a colorear. De acuerdo, creo que estamos listos para ir en este boceto. Te habrías dado cuenta de que he cambiado a los chicos aquí como, cinco veces aquí dentro, y no estoy 100% contento con eso Aún, Así que es posible. medida que pase por los colores, voy a cambiar un par de cosas más. Pero en general, creo que tengo una buena idea de que puedo empezar a bloquear en algunos colores, así que pasemos a eso.
4. Dibujar 3 bloqueos en los colores: De acuerdo, voy a empezar a añadir color a esto. La mayor parte de esto va a ser lapso de tiempo, pero quiero mostrarles la técnica que estoy usando y tipo de cómo la rompo. Eso en primer lugar, voy a empezar simplemente bloqueando en los colores y tipo de configurar algunas de las
capas principales con las que iban a estar trabajando aquí. Y entonces probablemente haré un lapso de tiempo después de mostrarte un par de esas cosas y luego regresaré cuando empiece a agregar texturas y algunas hormigas Grady y refinar colores, y hablaremos de eso un poco más. Pero empecemos con solo bloqueo y colores y tipo de cómo configuré eso. Por lo que tengo aquí mi boceto de miniaturas. Aún así, probablemente pueda creer que por lo general elimino que voy a conservarlo por ahora, si
acaso. Pero voy a tocar esto en mi menú de capas y simplemente bajar la opacidad de mi capa de boceto y en realidad voy a cambiar el nombre de esto tocando una vez y luego tocando cambiar el nombre solo para boceto. Por lo que es fácil de encontrar cuando tengo un 1.000.000 de capas aquí, y luego voy a añadir otra capa y simplemente arrastrar y soltar eso debajo de esa capa de boceto . Y así ahora si dibujo algo,
um, um, que la capa de boceto seguirá estando por encima de ella. Uh, y así un par de otras cosas que quería simplemente tocar muy rápido antes de llegar demasiado lejos en esto es Ya ves, dibujé este grande nuestro rectángulo, pero casi rectángulo alrededor de esto. Esta es la máscara de la que hablaba en la fase de miniaturas. Entonces sólo voy a mostrarles cómo configuraría esto. Uh, en realidad, vamos a configurar primero un color de fondo, y probablemente voy a cambiar esto, pero sólo algo con lo que empezar. Digamos que tenemos un fondo azul y luego algunos en mi capa aquí. Yo sólo voy a llamarlo máscara y luego voy dedo del pie a abrir mi herramienta de selección, que es esta pequeña cosa en forma de s de arriba a la izquierda y luego sólo tipo de rastro sobre esto. Um, cuando esto lleva algo de práctica, si no estás acostumbrado, Teoh, uh, puede ponerse bastante tedioso,
lo cual es una gran parte de por qué solo voy un tiempo Lapse esto porque esto va a tomar un más de lo que parecerá que te lleva. Entonces no te desanimes demasiado si esto te está llevando para siempre, y me gusta como construir mis selecciones y piezas, realmente no
hay ninguna buena razón en particular para eso, aparte de eso es sólo una especie de cómo lo hago. Por lo que de forma predeterminada, esta herramienta de selección se agregará a la selección que ya tienes, para que puedas ver esta es área que no está seleccionada. Esta es la zona que se selecciona. Es decir, si añado Así que si sigo probando una selección y luego vuelvo, no
vimos eso. Acabo de agregar Así tengo más área seleccionada, así que puedes tipo de construirlo pieza por pieza un poco. También puedes tocar para agregar líneas rectas encendidas para que puedas apagar con la herramienta de selección entre tap tab para un montón de líneas rectas, o soy tú puedes hacer línea recta de tachuela y luego dibujar una línea, y eso podría ser curvilíneo si quieres. No quieres que sea, pero y algún tipo lento de agradable, porque por algo como esto. Podría querer una línea curva para esta esquina. A Y entonces podría querer cambiar a una línea recta aquí, pero luego continuar una curva para poder crear una línea recta desde donde me detuve. Donde quiera que vuelva a empezar, y luego el siguiente avión sin levantar mi pluma o lápiz de manzana, supongo que puede ser curvo para que realmente puedas mezclar y emparejar de una manera realmente natural, lo cual es bonito. Y luego voy a ir en blanco selecto, que ya tienen en mi paleta aquí. Entonces voy a usar el blanco para esta máscara y después porque tengo a Phil Layer configurado en mi menú
rápido, recuerda, hablamos de eso. Simplemente podemos ir así y llenar el área que he seleccionado. Si no configuraste tu menú rápido y así he tocado, lo
tengo configurado. Entonces mi rápido cuando te abres al tacto y luego puedes tocar y sostener algo y elegir lo que querías hacer. Por lo que tengo ese set para llenar más tarde. Si no quieres tu menú rápido, también
puedes tocar en tus capas toca en la capa que quieras rellenar y arriba Phil Layer, y luego obtienes esta bonita máscara. De acuerdo, así que ahora puedes ver si iba a mover esa máscara alrededor del fondo sigue siendo azul todas partes y donde esto va a ser importante cuando lleguemos a la parte del código real donde estamos haciendo los controles de movimiento y moviendo las cosas alrededor porque, como mencioné antes, no
quieres ver los bordes de tus diferentes capas se superponen entre sí. Simplemente se ve un poco raro. Y entonces así vamos a tener un montón de cosas. Algunas de estas cosas de fondo van a estar detrás um, mi capa de máscara, y parte de ella va a venir al frente. Y estoy pensando en este momento que esta gente probablemente también estará frente a eso. Uh, entonces lo otro que quiero mostrarles es solo Así que digamos que la gente está por encima de esto por ahora, vamos a usar la herramienta de selección. Sólo voy a entrar y empezar igual que hicimos con la máscara, seleccionando mis formas rápidamente. Y yo sólo voy a elegir sculler on Entonces otra vez, estoy disparando mi menú rápido para llenar, uh y gastar. Es decir, solo haz la pura forma realmente rápidamente solo para mostrarte cómo queremos establecer esto. Entonces siento eso con un asesino porque estos dos, como mencioné, van a ser parte de la misma imagen en la exportación final. Simplemente voy a empezar a agrupar las cosas por cómo quiero que aparezca cuando haya terminado. Entonces cualquier cosa de estas personas porque van a estar en la misma capa, sobre todo porque están tocando. Eso sería bastante complicado hacer diferentes capas y tipo de mantener eso intacto. Um, voy a crear un grupo seleccionando estas dos capas, y seleccionas varias capas tocando en una y luego deslizando hacia la derecha en otra para tener múltiplo y luego tocas grupo, que Yo sólo lo hice. Y luego puedes ver que aparecieron en este nuevo grupo aquí. Pero puedo tocar para renombrar eso sólo voy a llamarlo personas o humanos, porque eso es más divertido. Y luego tenemos nuestra máscara, lo que sean los humanos, y luego voy a crear una nueva capa y mover esto abajo, y entonces eso va a ser Vamos a hacer esta extraña forma nublada por ahora, y no quieres simplemente cortar esto apagado porque esta máscara se va a mover. Entonces mi instinto normal con algo como esto si no fuera una ilustración conmovedora, es decir no tengo que dibujar nada aquí atrás porque nadie más aparte de mí lo verá jamás. Pero debido a que la capa se va a mover a medida que mueves tus capas alrededor, sí
necesitas pensar en lo que se verá ahí. Es posible que incluso quieras poner esa máscara al 50% de opacidad o algo para que puedas ver lo que está pasando allá atrás y solo notar si has decidido dejar las cosas inconscientemente o algo así, y así entonces tienes que decidir un color para esto casi definitivamente no el color que voy a querer , pero sirve para mostrar lo que estoy haciendo de vez en cuando. Otra cosa que quería señalar antes de cambiar esto al modo de lapso de tiempo es sólo eso . Voy a estar usando muchas máscaras de recorte aquí,
probablemente, um, um, así que si no estás familiarizado con eso déjame mostrarte. Uh, así que he creado una capa por encima de esta pierna, ¿
verdad? Si lo toco una vez y luego golpeé la máscara de recorte, entonces es que puedes ver que hay esta pequeña flecha apuntando hacia abajo, y está como sangrada. Eso significa que lo que dibuje en esta capa de máscara de recorte solo aparecerá dentro de la forma que está enmascarando o que está siendo enmascarada por mi conjetura está ocurriendo en realidad. Uh, entonces si voy y hago este tipo de rodilla aquí y eso no tiene que ser una forma perfecta,
Uh, Uh, y luego apago mi boceto solo para que sea más fácil de ver y luego seleccionar un color aquí. ¿ Se puede llenar eso y se puede ver en Lee. Sólo se puede ver donde se superpone dentro de mí. Entonces si fuera a quitarme eso de la máscara de
recorte, se puede ver toda la forma. Si la vuelvo a poner en máscara de
recorte, sólo se puede ver la superposición. Entonces voy a estar usando bastante de eso. Y probablemente sólo voy a ver este lapso de tiempo ahora y pasar por Y sólo lo que estoy haciendo en este momento es bloquear en colores. Podría dejarme llevar un poco por un par de resplandor y cosas así, pero sobre todo sólo estoy tratando de conseguir las formas y la idea general de los colores. De acuerdo, creo que mis colores están bloqueados en su mayoría aquí. Entonces voy a empezar a ajustar colores, un poco más salidas, ingredientes en las cosas, Alex y texturas más de lo que tengo. Um, y déjame hablar de pinceles un poquito. Um, Entonces los arbustos que más uso son probablemente estos lápices, y esos se pueden encontrar en bocetos s. uso mucho el lápiz técnico. Eso es lo que acusó de éste. Y ocasionalmente que HB y seis b lápices. Um, y luego en artístico, creo que está el pincel acrílico blanco que uso bastante. Puede que lo haya sacado de aquí por ahí solo en chico acostumbrado a anular uno también. Uh, quash me da una textura mucho más suave, pero así con solo un poco de interés en ella Y lo acrílico puede ser mucho más,
uh,un uh, poco de aspecto rayado. Entonces déjame mostrarte un par de esos. Y entonces también debo mencionar que tengo, uh, así que mis pinceles favoritos todos en esta roca, que creo que mencioné antes. Pero entonces también he duplicado todos mis pinceles en una carpeta llamada Multiply. Entonces son los mismos pinceles, pero cada uno de ellos tiene su modo de mezcla configurado para multiplicarse. Y si no sabes lo que eso hace, déjame mostrarte muy rápido. Um, así que digamos que quiero un color. Esta liga de frente de este tipo aquí, Um y yo estábamos usando qué? Acrílico en esto como color morado muy claro on. No estoy seguro de si esto es realmente bueno todavía, pero así que tengo esta capa puesta en Alfa Lock. puede ver que hay este pequeño tablero de ajedrez detrás de él, y eso significa que cuando color en esta pierna, nada aparecerá fuera de la pierna sólo en las zonas que ya he dibujado algo. Si apago nuestro rebaño, se
puede ver que aparece por todas partes. Uh, entonces notarás que el morado claro simplemente no se ve genial. decir, es muy ligero, pero quiero oscurecer en las cosas mientras mantengo la saturación. Entonces si cambio a esta versión multiplicar del mismo pincel multiplica el modo de mezcla básicamente oscurece las cosas mientras las mantiene saturadas. Para que veas que puedo repasar eso y simplemente oscurece todo. También es un transparente. Entonces a pesar de que tengo estas dos cosas la sombra, supongo que esa es una capa diferente. Pero digamos que estos eran de la misma capa. Seguiría siendo capaz de ver esa sombra así que algo oscurece todo uniformemente, cual es realmente bonito en lugar de solo cubrirlo con un solo color sólido. No estoy seguro de que en realidad quería oscuro en eso bastante tanto. Y a lo mejor quería ser sólo un poco más roja. Entonces mientras estemos hablando de rellenar con el pincel así que estoy usando este bote
Cepillo acrílico , puedes ver Ok. Tales capas en accidente? No, solo apagué mucho. Uh, entonces si voy realmente a la ligera, puedo conseguir un radiante bastante suave con él. O si y esto es lo que me gusta hacer con este pincel es realmente duro en un solo lugar, cual ser levantado y luego tipo de aligerarse después de eso y simplemente un poco empujado duro de vez en cuando, y luego consigues estos bonitos, pequeñas texturas interesantes. Entonces yo un poco oscuro al final de este tipo de interesante. No sé qué tan bien va a aparecer esto en el video, pero tienes una especie de esta textura simplemente más interesante que estás obteniendo. Um también voy a estar refinando algunas formas aquí diciendo, Me encanta esto. Este tobillo como, tiene un pequeño bulto raro aquí sólo un poquito. Entonces solo voy a cargarme eso con mi herramienta de selección, tener esa zona seleccionada, y luego puedo fregar tres dedos de ida y vuelta a Grecia que lo escucharon claro,
um, um, tipo de cosa de escena en esta capa. Otra cosa que quería mostrarte es layer select. Entonces de la forma en que tengo esa configuración, puedo sostener este botón modificador, y luego podría simplemente tocar con un dedo. Y a medida que me deslice por la pantalla, noto que me dirá qué capa estoy tocando actualmente. O si hay múltiples capas como porque una de estas es una especie de transparente, entonces me dará opciones y así podré elegir entre esas dos capas. Entonces quiero seleccionar esa pierna y luego sólo un poco claro este pedacito de mí que
creo que es un poco demasiado. Um, y de nuevo, si quieres configurar jugadores, selecciona de esa manera. Tocas en la llave que preferencias, controles de
gestos, Selección
de capas. Y tengo tal modificador más toque en nada más. Y encontré que eso funciona bastante bien para mí. Podrás jugar con diferentes opciones y ver qué te gusta. Um, así que a ver si hay algo más de lo que quería hablar aquí. La otra cosa que quería mencionar muy rápidamente, y tenía mucha gente preguntándome sobre esto en mi habilidad anterior. Clase compartida ISS, esta idea de máscara de saturación. Entonces lo que me gusta hacer sólo para asegurarme de que tenga buen contraste, porque a veces es un poco difícil de decir. Entonces, por ejemplo, aquí mismo, donde el brazo de esta chica está contra el fondo, se siente como si estuviera vibrando sólo un poquito para mí. Y por lo general eso significa que los valores están un poco demasiado juntos, no me gusta que eso sea realmente horrible, pero así que esa es una especie de área donde es como si no estuviera segura. Yo sólo quiero un poco rápido mirar eso. Entonces voy a llenar toda esta capa por encima de todo con negro son te vendría
bien el blanco ,no importa, , y luego voy a darle un toque al final. Entonces este es mi capacidad y modos de mezcla para esta capa, y luego voy a rematar el color en el extremo derecho y luego tocar la saturación. Y así ahora tengo esta capa que, uh, simplemente saca todo el color de todo lo que guarda mis valores. Y se puede ver en realidad estoy teniendo algunos problemas con este brazo justo aquí porque esa mano simplemente se mezcla en el fondo y así todo yendo y arreglando que probablemente
voy a mucho de eso justo en este segundo, pero, um, es solo que es realmente agradable tener una forma rápida de una especie de tuggle eso en lo suficiente. Um, no
veo un montón de otros temas aquí, así que eso en realidad es bastante bueno. Por lo general, tienen más temas que eso. Entonces anotar, uh, creo que aparte de eso, sólo
voy a empezar a lapso de tiempo otra vez. y sólo pasa y,
uh, uh, intenta refinar mis colores en alguna credencia a las cosas Algo así como lo hice aquí, pero tal vez la luz en un par de áreas oscuras en un par de áreas. Yo solo Hace para mucho más interés visual. Si tienes algún tipo de cambios sutiles de color en las cosas y yo iré a partir de ahí, creo que ya hemos hecho lo suficiente por ahora. Yo sí sólo quiero agregar esas sombras caídas de las que estaba hablando antes, y voy a mostrarles cómo haría eso. Entonces voy a abrir mis capas y porque estoy bastante cerca de fuera de capas para este lienzo. Ver, tengo 28. Es decir, me quedan 12 capas, pero quiero duplicar esta sección entera con este grupo de humanos encendido, y ahí hay más de 12 capas. Entonces lo voy a hacer es que voy a tocar aplanar, vamos a tocar una vez, luego toca, aplanar, y luego voy a tocar fuera de capas, deslizar hacia abajo con tres dedos, copiar y luego estoy va a deshacer. Y así ahora ya no es platino, y luego puedo ir a capa debajo de él hecho deslizar hacia abajo con tres dedos y golpear basado. Y luego tengo una copia de ese grupo, y voy a encender y apagar un candado para esa capa barriendo el menú rápido. Y luego me voy Teoh, llénalo con este color púrpura claro que he elegido. Y luego voy a cambiar eso para multiplicar el modo de mezcla para que veas que tengo una especie de sombra de ellos ahora. Y sí quiero que eso sea un poco borroso. Entonces cuando se mueve la imagen frente a
ella, se siente como si estuviera siendo echada de frente eso. Antes de hacer eso, necesito apagar Alfa Lock. Y si no tienes hombre rápido, te instalas. Puedes deslizar hacia la derecha con dos dedos y notarás que el patrón de tablero de ajedrez se ha ido. Lo que significa Alfa Lock está apagado que voy a tocar mi varita mágica aquí arriba, que es mi menú de ajustes y luego toque acogedor,
um, um, desenfoque y luego simplemente balancearse en la pantalla hacia la derecha en cualquier lugar, y concluyo que por mucho que quiera probablemente algo así sería bastante bueno alrededor de 19.7. Entonces hazlo como quieras. Si volví a encender mi grupo de capas de humanos y luego voy a mi herramienta de movimiento se movió y puede ver que hay una sombra detrás de ellos y entonces en realidad voy a hacer
lo mismo con mi máscara. Claro porque me gustaría que la máscara echara una sombra sobre este telón de fondo también. Entonces solo voy a duplicar eso porque es solo una capa. Tengo un montón de capas con las que trabajar eso solo puedo duplicarlo. Voy a elegir el que sea bajo, y luego voy a hacer eso. Misma Ghazi y Desenfoque. Um, probablemente la misma cantidad, en realidad. A lo mejor sólo un poco menos, porque estoy pensando que los humanos estarán al frente, lo que significa que esto tal vez estaría borroso un poco menos. Voy a hacer un 15% de desenfoque en eso, y luego sólo voy a deslizar hacia abajo para encender Al Flock. Está justo encima de llenar su toque sin color púrpura en mis modos de mezcla. Cambia esto para multiplicar, y ahora si muevo esta máscara, puedes ver que hay una sombra de lo enmascarado detrás de ella, y creo que eso es todo. En realidad estamos creando la obra de arte. Entonces en la siguiente lección, voy a repasar cómo voy a agrupar las capas para exportar entonces y luego vamos
a empezar a usar abrigo.
5. Cola 1 Preparación de tus capas: Muy bien, entonces en esta escucha, solo
vamos a repasar cómo conseguir que tus capas exporten combinadas de la manera que
queremos que sean para usar en código y luego en realidad en tu editor de código para que podamos
empezar , uh, armando tu código proyecto eso para empezar, solo
voy a deslizar de derecha a izquierda en esta miniatura del proyecto en el que hemos estado trabajando y se duplica y Y la razón por la que queremos hacer eso es a razones En realidad, . una es que no quiero deshacerme de todas mis capas aquí, pero sí quiero combinar mis capas. Y la otra razón es que si recuerdas, hice esto más grande de lo que necesito para este proyecto de código era de 3000 por 4000 píxeles, lo cual simplemente va a ser bastante pesado si estás haciendo algo en un navegador Web. Sobre todo porque creo que terminaré con bastantes capas en este proyecto. Entonces vamos a querer hacerlo más pequeño, y vamos a querer combinar un montón de capas para luego exportarlas, y si lo hiciera en este proyecto, entonces perdería un montón de detalles que no quiero perder. Entonces solo estoy creando un duplicado abriendo esto, y luego simplemente vamos a decidir qué capas queremos combinar y tipo de cómo queremos que se configure
nuestro proyecto para el código. En primer lugar, solo
voy a borrar mis bocetos y mi máscara de saturación. No los necesito para esto entonces. Yo solo quiero decidir qué capas quiero aplanar. Entonces ya sé estas cosas flotantes en primer plano, Um van a ser sólo una capa. Mis humanos, van a ser sólo una capa. Entonces solo estoy tocando una vez que golpear aplanar mis sombras. Creo que quiero que ambas sombras estén en la misma capa porque solo van a estar en la
misma línea que el telón de fondo. Entonces solo voy a pellizcar estos juntos para combinar uh y luego mi máscara, solo
quiero que me mantengan es thes dos conjuntos de elementos flotativos. Yo quiero quedarme separados estas nubes. Yo quiero estar separado, y tú puedes hacer esto de cualquier manera que tenga más sentido para ti. Toma un poco de prueba y error para especie de ver qué tiene sentido estar en diferentes capas cuando se mueve juntos, entonces solo quiero combinar en Así que tengo un fondo sólido para no usar este color de
fondo, Uh, por ahora mismo, sólo porque tendrías que exportarlo un poco diferente. Por lo que solo copiaría cualquier color de fondo que esté en una capa encima del fondo y luego lo combinaría. Si tienes algún otro detalle de fondo, uh, tengo 12345678 capas diferentes que quiero exportar cada una como PNG Um, así que voy a tocar la llave aquí arriba,
y en realidad, antes de exportarlas, Necesito cambiar el tamaño de mi lienzo. Voy a decir tamaño de lesión de cultivo de lona. Y entonces creo que porque esto es tan grande, asegúrate de tener remuestra activada,
uh, uh, así que eso significa que estás redimensionando el documento en lugar de recortarlo. Re sample está encendido, y voy a tocar aquí, y creo que voy a probar 900 por 1200 píxeles para esto,
uh, uh, y luego acabas de golpear hecho, y va a cambiar el tamaño. Entonces puedes decir que he perdido un pequeño detalle, que es lo que queríamos, que también significa que serán archivos mucho más pequeños. Y luego voy a tocar de nuevo mi llave inglesa aquí arriba y golpear share. Y esto es nuevo, Inapropiado 4.3. Entonces si no has actualizado por cerca de tres, esto es, uh eso no estaría ahí para ti, Pero en el menú compartir, hay este área de capas compartidas, y solo voy a tocar archivos PNG. Entonces, ¿qué hace eso es exporta? Cada capa tiene su propio archivo PNG, y luego solo voy a decir, guarda ocho imágenes y eso las guardará directamente en mi rollo de cámara. Entonces si no abro eso, ya
puedes verte. Tengo 12345678 diferentes capas todas guardadas como PNG separadas para hacer una moral, lo cual es genial. Uh, entonces esta siguiente parte puedes usar, uh, cualquier editor de código que quieras realmente? El que voy a estar usando su coda. A mí me gusta esa. Mucho por muchas razones. Creo que está muy bien hecho. Creo que cuesta $10 o algo así en la tienda APP on. Podría ser diferente ahora, pero si no quieres usar eso, también
está esta app llamada JavaScript en cualquier lugar que es gratuita. Eso está bastante bien, y te mostraré cómo importar imágenes ahí también. Pero voy a estar usando codificado mayormente. Entonces, empecemos con eso. Uh, entonces esta es tu primera vez lanzando Coda? Uh, no
habría nada aquí para ti. Soy una especie de nerd y tengo un montón de cosas diferentes que hago aquí. Entonces lo que vas a querer hacer es simplemente golpear este plus en la parte superior derecha de la esquina superior, nuevo sitio, y luego simplemente darle un nombre. Entonces voy a llamar a este paralaje. Puedes llamarlo como quieras. Si eres un nerd como yo y tienes otras cosas del sitio web a las que tienes
acceso de administrador , podrías ponerlas por aquí, pero no voy a pasar por eso ahora mismo si lo hubiera hecho entonces solo tengo esta en blanco proyecto, así que voy a tocar Parallax. Y otra vez esto estaría vacío para ti Si nunca has abierto esto antes. Entonces, ¿vas a pegarte? Además, y luego solo me gusta mantener cualquier proyecto que haga al escuchar en su propia carpeta. Entonces voy a tocar nueva carpeta y luego voy a llamar a este Parallax y luego voy a golpear, crear, luego toque en esa carpeta paralaje que probablemente estará arriba para ti y luego
voy a hablar. Además, esto probablemente te pedirá en este punto,
Teoh, Teoh, que
le permita acceder a tus fotos, así que asegúrate de hacer clic en Aceptar en eso. Ya lo he hecho. Eso se puede ver que tengo mis capas. Entonces esto es solo todo en mi fototeca justo aquí puedes desplazarte, lo cual es conveniente. Uh, así que solo voy a tocar y tú quieres ir de atrás al frente. En tus capas están Eso es lo que estoy haciendo de todos modos. Entonces elijo mi espalda más tarde primero mi fondo y tocando solo tocando eso
se puede ver que se le ha renombrado para mí, lo cual es un poco molesto, así que sólo voy a renombrarlo aquí mismo. Capa 11 punto PNG um y luego me voy a ir a importar. Yo solo voy a hacer esto por cada una de las capas que estoy importando, y sí necesitas que Teoh las importe o cambiemos el nombre a medida que vayas si lo estás haciendo de esta manera, De lo contrario se preguntará. Tratará de cambiarles el nombre de la misma cosa porque se basa en la hora del día en que
se añadieron o algo así, y te preguntará si quieres reemplazarlo. Entonces si eso está pasando, asegúrate de llamarlos de uno a la vez antes de importar el siguiente. Y esto es sólo un poco tedioso. Pero, uh, bienvenido a codificar. Además, la razón por la que se lo estoy dando a los números es si quería agregar animación a estos, es que podría nombrar algo como Capa uno subrayado a, por ejemplo, Capa uno subrayado tres, y eso significa como el marco uno. Entonces es básicamente como capa un cinco fotogramas uno. No voy a entrar en animación en este tutorial porque es un poco más avanzado , pero tal vez en un líder uno y último. De acuerdo, así que tengo 12345678 Perfecta. De acuerdo, así que todas mis capas están aquí listas para salir. Volveremos en la siguiente lección e iremos agregando tus otros archivos de código ahí. Pero en este momento, solo
quiero pasar por este script de trabajo en cualquier lugar app realmente rápidamente. Si eliges usar esto, um, eso lo puedes ver solo tiene este proyecto hola mundo ya ahí para ti. Simplemente puedes ignorar eso. Voy a pegarle este plus en la parte superior izquierda. Y luego solo voy a llamar a mi proyecto Parallax y golpear Guardar y luego tocar eso y tapar por aquí. Tiene algún código ahí para ti. Cuando lleguemos al código, quieres eliminar eso y simplemente reemplazarlo por lo que estamos hablando. Pero por ahora, todo lo que necesitas hacer es que hay este pequeño icono de imagen en la parte inferior izquierda. Voy a tocar ese hit plus y golpear importación de fototeca otra vez. Eso probablemente te pedirá acceso a tus fotos. Entonces digo, está bien. Y luego lo mismo que solo quieres ir de atrás a frente. No creo que esto te dé ninguna forma de renombrarlos. Debo equivocarme. Sí. Entonces creo que acaba de llamarse como se llama. Por lo que la señorita importará cuando estés haciendo el código, tendrás que venir a buscar estas referencias en lugar de donde escribimos los nombres que les
dimos en Kota. Y Pero lo harás con cada imagen, al
igual que hicimos con Kota. Hace que no les renombra. Tan solo asegúrate de que eso funcione. No trata de renombrarlo otra cosa. Sí, así que debería estar bien. Y OK, así que sí, todas nuestras capas de aire configuradas y listas para salir. Se puede tocar en eso. Eso se puede ver. Es la imagen que queremos eso en la siguiente lección. Vamos a ir más de empezar con el código, conseguir que todo se enganche correctamente. Entonces, uh, puedes hacer referencia a tus imágenes desde tu HTML y cosas así. Uh, así que voy a ver en la siguiente lección
6. Cola 2 HTML, CSS, y JavaScript: Muy bien, entonces vamos a empezar a codificar. Como mencioné, voy a estar usando esta app llamada Coda. Entonces me estoy metiendo aquí. Si sigues junto con la lección anterior, deberías tener todas tus capas aquí ya s. así que solo voy a crear una carpeta dentro de este titular lo voy a llamar imágenes, minúscula I. Y entonces voy a seleccionar todas estas imágenes y simplemente rastrearlas en su y listo. Entonces ahora debería tener una carpeta en esta carpeta paralaje y nada más. Entonces voy a golpear este plus y luego rápido nuevo archivo aquí y llamarlo index dot html y luego voy plus otra vez, dormí un nuevo archivo llame a este uno significa dot Js y uno más llamado estilos CSS. De acuerdo, entonces si no estás familiarizado con el código en absoluto, vamos a pasar por estos sólo un poquito a medida que tengamos las cosas configuradas, pero esencialmente el índice punto html. Por lo que html es tipo de su estructura de su página. Es donde tipo de organizar las diferentes piezas. CSS es tus estilos para la página, lo que ,
uh, básicamente significa como si quieres cambiar colores, tamaños de cosas, posiciones de cosas, ahí es donde harías eso. Y entonces el archivo Js o JavaScript es donde lo haces en cualquiera de tu lógica. Entonces si quieres que sucedan cosas reales en tu página, normalmente
va a estar en JavaScript. Entonces empecemos con el archivo HTML. Y así he aprovechado eso. Y luego voy a golpear edit en Coda y luego Así lo primero que vas a querer hacer y me aseguraré de que incluya versiones terminadas y en curso versiones de cada uno de estos archivos y como parte del proyecto. Entonces si te pierdes, puedes ir en referencia aquellas que vamos a querer hacer. Ángulo de apertura, corchete, exclamación doc, escriba todas las mayúsculas y luego ht minúscula conocida. Y entonces es mañana slash pellizcado, ya
sabes. Entonces estas son etiquetas HTML, básicamente estas aire como pequeños contenedores. Entonces este de los top solo dice que se trata de un documento HTML. Estos están diciendo bien, y ahora aquí está el HTML real. Cualquier cosa dentro de esos en lo siguiente se va a llamar cabeza y
lo voy a cerrar slash dentro de eso, vamos a tener un par de cosas de metadatos y vamos a importar nuestro archivo CSS. Entonces lo primero que vamos a decir es título y puedes llamar a esto como quieras. Yo lo voy a llamar Relájate. No tiene que estar en slash. El siguiente va a ser, uh, enlace igual a estilo Hoja igual a texto slash CSS Trump igual a no Sasha Styles. Y entonces podría simplemente poner especial sobre cerrarlo dentro del ataque de apertura. Entonces este dice el título de mis páginas, Parallax. Este dice, aquí es donde está mi archivo CSS, y eso va a ser importante. Si quieres mover las cosas por página, que hacemos y entonces es la siguiente. Estos tienen razón es importante. Pero ahí Está bien, nombre aquí, no el mío. Este siguiente es Básicamente solo le dice Teoh bajo al tamaño del dispositivo. Entonces si tienes una pantalla de alta definición de pantalla de retina, ésta hace que en realidad aparezca con el tamaño correcto en un par de otras cosas. Enfria igual dispositivo porque un usuario Ok, entonces eso es todo para tu elemento de cabeza. Andi, ¿
puedes simplemente copiar todos esos directamente? Es absoluto. Probablemente debería ponerme ahí dentro. Entonces para la próxima pieza de esto va a ser cuerpo. Entonces aquí es donde va tu contenido real. Por lo que las cosas de la cabeza son en su mayoría metadatos como configurar algo que puedes importar scripts allí , aunque generalmente hace más sensible en la parte inferior. Um, y luego si quieres hablar de esto, hizo hacer Andi alguien podría ya estar familiarizado con estas cosas. Entonces lo siento si esto es, uh, demasiado complicado o demasiado simple para ti. Sólo lo estoy explicando de la forma en que lo estoy explicando. Entonces eso div básicamente es solo un contenedor de parpadeo en html y vas a ver algunos otros tipos de contenedores como body y, por ejemplo, puedes tener esto, creo que es un párrafo es lo que significa la P. Por lo que tienes diferentes tipos de etiquetas HTML. Div es uno que más uso porque me gusta peinar cosas por mi cuenta donde algunos de estos otros pueden venir con,
um, um, algunos estilos construidos en algunos grados, por lo que podrías tener algo como H one. Eso significa Encabezado uno, y eso sólo va a ser más grande que el texto regular. Pero si lo usó, si es solo un poco de parpadeo y listo para usar para lo que quieras. Entonces creo que esas son agradables de usar, luego una otra de la que queremos hablar. En realidad no vamos a estar usando esto en el proyecto, sino solo para asegurarnos de que tus imágenes estén en el lugar correcto y sean referenciadas correctamente, vamos a incluir una imagen aquí mismo. Entonces esa etiqueta es yo soy G. Y entonces SRC es la fuente y tú dices igual apertura. Cotización cerrar cotización, consiguió slash imágenes slash jugador un g y puedo simplemente cerrarme con slash it y también. Y entonces tenemos que asegurarnos sí divulgó cuál es. Nuestro cuerpo está cerrado, que es, y lo último que queremos hacer aquí es importante. Vamos a ver un script igual a texto slash JavaScript R c fuentes iguales a puntos slash significa Jess, y eso debería ser todo lo que necesitamos por ahora en nuestro HTML. Entonces voy a guardar eso. Y luego hay un pequeño globo ocular en la parte superior derecha de tu pantalla. Y voy a tocar y sostener eso en realidad desde abajo, pegado a mi navegador safari y luego arrastrarlo y soltarlo aquí y poner esto lado a lado. Y luego voy a tocar el globo ocular en Kota y decir abierto en safari y eso espere en mi página sea una fiesta y se puede ver que tengo las cosas arregladas aquí mismo. Entonces, uh, esta palabra de prueba que puse gracias está apareciendo en la parte superior de la página y luego imágenes justo debajo de eso, que es justo como dije que aún no tenemos ningún estilo. Entonces voy a tocar este pequeño icono de la caja en la parte superior, izquierda y derecha de izquierda a derecha en la pantalla y luego abrir estilos que CSS y allá. Yo sólo quiero poner un par de cosas se HTM fuera cuerpo. Por lo que CSS es sinónimo de hojas de estilo en cascada en. Eso significa que las cosas que pones en el nivel superior tan html en cuerpo. Si nos fijamos en la forma en que tenemos nuestro HTML estructurado HTML es el elemento de nivel superior, y cualquier cosa sangrada es hijo de ese elemento. Por lo que en cascada significa que cualquier cosa que ponga en miedo debería afectar a los elementos que se bajen también, a menos que lo anula en otro lugar. Entonces lo primero que voy a decir es cajas tamaño y box on, luego margen cero. Y se puede ver este margen cero. Se puede decir que sólo hay un poquito de margen blanco al borde de la página en este momento. Entonces refresco esto y tu CSS está enganchado ahorita verás que ese pequeño
comerciante blanco se va, lo cual es genial. Y entonces estas cosas son en su mayoría solo para conseguir el get nuestro contenido en medio de la página . Realmente no tienes que entender demasiado sobre cómo funcionan exactamente en este momento. Uh,
bueno, bueno, excepto volver a encenderse, eso sólo hace que el fondo de la página sea blanco. También podría hacer negro si quisiera, um y luego exhibir Lex. No voy a entrar en los detalles de cómo funciona eso. Baste decir, es bastante cool, relativamente nuevo con CSS, y luego te permite centrar las cosas mucho más fácilmente que eso es solo un centro. Entonces podrías sin esa propiedad de visualización flex. O
sea, no es así que estas dos líneas solo están diciendo centrarlo horizontal y verticalmente. Lo último que quiero hacer es que no me gusta tener una fuente serif en mi página a menos que realmente
quisiera por alguna razón. Entonces para esto, no
quiero sus fondos. Voy a decir que las familias responden que sólo vamos a por defecto Cualquiera que sea su sistema sans serif fuente y luego para contenedor de imágenes, no
creo que me vaya sin volver en HD Go. Vamos a tener un div con una clase de contenedor de imagen y entonces eso va a ser display flex también. 100% 100% Max con por ciento ir ahorrar ir a refrescar por aquí. Y así parece que incluso muestran eso también. No estoy seguro de dónde extra en exactamente. Tengo interesante que probablemente está cubierto. Cree esta imagen. Sí, ¿ Texas sigue ahí? Yo sólo voy a hacer eso. Deja administrar su y OK, así que si tu página se ve así ahora o sea cual sea tu fondo, entonces tu CSS está enganchado. Cómo debe estar en lo último que queremos hacer para esta sección es solo asegurarnos de que nuestro violist javascript buscó como debería ser un oleaje. Entonces voy a hablar en este cuadro otra vez a la derecha de izquierda a derecha y luego toque en el punto
principal Js y luego toque editar coda. Y luego aquí dentro. No voy a hacer mucho ahora mismo, pero sólo voy a estar alerta. Paréntesis de apertura, e cotización de apertura. Hola, Mundo
Espacial Punto de exclamación. Ya veo. Y luego, si guardas eso y luego cuando actualices tu página, deberíamos hacer un pequeño pop up que diga hola mundo. Entonces si todo eso sucedió, entonces tu CSS html y JavaScript e imágenes están todos configurados, ¿
verdad? Si no lo son, entonces incluiré estos archivos en el proyecto en, así podrás pasar por ahí y solo comparar y ver qué te equivocaste. No creo que haya demasiado aquí. Eso va a ser demasiado exigente hasta ahora. Cosas que buscar si algo no está funcionando nuestras mayúsculas en tus nombres de cosas como javascript y CSS. Uh, este doctor necesita estar aquí antes y antes de que abras algo y sólo asegúrate de que todos tus corchetes y las cosas estén cerradas, ¿
verdad? Pero de nuevo, es posible que
necesites simplemente mirar a través de tu código y compararlo con cómo debería ser, porque el código solo puede ser un poco exigente con cosas como esa. Entonces creo que eso es todo lo que quería cubrir en esta escucha en particular. Y luego en la siguiente, nos vamos a meter realmente en conseguir todas tus imágenes en la página de la manera que
queremos que sean. Así que paso a la siguiente lista.
7. Cola 3 Dibujo al lienzo: Está bien. Entonces, uh, vamos a empezar a poner en realidad todas nuestras imágenes en html cinco canvas. Entonces el objetivo al final de esta lección es en lugar de usar esta etiqueta de imagen que estamos usando aquí, vamos a usar en el elemento campus HTML, que es una especie de cosa genial que está diseñada para tipo de animación Web y más cosas interactivas. Eso Revisaremos cómo usar eso un poco. Y queremos estar renderizando nuestras imágenes en un bucle de render usando marco de animación de solicitud, que hablaremos un poco más. Eso éste. Va a haber mucho código, y podría parecer un poco intimidante, pero aquí nada es demasiado complicado. Y voy a tratar de repasar tipo de lo que son los fundamentos, lo que estamos haciendo a medida que avanzamos. Pero si no estás familiarizado con el código, eso podría sentirse un poco abrumador. Por lo que nuevamente les proporcionaré los archivos al final, y ojalá eso ayude de ello. Pero, uh, abróchate, supongo. Y así lo primero que vamos a querer arrancar a Thies a la etiqueta de prueba central y esta imagen de
prueba porque no los vamos a estar usando. Y en cambio vamos a poner en clase de lienzo igual a invertir llamadas. OK, así que esto con parte. En realidad, quiero hablar de un par de cosas aquí. Yo sólo voy a contestar esto y hablaré de por qué estoy haciendo esto. Yo lo estoy haciendo con iguales. 900 es igual a 100 y d igual a. Entonces te habrías dado cuenta de que estoy haciendo estas clases e ideas sobre las cosas. Si no estás familiarizado con el HTML, clase se suele usar para peinar cosas. Entonces es cuando dices dot algo como esto en el archivo CSS,
uh, uh, este contenedor de imagen de punto. Esta es una clase, uh, selector para CSS, y eso solo significa que está buscando cualquier cosa con esa clase en él en tu HTML, y luego le va a aplicar estos estilos. Entonces tengo la clase de contenedor de imagen en este div sobre mi lienzo, y luego estoy usando contenedor de imagen de punto para darle estilo en CSS. Entonces tuve una clase de lona a lona elemento, y luego me voy. Tenía algunas cosas para CSS en un segundo. Esto con 900 realzando nuestro tenía 1200. Ese es el tamaño de mi obra de arte. Si tu obra tiene un tamaño diferente, vas a querer incluir el tamaño de tu obra. Uh, y entonces lo último es que esto d igual a lienzo similar a cómo funciona la clase y
en realidad puedes usar una idea y CSS también. Pero probablemente no deberías a menos que tengas una buena razón para ello en donde haces eso es con un,
uh, uh, signo de
número, digamos, Pero no hagas eso. Uh, todo el mundo quería lienzo así, pero un I D es típicamente usado por JavaScript para agarrar un elemento agarrador y hacerle cosas. Y lo vamos a hacer en nuestro archivo de script de trabajo en un minuto. Entonces, básicamente, solo
queremos poder agarrar este elemento de lienzo de todas las formas JavaScript en CSS, y solo queríamos saber que es un lienzo 900 por 1200 encendido. Eso no significa necesariamente que vaya a aparecer como 912 100 en nuestra página. Pero al igual que si fuera a incluir una imagen y se podría decir que puede obtener el tamaño completo de la página o pequeña o lo que sea, pero todavía se sabe de qué tamaño es. Este tipo de lienzo funciona. Estamos diciendo que el negocio era grande. Tú lo eres. Podríamos decirte algo más en CSS. Pero sólo para que lo sepas, el negocio de hacer en realidad son, um Y entonces también veo que quería a Teoh. Sí, vamos a hacer un par de cosas en el estilo de lona sabia y otra vez, Esto es en su mayoría sólo para asegurarnos de que está centrado en la página. Entonces con auto max, 100% X con 100% display, walk y margin. Entonces asumiendo que hicimos las cosas bien, refrescamos nuestra página por aquí. Por lo que mi hola mundo del Dr Atributado a enviar nada debería aparecer. No, no
sé con certeza si esto va a funcionar, pero yo diría fondo leído en este elemento de lienzo y se puede ver que el campus apareció en medio de la página y toma todo el ancho de la página. Entonces lo que vamos por aquí es que queríamos ocupar mucho espacio como fuera posible mientras manteníamos su relación de aspecto. S
o.- Yo redimensiono esto. Se puede ver que ocupa con altura completa de la página, pero no lleno con. Esto en realidad es sólo un poco complicado de hacer. Pero esa cosa de display flex de la que estaba hablando en la última lección ayuda a poner mucho este tipo de cosas. Entonces si pones un color de fondo en tu campus, debería estar apareciendo. Puedes cambiar el tamaño de tu página, y siempre debe mostrar todo el asunto mientras tomas tanto espacio como puedan, si eso tiene sentido. De acuerdo, así que vamos a dejar eso sólo un segundo, y vamos a pasar al guión de trabajo. Entonces, por cierto, si estás usando coda y un teclado en tu iPad, estoy usando el comando shift y luego corchetes para cambiar entre estos archivos. Creo que es rápido. También puedes solo una libra ellos sobre la parte superior. Son solo pequeñas pestañas, por lo que puedes decir html CSS JavaScript on. Entonces me voy. Teoh, borra esa alerta porque sería un poco molesto si eso aparece cada vez encantaría la página. Y la mayor parte de lo que vamos a estar haciendo de aquí en adelante está dentro. JavaScript volverá y hará solo un par de cosas más en CSS y HTML, pero sobre todo esos aire hecho ish por ahora. Entonces con javascript, vamos a empezar consiguiendo una referencia a nuestro lienzo también. Entonces si hago dos slash es así,
eso significa que es un comentario y eso no hace nada al guión de trabajo. Es solo para nuestras referencias. Di buena preferencia a ti. Entonces esto es solo para que lo sepas. Y así sé lo que esta línea de código lo está haciendo. Voy a guardar nuestro lienzo igual documento. Sí, por I d campus. De acuerdo, Así que un par de cosas de las que hablar justo aquí ya, esta barra y JavaScript significa variable. Y así donde variable es realmente cualquier cosa que queremos almacenar para usar de nuevo más adelante. Entonces lo estamos llamando lienzo, y puedes llamarlo como quieras. Te voy a recomendar que llamaras a lona. Si estás viniendo junto con esto y y entonces este documento no consigues elemento por I d. Y además asegúrate de que pongas atención a dónde están las mayúsculas en todo lo que hacemos aquí. Si estropeas las mayúsculas, las cosas están en red. De acuerdo, entonces estamos diciendo documento doc get element by i d y sus capitales on element and by y by y yo
d y luego abriendo lienzo de cotización de embarazo, citando cotización, cerrando privacidad. OK, así que el punto y coma JavaScript es como un punto en la frase. lo general no importa que mucho se considerara una especie de buena forma. Si tuvieras que poner más de una cosa en la misma línea, sí importa. Y a veces la gente hace eso. Voy a tratar de no hacer eso. Pero como, seguiría funcionando en mi jardín Esto Pero deberías ponerlo ahí. Simplemente Es buena práctica. Estas citas significan que esto es una corriente, y eso significa que esto no está haciendo referencia a esta variable. Pero dije por aquí, esta es solo la palabra canvas Y este elemento get by i. D. Esta es una función construida en tu navegador que solo dice, Vale, vuelve a mi html Busca lo que le di el i d. Lo que sea que lo hayas dado aquí. Entonces recuerda, en nuestro html llamamos a este elemento de lienzo forma lo dio d igual campus. Gracias. Entonces ahora esto está diciendo Ve a encontrar esa cosa que le dimos la idea del lienzo y nos pusimos en este lienzo
variable. De acuerdo, entonces deberíamos tener eso ahora. Entonces vamos a conseguir la referencia al contexto del lienzo. Y y voy a llamar a este contexto de bar. El lienzo de la gente no llega contexto a Ok, me prestan atención. Las letras mayúsculas del dedo del pie prestan atención a las cotizaciones. Um, y lo que es esto es el contexto de renderizado para ese lienzo. Entonces el lienzo es una especie de elemento html por sí mismo, pero contiene, como, tan pronto como creas que siempre tiene un contexto de dos D o tres D contenido dentro. Vamos a usar el contexto televisivo, Um, y entonces eso sólo nos da algo con lo que trabajar más tarde. Entonces cuando dibujamos imágenes intentaban al contexto, no al lienzo. Pero el contexto es parte del plantel. Probablemente no importa realmente que lo sepas solo para que lo sepas, um y entonces vamos a Teoh conseguir inicializado una variable de carga. Entonces a medida que cargamos todas nuestras imágenes, necesitamos saber cuándo están cargadas porque tenemos que esperar hasta que se carguen las imágenes antes de poder dibujarlas. Entonces voy a hacer ustedes dicen y nuestra carga subrayan Counter People's Europe. Y así como cargamos imágenes solo entrando tan pronto como se cargue cualquier imagen limitada, vamos a decir contador de carga más uno, Y luego una vez que sea igual al número de imágenes que tenemos, entonces podemos decir, OK, todas nuestras imágenes son amadas, y llegaremos a eso en tan solo un minuto. Entonces lo otro que vamos a hacer aquí es que vamos a inicializar objetos de imagen para cada una de nuestras capas. Y así si tienes diferentes capas o las has nombrado de manera diferente a ideo que yo, vas a necesitar Teoh hit engine cuántas capas tienes y cuáles son. Entonces para la mía, tengo una imagen de fondo y en realidad, aún
estás feliz. Yo sólo podría mostrarte con qué estoy trabajando. Entonces tenemos antecedentes, que está aquí. Uh, fondo es igual a nuevo, um, forma de tener sombras iguales que hacer son las personas. Déjame mostrarte estos a medida que vamos. Entonces hay nubes y en realidad ponen sombras fuera de orden aquí. Entonces vamos a conseguir eso, um para que tengamos nubes. Es este el siguiente y las nubes probablemente sea un poco término para lo que realmente están en. Entonces tenemos pequeñas cosas flotadoras, estrellas y sus llamadas que vamos a poner el bar flota uno. Porque sé que tengo más de uno de estos bowties pensar, también. Y entonces creo que tengo mis sombras, que ya he puesto, y luego esta siguiente, no lo
puedes ver porque fondo blanco de tap una vez que puedes ver esa es mi máscara. Entonces creo que sólo tengo dos más. Ahí está la gente real bar humanos, esta nueva imagen y luego una más lejos Queso azul tres. De acuerdo, entonces si tienes más de ocho jugadores o menos de ocho capas, deberías tener aquí el mismo número de artículos que tienes capas. Puedes llamarlos como quieras. This air, solo indios arbitrarios a los que llamo míos. Sí necesitas conocer el nombre del archivo de imagen real para más adelante, pero por ahora, puedes llamarnos como quieras. Aquí mismo. Uh, bien. Entonces lo siguiente que vamos a dio es crear una lista objetos anteriores. Entonces, uh, vamos a guardar nuestra lista los corchetes de la gente. De acuerdo, entonces estos corchetes y javascript representan una lista, y eso significa que lo es. Es decir, es realmente saber describirlo además de una lista. Pero lo importante a tener en cuenta es que esta es una lista de algo. Puede ser cuerdas. Puede ser números. Pueden ser objetos, que es lo que vamos a hacer. Realmente podría ser cualquier cosa, pero son para que crees. Hay otras cosas y JavaScript que puedes hacer que no estén en orden por defecto. Pero estos serán en el orden en que los pongas en orden asuntos aquí. Y así no he abierto con decir lista de inicio. Esto es decir y una lista, y luego dentro de esto, vamos a poner algo llamado objetos o diccionarios, dependiendo de con quién hables. Probablemente, um, y cada uno de estos tiene es No está en orden, pero puedes tener claves y valores dentro de esto. Entonces esta es la clave. Se llama llamar a una imagen. Se puede ver que esto es una cuerda, y tienen que ser cuerdas en el lado clave. Y luego qué? Nos vamos. Y son estas variables de fondo las que inventamos aquí, por lo que sabrás que este fondo no está entre comillas, lo
que significa que está haciendo referencia a la variable que necesito. Entonces estamos repartiendo esa imagen, y ahora mismo es solo un objeto de imagen parpadeante. Pero volveremos a eso y luego necesitamos darle la fuente sobre eso va a ser. Esta será una cadena, que es un camino a tu imagen. Entonces si configuras las cosas de la misma manera que yo lo hice, habría capa 11 g, para que eso no sería imágenes de barra barra barra capa y grabar un guión bajo un punto org. Si no pusiste tus imágenes en una carpeta como lo hice yo, entonces simplemente sería como ese puntoslash guión claro uno subrayado un diputado. Si estás usando,
uh, uh, javascript en cualquier lugar, necesitas ir a buscar cuál es ese camino para la imagen, porque no creo que puedas cambiarlo tú mismo, y entonces usarías ese camino aquí en su lugar. El día, vamos a darle estos. Te explicaré un poco más cuando volvamos a eso, pero por ahora, sólo probablemente copiarlos hacia abajo, ver índice, y eso va a representar lo cerca que parece que esta capa está para ti. Um, la
posición sobre esto va a ser importante para cambiar la posición de la capa. ¿ Se puede hablar de esto más tarde? Pero se puede ver que en realidad le estoy dando a esta posición, Teoh un valor de otro objeto. Por lo que confesó cosas así y puede ser un poco conveniente. A veces le vamos a dar un planeado. ¿ No recordaría esa mezcla para ésta va a ser? No. Porque éste es simplemente normal. Barco de pedernal si solo dices que no. Esto en absoluto. No es botes. Eso sólo significa parpadear en JavaScript. Básicamente, uh, y luego vamos a decir capacidad porque creo que voy a querer cambiar la opacidad en una o dos capas encima. Eso sólo va a ser uno. Entonces cuando decimos opacidad, cero es transparente, uno es opaco y tienen valores entre esos. De acuerdo, entonces esa es una más tarde en nuestra lista de capas, y tengo ocho, Así que sólo voy a pasar por estos bastante rápido. Tan solo asegúrate de entregarles la imagen correcta y la ruta correcta al archivo. Esas son las cosas importantes, y estas simplemente copian cómo las tengo básicamente. Y luego puedes retocar cosas más tarde. No se ve como quieres. Uh, ok, entonces sólo voy a copiar todo esto y basarlo aquí abajo y luego cambiar las partes que lo que cambió? Entonces va a ser capa de nubes a, y luego te conectas. Queremos que esto esté un poco más cerca que el fondo, y luego las otras cosas serán las mismas y peguen de nuevo. Este próximo van a ser cuerpos. Uno, Tú tienes tres, y vamos a hacer esto como Nativo 1.25 Y en realidad, este quiero ponerle un modo de mezcla. Por lo que de vuelta en mi archivo apropiado dio esto en el modo de mezcla de superposición. Entonces voy a poner cotizaciones, superponer, terminar, cotizar. Si has usado un modo en cualquiera de tus capas, lo
haces. No sé que todo desde apropiado esté soportado en javascript, por lo que es posible que necesites buscar eso si usaste uno raro o algo para usar heart make. Podría hacerse algunas preguntas difíciles, sin embargo. Entonces solo una cabeza arriba. A pesar de que podría apoyarse esa transcripción de todos modos, así que me acabo de enfrentar un par más de estas floaties constantes, también será capa para y estos índice serán negativos 0.5. Y de nuevo, creo que este también tiene activado un modo de mezcla de superposición. Entonces esta siguiente son mis sombras. Llámala sombras. Sí, en esto. Y entonces ese es tu cinco. Y en realidad me perdí esto cuando estaba creando los nombres de mis capas y esas cosas. Por lo que quiero que este esté de vuelta para el Índice Z. Yo quería estar entre las nubes y el fondo y porque vamos a ponerlo para que se multiplique. En realidad no importa que sea más alto en la pila por la forma en que trabajo. Simplemente se combinará con capas por debajo de él de todos modos, por lo que no mirará a su alrededor. Pero eso no es demasiado confuso. Y vamos a hacer 1.25 En realidad, vamos a sentir como 1.5. Ya veremos cómo se ve eso, y solo puedes jugar con facilidad si las cosas no se ven como quieres que se vean. Voy a cambiar este para multiplicar, y sólo nos vamos. La opacidad ha ganado. Podría volver y cambiar eso. Y entonces pienso, ¿Cómo me queda? Tres más. Entonces esta es mi máscara, ¿de acuerdo? Y esa es la Capa seis, y quiero que ese sea el cero del índice. Entonces eso será una especie de mi rotación de rotura central. Entonces eso se mantendrá en su lugar mientras todo lo demás se mueve básicamente en la capa de humanos siete veces y ese es el índice va a ser positivo. Entonces recuerdan que hablé de cómo es más divertido si algo es una especie de asomarse de la página y algo va a las páginas son fondos con los negativos, el índice. Van a parecer que van a entrar a la página en estas cosas con los positivos, el índice, van a parecer que están saliendo de la página, ya que a medida que obtenemos dos o tres efectos D. Entonces consigue ese es el índice de 0.8 y deja todo lo demás. Y entonces este último va a ser mi árbol flotante, y eso es capa. Y es el índice. Uh, vamos a ver, um, vamos a hacer, también eso para estar estallando bastante lejos y yo quería que estos quieren ser sólo un poco transparentes. Entonces voy a decir 0.9 como mi opacidad. Eso sería 90% de capacidad. Y luego una cosa que debes tener cuidado Si has copiado y pegado como yo, no
puedes tener una coma final al final de tus súbditos así. Así que asegúrate de deshacerte de eso, y esas deberían ser todas nuestras capas. Entonces otra vez, eso parece intimidatorio. No es demasiado complicado. La mayoría de estos son solo copias unas de otras. Creo que lo que va a ser más difícil es solo asegurarte de que tengas el
número correcto de ellos asegurándote de que tengas el camino correcto. Y, uh, asegurándose de que usó el nombre de imagen correcto aquí que fijaste arriba. Entonces otra vez, No me copies a menos que realmente me estés copiando exactamente. Pero asegúrate de hacer las cosas de acuerdo a tu obra para esto. De acuerdo, entonces en esta siguiente parte, vamos a decir capa oeste. Y recuerda, esa es la lista que hicimos aparecer con corchetes. Um, llamamos a esa capa lista subrayada. Entonces aquí abajo, vamos a patinar de forma segura tu lista de subrayados, que está haciendo referencia a esa lista, y luego estamos usando esto incorporado. Nunca puedo cómo se llama esto. No lo diré aireador, pero puede que me equivoque con eso. Por cada función nuevamente. Eso es con una comida mayúscula. Entonces lista de capas para cada función de embarazo de apertura. Indice de jugador E aprendiz roto. Um, y esperando cruelmente raqueta. Asegúrate de poner un cierre algo llamando al final. Y entonces lo que esto hace es que estamos diciendo por cada elemento de esa lista de capas y elementos en la lista de este nivel superior Así que hay objetos, cada uno de estos con los corchetes pequeños. Uh, entonces vamos a decir, por cada objeto de esta lista de capas, vamos a ejecutar esta función. Vamos a entregarle el objeto y el índice a ese objeto, que es justo qué número está en la lista. Por lo que esa función sabrá si pides capa, va a saber que estamos hablando de la capa actual que está mirando en esa lista de capas y luego el índice será el número actual de esa capa. Entonces, uh, para cada una de esas capas iban a capa consiguió imagen, que está haciendo referencia a esta imagen. Nosotros lo dimos. Entonces, en realidad es una referencia a esto que le entregamos que soy. Y luego vamos a decir punto bomba carga la función de la gente abriendo de plano raqueta con soporte donde quieres llamarlos Y recuerda, hicimos este encuentro de carga aquí arriba. Cargar subrayado. Actualmente la falsificación es cero. Entonces, cada vez que se carga una de estas imágenes, queremos decir carga, subrayado contador más el de la gente Eso solo significa agregarle una, lo que sea ahora mismo a la una. Y luego, um uh Entonces queremos a Teoh. No queremos hacer nada más hasta que se carguen todas las imágenes, ¿
verdad? Vamos a decir si carga subrayado Contador, uh es mayor o igual a ti. Um, jugador subrayado lista. A ver si vamos Teoh Drama son Eso es una poción que aún no hemos hecho, Así que entra en eso. Interesante. Entonces esto es una declaración if y javascript. Básicamente solo dice, si lo que pongas entre paréntesis aquí es cierto, entonces haz las cosas dentro de ahí y también puedes decir otra cosa, haz algo que no estamos usando más aquí porque todo lo que nos interesa es si de ello es hecho. Entonces si hemos cargado todas nuestras imágenes, pero entonces te queremos Dr Campus, Um y entonces así después de haber configurado ese jugador, esa descarga de imagen, aún no sabe qué cargar. Por lo que necesitamos decir capa imagen s R c para fuente es igual al jugador Doc. Elenco R C. De acuerdo, así que eso es cantar Cargar la imagen, básicamente. Y luego una vez cargadas las imágenes, la imagen ya sabe ejecutar esta función que creamos aquí arriba que dibujará a esos químicos. Entonces ahora mismo, eso no va a hacer nada porque no tenemos camión y disfunción. Um, pero lo que no podemos hacer es bajar aquí y realmente hacer que nuestro trabajo pueda disfunción. Entonces vamos a decir función,
prueba esto, Uh, Uh, sobre esto es solo crear una función llamada lienzo que podemos llamar desde cualquier lugar de nuestro archivo de
script de trabajo . Entonces lo primero que van a despejar lo que sea. Sí, empieza esto porque estamos dirigiendo esto ¿Qué? Estaremos ejecutando esta función una vez, Uh, veamos, como, 60 veces por segundo, creo, Y si no lo aclaras, no
creo que en realidad importe para esta página en particular, asumiendo que no tienes transparencia pasando todo el camino. Pero podría parecer un poco raro. Entonces básicamente, quieres despejar todo y reintentarlo 60 veces por segundo. Entonces vamos claro primero diciendo contexto donde eso es una referencia al contexto que viene con tu lienzo. Tienes razón. Cero coma, cero espacios. Uh, lona en esto. ¿ Cuál es ese dicho es que vamos a despejar esta zona definida empezando por la parte superior izquierda. Supongo que esto queda cero arriba cero y va con una cruz y altura hacia abajo. Entonces básicamente del tamaño de nuestro lienzo, solo
estamos despejando ese rectángulo dentro del lienzo. Uh, hombres, necesitamos a Teoh a través y en realidad dibujar a Fuselier. No tienes que dibujar estos. Tienes que escribir estos comentarios como yo. A mí me gusta tenerlos porque hace las cosas un poco más claras. Lo que estoy haciendo es volver a leer a través de mi código más tarde. Um, así que vamos a hacer lo mismo que hicimos aquí arriba en lo que va el para cada cosa, así que en realidad puedes simplemente copiar esta línea si quieres. Dices acciones posteriores para cada uno. Te aseguras de cerrar con un corchete de cierre y cerrar paréntesis y luego para cada capa de la lista, vamos a decir su contexto. Imagen de roca. Estamos Así que esa es la imagen que estamos intentando. Y luego necesitamos la capa de posiciones Posición X. Y creo que si ejecutamos esto ahora, entonces esto sólo funcionará hasta el momento. Y así vamos a cambiar un par de cosas antes de que terminemos con esta lección. Entonces voy a golpear save in the top rain, y luego necesito volver a traer safari por aquí porque tengo mi app de fotos abierta y solo
voy a golpear refresco. Volvamos al punto índice html Se guarda mantenga pulsado en el globo ocular, abierto en safari y se puede ver que mi imagen apareció por aquí. Entonces eso significa que todas mis capas están siendo dibujadas en el contexto. Entonces sí necesito hacer un par de cosas más en. Tenemos este tipo de configurado para ir ya. El 1er 1 es que vamos. Teoh Roseman. Verso. De acuerdo, nos vamos. Teoh, asegúrate de que usamos el modo de mezcla correcto. para cada capa. Eso Solo vamos a decir tu doctor porque esto devolverá póliza Tarde mezclado Sentinel, que es en la mayoría de estas capas, ¿recuerdas? Entonces tengo mezclas. No. Si eso es falso, entonces no hará lo que hay aquí. Si se establece Teoh una cepa como superponer o multiplicar que va a hacer lo que tenemos aquí revisando contexto. Bueno, ¿cómo es igual? Posteriormente, cuando iban a decir otra cosa. Entonces si Layer Docklands es no o falso, vamos a decir context global. ¿ Fue Operación People's Cotización, ciclo de
cotización? Um y luego a medida que bajamos s así podemos decir justo ahí tenía mando como para que se pueda hablar la marca de verificación en la parte superior, ¿
verdad? Voy a refrescarme y se puede ver que mi abogado modos de mezcla acaba de cambiar. Por lo que mis sombras aire se pusieron a multiplicar. Mis pequeñas floaties en segundo plano están configuradas para superponerse, y eso es igual y luego una cosa más que tenemos que hacer es simplemente establecer la opacidad. Entonces en esa capa frontal, las floaties en primer plano recuerdan lo dije t 0.9 opacidad, y en este momento son completamente opacas. No se puede ver a través de ellos en absoluto. Voy a decir Contexto, global iguala jugador y ahora refresca eso. Se puede ver que apenas se volvieron un poco transparentes. Entonces creo que esto está a punto de hacerse. Lo último que necesitamos dio es que esto solo se está ejecutando una vez, y luego se hace. Y recuerda, hablamos de cómo vamos a usar un marco de animación de solicitud para correr por las 60 veces por segundo. Por lo que sí necesitas ser solo un poco cuidadoso aquí. Pero básicamente solicitar marco de animación. Se construye algo en tu navegador que ejecute una función tantas veces que pueda dibujar a la pantalla,
que en la mayoría de los navegadores modernos va a ser 60 Rangers de nuevo? Entonces en lugar de llamar a esto con los paréntesis aquí, en cambio vamos a decir, solicitar animación, abrir fantasía. Y entonces sólo le estamos dando el nombre de la función sin nada. Es sólo el nombre de la función, que se cae lienzo y luego recuerda prestar atención a las letras mayúsculas. Entonces esa es petición de las teclas inferiores nuestra animación con tiene con cada caso un y marco con una mayúscula F drug canvas eso Si decimos eso,
eso debería pasar por una vez, lo cual es genial. Y entonces lo último que necesitamos dio es al final de nuestra rocosa y disfunción. Entonces después de esta lista de capas para cada Pero antes de este corchete rizado de cierre, vamos a decir lo mismo solicitando permiso. Palabra de advertencia aquí mismo. No lo hagas de esta manera. Eso se estrellará. Tu probablemente no hagas eso. Uh, hablando desde la experiencia. Entonces, ¿quieres llamar solicitando marco de animación? El seguimiento de esto y básicamente lo que hace es que corre a través de esto. Entonces dijimos que lo llamara usando su animación de búsqueda traer aquí. Entonces va aquí abajo, lo
ejecuta una vez, y luego llega hasta el final y dice:
Oh, Oh, empieza de nuevo. Y simplemente sigue pasando por esto hasta que hablas para parar, que no le decían que se detuviera. Entonces voy a decir que voy a escuchar refresco por aquí, y no deberías ver ninguna diferencia, pero en realidad está renderizando 60 veces por segundo. Ahora eso va a ser importante. Se actualiza la posición basada en el tacto y el movimiento, porque así es como realmente movemos las cosas. De acuerdo, entonces lo otro que quiero hacer es ir a este fondo para cualquier ayuda en tu CSS. Realmente no me gusta haber leído flash cada vez que cargue la página, pero creo que así va a ser para esta lección. Entonces en el siguiente, realidad
vamos a conseguir que empiece a moverse en base al tacto y al ratón, y luego iremos a partir de ahí.
8. Coen 4 los controles con toque y ratón: De acuerdo, entonces si seguiste todas las otras lecciones hasta ahora, deberías estar en un punto donde todas tus imágenes están siendo dibujadas al lienzo. Por lo que esto debería ser un montón de capas diferentes a la derecha. Pero debería parecer que estás imagen terminada, pero en realidad no va a hacer nada todavía, Así que vamos a conseguir así cuando tocas y arrastras en la pantalla, las capas realmente se mueven y se ven como tres D. Así que, uh, para empezar, voy a simplemente crear una sección en la parte inferior de mi archivo JavaScript aquí y usar un
script de trabajo Comentar con país Slash está al principio. Yo sólo voy a decir toque y controles, um y luego Así que lo primero que queremos hacer es solo Esto no importa tanto para el tacto. Pero si estás usando el ratón, solo
quieres que la imagen se mueva. Cuando estás haciendo clic y arrastrando, no
quieres moverte en cualquier momento en que tu ratón esté en la ventana. O sea, a menos que eso sea lo que quieres, entonces tú lo haces. Pero para mí, sólo
quería mudarme cuando en realidad me estoy mudando intencionalmente, Así que voy a ahorrar están siendo iguales caídas. Y esta es sólo una variable arbitraria que voy a crear que dice, por defecto, esto es falso. Vamos a volver a referirnos a eso más adelante en algunas de las cosas que estamos haciendo. También lo dijo. Fiel a ti, empieza a hacer clic o empieza a tocar la pantalla. Pero así solo haz eso para empezar. Y entonces lo siguiente que queremos hacer es decir que vamos a inicializar algún tipo de
contenedores sólo para sostener nuestro toque o ratón co ordinates s. entonces necesitamos hacer dos de esos Uno va a ser lo que se va a llamar inicial de invierno , y eso va a ser en algún lugar donde hagamos un seguimiento de dónde tocaste por primera vez o dónde hiciste clic por
primera vez en la pantalla. Eso va a ser importante porque, uh, hablaremos de ello más tarde. Pero básicamente, si no haces un seguimiento de esto y simplemente lo mueves a donde tocabas en pantalla sobre las cosas, salta en cuanto toques su click. Lo que simplemente se ve realmente extraño. Vamos a decir x cero. ¿ Por qué cero? Entonces este es un número de objeto Así son claves. Es X nuestro valor es cero son claves. ¿ Por qué? El valor es cero y luego vamos a guardar nuestro puntero. Y eso sólo va a ser un contenedor para donde nuestro purser actual o posición táctil está en algo 00 Um, y luego así para realmente escuchar eventos touch o mouse, tenemos que hacer esto llamado agregar un oyente de eventos Eso Queremos toe Onley dispara esto cuando tocas en el campus para empezar así que vamos a decir lona Y recuerda, esa es una referencia para leer Vergüenza off canvas dot oyente de anuncios Y entonces vamos a decir toque, empezar rastreable, ¿verdad? Y luego vamos a llamar a la función inicio de invierno porque vamos a usar esto para tacto y la casa. Entonces solo quiero decir que cuando empieces a tocar la pantalla, ejecuta esta función sin leer la forma de la función. Quieres hacer lo mismo desde outsourcing en Escuchar en el lío? Sí, llama a la misma persona, señor um Así que estos aire ambos construyeron sólo una especie de nombre para esos eventos que se disparan en tu navegador. Entonces sí tienes que nombrarlos así exactamente otra vez. Preste atención a las mayúsculas en minúsculas y estas cosas que sí importan. Y entonces realmente vamos a crear esa función. Por lo que puntero sobre una más pasiva en efecto y eso simplemente pasará automáticamente porque
oyente de eventos , no
tienes que pasarlo. Por lo general con una función, en realidad
tienes que entregarle explícitamente algo que quieres que sea una función para recibir, pero no en este caso. Entonces es un poco agradable. Entonces lo primero que vamos a hacer en cuanto empecemos a tocar o a empezar a buscar se establece moverse demasiado cierto, y eso va a entrar en juego en un minuto. Um, pero así ahora sabemos como en cualquier momento sólo podemos comprobar esa variable para ver. ¿ Estás haciendo clic actualmente en cribado? ¿ Estás tocando actualmente la pantalla? Lo siguiente es, solo
asegurémonos de que realmente funcione. Entonces es solo que es todo lo que voy a decir. Alerta. Sí, hola, tú la racha. Entonces voy a decir que comunidad s puedes tener la marca de cheques en la
esquina superior derecha y luego solo voy a refrescar la página. No volví a trabajar. OK, entonces tengo que volver al índice. No has aferrado al globo ocular en la parte superior, derecha. Y se abren en safari y luego refrescan la pantalla, Refresca la página. Y luego tan pronto como toque la pantalla, obtengo un Hola, tocas la pantalla. De acuerdo, entonces voy a volver a mi archivo JavaScript en, y así en realidad no quiero eso ahí. Eso es sólo para asegurarse de que estaba enganchado. ¿ Verdad? Si sucede que tienes algo que tiene un ratón también, puedes comprobar que eso también debería funcionar. Um, y luego queremos ver qué tipo de evento es este. Nosotros queremos comprobar. ¿ Se entiende esto con tacto o es un evento de ratón? Porque a pesar de que parecen que deberían ser los mismos, los
hace referencia sólo un poco diferente. Pero vamos a decir si evento tenso es igual, tocar, empezar. Está bien. Y luego vamos a decir toque. Digamos solo toque de alerta y luego a todos los demás que tengas porque podríamos decir otra cosa si tipo igual ahora, caracol, entonces podemos decir alerta. Y no voy a probar eso porque no tengo una casa conectada a me puse obviamente como un yo tenía 12.2 o algo que estoy usando aquí. Eso no es cosa. Eso Entonces me voy a refrescar por aquí viajes y pantalla y dice toque. Entonces eso significa que eso está funcionando. Enfriar. Te voy a dejar con. Y entonces qué? Queremos dio una vez que hayamos iniciado un evento touch o un evento masivo es queremos establecer la inicial que apunte tu cosa inicial. Recuerda, hicimos de este punto tu variable inicial aquí arriba y queremos simplemente establecer dónde tocaste primero o pinchaste en la pantalla? Hunter. Inicial X igual evento Dr. Toques Bracket está aquí y luego algo con blanco. ¿ Qué? Tu habitual ¿Por qué toca cero eso esto en? Esta es la diferencia entre touch y mouse. En cuanto a cómo los estás manejando es esto toca cero? Porque técnicamente, si estás usando touch, podría estar usando multi touch. Por lo que el cero significa es el primer elemento en la matriz de toques o la lista de toques. Cero es justo como indexas el primer ítem de la lista. Por lo que diciendo el primer toque en haber tocado pantalla. ¿ Y cuál es su posición en el cliente? Debería ver qué navegador. Y luego Así de lo contrario, vamos a un punto. Exp es igual a Find X. Seguro fumando porque no tienes que decir el primer ratón que tocó la pantalla. No conozco ningún sistema que admita más de un ratón. Sí, avísame si te dio um y algo mejor dice, uh, ahora sabemos donde primero tocas la pantalla. Entonces así es como vamos a hacer ahí. Um, lo siguiente que queremos hacer es queremos en cualquier lugar que muevas tu ratón o tu toque dentro de toda la ventana. Queremos escuchar dónde está para que podamos movernos que podamos compensar las imágenes en base a eso . Entonces vamos a decir,
Ventana, esa ventana de oyente de eventos es sólo una cosa construida y trabajo con guión. De eso estás hablando. Tienes que configurar eso. Vamos a decir tocar,
mover, mover, y queríamos llamar a este punto de función tu y luego actores de ventana. Y entonces realmente necesitamos crear nuestra función de eliminación de puntos, y luego queremos decir que no evitó los valores predeterminados. Gente gritando afuera. Enfriar en. Esto es importante porque como tú si tu ventana es demasiado grande, lo cual muchas veces, simplemente
se basa en la forma en que Safari funciona en el iPhone o iPad. Necesito salvarnos y refrescarnos. Uh, se
puede ver que son pergaminos, pesar de que no quería desplazarse. Por lo que este evento que impida el default va a ser importante para eso, básicamente ,
solo dice, No hagas lo que harías normalmente cuando muevo el dedo o el ratón en la pantalla, y necesitamos hacerlo en dos lugares. Eso no funciona bastante todavía. Pero entonces lo otro que hacemos es recordar que tenemos esa variable en movimiento y esa variable en movimiento que
configuramos antes. Entonces, para empezar, fue falso. Después empezamos a hacer clic o tocar la pantalla, y se hizo realidad. Y ahora sólo queremos decir sobre Lee, si esto es cierto, entonces haz las siguientes cosas que decían. Si es cierto que puedes escribir algún otro código, así que vamos a hacer un seguimiento de dónde está nuestro equipo de impresión ex? Y para empezar con Rubin Se cero, donde está nuestra actual cancha blanca en ella era un 60 y luego estamos poniendo un par más. Si es así, lo siento. Esto está consiguiendo un par de capas profundo diciendo, si evento es igual al tacto, entonces vamos a decir X es igual a evento. Tal es tu propio y, uh, Y
actual igual toca tu Todo bien. Entonces tenemos nuestra posición inicial que establecemos aquí y entonces ahora conocemos la
posición actual . Y si recuerdas desde la física, entonces tu posición final en Vamos a ver, cómo funciona esto Estás cambiando distancia es minutos finales inicial, Así que vamos a ir a eso en tan solo un minuto. Um, pero también queremos asegurarnos manera segura de manejar un evento de ratón. Aquí está qué más. Si tienes una concesión de enfrías apretadas, X es igual a lo que no es tocar. Realmente no puedo aguantarme hoy. Por qué iguales dejan de jugar. Por qué, Ok, entonces ahora tenemos nuestra posición actual siempre cursor, y entonces sólo queremos que Teoh realmente establezca el desplazamiento del puntero. Entonces fuera de estas dos declaraciones, Así que justo debajo de este corchetes, quieres decir Puntero X. Y recuerda, lo configuramos aquí arriba justo como un cero. Pero vamos por encima ¿verdad? Eso vamos a decir apuntado a X es igual a,
uh, uh, actual X. Esa es nuestra posición final, ¿recuerdas? Menos Quinter subrayado punto condicional Exe puntero y es igual a corriente. ¿ Por qué? Menos. Entonces eso nos dice a qué distancia de donde empezaste debería estar esto en este punto? Um y entonces creo que Ok, así que si solo quieres, uh volvamos y realmente hagamos que esto funcione primero, y luego iremos a limpiar algunos pequeños detalles. Pero lo que queremos hacer para empezar es volver a nuestra disfunción dropcam aquí arriba antes de que realmente dibujemos la imagen en la pantalla. Ahora necesitamos ver dónde debemos dibujar la imagen? Porque se va. Es decir, ese es un poco el punto es, queremos movernos donde lo estamos dibujando, y eso hará que parezca que las capas son un poco tres D basado en el
efecto de paralaje . Um, así que vamos a decir, Vamos a ver, vamos a decir posición de punto de capa igual a get apoyos. Esa es una función que vamos a escribir en tan solo un segundo concepto, el posterior para que se vean compensados punzonado. Vamos justo aquí abajo, infección. Enfréntate. Y es este nombre para una capa. Y vamos a decir un toque de barra molesto X es igual a puntero X, um veces capa que Z. Entonces esto va a ser importante porque si no hacemos esta capa perros, el índice, todo se movería juntos. Y luego simplemente parece que estás desplazando la pantalla. Estamos viendo demasiado. ¿ Por qué es igual a Pointer? Por qué veces más grande. Ver? Recuerda que los índices Z hacen referencia a qué tan cerca o a qué distancia de la pantalla queremos que aparezca esa capa Así que eso va a crear nuestro tipo de efecto tres d. Um y entonces sólo queremos decir que vamos a sumar un par de cosas más a esto. Por lo que parece un poco inútil ahora mismo, pero lo usaremos en un minuto. Se trata de un desplazamiento de parte igual a hablado en corchete rizado. Gracias se va a tocar offset X y por qué va a ser táctil, por qué y eso con punto y coma. Y entonces sólo vamos a regresar. Este tipo es un desplazamiento de retorno. Y eso sólo dice lo que se pidiera para esta función. Simplemente devuélvele esta cosa que acabamos de decir, cuál es esta molesto? Entonces ahora la oposición estratificada va a estar recibiendo este offset de vuelta en lugar del 00 que le dimos originalmente, Um, así que ahora creo que si hubiéramos ahorrado en refrescado esta página y voy a tomar un video así en realidad se puede ver lo que estoy haciendo con la mano. Um, ahora, cuando uses el dedo en la pantalla, tus jugadores se moverán. Se puede ver que también está desplazando la pantalla, que en realidad no queremos. Entonces iremos a arreglar eso en tan solo un segundo, y esto probablemente sea demasiado fuerte de la espalda. Entonces vamos a hacer un par de ajustes a esto, pero bastante cool. Está bien, así que lo primero que queríamos a Teoh es probablemente lo más fácil es que sólo estamos acuñados que bajen el tono ese efecto un poco. Por lo que vamos a ahorrar nuestro multiplicador táctil equivale a 0.3. Y entonces, en cada uno de estos pequeños cálculos, estaban diciendo punto puntero x veces es él Índice, vamos. También di tiempos touch, es un y consientes este multiplicador táctil a lo que quieras. Dependiendo de qué tan grandes lienzos y cosas así tal vez quieras modificar un
poco esto para que puedas jugar con ese número, Mira lo que te gusta. Hice esto poco antes, y me gusta este número. Entonces vamos a tomar un video aquí y simplemente muy fresco, y para que puedas ver eso es mucho más sutil. Nuestro Disney sigue desplazando la pantalla, así que vamos a volver atrás y arreglarlo. Y así para arreglar ese desplazamiento de pantalla creo que necesitamos dio es bajar aquí y decir,
um, um, lienzo no agregues oyente de eventos. Um, toque, muévete, y vamos a decir evento de función. Por lo que a esto se le llama una función eficiente del espacio, arbitraria que le estás pasando a este oyente. Significa que no lo estás nombrando. Simplemente le estás dando una función y estás escuchando ese evento. Entonces vamos a decir, cosas de
eventos, default. Entonces eso va al comportamiento predeterminado cuando tocas la pantalla y te mueves es que el campus se va a mover por la pantalla porque estás desplazando la pantalla y no queremos
que eso suceda. Sólo queríamos movernos en base a lo que les estamos diciendo que hagan, no en base a lo alto que cree que es la ventana y luego vamos a hacer lo mismo de nosotros. Por lo que he guardado esa refrescante mi página. Y si juegas con él con el dedo ahora, no, ya no se desplazará una página. Entonces eso va a llamar. Y luego queremos dio una última cosa aquí, que es que ves, cuando dejé de tocar la pantalla, solo
se queda donde me detuve nunca que quisiéramos remontar a su
posición original cuando te soltaste. Entonces vamos a decir ventanas que así estamos usando ventana porque podrías dejar de tocar el elemento de lienzo. Queríamos fuego de dedo cada vez que mirabas tu dedo en cualquier parte de Brother, vale la pena decirlo. ¿ Cómo oyente mucho entenderlo y no una descripción? Introspección? Estamos diciendo y gesto, estoy seguro. Lo mismo para oh, escribiéndonos. Señor Ya sabe, vamos a decir y sólo usted escribe nuestros registros de función digestiva, función y gestos va a ser personal. Queremos asegurarnos de mover gente pequeña, así que si estás usando cantidades te des cuenta que tan pronto como liberaste tu pasaporte y se
sigue moviendo,lo sigue moviendo, que sea que te muevas, metes con una pantalla y esto dice, Ya no hagas eso porque ahora es falso y estamos revisando para asegurarnos de que sea verdad antes de mover algo. Y luego lo siguiente es, vamos a decir más rápido X equivale a cero desgaste y igual. De acuerdo, entonces ahora lo he guardado y está tomando video. Voy a refrescar esta página y liberar. Se encaja de nuevo al centro. Bastante cool. Está bien, así que eso es todo por nuestro toque y ratón y lo que sea que la palabra esté moviendo las cosas basadas en notas
conmovedoras. En la siguiente lección, vamos a añadir controles de movimiento. Entonces escuchando el giroscopio en tu dispositivo,
alguien, alguien, lo mueves físicamente, la acción de la imagen se mueve por ahí, así que vamos a empezar esa escucha.
9. Co. 5 controles de movimiento: antes de empezar en esta sección. Si estás ejecutando IOS 12.2 o más reciente de lo que necesitas ir a la configuración y luego desplázate hacia abajo
hasta safari y asegúrate de que en la sección de privacidad y Seguridad el
acceso de movimiento y orientación esté activado, eso va a estar desactivado de forma predeterminada. Por lo que necesitas dar la vuelta a ese interruptor y asegurarte de que esté encendido. Si no haces eso, nada en esta sección va a funcionar. De acuerdo, empecemos a implementar controles de movimiento en esto para que cuando tomamos el dispositivo, se
pueda obtener una especie de efecto tres d. Entonces justo en el muy independiente fui archivo de guión, voy a bajar y comentarios diciendo Controles de movimiento. A mí me gusta mantener separadas mis diferentes secciones tanto como puedo. Y esto no lo es Es difícil de hacer completamente porque hay lugares donde tienes remolque, mezclar un poco las cosas y usarlas juntas. Pero, ¿en qué medida? No puedo creer que sea agradable tener una sección para la mayoría de mis controles de movimiento. La mayor parte de mi toque controla cosas así. El primero que vamos a hacer es igual que hicimos con los controles táctiles es que
vamos a inicializar nuestras posiciones. Entonces queremos ¿Qué ángulo era el dispositivo que cuando actualizaste la página por primera vez y qué ángulo es en este momento? Entonces vamos a decir variables inicializadas o basadas en emociones. Relájate. Y nos vamos a quedar lejos. Movimiento subrayado inicial enfría objeto que algunos están llamando a terminar X. De acuerdo, en realidad, se podría decir serial en estos. No importa. A ver. Bueno, digamos que no. Creo que esa es la forma en que lo tenía todo antes. Nos vamos a quedar en movimiento. Nuestras emociones son iguales a objetos, y estas serán X cero. Por qué, estás y luego aquí abajo, realidad
vamos a escuchar la posición del giroscopio. Entonces vamos a decir, uh, bueno, eventos. Y, uh entonces vamos a decir muelle de ventanas en el oyente de eventos, um, dispositivo. Y luego vamos a pasar esa disfunción no. Algo raro con mis espacios aquí que no me gusta. Um y así lo que queremos hacer es la primera vez que esto atraviesa. Esto va a correr por tipo de constantemente como las páginas arriba, pero la primera vez que queremos decir ¿dónde? Al igual, ¿en qué ángulo se encuentra actualmente su dispositivo? Porque no queremos que cargues la página y ya está en un ángulo extraño, como las imágenes ya están compensadas de alguna manera extraña. Uh, entonces vamos a decir si este es el primer verdadero,
um, um, si no el punto inicial del océano Exe y no opción subrayado inicial. ¿ Por qué? Entonces, ¿este signo de exclamación al inicio de una variable? Entonces tengo esta declaración if y entonces estoy diciendo si signo de exclamación movimiento subrayado punto exclamación
inicial aquí, es una especie de abreviatura de código para decir llamó a esta fuente diciendo, Si esto no está ahí y porque lo llamamos null appear fue que el punto inicial de movimiento Exe es no. Y estamos diciendo si no movimiento punto inicial Exe porque no, eso devuelve cierto para ¿no está ahí? Eso es un poco confuso, pero básicamente estamos diciendo es ese set ya y si no y lo mismo por qué este fin y está diciendo que estamos revisando ambas cosas. Por lo que necesito decir su ex no set y por qué Tampoco se dice. Sí, por lo que ambos no están establecidos. Entonces nos vamos a quedar en movimiento subrayados inicial siguiente igual a You have been Dr Snoon. Por qué llama. Entonces esto significa que sabemos dónde estaba el dispositivo, en
qué ángulo se sostenía el dispositivo cuando lo cargamos por primera vez. Entonces después de eso, queremos ver dónde está el dispositivo de vez en cuando podemos tomar la diferencia y ver cuánto debemos compensar las cosas en base a lo lejos que se movió? ¿ Desde que cargaste la página? Eso Hay un par todo Hay cuatro orientaciones diferentes que necesitamos manejar aquí porque los ejes tipo de cambio en función de qué manera estás sosteniendo tus dispositivos. Por lo que tenemos que manejar. Um, el dispositivo está en está en orientación vertical. Um, el consejo de dispositivos está en paisaje sobre su decisión. Um, el dispositivo está en paisaje. Está bien. Dispositivos laterales al revés. Lo estás sosteniendo como un animal. De acuerdo, entonces, uh, este 1er 1 solo vamos a decir si la orientación de punto de ventana es igual a cero, eso significa que está en retrato. Um, y en realidad vamos a saltarnos eso por ahora porque estoy trabajando en el lado izquierdo, y solo quiero asegurarme de que esté funcionando antes de que nos dejemos llevar demasiado con estos. Y luego si la orientación de la ventana es de 90. Ese es el lado izquierdo de su paisaje de su lado izquierdo, que es la forma en que actualmente estoy sosteniendo Mi Dios. Entonces, pongamos a estos otros en marcha muy rápido. Pero entonces voy a volver a eso. ¿ Quieres probar primero igual a negativo 90? Um, eso es esto y paisaje quería lado derecho. Y entonces sólo podemos decir otra cosa y porque la única posibilidad que queda es que esté al revés, así que eso si está de su lado izquierdo, entonces vamos a decir movimiento X. Y recuerda, montamos nuestro movimiento más viejo aquí estamos anulando Motion X, y estamos viendo que es igual a eso de punto pita, que es la posición actual del dispositivo menos el guión bajo de movimiento inicial X, y luego el movimiento y es igual inicio de evento. Uh, waas. Eso debería ser negativo. Evento Gamma oscura más emoción. Tu puntaje condicional punto Derecha. Uh, sólo asegúrate de que tienes ese derecho. Se trata de Cameron. De acuerdo, entonces creo que eso debería ser correcto para sostenerlo en paisaje del lado izquierdo. Por lo que necesitamos Teoh a nuestra función get offset donde estamos devolviendo el offset de cada capa recordar, Y entre tu desplazamiento táctil y estás molesto objeto que
regresamos, vamos a decir lejos promoción subrayado offset, guión bajo X igual, uh punto x Tiempos jugador Z subrayado índice. Y recuerden, eso es lo que va a hacer que nuestras capas se muevan a diferentes velocidades. Básicamente, haz que se vea tres d. De lo contrario, eso se moverá juntos y realmente no notarás nada excepto que se parece a las páginas. Se está arrastrando. Entonces vamos a eso y luego vamos a salvar nuestra moción. Subrayado, Offset. Subrayar. ¿ Por qué fue el movimiento? Por qué fue más tarde Dodds Otro índice deportivo y luego Porque ya sé que este es un efecto bastante débil. Yo sólo voy a hacer un multiplicador de movimiento también. Por lo que es un subrayado de movimiento de barra. Proveedor de bala equivale a 2.5, y luego lo mismo que hicimos con el toque uno. Voy a decir veces emoción subrayado para comprar aquí, y eso es solo copiarlo y pegarlo para que sea un poco más rápido. Y de nuevo, si tu lienzo es de un tamaño diferente, o si solo quieres que esto sea más fuerte o más débil, puedes jugar con este número, y cambiará la fuerza del efecto de movimiento. Andi, Aquí
mismo miércoles más poción Underscore. Malestar. Subrayar X aquí. Vamos a decir Bendice emoción. Subrayar. Offset. Subrayar ¿Por qué? Y así eso es decir que el malestar total va a ser toque más movimiento. Por lo que podrías estar cambiando la posición de las capas con tacto e inclinando tu dispositivo
al mismo tiempo. Y ambos funcionarán y nada saltará de una manera extraña. Entonces voy a guardar eso. Y luego voy a Teoh Teik Video. Refresca la página y vamos a ver si funcionó realmente va a hacer esto un poco más grande primero. Está bien, así que voy a refrescarme. Y luego si le decía a mi dispositivo, podía ver que todo se ve un poco fresco en tres D. De acuerdo, así que eso es sólo si está en su lado izquierdo. Por lo que necesitamos ir y dar cuenta de cada una de estas diferentes orientaciones. Y espero que estos simplemente funcionen si estás siguiendo junto con mi código de cerca porque pueden ser realmente difíciles de averiguar cuál es cuál y cuál debe ser de qué manera. Entonces si no te está funcionando, posible
que necesites solo una especie de retoque, positivos y negativos y decir que las cosas funcionan de la manera que deberían. Y podría ser algo confuso, pero ojalá no necesites hacer eso. Por lo que en esta ventana la orientación de puntos es igual a cero, que es la orientación de retrato. Nos vamos a quedar en movimiento. X es igual al movimiento menos. Subrayar inicial. ¿ Por qué? Y luego movimiento ¿por qué iguala evento? Beta menos movimiento Subrayar Inicial, uh, movimiento inicial x y luego en el paisaje de su lado derecho, que es negativo. 90. Vamos a la emoción sobre X es igual a negativo, incluso. Detener beta más movimiento de tu puntuación punto inicial Exe emoción y es igual. Eso es cama menos movimiento subrayado inicial. Por qué y entonces si está al revés, va a ser
lo contrario de la orientación del retrato. Entonces vamos a decir conmoción punto x es igual a gamma negativa No, yo havent es igual aquí arriba. Apenas faltó u menos sería más subrayado. Está bien. Y luego la emoción sobre y es igual a negativa, menos estilo, X. Um OK, así que voy a ver si esto y luego un esto va a ser un poco complicado sostener mi teléfono
y revisar estos todos al mismo tiempo, Pero voy a darle mi mejor oportunidad. Por lo que ir muy fresco, puedo ver mi escape no se rompió. Entonces eso sigue siendo extremo. Voy a decir eso dentro no me reprime la página, pero se puede ver que los jugadores se están moviendo de la manera que dijeron, Oh, eso se ve como tres D. Vamos al lado del comercio. Lo mismo Están moviendo el trapo donde todo esto es muy complicado. Perdón. Al revés. Se están moviendo los jugadores. Cómo deben enfriarse. Muy bien, Así que para arreglar ese problema donde llevaste eso y todo salta hacia un lado,
vamos a ir por debajo de este oyente de orientación del dispositivo, y sólo vamos a decir, ventana punto mal oyente de eventos Senador um ,
orientación, darle un no disfunción con evento semi colon y decir emoción subrayado final inicial . X inicial es igual a cero subrayado. Y inicial es igual a cero. Entonces ahora si digo eso, toma otro video. Eso va a ser otro extraño incómodo tener mi dispositivo alrededor. Por lo que ahora funciona paisaje. Yo lo cambio un retrato. En realidad sólo pone todo de nuevo en el centro, y eso funcionará para cada reputación. Eso son contorsiones raras otra vez. Um, pero creo que eso es todo lo que queríamos pedir controles emocionales. Entonces ahí dentro, solo un par de cosas más que podemos pulir un poco. Entonces siguiente Escucha, voy a ponerle algunos toques finales a las cosas, y vamos a partir de ahí. ¿ De acuerdo? Yo sí quise señalar una última cosa con esto porque creo que voy a conseguir preguntas respecto. Y si sostienes tu dispositivo perfectamente en posición vertical es un poco complicado. Ya verás que todo salta. Um, eso es solo efecto de cómo el giroscopio devuelve datos. Y honestamente, no
tengo ni pista de cómo arreglarlo. He pasado mucho tiempo tratando de averiguarlo, y no lo sé. Entonces si alguno de ustedes es geniales magos de desarrollo que sepan compensar eso, por favor avísame y actualizaré esto. Escucha, gracias.
10. Coen 6 toques finales: Solo hay un par de cosas más que me gustaría cambiar aquí. Sólo algún tipo de toques finales, cosas que hacen que se vea un poco más pulido. Por lo que el primero de esos va a ser una pantalla de carga. Entonces si estás viviendo esto fuera de un servidor, podría tardar un par de segundos en cargarse. Y simplemente se ve roto como que los Lakers vienen de uno a la vez. Entonces ya estamos contados, como ya sabemos cuando todo está cargado. Entonces solo voy a ir al HTML por aquí y debajo del lienzo en él una vez que lo hagan, igual a cargar pantalla de tablero, y luego d igual. Y luego dentro de Estado africano saqueando corte de pato. De acuerdo, voy a decir sobre y luego ir a tu archivo CSS y debajo del lienzo de punto. Vamos a dob cargada ceniza pantalla y luego abriendo corchete, y van a haber bastantes de estos. Por lo que podría necesitar un positivo conseguir el centro comercial. Pero voy a decir posición absoluta. Ah, yo con 100% 100% de fondo. Cero cero cero cero Justo aquí. Capacidad de visibilidad. Um, pantalla central
textil. Fax dirección Flix. Uh, linea me centro sólo por uh huh. Centro en transición. Ahí s él es todos tus puntos que es color y también probablemente no. De acuerdo, así que si tienes todo ese uno más debajo que dice cargar el espacio de puntos de pantalla de bash entre esos dos años, uh, diciendo visibilidad oculta. Sujete tu Así que básicamente, todo esto hace más o menos una pantalla de superposición blanca que tiene la palabra cargando justo en medio de ella se desvanecerá cuando agregues la clase golpeada en ella, lo que hará con tus perros. Bien. Um, sí. realidad no hay mucho en eso aparte de la especie de alinear verticalmente el texto y alinear
horizontalmente el texto. Entonces me van a salvar ahí. Vamos a pasar al script Java, y luego solo agregamos un par de cosas. Entonces estoy arriba en la parte superior del archivo de script de trabajo y justo encima de este recuento de carga divagaciones, están cargados, igual a caídas, caídas, caídas,
y luego quiero conseguir una referencia a la pantalla de carga por encima de eso, y eso sólo va a estar lejos. Pantalla de subrayado equivale a elemento por E. Y eso se llama soplar en nuestro HTML. Voy a decir que voy a bajar Teoh, donde lo revisamos, todo está cargado. Entonces eso es justo aquí en nuestra lista de capas para cada dentro de esto, si el contador de carga es mayor o igual a la lista de capas deteniéndose. Entonces vamos a decir hola. Esa es una función que necesitamos escribir. Está bien. Y aquí abajo sólo necesitamos decir función. Tengo una carga y dentro de eso dirá cargar pantalla de subrayado Plus con una
L mayúscula en la lista. Uh, vale, así que di que refrescar por aquí. Y se podía ver que tiene una pantalla de carga que aparece y luego se desvanece. Está cargada. Entonces esa es una pequeña adición agradable. Entonces lo siguiente que vamos a querer hacer es que vamos a sumar un poco de un efecto
tres D. Entonces Así que tienes tus compensaciones de capa. Pero si solo estás mirando esto no a través de una cámara, no
se ve Super tres D's. Vamos a añadir una especie de rotación de todo el elemento de lienzo también. Um, esto es un poco más complicado, probablemente menos viniendo, sin
embargo, así que vamos a bajar dentro de este jockey y disfunción justo debajo de nuestro claro directo tendido aquí en un par de líneas y luego vamos a decir calcular Oh, mucho. Esto debería 30. Y entonces vamos a decir nuestro subrayado estatal X igual a er ¿por qué? Por desde héroe Negativo 05 us cristal fantasía emotion dot ¿Por qué? Desde 1.2 punto y coma y luego destino y es igual, ¿Qué tal la próxima vez desde tu 0.15 más punto x y luego debajo de eso, en realidad
vamos a rotar el campus? En realidad, así que vamos a decir lona, ese estilo se enfría. Uh, esto podría ser un poco complicado, así que en realidad podría hacer esto bien por aquí. Voy a salvar nuestra transformación. Extraño, uh, igual. Entonces lo que estamos haciendo es hacer un extraño usando algunas variables dentro de la cadena que estamos configurando como un valor CSS. Entonces esto es solo un poco raro, pero ten paciencia conmigo. Necesito tener cuidado con dónde pones las cotizaciones aquí, sin embargo. Girar X apertura embarazo final cita más subrayado pectorales. Cotización apertura de EU DEG paréntesis final, Espacio replicado. ¿ Por qué? Está bien. Fin del embarazo. Cotización más subrayado. Por qué Deck semi colon. Aquí. Nos vamos de referencia que trata estricta. De acuerdo, Así que había guardado y voy a rotar nuestra página de primer año camino por aquí y ahora se puede ver que todo el asunto en realidad gira un poco. Eso es para que no necesitara ese negativo, en realidad. Negativo 0.15 y se ve mejor. Entonces ahora todo tipo de cosa gira solo un poco mientras muevo el dedo alrededor de la pantalla o si muevo mi dispositivo, uno de esos se invierte cuando estoy viviendo mi dispositivo. Entonces probablemente necesito dos veces negativo en ese movimiento y probablemente movimiento Por qué, Sí, creo que es mejor. OK, genial. Por lo que ahora tienes más tres efecto D. Genial. Um, y entonces en lo último que quiero hacer es ya sabes, esto cuando estoy usando controles táctiles o mouse y luego dejar ir simplemente inmediatamente vuelve a normalidad. Me gustaría animar eso de vuelta. Me han entrenado para no usar bibliotecas JavaScript de terceros en su mayoría, pero hay una bastante cool que solo quiero mostrarte muy rápido llamado Tween dot Js . Entonces eso está disponible en get have y voy a incluir un enlace al mismo en el proyecto on, Pero tú lo abres. A ver si vas a Tween O J s. Esta es la página que vendrías a ti y luego tú y tocas en fuente aquí y luego entre holandés A s y y puedes golpear rock y deberías poder seleccionar todo
tocando y sosteniendo en la pantalla. Esto podría ser solo un poco molesto en IOS, pero con suficientes pacientes, creo que podrías hacerlo. Voy a copiar todo eso y luego de vuelta en Kota y voy a tocar el icono de la cajita en la parte superior izquierda y luego voy a golpear el plus en la parte superior derecha del código, Una pantalla y hit nuevo archivo Tienes un problema entre dot Js por todo el caso y creed Y luego quiero tocar en Tween dodgy s top editor en Kota Tap y pegar Y parece que tengo todo bien y voy a golpear save in the top, ¿
verdad? Y entonces sólo voy a tocar en Tween ducado s en la parte superior y cerró duquesa de Tween. Entonces vamos a volver al índice punto html Y así es como incluirías otra biblioteca de scripts de trabajo Así que justo encima de nuestro archivo de puntos principales Js. Voy a decir que tipo de script es igual a barra JavaScript Fuerza igual a cita que barra sí, abre eso. Voy a guardar eso y luego volver a ti en archivo de script Java. Y hay un par de lugares que necesitamos editar esto. Volvamos a nuestra imagen aquí. Asegúrate de que eso esté funcionando. De acuerdo, así que simplemente no veo lugar donde va a empezar esto. Tipo de conceptualmente es cuando sueltas el toque o el ratón. Entonces eso está en nuestra función de gesto final, que está justo aquí. Por lo que vas a eliminar puntero dot exe y puntero dia y igual a cero ambas líneas . Y en cambio vas a decir entre Capitales capitalmente y entonces vamos a decir están bajo subrayado media igual a nuevos capiteles batibles. Un par de azúcar que a y gracias cero ¿Por qué? Es héroe. Soporte rizado, 300 princey. Fácil. Me refiero a la espalda asustada. Creo que eso es correcto. Sí. De acuerdo, entonces básicamente lo que hace esto es que dice cuando dejas de tocar o hacer clic en la pantalla, va a iniciar una nueva Tween que se actualizará automáticamente en nuestro bucle de renderizado. Por lo que necesitamos volver a nuestro bucle render, que es han sido hard rock y disfunción aquí. Entonces justo debajo de la parte donde despejas el contexto oh, somos en cambio bien conocidos. Está muerto. Sólo vamos a decir, y vamos a decir esa fecha y creo que eso es todo lo que tienes que hacer. Para que pudiéramos guardar y luego refrescar la página y luego la mueves y luego soltarte. Eso ya se puede ver. Se recupera muy bien, así que no tienes que hacer eso. Eso es opcional, pero creo que es un poco más agradable. No se siente bastante se rompe cuando te sueltas. Um, y en serio, de
eso se trata Oh, espero que hayan disfrutado esto. Avísame si tienes preguntas en la sección de discusión. Yo, desafortunadamente, no
puedo ayudar a todos con todo su código como mencioné antes. Pero si tienes algunas preguntas específicas, asegúrate de revisar el código que incluiré y avísame. Y muchas gracias por trabajar
11. Soporte de iOS 13: Hola chicos. Entonces solo quería darte una actualización rápida ya que he tenido un West 13 y tenía 13 salió . He tenido algunas preguntas sobre cómo hacer que funcione el movimiento del giroscopio. Apple ha cambiado eso con los últimos sistemas operativos. Entonces si recuerdas en la lección anterior, dije que necesitas entrar en la configuración y habilitar un interruptor ahí para que funcione. Tres buenas noticias es que ya no tienes que hacer eso. La mala noticia es que hay que agregar un poco más recubierto para que esto funcione ahora. Pero creo que en general es una mejor solución que Waas. Entonces esto en realidad es bastante rápido. Entonces estoy inclinando mi iPad. Esto no se puede ver, pero la imagen de la derecha no se mueve en absoluto, y eso no es lo que queremos. Entonces esto apenas empieza con el final del ejemplo de código que he publicado en el recurso es sección productos y recursos. Y en la parte inferior de tu archivo de punto principal Js, solo
vas a agregar una línea que diga punto de ventana en el oyente de eventos, asegúrate de prestar atención a la capitalización de estas cosas como final y luego función. Cierras ese punto y coma y luego solo vamos a decir dentro de ese activar océano y luego necesitamos escribir que habiliten las funciones de movimiento Vamos a funcionar y máquina capaz . Y luego dentro de esto, solo
vamos a decir que si vamos a ponerles punto a la estación coreana, luego complementamos dispositivos y solicitamos permiso y cerramos eso con, um entre paréntesis aquí, y asegurarnos de que obtengan el capital d al inicio de esto en capital propiedad de Capitolio. Tú esto es un construido en No conozco esta cosa construida en cosa de construcción en tu navegador Web . Por lo que debes asegurarte de que si te equivocas la capitalización, no
funcionará en ir a guardar esto. Y luego si voy a refrescar mi página Web por aquí y luego estoy inclinando mi iPad y todavía no pasa nada. Pero cuando toque la pantalla, se mostrará este pequeño mensaje que dice, me gustaría acceder al movimiento y la orientación, así que voy a golpear, permitir. Y ahora, como le dije a mi iPad, se
puede ver que está funcionando de nuevo. Eso puedes solo lo estoy haciendo en base al tacto. Y esa es esta parte del oyente de eventos publicitarios por aquí. Um y eso sólo significa que cuando tocas la pantalla, cuanto levantes el dedo, eso va a correr. Y puedes agregar un pero en o algo así, nuestra alguna otra forma de habilitar esto. Entonces en mi página web, si miras algunos de estos, tengo un pequeño botón que dice Habilitar acceso de orientación. En eso hay mucho más CSS involucrado. Entonces no me voy a molestar ahora mismo, pero esa es probablemente una forma un poco más obvia de hacer las cosas. Pero por ahora, esto funcionará. Pero tú sí. Si quieres habilitar esto de alguna otra manera, entonces solo un toque final. No puedes hacerlo automáticamente. Esa es la captura aquí. No puedes simplemente ejecutar esto tan pronto como se cargue la página. Tiene que ser algo con lo que el usuario interactúe que lo haga correr. Eso que podría ser un click de tap. No creo que puedas hacerlo en Swipe. Puedes probarlo si quieres. Pero, uh, sí, así que espero que eso ayude a alguna vista y, uh, buena suerte. Hazme saber si tienes preguntas
12. Depuración básico: Oye, así que solo quería repasar un poco de depuración en esto siempre y cuando esté haciendo actualizaciones a la clase s. Oh, debería haber repasado esto más originalmente, pero hay algunas maneras fáciles de descifrar o al menos consigue una especie de pista de dónde va mal tu
código. Eso mayormente Hemos estado ejecutando nuestro código uno al lado del otro. Por lo que el editor de código APP está en el lado izquierdo y safaris en el lado derecho. Pero para usar este d bugger en editor de código o como lo llamen ahora, uh, necesitas Teoh realmente ejecutar tu código en su versión preliminar incorporada. Um, así que en tu archivo html de punto índice, solo
podrías tocar este globo ocular en la parte superior. Um, creo que para abrirlo y apoyarte golpea y aguanta una frustración. Haz eso en una lección anterior. Pero acabas de pasar una vez y puedes ver que obtienes este bonito adelanto corriendo justo en tu mitad sobre Ben en la parte superior, ¿
verdad? Justo debajo de la marca de verificación. Ahí hay un rectángulo con pelos cruzados. Si tocas eso, verás que obtienes este gran rectángulo gris con unas pequeñas 20 0 cosas en la parte superior izquierda de ella s Así que esto se llama tu consola. El de esta app no es fantástico. Hay mucho mejores en los navegadores de escritorio. Pero esta es una de las mejores opciones en el iPad. Entonces ahora mismo puedes ver que no tengo ningún error, lo que significa que mi código está funcionando bien, lo cual es genial. Muchos de ustedes cuando se topa con problemas, probablemente tendría un montón de Ares aquí. Entonces te voy a mostrar un poco de cómo se verían esos y cómo rastrear algo . Entonces vamos a cambiar algo aquí dentro. Al igual que, por ejemplo, digamos que deletreé punto tu inicial como punter inicial, y espero que esa no sea una mala palabra, uh, en un idioma que no conozco o algo así. Pero si vuelvo a mi violín índice,
solo golpeo, solo golpeo, refresco en la parte superior, aún no hay errores. Pero una vez que toqué la pantalla para empezar a moverse de repente está lleno de rojo dicho, diciendo, No
se puede encontrar las iniciales de puntero variable. Entonces eso me dice en mi javascript algo anda mal con ese punto. Tu
variable inicial . Por lo que vuelvo al script Java. Básicamente, podrías hacer una búsqueda aquí o algo así y solo tratar de encontrar lo que está pasando o hasta que comience
la orden básicamente y en los navegadores de escritorio mucha del tiempo, te
diré en qué número de línea está el problema también en los murciélagos, estos pequeños números fuera al lado izquierdo de tu pantalla encendida. Pero yo sólo quiero arreglar eso. Vuelve atrás. Y luego también, si terminas con un cónsul completamente lleno de errores como este, puedes tocar nuestro tipo claro en la parte inferior de la misma con tu pequeña función. Paréntesis, entendido. Entrar en ella despejará todo para ti. Sí, así que eso son solo algunos consejos de depuración realmente rápidos. Esperemos que eso ayude a alguien, uh, gracias.
Jarom Vogel, Digital Illustrator
