Sprite es la bebida favorita de millones de personas, que no sólo se puede comprar en todas las tiendas, sino que también se puede preparar usted mismo. En Internet puedes encontrar muchas recetas diferentes y consejos sobre cómo hacer un sprite tan bueno como el real. Los más populares se recogen en este artículo.

La receta para hacer sprites es bastante sencilla. Es necesario mezclar ingredientes como lima, jugo de limón, azúcar y agua mineral en las proporciones correctas. Sin embargo, hay varias reglas que se deben seguir para que la bebida resulte realmente sabrosa y similar a la natural.

Lo primero que es importante es utilizar exclusivamente frutas frescas para cocinar, y no coger aquellas que “es una lástima tirar”, pero que ya no se pueden comer. Un producto en mal estado puede arruinar el sabor de todo el plato, lo mismo ocurre con las bebidas.

Además, es importante utilizar agua mineral de alta calidad. No debes escatimar en este ingrediente, porque juega un papel clave en la preparación de la bebida. El agua debe estar muy carbonatada; el agua mineral débil o sin gas no es adecuada para tales fines.

En lugar de azúcar, se recomienda añadir jarabe de azúcar a bebidas caseras como Sprite, mojito y otros cócteles. A continuación se describe una receta detallada para hacer almíbar.

¿Cómo preparar almíbar de azúcar?

El jarabe de azúcar es necesario para garantizar que el cóctel casero tenga un sabor lo más parecido posible al comprado en la tienda. Hacer este almíbar tú mismo es bastante sencillo y no te llevará mucho tiempo.

En primer lugar, debes poner la sartén al fuego y esperar hasta que el agua se caliente. El fuego no debe ser fuerte, pero tampoco débil, de lo contrario el azúcar tardará mucho en derretirse. Poco a poco, se debe verter la cantidad requerida de azúcar en la cacerola, llevar el agua a ebullición y dejar que el azúcar se disuelva por completo.

Enfriar el líquido resultante. El almíbar de azúcar está listo y con él se pueden preparar deliciosos cócteles.

Sprite en 10 minutos

No toma mucho tiempo preparar este popular refresco: puedes completar la tarea en menos de 10 minutos. Una de las recetas más habituales para hacer un duende en casa es la siguiente:

Pica finamente un limón, desecha la ralladura;
agregue limón a la sartén, espolvoreado con 5 cucharadas de azúcar, cocine por cinco minutos;
deje reposar el líquido resultante durante aproximadamente una hora;
colar y añadirlo a cualquier agua altamente carbonatada.

El resultado es una bebida maravillosa, completamente idéntica al Sprite comprado. Y solo te llevará diez minutos prepararlo, sin contar el tiempo durante el cual se debe infundir el líquido.

Una forma avanzada de crear un objeto hogareño.

Además de las recetas estándar para hacer coqueta con limón y agua con gas, puedes encontrar formas más interesantes de crear una bebida con otros ingredientes. Para preparar un sprite necesitarás:

agua corriente;
aromatizante "sprite";
ácido cítrico;
dióxido de carbono.

En cuanto al último “ingrediente”, no todo el mundo lo tiene. El dióxido de carbono se utiliza en fábricas y fábricas en la preparación masiva de bebidas carbonatadas. Sin embargo, muchos chefs experimentales también cuentan con este elemento entre sus utensilios de cocina.

Bebidas caseras a base de Sprite

Sprite es especialmente popular porque es la base de muchos cócteles con y sin alcohol muy conocidos que se sirven en discotecas y bares. Uno de ellos es el mojito. Este cóctel es especialmente relevante en verano, porque no solo sacia la sed, sino que también tonifica perfectamente el cuerpo.

Un mojito tradicional contiene varios ingredientes. Como regla general, se trata de agua carbonatada, jugo de menta y azúcar. Cuando se trata de un cóctel alcohólico, a esta lista se suma el ron blanco.

Mojito

El artículo proporciona varias recetas sobre cómo hacer sprites en casa, ¡pero con un mojito es aún más fácil! Este cóctel parece complicado.

Normalmente, se necesitan los siguientes ingredientes para crear su propio cóctel:

caña de azucar;
soda;
lima o limón;
menta;
ron (al menos vodka);
cubos de hielo.

Sprite es perfecto como refresco; también puedes hacerlo tú mismo. Si te preguntas cómo hacer un duende en casa, la receta y la descripción detallada paso a paso se pueden encontrar arriba.

Necesitas "recolectar" un mojito de esta manera:

cortar la lima por la mitad, exprimir el jugo de la mitad;
picar finamente la menta, añadir al vaso con la lima;
llena el vaso con cubitos de hielo;
Llene el espacio restante del vaso con refresco;
añadir 30 ml de ron blanco.

El mojito se debe servir inmediatamente después de su preparación para que el hielo del vaso no tenga tiempo de derretirse. Se recomienda beber con pajita. Incluso los niños pueden preparar un mojito sin alcohol.

Limonada de frambuesa

Este es otro cóctel popular sin alcohol que tanto gusta a muchos niños, porque sus ingredientes principales son frambuesas dulces, jugosas y no menos sabrosas. Para crear este cóctel también se utiliza Sprite. Ya sabes cómo hacer un duende, arriba se describe una receta con fotos y métodos de preparación en casa.

Para el cóctel de limonada de frambuesa necesitarás:

frambuesas;
jarabe de frambuesa;
limón;
duende;
menta;
cal.

El primer paso es preparar las frambuesas: triture bien tres bayas maduras en un vaso. Después de esto, debes agregar una rodaja de limón y llenar el vaso hasta arriba con cubitos de hielo. El espacio restante en el vaso lo llenaremos con un duende aromático casero. Utilice lima, limón y menta para decorar.

limonada de naranja

Otro manjar infantil es la limonada de naranja, que también se puede preparar en casa. Esta bebida refrescante y tonificante no es de ninguna manera inferior a los refrescos comprados en las tiendas. Al contrario, resulta aún más sabroso si lo cocinas correctamente.

Para hacer tu propia limonada de naranja necesitarás los siguientes productos:

3 naranjas medianas;
2 limones;
raíz de jengibre molida (cucharadita);
150 gramos de azúcar;
1 litro de duende;
1,5 litros de agua corriente.

Primero hay que preparar el almíbar de azúcar, ya que esto es lo que se utilizará en la receta. Pelar las naranjas, picarlas finamente, cortar el limón por la mitad. Coloca medio limón y naranjas en una cacerola, agrega agua y agrega la raíz de jengibre.

Cuele bien el líquido resultante. Llene la jarra hasta la mitad con cubitos de hielo, vierta el agua de cítricos, el almíbar y el Sprite. El agua mineral normal también funcionará. Corta la mitad restante del limón en rodajas y agrégala a la bebida resultante.

La palabra sprite (sprite en inglés - hada, fantasma) fue utilizada por primera vez por los animadores de Disney en una capacidad ligeramente diferente; para crear y "revivir" personajes de dibujos animados de manera más rápida y conveniente, los animadores primero dibujaron todas las fases de su movimiento en películas transparentes. , y luego superpusieron estas películas sobre el fondo principal que era el escenario, y recibieron fotogramas de dibujos animados, ahorrando así tiempo, dinero y nervios a los artistas... a estas mismas películas las llamaron sprites.

Luego, el término sprite se introdujo en los gráficos por computadora y se generalizó especialmente en los juegos de computadora, pero esto tampoco es exactamente de lo que quiero hablarles. Hoy quiero hablarles de los llamados sprites CSS.

Por lo tanto, los sprites en CSS generalmente se denominan una imagen, que consta de varias "partes" que se muestran por separado según las acciones del usuario.

Hay demasiadas palabras... Les mostraré un ejemplo...

Este es un objeto que está presente en cada página de este sitio:

Es solo que en un estado de "tranquilidad" se le muestra una parte y, cuando pasa el cursor, otra.

¿Cómo hacerlo? En realidad es bastante simple.

En este ejemplo, para un bloque con dimensiones fijas, cargamos una imagen “doble” como fondo, pero como el bloque en sí, debido a las dimensiones que se le asignan, tiene exactamente la mitad de la altura de la imagen, el navegador muestra solo el primera "parte" de la imagen de fondo, y cuando se pasa el cursor, se activa la pseudoclase :flotar con propiedad posición de fondo que desplaza el fondo hasta la distancia requerida, mostrando así la segunda parte de la imagen.

Bien, dejemos mi logo en paz, sobre todo porque te mentí un poco... hagamos algo más útil para ti, por ejemplo este botón:

Abramos Photoshop y dibujemos algo como esto en él:

¡Lo principal aquí es no equivocarse con las tallas! la segunda parte de la imagen, donde nuestro botón está activo, debe tener exactamente el mismo tamaño que la primera parte de la imagen; de lo contrario, más tarde, cuando pases el cursor, todo “saltará”. Lo mejor es primero dibujar una parte de la imagen, luego copiarla, pasarla por los filtros, terminar de dibujar algo y pegar dos imágenes en una... sin embargo, las lecciones de Photoshop no son lo mío...

Entonces, tenemos una imagen “doble”. 175 en 80 píxeles, recuerde estos tamaños y comience a escribir código.

Lo obtuve así... mira el resultado y lee los comentarios en el código:

sprites CSS

Este es el menú que tenemos:

Botón 1
Botón 2
Botón 3
Botón 4

Creo que muchos lectores se preguntan: "¿Por qué se necesitan estos sprites si se puede hacer lo mismo usando dos imágenes separadas, donde una es el fondo para solo un enlace y la segunda es para un enlace con :flotar, sin tener que luchar con Photoshop y calcular las coordenadas de fondo para CSS?

En primer lugar: ¡¡La velocidad de carga de imágenes aumenta significativamente!! A pesar de que una imagen "doble" pesa lo mismo que dos imágenes pequeñas "simples" separadas, cargar una imagen grande es más rápido, ya que el navegador no crea solicitudes HTTP adicionales al servidor.

¿Recuerdas cuando te mostré el logo de mi sprite y dije que estaba mintiendo? ¡Así que mi astucia radica en el hecho de que esta imagen no contiene dos partes lógicas de la imagen, sino dieciocho!

Y se ve así en su totalidad:

Es decir, ¡casi todos los gráficos que ves en este sitio te llegan en forma de una sola imagen! No mostraré el archivo CSS, yo mismo le tengo miedo...)),

Así que aquí están las solicitudes HTTP... si hubiera 18 imágenes en lugar de una, entonces el diálogo del navegador con el servidor se vería así:

Navegador: Hola servidor! Estoy aquí de parte tuya, a petición mía, estoy recibiendo documentos HTML y CSS, y por eso me indican que en tu carpeta “graphics”... debería haber una imagen con el nombre: “imagen1” suéltala, eh ?
Servidor: Hola navegador, hace mucho que no nos vemos, ahora echaré un vistazo... sí, ¡tengo una foto así! ¡¡Atrapar!!
Navegador: ¡Gracias, lo pillé! Pero todavía necesito "imagen2" en la misma carpeta.
Servidor: Sí, y hay uno... Te lo envío...
Navegador: Subido... pero aquí también se indica “imagen3”.
Servidor: ¡Y no puedes dormir! ¡¡Mantén tu foto!!
Navegador: ¡Gracias! Sí, para ser honesto, ya estoy cansado de esto, pero mi usuario quiere cargar la página por completo... en resumen, también debería tener "imagen4" allí...
Servidor: ¡Estás empezando a estresarme! A tu foto!!
Navegador: ¡¡¡Lo siento, pero no es mi culpa que haya tantas imágenes aquí!!! ¡Necesito "imagen 5"!
Servidor: ¡¡Ya estás haciendo hervir mi procesador!! ¡¡Yo dudé!! Consigue tu foto!!
... ... ...

No expresaré más diálogos, porque lo que sigue es lenguaje obsceno...

¿Por qué toda esta charla entre el servidor y el navegador (cliente), que consume mucho tiempo y tráfico, y además carga el servidor cuando hay una gran cantidad de visitantes del sitio, si es mucho más rápido y económico hacer un HTTP? ¡Solicite y reciba las 18 imágenes en un solo paquete!

Segundo: cargar una segunda imagen cuando se usa una pseudoclase :flotar ocurre solo en el momento en que el usuario pasa el cursor sobre el enlace con la primera imagen. Si se trata de una imagen pequeña como un botón del ejemplo anterior, entonces no sucederá nada particularmente malo: la segunda imagen se cargará rápidamente y el usuario no notará nada... pero ¿qué pasa si se trata de una imagen grande en peso y tamaño? ? Entonces el usuario verá cómo se carga, ¡aunque estaba psicológicamente preparado para el rápido cambio de imágenes! ¡Otra ventaja para los sprites! ... aunque, para ser honesto, esto también es un inconveniente... un inconveniente si el usuario nunca pasó el cursor durante la sesión... la imagen se cargó, pero no le resultó útil... pero créanme, esta "víctima de tráfico” casi siempre vale la pena. !

Y en tercer lugar: ¡¡Por extraño que te parezca, es conveniente!! Es conveniente indicar la ruta a la misma imagen en el código, es conveniente editarla en Photoshop, por ejemplo, hacer que todo el sitio sea más brillante o más oscuro trabajando con una sola imagen, es conveniente almacenar, es conveniente cargar en el servidor, ¡e incluso en CSS es conveniente trabajar con un objeto grande! - aunque esto requiere ciertas habilidades y hábitos.

Bien, decide por ti mismo si usar sprites o no... y mi negocio es pequeño, solo para llamar tu atención sobre la información, por así decirlo... si surge alguna pregunta adicional, te espero en

Los sprites son una tecnología bastante interesante y simple. Ahora os contaré un poco más al respecto.

¿Qué son los sprites CSS?

En resumen, los sprites CSS son varias imágenes en un archivo. Hay un archivo, pero dentro de él hay varias imágenes. Al mismo tiempo, esto es completamente invisible para el visitante. A alguien que visita el sitio le parece que ve varias imágenes separadas.

¿Por qué es esto necesario? Los sprites reducen la cantidad de solicitudes de página realizadas por el usuario y reducen el tamaño total de las imágenes. Como resultado, el visitante verá el sitio más rápido.

¿Cómo está hecho? Una imagen normal aumenta en ancho y alto, es decir, varias imágenes simplemente se colocan una al lado de la otra en una imagen normal. Luego, cada imagen individual de este conjunto se inserta en el bloque deseado con un ancho o alto determinado para que todas las demás imágenes no sean visibles. Todo el conjunto está recortado y sólo queda una imagen. Un duende. Todas las demás imágenes permanecen fuera del bloque específico.

Para que quede más claro, daré una analogía. Imagina que estás mirando por el ojo de una cerradura. Sólo ves una parte separada de la habitación al otro lado de la puerta. Si te mueves un poco hacia un lado y miras la cueva desde un ángulo diferente, verás otra parte de la misma habitación.

Terminología

Para evitar confusiones, definamos inmediatamente los términos:
Duende- esta es una imagen de un archivo con varias imágenes.
conjunto de sprites es el archivo en sí con varias imágenes.

Características del uso de sprites.

¿Cuándo deberías usar sprites? Generalmente hay una respuesta: se deben usar sprites si tienes muchas imágenes pequeñas en la página. No importa qué tipo de imágenes sean. Si tienes muchos degradados con la misma ubicación, muchos botones, muchos íconos, etc. Si hay muchas imágenes pequeñas en una página en particular, entonces podrías considerar usar sprites.

Generalmente hay tres tipos de imágenes en una página: jpg, png y gif. Todos estos formatos tienen dos modos de descarga: modo normal y modo de descarga gradual.

El formato jpg puede ser regular (básico) o progresivo (progresivo). En modo normal, la imagen comienza a mostrarse línea por línea a medida que se carga e inmediatamente en buena calidad. En el modo progresivo la imagen jpg se descarga completa de una vez, pero en mala calidad y la calidad aumenta a medida que se descarga.

Gif y png tienen el mismo comportamiento. El GIF puede ser regular o entrelazado. PNG puede ser regular o entrelazado. El comportamiento de los gifs y pngs entrelazados es similar al de los jpg progresivos. Este comportamiento aumenta ligeramente el tamaño del archivo.

Total. La imagen puede aparecer en la página inmediatamente o puede aparecer con un retraso. Es importante saber esto cuando se trata de sprites. Es recomendable hacer sprites entrelazados o progresivos. El usuario debería ver las imágenes lo más rápido posible, aunque en mala calidad.

¡Pero! Si el archivo final con todos los sprites es demasiado grande, a pesar de toda la progresividad y el entrelazado, el visitante tendrá que esperar incluso a que se descargue parcialmente el archivo. Por lo tanto, no recomiendo usar grandes conjuntos de sprites. Si el archivo es grande, entonces se pierde por completo el objetivo de los sprites: acelerar el sitio. Con grandes conjuntos de sprites, el usuario tendrá que esperar tanto, si no más, que con imágenes divididas normales.

Los archivos de más de 30 kilobytes me parecen grandes. Esto es subjetivo. Es posible que tenga sus propias ideas sobre el tamaño del archivo. Un archivo de 30 kilobytes se descargará en unos 7 segundos con una velocidad de Internet de 56,6 kbps.

Ejemplos de uso de sprites

Sprites con iconos

En un sprite tendré íconos para:

Lista - un icono
Enlaces: tres iconos
Formularios de búsqueda: un icono

Es decir, mi primer conjunto de sprites contendrá cinco imágenes. Todas mis imágenes tendrán el mismo tamaño: 16 por 16 píxeles. Los sprites se pueden utilizar para crear imágenes con diferentes resoluciones, no es necesario que la resolución de todas las imágenes coincida. Con diferentes resoluciones de imágenes, resulta un poco más difícil combinar estas imágenes en un solo archivo.

Como resultado, el primer ejemplo se verá así:

Encontré cinco íconos. Luego simplemente los combiné todos en un solo archivo. Este es el archivo con el que terminé:

Atraer tu atención. En este caso, los iconos no están ubicados cerca, hay pequeñas sangrías entre ellos. ¿Cómo elegir estas sangrías? Por supuesto, puede calcular todo píxel por píxel, pero nuestro caso es bastante simple, por lo que aquí es mejor seleccionar estas sangrías en la imagen de forma experimental. Primero, combinamos las imágenes simplemente a ojo, luego tomamos la imagen superior y la colocamos en el lugar correcto. Si la imagen está en su lugar, pero al mismo tiempo un trozo de otra imagen sobresale de algún lugar, entonces es necesario aumentar la sangría.

Una cosa más. El último ícono de la lista es el ícono de lista: una flecha verde. ¿Por qué es ella la última? La ubicación de los iconos restantes en la imagen nos es indiferente, pero en la lista cualquier elemento puede ocupar varias líneas y si la flecha verde está en algún lugar en el medio, otras imágenes sobresaldrán en las líneas siguientes. Mire la imagen de la lista de arriba para ver de qué estoy hablando.

Entonces. Encontré cinco íconos y los combiné en un solo archivo. ¿Qué hacemos a continuación? Por supuesto escribimos el código:

Elemento de lista
Un elemento más de la lista
Elemento de lista
Un elemento más de la lista
pero en dos lineas
Elemento de lista
Un elemento más de la lista

Este es el código html de la lista. Ahora apliquemos nuestro sprite:

Ul li( relleno:0 0 0 21px; fondo:url("sprites.png") 0 -94px sin repetición; )

¿Qué hemos hecho aquí? Sangrado cada uno

21 píxeles desde el borde izquierdo para que el texto no oscurezca la imagen. Luego configura sprites.png como imagen de fondo. La altura de toda la imagen con sprites en este caso es de 110 píxeles y la flecha verde está al final. La altura de la flecha verde es de 16 píxeles, es decir, la flecha comienza después del píxel 94 desde la parte superior de la imagen. Esto significa que necesitamos mover el fondo 94 píxeles hacia arriba. En el código CSS está escrito como “0 -94px”, es decir, movido 0 píxeles hacia la derecha y 94px hacia arriba.

Terminemos con la lista. Ahora hagamos enlaces aproximadamente de la misma manera:

A( relleno:0 0 0 20px; fondo:url("sprites.png") 0 -42px sin repetición; ) a( relleno:0 0 0 20px; fondo:url("sprites..png") 0 -21px no repetir; )

¿Qué significan los selectores a? Aparentemente este selector obliga al navegador a aplicar este estilo a todos los enlaces que tengan un atributo href cuyo valor comience con la cadena http://site/. El objeto en sí se usa de la misma manera que en el caso de una lista. Solo consideraré un enlace: un enlace a mi blog.

Determinamos el enlace requerido por href... Simplemente puede asignar una clase al enlace deseado o agregar estilos al atributo de estilo directamente en el código html. O identificar el enlace deseado utilizando cualquier otro método.
Hacemos un margen de 20 píxeles desde el borde izquierdo de un enlace concreto
Especifique la imagen sprites.png como imagen de fondo.
La imagen que elegí para mi blog está a 21 píxeles del borde superior, lo que significa que debemos mover el fondo 21 píxeles hacia abajo. En CSS lo escribí así: "0 -21px"

Tarea

Sprites con degradados

Ahora veamos el segundo ejemplo.

Esta imagen muestra una ventana. Una ventana tiene un encabezado, cuerpo y pie de página. Cada uno de estos elementos tiene un degradado de fondo establecido. Mire más de cerca, si no es visible de inmediato, hay una transición de color de pálido a saturado.

Te mostraré cómo los degradados de esta ventana se pueden convertir en sprites. El encabezado y pie de página de la ventana tendrán una altura fija: 30 píxeles. El cuerpo de la ventana se estirará dependiendo de la longitud del texto.

Ahora escribamos el código html para la ventana:

Comencemos a usar sprites. Comencemos con el título de la ventana:

#encabezado de ventana( altura:30px; fondo:#C0C0FF url("gradients.png") 0 0 repetir-x; )

En el archivo gradients.png, primero hay un degradado para el encabezado, luego para el cuerpo y luego para la línea inferior. Es decir, el degradado del título comienza desde arriba. Por lo tanto, simplemente configuramos el archivo como fondo e indicamos la posición como "0 0", es decir, no retrocedemos a ningún lado. Para hacer que el degradado se estire horizontalmente, escriba "repetir-x".

Para asegurarse de que todo el degradado encaje en el encabezado, establezca la altura en 30 píxeles.

Establezcamos un degradado para el pie de página de la misma manera que para el encabezado:

#pie de página de ventana (altura: 30 px; fondo: #C0FFC0 url ("gradients.png") 0 -60 px repetir-x;)

Sólo que esta vez moveremos la imagen hacia abajo 60 píxeles.

La situación con el cuerpo de la ventana es más complicada. Nuestro cuerpo se estirará, a diferencia del encabezado y el pie de página. Es decir, si simplemente creamos un div para el cuerpo de la ventana y colocamos un degradado allí, todos los degradados aparecerán en este div a la vez. Alternativamente, podemos poner el gradiente del cuerpo al final verticalmente, pero ¿qué pasa si tenemos varios gradientes para bloques que se estiran? No se puede hacer todo al mismo tiempo. Lo haremos un poco más inteligente.

El código CSS será el siguiente:

#window-body( posición:relativa; ) #window-body-gradient( posición:absoluta; izquierda:0; arriba:0; ancho:100%; altura:30px; fondo:url("gradients.png") 0 - 30px repetir-x; ) #ventana-cuerpo-texto (posición: relativa; )

Ahora te contaré con más detalle lo que hicimos aquí. Aquí está el código html del cuerpo de la ventana por separado:

Como podéis ver, tenemos dos divas más incrustadas en el cuerpo. El primer "gradiente del cuerpo de la ventana" será responsable del gradiente. El segundo "texto del cuerpo de la ventana" es para texto. Además, como se desprende claramente del código CSS, aplicamos posición: relativa; para todo el cuerpo de la ventana.

Para el div gradiente especificamos posición:absoluta. Por lo tanto, eliminamos el gradiente div del flujo general. Ahora bien, este div no tiene ningún efecto sobre nada. Como hemos especificado la posición: relativa para todo el cuerpo, el div degradado no flota más allá del padre. Adjuntelo al borde izquierdo y superior del cuerpo de la ventana usando “left:0; arriba:0;". Establezca la altura del div degradado en 30 píxeles. Es decir, aquí indicamos la altura del gradiente que adjuntaremos; si la altura del div es mayor que la altura del gradiente, entonces otros sprites sobresaldrán en el div. Y finalmente, adjuntamos nuestro archivo gradients.png al div de gradiente. Como es habitual, movemos el fondo hacia arriba la distancia requerida; en este caso, movemos el fondo 30 píxeles hacia arriba.

Ahora tenemos un degradado en el cuerpo de la ventana. Pero oscurece el texto. Para evitar que el texto se oscurezca, envolveremos todo el texto en un div y le asignaremos una posición: relativa. Una vez asignado, el texto estará encima del degradado.

Eso es básicamente todo. Ahora hemos colocado todos los degradados en nuestra ventana. Y en la cabecera, en el cuerpo y en el sótano.

Hago explicaciones tan largas para que quede todo completamente claro. Pero, de hecho, si sabes un poco sobre diseño, probablemente te bastará con mirar los ejemplos mismos:

Una vez más dupliqué el enlace.

De hecho, puedes encontrar muchos ejemplos de uso de sprites. Sólo mostré dos ejemplos, pero estos ejemplos deberían ser suficientes para entender cómo funcionan los sprites. Si tienes alguna duda, pregunta en los comentarios.

He trabajado creando herramientas y motores para artistas de juegos y efectos visuales durante más de una década, y siempre me ha desconcertado la distinción que la gente hace entre "arte de software" y "arte de juegos real". También he notado que las personas que te dan un pase libre por los malos gráficos son en su mayoría otros programadores. No importa cuán divertido sea tu juego o cuán técnicamente sorprendente sea tu demostración, los no programadores a quienes les muestres tu personaje pensarán: "¿Tiene un jetpack o es algo más?" A menudo, puedes encontrar una manera de crear buenos gráficos sin tener que dibujarlos desde cero. Pero a veces es necesario crear gráficos sobre la marcha. Las restricciones presupuestarias o las reglas en una competencia de juegos, o simplemente una fecha límite ajustada para un prototipo, pueden requerir que tomes una regla y un pincel.

No puedo dibujar, de verdad... quiero decir, mira esto:

Si así es como se ven tus gráficos, entonces este artículo es para ti. Pensé en compartir algunos consejos sobre cómo mejorar tus gráficos. Estos consejos serán útiles para todos, independientemente de sus habilidades y experiencia en dibujo.

Si bien consejos como "dibujar todos los días" o "visitar un museo de arte" pueden ser útiles para un aspirante a artista, este artículo no es para un artista, trata sobre cómo hacer que la gente piense que eres un codificador, un programador o un aficionado. matemáticas, tienen algunas habilidades artísticas.

Además, ninguno (casi) de estos consejos requiere “práctica”, aunque la práctica es beneficiosa e incluso esencial para un verdadero artista. Siempre parece que la fecha límite para un proyecto llega al amanecer y todo lo que necesitas son unos cuantos malditos sprites.

Parte de esta historia también será útil para los usuarios de Photoshop, porque hasta donde yo sé, los mismos conceptos se aplican a cualquier programa de dibujo, y existen operaciones similares para todo lo que menciono aquí en Gimp, y quizás en cualquier otro programa que estés. usando.

Parte de esto también está dirigido a los participantes del concurso LudumDare y otros concursos similares donde el objetivo es crear un juego sobre la marcha en 48 horas. Mis juegos tienden a obtener buenos puntajes en la categoría de gráficos (por desgracia, el juego asesino sigue eludiéndome), aunque no me considero un artista de juegos particularmente bueno. Muchos de estos ejemplos provienen de mis participaciones en LD, y la mayoría de estas experiencias son cosas que aprendí al competir en estos concursos y al verme obligado a crear arte en plazos extremadamente ajustados. Además, deberían ser invaluables para cualquiera que intente crear gráficos de calidad (o algo parecido) en un cronograma corto o con un presupuesto limitado.

El error más común que veo y el más fácil de evitar. La paleta predeterminada para la mayoría de los programas de dibujo por computadora se remonta a los días de DOS (¿puedes detectar la conexión entre los colores de esta paleta y los valores binarios de cuatro bytes del 00 al 15? Por supuesto que sí. Si pudieras' Si no lo ves, serías un verdadero artista).

Por paleta no me refiero a la paleta de 16 o 256 colores de los tiempos VGA. Sólo me refiero a un sistema coordinado para tu juego. Si comienzas con una paleta bien elegida, tus “garabatos” parecerán estéticamente agradables e incluso prediseñados.

¿Pero dónde puedo encontrar una paleta? ¡Ni siquiera puedo distinguir los colores cuando me visto por la mañana!

Bueno, un poco de teoría del color ayuda mucho y si te tomas quince minutos para buscar qué es la "teoría del color" en Internet, terminarás definiendo qué es un juego. Pero si no tienes tiempo para eso, aquí tienes algunos consejos que funcionan de maravilla:

Para un juego más grande, es posible que desees utilizar una paleta diferente por nivel o área del mundo del juego. Si los elementos de la interfaz de usuario y el personaje principal se representan en colores neutros, o si estas paletas tienen un color principal común, puedes aplicarlas por igual entre niveles o áreas.

Este ejemplo utiliza una paleta "monocromática", donde los colores son todos tonos diferentes de un tono muy similar, otros esquemas de color son más variados, pero lo importante es que los colores se vean bien juntos.

Recursos:

MultiColr de idee labs
Lo bueno de este fantástico sitio es que puedes crear una paleta y obtener un montón de fotos simplemente seleccionando algunos colores que desees y una imagen a partir de la cual luego puedes usar los colores.

¡No puedo dibujar!..

Quizás simplemente eres una persona demasiado genial para poder dibujar. Quizás todo esto sea intencionado. Esto es cierto. En lugar de hacer buen arte, elige un tema que requiera mal arte. Esto funcionó para "SketchFighter" Y "Física con crayones" dibujado en papel.

Utilice lo que esté disponible para usted. ¿Tienes algo de basura en tu escritorio? Es posible que hayas creado uno de los juegos más populares de todos los tiempos. "Defensa de la torre de escritorio".

La gente está empezando a entender el truco, pero no le quedan muchos años de vida. Sé creativo... tal vez tus personajes sean galletas y literalmente puedas hornearlas. O un tocino zombie ataca tu cocina. O incluso pecho peludo que necesita ser afeitado.

Consejo tres: formas y siluetas simples

Círculo, Cuadrado, Triángulo, Rombo, Trapezoide, Paralelogramo, etc. ¿Sabes calcular con precisión su área, pero sabes que dibujarlos no resulta bien? Dibuja algunas formas a mano, luego agrega ojos (para el personaje) o ruedas (para el vehículo) o lo que sea. Pueden resultar divertidos, absurdos y completamente inexactos.

Dependiendo de la cantidad de café que hayas bebido ya, pueden tener formas completamente diferentes. ¡Todo esta bien! De hecho, esto es algo bueno, porque los defectos y las variaciones crean "individualidad" y les dan vida. No uses herramientas de formas en tu programa de dibujo, es un destructor de almas de sprites. Al distinguir sus contornos, le resulta más fácil al jugador distinguirlos visualmente.

Una nota: no intentes resolver esto durante un concurso de redacción de juegos. Pruebe todo primero antes de llevarlo a cabo para saber exactamente cómo hacer qué. Pasarás mucho tiempo, pero durante una competición sólo te llevará entre 15 y 20 minutos y marcará una gran diferencia.

Y además, no te apresures a hornear hasta que hayas terminado con las texturas de los modelos. No podrás quitar el “horneado” ni hacerlo dos veces.

Consejo once: compra una tableta

Incluso si no tienes aspiraciones de convertirte en un artista de juegos, si dibujas algo de arte en una computadora, entonces necesitas comprar una tableta. No tiene por qué ser grande ni cara; puedes comprar una tableta de Wacom. Porque dibujar con el ratón es parecido a dibujar con un ladrillo sobre papel.

Muchas personas que conozco que compraron una tableta por primera vez tardaron en usarla. A continuación se ofrecen algunos consejos que le ayudarán a aprovechar al máximo su tableta.

En el panel de control de la tableta, aumente la sensibilidad del lápiz a una configuración más firme. Esto proporcionará el mejor control al dibujar.
Dibujar con una hoja de papel en blanco cambia por completo la sensación. Varios tipos de papel: papel de oficina, páginas de revistas, papel grueso, etc. — te ayudará a experimentar plenamente el dibujo en una tableta. Darle una oportunidad.
Práctica. Sé que antes dije que ninguno de mis consejos requería práctica: estaba mintiendo. Pruebe estos ejercicios:

Haz diez cuadrados seguidos en Photoshop y rellénalos de negro dentro de un radio de transparencia de cero a cien. Haz diez cuadrados vacíos debajo de ellos. Intente sombrear los cuadrados inferiores para alinear los cuadrados principales. Pruebe con otros pinceles y practique con la sensibilidad a la presión del bolígrafo.
Intente escribir algo, el alfabeto o simplemente texto. Comience con tamaños de letras más grandes y luego vaya bajando. Esto permitirá que tu mano se acostumbre a la tableta, así como tus ojos a la pantalla mientras dibujas.

En la era actual de las interfaces basadas en pantallas táctiles, resulta beneficioso tener una tableta para comprender cómo funcionan los juegos basados en esta tecnología. Aunque este enfoque no es diferente cuando se compara la tecnología del mouse.

En el artículo de hoy quiero hablar un poco sobre los sprites CSS y dar algunos enlaces donde puedes crear estos mismos sprites. La técnica de utilizar sprites no es nada nueva y se utiliza desde hace mucho tiempo, pero la complejidad de su creación asusta a los webmasters. Intentemos ayudarlos...

¿Qué son los sprites CSS?

Imagine una imagen grande que muestre todos sus íconos, divisores, botones, flechas y otros componentes de diseño. Se carga junto con el sitio, todo es como siempre. Simplemente no crea un montón de solicitudes para todos los archivos, sino que se ejecuta con una solicitud. ¿Fresco? Sin duda. Después de la carga, la parte deseada de la imagen grande se muestra en el lugar correcto.

Vi estadísticas en alguna parte (no recuerdo dónde, así que no daré el enlace): del 5 al 40% de las veces son las páginas mismas, el resto es el procesamiento de solicitudes por parte del servidor. Es lógico suponer que si disminuye el número de solicitudes, la velocidad de descarga aumentará proporcionalmente.

Echemos un vistazo más de cerca a los pros y los contras del uso de sprites:

pros usando sprites:

Desventajas estas son tecnologías:

Al diseñar es necesario indicar no solo la imagen, sino también la posición del fragmento, lo cual no es del todo conveniente y familiar.
mayor carga en el servidor. Una imagen grande ocupa más RAM, teniendo en cuenta los "vacíos" entre fragmentos.
Para cambiar un icono tendrás que modificar todo el archivo, lo cual no es muy conveniente. Aunque tal vez sea para mejor.

Elegimos qué es más importante para quién (la simplicidad o la velocidad) y seguimos adelante. Si no se puede hacer nada con respecto a la carga en el servidor, entonces existen herramientas para resolver problemas con el diseño y el cambio de sprites.

Generadores de sprites— servicios en línea que, en principio, funcionan según el mismo esquema. Usted carga su conjunto de imágenes, selecciona el formato de sprite y el sistema crea la imagen y el marcado CSS para este archivo.

¿Dónde crear sprites?

Probablemente la herramienta más antigua para crear sprites CSS. Una característica distintiva es que existe una versión rusa de la interfaz, lo cual es conveniente. Es altamente personalizable, no sólo la creación de la imagen, sino también el código CSS. En general, un generador excelente, lo recomiendo. Por cierto, además, el servicio puede generar favicons y calcular derechos de acceso para sistemas Unix.

Generador de sprites CSS

Este generador también es bastante bueno, tiene todas las configuraciones necesarias y genera un archivo de salida de un tamaño ligeramente menor que el servicio anterior. Una característica distintiva es la cómoda salida de código CSS para cada imagen.

Un generador bastante funcional que te permite no solo crear un sprite normal, sino que también te permite mover imágenes tú mismo, organizándolas de la forma más compacta posible. Además, puede producir código CSS comprimido, así como código SASS.

Hablar con descaro a es un metalenguaje basado en CSS diseñado para aumentar el nivel de abstracción del código CSS y simplificar los archivos de hojas de estilo en cascada.

Este servicio se diferencia de los demás presentados en que no crea una imagen de sprite. Puedes crearlo tú mismo en Photoshop o en otro lugar, cárgalo aquí y el servicio te ayudará con el código CSS. Interfaz bastante clara y fácil de usar. Lo recomiendo para aquellos a quienes les gusta hacer todo ellos mismos, sin confiar en la máquina.

Buen generador, todo lo necesario para crearlo está presente. El único inconveniente es que cada imagen deberá descargarse por separado, no se puede descargar en grupo. Por lo demás, nada extraordinario, promedio sólido.

El servicio está escrito en HTML5 y funciona sólo en Chrome y Firefox, pero el desarrollo de este tipo de servicios es alentador. La web no se detiene y eso es bueno: configuraciones muy simples y mínimas. Pero, si quieres una solución rápida y sencilla, este generador es 100% adecuado.

Generador de sprites para Jedi reales Instale el programa, especifique la ruta al archivo CSS con el diseño anterior y este servicio hará todo por usted. Tiene muchas capacidades; recomiendo leer la documentación en el sitio web oficial.

Casi un análogo completo de Spritebox, también se usa solo para obtener código CSS, con la diferencia de que aquí la selección del borde del elemento no se realiza manualmente, sino automáticamente, la precisión del procesamiento es notablemente mayor. Funciona sólo en Chrome y Firefox

Un excelente servicio que funciona así: vaya a una página ya preparada, diseñada como de costumbre. Haga clic en el icono del servicio (primero debe instalarlo con un marcador) y listo: el servicio recopila todas las imágenes de esta página y genera un objeto con código. Es muy conveniente, hay configuraciones exactamente para lo que se necesita ensamblar. En general, un buen servicio.

Un generador muy simple, pero comprensible y conveniente. Arrastre las imágenes que desea combinar, organícelas como desee y presione el botón: el objeto y el código están listos. La desventaja de este servicio es que sólo funciona en Chrome y Ognelis.

El servicio es muy similar al SpriteMe descrito anteriormente, con la diferencia de que aquí debes cargar manualmente todas las imágenes y el archivo CSS que deseas cambiar. Hay configuraciones mínimas, pero hace bien su trabajo.

Espero que ahora no tengas miedo de trabajar con sprites CSS y tus proyectos sean aún más rápidos.