Un Sprite CSS es una técnica muy interesante, lo que pasa es que para que veáis bien el ejemplo tendría que estar un rato.
Vamos a ver si podemos ver un ejemplo en una imagen y entonces, mira, sí, súper bien, este, por ejemplo.
Mira, pues este ejemplo. Pues aquí, esto sería un Sprite CSS.
¿Y qué es lo que haces? Pues tú lo que haces es que cargas, mira, Google lo utiliza un montón y de hecho creo que lo sigue utilizando, lo utiliza un montón de gente.
¿Cuál es la ventaja que tiene un Sprite CSS? Un Sprite CSS lo que significa es que tú tienes una imagen y en esa imagen tienes como un montón de imágenes.
Aquí puedes ver que tienes 1, 2, 3, 4, 5, 5, 10, 15, 20 imágenes, que son 20, al final es el mismo icono en diferentes colores.
Esto no lo recomiendo, en este ejemplo no lo recomiendo porque esto seguramente con un SVG que puedas colorear es mucho mejor.
Pero, por ejemplo, aquí en Google parece que sí que tiene más sentido, ¿no?
Porque todas las imágenes que puedes ver aquí, todas son diferentes, ¿no?
Tienes Google, no sé qué, no sé cuánto, bla, bla, bla.
Entonces, tú lo que haces, mira, este por ejemplo es todavía más grande.
Tú lo que haces es que cada espacio que tienes en la imagen esta de CSS Sprite, lo que haces es que tú haces una sola request,
pero puedes mostrar visualmente todas estas pequeñas imágenes.
¿Y cómo lo consigues? Utilizando el Background Position.
De forma que tú dices, vale, pues voy a hacer que solo aparezca este trocito de aquí.
Background Position sería 0, 0 y puedes hacer que el tamaño de esa imagen sea 32 píxeles, así que solo sea este cuadrito.
Ahora, ¿qué quieres la siguiente? Pues Background Position 32 y que tenga un espacio de 32 píxeles.
Mira, este es el truco del CSS Sprite.
También te digo que esto cada vez se utiliza menos.
Este se utiliza bastante, puede ser que lo sigas viendo que se utiliza en algún sitio.
Mira, otro ejemplo.
¿Ves? Aquí se ve justamente la separación como de la grid, ¿no?
Esta técnica es muy popular, por ejemplo, en los videojuegos.
En los videojuegos cuando tú ves así en píxeles, o antiguamente sobre todo se hacía así,
cómo se movía, por ejemplo, Mario Sprite.
Mario Bros Sprite.
Vas a ver cómo se mueve y vas a ver trozo a trozo esto.
Mira, esto es un Sprite, ¿no?
Y cada trocito, pues es el Mario con una posición.
Mira, aquí tienes todos los Sprites del juego, básicamente.
Todos los Sprites del juego los tienes aquí.
Y aquí lo que tienes es, pues, tú dirías, Background Size, tal.
Pues tendrías una parte.
Si queréis podemos hacer una demo de esto.
Es muy rápido, es un momento.
Y lo podemos hacer con el Mario.
Decidme por el chat si lo queréis.
Y Fontoson, por ejemplo, también utilizaba esto.
¿Vale?
Y sí, en el caso de los videojuegos hacen como un efecto...
¿Sí? ¿Lo queréis?
¿Lo queréis?
Vale, lo hacemos en un momento, va.
Vamos a hacerlo para que veamos la demo en un momentito.
Además, podemos intentar...
Bueno, vamos a hacer una demo.
Vamos a hacerlo con Vite.
¡Dale! ¡Dale!
Venga, está interesante.
Sí, está interesante.
Ya os digo que hace 10.000 millones de años que esto lo hago.
Porque, claro, es que ya no se utiliza tanto como antes.
Vamos a hacer CSS Sprite Demo.
CSS Sprite Demo.
Y hacemos...
¡Ay!
Lo podría haber hecho directamente con esto, ¿verdad?
Sí.
CSS Sprite Demo.
Fuera.
Vamos a poner...
CSS Sprite Demo.
Vamos a poner de template.
Vamos a poner...
Vanilla.
Vanilla.
Vamos a hacerlo solo con...
Claro que sí.
¿Vale?
CSS Sprite Demo.
NPM Install.
NPM Run Dev.
Abro el editor.
¿Vale?
Index HTML.
Vamos a tener aquí...
¿Cómo le puedo poner esto?
Sprite.
¿Vale?
Y vamos a poner en CSS, en el sprite, que tenga el background...
¡Ey! ¿Qué ha pasado aquí?
Vale.
Background No Repeat.
URL.
Y vamos a poner la URL del Mario mismo.
A ver.
Pi, pi, pi, pi.
Vale.
Bueno, aquí no sé por qué...
Ah.
Formato GIF me imagino que por la transparencia, pero no pasa nada.
Vale.
Esto por aquí.
Y esto por acá.
Ahora nos vamos a...
Vamos a hacer esto un poco más pequeño.
Así.
Vamos a dejar esto así.
Y aquí vamos a abrir...
En el puerto de 3000 estaba...
Espérate.
¡Ostras!
Una cosa.
Un momento.
¿Funciona bien el stream?
Estoy flipando.
Es que tengo la VPN del trabajo y no me había fijado.
Voy a quitarla.
Igual me desconecto un momento.
Espero que no.
Espero que no.
Funciona re bien.
Vale, vale.
Qué raro.
Tenía la VPN...
Normalmente con la VPN funciona regular.
Vale, vale.
Pues nada, ya está.
Venga, vamos a verlo esto.
Era el 3001, me han dicho por ahí.
Todo está bien.
Se para un poco.
Vaya, por Dios.
Entonces no funcionará re bien.
Vale.
Esto por aquí.
Esto lo hacemos pequeñico.
Esto pequeñico.
Pequeñico.
Pequeñico.
Madre mía, cuántas cosas abiertas tengo.
Y esto por aquí.
Venga, vamos con el sprite.
¿Por qué me sale?
Ah.
Por que esto hay que quitarlo.
Y ya está.
Vale.
Entonces, ahora...
Voy a poner aquí un h1.
CSS Sprite Demo.
Vale.
Tenemos aquí CSS Sprite Demo.
Pero no se ve nada, ¿verdad?
¿Por qué no se ve nada?
Si aquí nos ponemos a mirar, veremos que el sprite no tiene tamaño.
¿Sabes?
No sabe por defecto cuál es el tamaño que tiene que tener, aunque tiene este background.
Vamos a decirle que es de...
El width vamos a poner que es de 32 por 32 píxeles, por ejemplo.
¿Vale?
Entonces, ahora ya podemos ver que lo tenemos aquí.
Fíjate que ahora se me ve un trocito.
Claro.
Yo lo que debería hacer sería habituar...
O sea, tener claro cuál es el tamaño que puede tener el sprite.
Por ejemplo, tiene pinta de ser de 16 por 32.
Normalmente, los sprites pueden ser cuadrados, rectangulares, como sea.
¿Vale?
Entonces, voy a ponerle...
A ver si somos capaces...
Bueno, lo puedo hacer así grande.
Y ya está.
¿Vale?
Pero bueno, aquí podéis ver este sprite.
Bueno, ¿ves que ahora se corta?
Pues parece que es un poquito más grande.
Vamos a ponerle 20.
A ver si así...
20.
Idealmente, esto lo deberíamos saber.
¿Sabes?
Esto te lo dicen.
Alguien te dice, el sprite es de tanto por tanto.
Bueno.
Tenemos este trocito.
Ahora, lo que podemos hacer es background.
Le decimos la posición.
Y aquí decimos 0, 0.
Si es 0, 0 es la misma.
Pero lo que podemos hacer es decirle, como ahora ya sabemos que es cada 20 píxeles,
pues lo que podemos hacer es ir tirando hacia el otro lado.
Pero, bueno, ¿ves?
Es que no parece que sea exactamente 20 píxeles.
No sé si me queda...
Vamos a ver si hay una...
Es que me parece que este sprite no está como bien delimitado.
¿Sabes?
Que todos tengan que ocupar lo mismo.
Mario Bros.
Sprite.
Vamos a buscar un Mario Bros.
Sprite.
Que debería ser más cuadrado.
Es que esto...
405...
O igual sí que lo oís.
Y es que...
A ver...
Normalmente te dicen en algún sitio.
¿Ves?
Aquí se ve bastante más cuadrado.
Claro, depende también de cada dibujillo.
O sea, los sprites pueden ir por partes.
Que hay una parte que sí que sea 24 por 24.
Otra que sea no sé qué por no sé qué.
Bueno, vamos a intentar conseguir que funcione y ya está.
En este caso, bueno, pues tendríamos...
Imagínate, el 20 píxeles...
Vale, 19 píxeles...
Tendríamos este.
Ahora lo que podemos tener...
Como tenemos un sprite, lo vamos a poner como si fuese una clase.
¿Vale?
Y vamos a hacer que esto sea una clase también, el sprite.
De esta forma...
Mira, incluso podemos hacerlo como se supone a veces que se hace esto.
Que es utilizando la i.
Eh...
Vale, la i.
Display block.
Online block.
¿Vale?
Y de icono, se supone.
La gente es como lo hace.
A ver, 19 por 19 es 38.
Vale, 38.
Es que, ¿ves?
No queda bien.
Es que me da la sensación que no están bien los...
No está del todo...
18.
A ver, si pongo 18.
18.
0.
Sí, pues es de 18 a lo mejor, ¿eh?
18, 36.
Vale, sí.
Vale, pues lo que ya está...
Ya lo que podemos ver es justamente esto, ¿no?
Que el background position tú le puedes ir moviendo de 16 y vas viendo cada diferente el movimiento del Mario.
De hecho, igual que tenemos esta imagen aquí del Mario, una vez que tienes este sprite, puedes poner aquí...
Sprite y vamos a ponerle step 2, ¿vale?
Ahora lo que tenemos con uno sería el step 2.
Podemos hacer que sea background position menos 18.
¿Ves?
Y aunque parecen dos imágenes separadas, lo parecen, es la misma imagen en realidad.
Está tirando de esta misma imagen que tenemos aquí del background.
Aquí esto mismo lo podemos seguir repitiendo todo el rato para tener el paso 3.
Y aunque sea separado esto, lo puedes hacer con iconos, con lo que quieras.
Lo tendríamos aquí, step 3.
Step 3, ¿vale?
Y le ponemos 18 y 18, 36.
Y fíjate que tienes estos tres pasos.
Parece que está cortado por abajo, pero bueno, más o menos.
Más o menos para que se vea un poco la idea.
No sé si debería estar 32, sí, 33, 34, 33, parece.
Bueno, pues eso.
Estos son como tres imágenes separadas, pero, o sea, imágenes.
Es la misma imagen, solo que la posición del background es diferente entre las tres.
Lo mejor de esto es que encima podrías utilizar un poquito de esto, de set interval.
Vamos a hacer esto, va, set interval, que cada 100 milisegundos vamos a recuperar el sprite, el primero.
Const sprite, sprite, sprite, document, query, selector, punto, sprite.
Y lo que podríamos hacer del sprite sería set style, no, ¿cómo es esto?
Styles, punto, background position, ¿vale?
Vamos a empezar.
Movimiento en píxeles, que sea 18, start 0, o current, ¿vale?
Current, que sea 0.
Movement, que sea 18, ¿vale?
Entonces, lo que podemos hacer es, x que sea igual a current, claro, current 18, por movement.
Vamos a hacer que el current, si no, current y si no, 1, ¿vale?
Lo que vamos a hacer, lo que vamos a intentar hacer, a ver si sale, es que este bicho se mueva a través de una sola imagen y que parezca un gif, cuando en realidad es una imagen, que vamos a estar moviendo constantemente el fondo del lugar, ¿vale?
Vale, current, si no, a ver, es que he puesto esto, pero esto al final podría ser así.
Por movimiento, y esto, por menos 1, por menos 1, y esto que sea la x, ¿vale?
Y algo no es bien, pero bueno, lo que hemos intentado, a ver, por menos 1, claro, me faltaría el current, que lo tengo que ir sumando, ¿vale?
Lo que tendríamos que hacer, este sería para el movimiento, vamos a hacer que current sea esto, 0, porque empieza por el 0.
Ah, bueno, claro, podemos poner steps en lugar de eso, vamos a hacer que el primer step sea este, ¿vale?
Vamos a hacer por steps, mejor, step, step, vamos a hacer que esto sea la x, step más más, ¿vale?
Porque vamos a ir cada vez, vamos a estar haciendo un paso hacia adelante, ¿vale?
Step, step más más, vamos a ver un momento la consola, a ver qué está haciéndome esto, y esto tiene que ser negativo, ¿vale?
Voy a quitar los otros, que nos están molestando, vamos a ver, en la consola me está petando algo que no le gusta,
¿por qué? ¿Qué he hecho aquí con el sprite? Sprite, uh, espérate,
que me está petando algo, eh, cancel properties of undefined, bueno, no me está encontrando el muñeco,
o sea, no me está encontrando el sprite, querySelector.sprite, coño, querySelector.sprite, esto debería estar bien, ¿no?
.sprite, he puesto bien, class.sprite, bueno, no, pero es un módulo, esto debería tener ya el defer y todo esto, ¿eh?
Sí, puedo hacerlo con animaciones de CSS, pero lo que quiero es justamente enseñaros un momento esto,
si no, luego lo hacemos con animaciones de CSS.
Vamos a ver, document.querySelector.sprite, ¿vale? Esto sí que está.
Ah, bueno, es que esto es que lo he liado yo con querySelector.sprite, he puesto el styles, yo creo que es style.
Vale, entonces, le ponemos aquí 100 milisegundos, y bueno, ¿cuál es el problema?
El problema es que, a ver, puedo poner el máximo, max step, claro, porque a lo mejor me paso de este sprite, ¿no?
El max step vamos a poner que sea 8, y vamos a poner que step sea, step, si es mayor a 8, pues vamos a poner que sea 1, y si no, step más 1, por ejemplo, ¿vale?
Habría que ver un poco 6, bueno, es que al principio encima es el de nadar, ¿vale?
Ya os digo que el tema del sprite es que no se ve que es exactamente como pixelado, eso es un poco raro,
pero veis que podríais hacer incluso que se mueva el muñeco con solo esto,
podríamos buscar uno que sea más cuadriculado, o para, es que igual está incluso...
Max step, ay, es que puedo, esto he puesto así mal.
Mira, ahí lo tengo moviéndose, está como si estuviese nadando, ¿no?
Pues este sería el movimiento de nadar, básicamente, muy rápido, eso sí, pero ese sería el movimiento.
Mira, está así, está moviéndose así, moviéndose así.
Esto, claro, esto sería con JavaScript, pero, por supuesto, esto se podría hacer también con animaciones CSS,
que con animaciones CSS encima sería bastante más óptimo.
Para hacer esto, a ver, lo podríamos hacer dependiendo de los pasos que tenga, ¿no?
Si queréis lo miramos en un momento.
Básicamente sería tener aquí los keyframes de animation,
le podríamos decir que el 0%.
Claro, el tema sería, claro, si lo ponemos de 0%, espero que no haga una animación.
O sea, lo que quiero es que no se mueva, lo que quiero es que vaya directamente.
Bueno, podemos intentarlo.
30 y 40%.
Background, position.
Vamos a poner 33.
Background, position, menos 18, píxeles 0, 66%.
Creo que era 18 también.
A ver, lo hemos estado haciendo, sí, por 18.
Menos 36, ¿vale?
Animation.
Move, vamos a poner move.
Animation, move, infinito, tal.
Y esto, claro, el problema que tiene esto es que me está haciendo la animación.
Que lo ideal sería que no me hiciese la animación.
Que no lo animase, sino que fuese...
Pero veis, que al final podéis ver el movimiento entre uno y otro.
¿Cómo lo podríamos hacer para que no se...
¿Sabes?
Que no...
Linear, no.
¿Cómo?
Alternate, no.
¿Cómo se...?
¿Cómo puedes hacer que esto...
Linear, no.
Un S, no.
0S.
Claro.
Y ya está, ¿no?
Lo hacemos así.
Claro, pero entonces no...
Alternate.
No.
Bueno, sé que se puede hacer de alguna forma.
A ver si me lo decís en el chat y lo hacemos.
Dije lo que al final he estado aprendiendo que es lo importante.
Sí, me emocioné.
Yo aquí, todo solo.
¿Cómo es posible manejar muchos useState diferentes puestos en un componente?
Pasándolo a un useReducer, básicamente.
Ya he realizado un proyecto de un registro de productos, local storage, con steps.
Eso, con chale, con steps.
Fisto.
Vamos a utilizar los steps.
Step, animation, animation, steps.
CSS.
A ver, si no recuerdo mal, esto sería el move, el tiempo, estos sean los steps, decirle cuántos son, ¿no?
Sería así.
Ir hacia adelante.
No.
No, pero steps son tres, ¿no?
Creo que era así.
Vale.
Pinta un poco mejor.
Un...
Luego es...
Infinito.
Bueno.
Está mejorando.
Está mejorando.
A ver.
Steps...
One step, start.
Path...
La verdad es que nunca he utilizado el steps este.
O hace mil años que no lo utilizo.
A bit messy.
Steps, 4, end.
How to infinity versus forward cars.
Infinite, 3, steps.
Keyframes, 2.
Keyframes, 2.
Coño, pero ¿cómo?
¿Por qué?
O sea, sería todo el rato...
No, porque eso no...
Claro, en el back, con esto...
Esto lo hace en 4 steps.
O sea, le tengo que decir a lo que queremos que llegue directamente.
O sea, le tenemos que decir que queremos que llegue al menos 36.
Y que esto queremos que se consiga en 3 steps, ¿no?
A ver, un segundo.
2 steps.
Ahí está.
Pero deberían ser 3.
El problema es que, claro, cuando son 3 steps, al separarlo, claro, no lo hace bien.
Cuando hace 2, claro, es más fácil, porque es 18 y 18.
Cuando son 3...
Claro, porque son 36.
O sea, 36 más 18, 54.
Y entonces sí que podríamos poner los 3.
Y ya está.
O podríamos poner los 4.
58...
72.
Ahora sí.
Lo que no entiendo ahora...
Yo creo que es infinito.
Y ya estaría.
Y con esto lo tendríamos sin JavaScript y solo con CSS.
Bueno, nunca te costará sin saber una cosa más.
Ya está.
La verdad es que sí que utilizar steps, pero hace mucho tiempo, ¿eh?
Hacía mucho, mucho, mucho tiempo que no utilizaba steps.
Claro, es que para hacer UI de usuarios tampoco es que sea muy típico, ¿no?
Al usar VG como animación, no le das mucho peso a la animación.
No, la verdad.
O sea, es mucho mejor esta técnica en la que tenemos una sola imagen que tiene todos los sprites.
Es mucho mejor esto y la animación está funcionando con la GPU que no tener cuatro imágenes e ir cambiando en el DOM cada imagen.
O sea, es mucho mejor esto que no lo otro.
Es que esta técnica se utiliza un montón.
Y esto también...
Dice, no tiene mucho uso el tema de los steps.
Al menos no se me ocurren muchos usos, la verdad.
Vite no refresca al 100% de las veces.
¿Se me está pasando alguna configuración?
Mientras voy actualizando los estilos, a veces se buguea.
Pues la verdad es que no sé.
No sé.
A mí sí que me suele funcionar bien, pero es verdad que los estilos hay veces que sí que lo tengo que refrescar a mano.
Ahora, haz que mueva cuando aprietas una flecha.
¡Joder!
Bueno, a ver, tampoco sería muy difícil.
O sea, a ver, ¿no?
Esto sería sprite o with movement.
Esto lo mueves al with movement.
Este animation lo mueves aquí, ¿no?
Y en el JavaScript lo que haces es documentable listener keydown y le ponemos aquí que sí e move with right arrow.
Vale, el 39.
Perfecto.
Y ahora esto.
Le haces aquí un query selector del sprite y le añade la clase de este, with movement.
Y ahora, si refresco, ahora no se mueve.
Si le doy a la flecha, tampoco.
Ahí.
Add class.
Espérate.
Es que no sé si el keycode es este.
Aquí me he fiado totalmente.
Keycode.
¿Cuál sería de toda clase?
Es not a function.
Claro.
Es que esto es classlist.add.
Pero bueno, esto soy yo que...
Mira, ya está.
Le das a una flecha y se mueve.
Ahora podrías hacer...
Esto lo podrías mejorar, ¿eh?
O sea, es cuestión de ir poniéndote.
Pero al final te pones a...
Cuando sea a la izquierda, cuando sea a la no sé qué, que vuelva a tal sitio y tal y ya lo tendrías, ¿eh?
Ya lo tendrías.
Pero bueno, ahora le das a un botón y ahora sí que se mueve.
Poco a poco, ¿eh?
¿Qué conviene animación en CSS o en JavaScript?
No hay ninguna duda, ¿eh?
CSS seguro.
Pero animaciones siempre, siempre por CSS.
Siempre, siempre.
Porque son mucho más...
O sea, lo lleva mejor la GPU.
Porque al final si no lo harías con la CPU y la CPU se lleva bastante más...
Rankea más, básicamente.
fíjiddich, sí.
Fíjimos.
Fíjimos.
Fíjimos.
Fíjimos.
Fíjimos.
Fíjimos.
Fíjimos.
Fíjimos.
Fíjimos.
Fíjimos.
Fíjimos.
Fíjimos.
Fíjimos.
Fíjimos.
Fíjimos.
Fíj Settings.
Fíjimos.
Fíjimos.
Fíjimos.
Fíjimos.
Fíjimos.
Fíjimos.
Fíjimos.
Fíjimos.
Fíjimos.
Fíjimos.
Fíjimos.
Fíjimos.