Lassen Sie uns mit der Liste abschließen. Lassen Sie uns nun ungefähr auf die gleiche Weise Links erstellen:

A( padding:0 0 0 20px; background:url("sprites.png") 0 -42px no-repeat; ) a( padding:0 0 0 20px; background:url("sprites..png") 0 -21px keine Wiederholung; )

Was bedeuten die a-Selektoren? Anscheinend zwingt dieser Selektor den Browser, diesen Stil auf alle Links anzuwenden, die ein href-Attribut haben, dessen Wert mit der Zeichenfolge http://site/ beginnt. Das Sprite selbst wird weitgehend auf die gleiche Weise wie eine Liste verwendet. Ich werde nur einen Link in Betracht ziehen – einen Link zu meinem Blog.

1. Wir ermitteln den benötigten Link per href. Sie können dem gewünschten Link einfach eine Klasse zuweisen oder direkt im HTML-Code Stile zum Style-Attribut hinzufügen. Oder identifizieren Sie den gewünschten Link mit einer anderen Methode.
2. Wir machen einen Abstand von 20 Pixeln vom linken Rand eines bestimmten Links
3. Geben Sie das Bild sprites.png als Hintergrundbild an
4. Das Bild, das ich für meinen Blog ausgewählt habe, ist 21 Pixel vom oberen Rand entfernt, was bedeutet, dass wir den Hintergrund um 21 Pixel nach unten verschieben müssen. In CSS habe ich es so geschrieben: „0 -21px“

Hausaufgaben

Sprites mit Farbverläufen

Schauen wir uns nun das zweite Beispiel an.


Dieses Bild zeigt ein Fenster. Ein Fenster besteht aus einer Kopfzeile, einem Hauptteil und einer Fußzeile. Für jedes dieser Elemente ist ein Hintergrundverlauf festgelegt. Schauen Sie genauer hin, wenn es nicht sofort sichtbar ist, gibt es einen Farbübergang von blass zu gesättigt.

Ich zeige Ihnen, wie die Farbverläufe in diesem Fenster in Sprites umgewandelt werden können. Die Kopf- und Fußzeile des Fensters haben eine feste Höhe von 30 Pixeln. Der Fensterkörper wird je nach Länge des Textes gedehnt.

Schreiben wir nun den HTML-Code für das Fenster:

Beginnen wir mit der Verwendung von Sprites. Beginnen wir mit dem Fenstertitel:

#window-header( height:30px; background:#C0C0FF url("gradients.png") 0 0 repeat-x; )

In der Datei „gradients.png“ gibt es zunächst einen Farbverlauf für die Kopfzeile, dann für den Textkörper und dann für die untere Zeile. Das heißt, der Farbverlauf für den Titel beginnt ganz oben. Daher legen wir einfach die Datei selbst als Hintergrund fest und geben die Position als „0 0“ an, d. h. wir ziehen uns nirgendwo zurück. Um den Farbverlauf horizontal zu strecken, schreiben Sie „repeat-x“.

Um sicherzustellen, dass der gesamte Farbverlauf in die Kopfzeile passt, stellen Sie die Höhe auf 30 Pixel ein.

Lassen Sie uns auf die gleiche Weise wie für die Kopfzeile einen Farbverlauf für die Fußzeile festlegen:

#window-footer( height:30px; Hintergrund: #C0FFC0 url("gradients.png") 0 -60px repeat-x; )

Nur dieses Mal verschieben wir das Bild um 60 Pixel nach unten.

Komplizierter ist die Situation beim Fensterkörper. Im Gegensatz zur Kopf- und Fußzeile dehnt sich unser Körper. Das heißt, wenn wir einfach ein Div für den Fensterkörper erstellen und dort einen Farbverlauf einfügen, werden alle Farbverläufe gleichzeitig in diesem Div angezeigt. Alternativ können wir den Farbverlauf für den Körper zuletzt vertikal platzieren, aber was ist, wenn wir mehrere Farbverläufe für Blöcke haben, die sich ausdehnen? Man kann nicht alles auf einmal erledigen. Wir machen es etwas schlauer.

Der CSS-Code lautet wie folgt:

#window-body( position:relative; ) #window-body-gradient( position:absolute; left:0; top:0; width:100%; height:30px; background:url("gradients.png") 0 - 30px wiederholen-x; ) #window-body-text( position:relative; )

Jetzt erzähle ich Ihnen genauer, was wir hier gemacht haben. Hier ist der HTML-Code des Fensterkörpers separat:

Wie Sie sehen, haben wir zwei weitere Diven im Körper eingebettet. Der erste „Window-Body-Gradient“ ist für den Gradienten verantwortlich. Der zweite „Fenstertext“ ist für Text. Darüber hinaus haben wir, wie aus dem CSS-Code hervorgeht, position: relative; für den gesamten Fensterkörper.

Für das Gradienten-Div geben wir position:absolute an. Somit haben wir das Gradienten-Div aus dem allgemeinen Fluss geworfen. Jetzt hat dieses Div keine Auswirkung auf irgendetwas. Da wir „position: relative“ für den gesamten Körper angegeben haben, verschiebt sich das Gradienten-Div nicht weiter als das übergeordnete Element. Befestigen Sie es mit „left:0;“ an der linken und oberen Kante des Fensterkörpers. oben:0;". Stellen Sie die Höhe des Verlaufsteils auf 30 Pixel ein. Das heißt, wir geben hier die Höhe des Farbverlaufs an, den wir anhängen werden. Wenn die Höhe des Div größer als die Höhe des Farbverlaufs ist, ragen andere Sprites im Div hervor. Und schließlich hängen wir unsere Datei „gradients.png“ an das Gradienten-Div an. Wie üblich verschieben wir den Hintergrund um den erforderlichen Abstand nach oben; in diesem Fall verschieben wir den Hintergrund um 30 Pixel nach oben.

Jetzt haben wir einen Farbverlauf im Fensterkörper. Aber es verdeckt den Text. Um zu verhindern, dass der Text verdeckt wird, packen wir den gesamten Text in ein div und weisen ihm position: relative zu. Nach der Zuweisung wird der Text über dem Farbverlauf angezeigt.

Das ist im Grunde alles. Jetzt haben wir alle Farbverläufe in unserem Fenster platziert. Und im Header und im Body und im Keller.

Ich mache so lange Erklärungen, damit alles völlig klar ist. Aber wenn Sie sich ein wenig mit Layout auskennen, reicht es wahrscheinlich aus, sich die Beispiele selbst anzusehen:

Ich habe den Link noch einmal dupliziert.

Tatsächlich können Sie viele Beispiele für die Verwendung von Sprites finden. Ich habe nur zwei Beispiele gezeigt, aber diese Beispiele sollten ausreichen, um zu verstehen, wie Sprites funktionieren. Wenn Sie Fragen haben, stellen Sie diese in den Kommentaren.

Ich arbeite seit über einem Jahrzehnt an der Entwicklung von Tools und Engines für Spiele- und Visual-Effects-Künstler und war schon immer verwirrt über die Unterscheidung, die Menschen zwischen „Software-Kunst“ und „echter Spiele-Kunst“ machen. Mir ist auch aufgefallen, dass die Leute, die einem einen Freibrief für schlechte Grafiken geben, meist andere Programmierer sind. Egal, wie viel Spaß Ihr Spiel macht oder wie technisch großartig Ihre Demo ist, die Nicht-Programmierer, denen Sie Ihren Charakter zeigen, werden denken: „Hat er ein Jetpack oder ist es etwas anderes?“ Oft lässt sich eine Möglichkeit finden, gute Grafiken zu erstellen, ohne sie von Grund auf zeichnen zu müssen. Aber manchmal müssen Sie Grafiken im Handumdrehen erstellen. Budgetbeschränkungen oder Regeln bei einem Gaming-Wettbewerb oder einfach eine knappe Frist für einen Prototyp erfordern möglicherweise, dass Sie zu Lineal und Pinsel greifen.

Ich kann wirklich nicht zeichnen ... Ich möchte sagen, schauen Sie sich das an:

Wenn Ihre Grafiken so aussehen, dann ist dieser Artikel genau das Richtige für Sie. Ich dachte, ich gebe Ihnen ein paar Tipps, wie Sie Ihre Grafiken verbessern können. Diese Tipps werden für jeden nützlich sein, unabhängig von den zeichnerischen Fähigkeiten und der Erfahrung.

Während Tipps wie „Jeden Tag skizzieren“ oder „ein Kunstmuseum besuchen“ für einen angehenden Künstler hilfreich sein können, ist dieser Artikel nicht für einen Künstler gedacht, sondern darum, wie man den Leuten den Eindruck vermittelt, man sei ein Programmierer, ein Programmierer, ein Bastler. Mathematik, einige künstlerische Fähigkeiten haben.

Außerdem erfordert (fast) keiner dieser Tipps „Übung“, obwohl Übung von Vorteil und sogar unerlässlich für einen echten Künstler ist. Es kommt mir immer so vor, als ob der Abgabetermin für ein Projekt im Morgengrauen erreicht wäre und man nur noch ein paar verdammte Sprites braucht.

Ein Teil dieser Geschichte wird auch für Photoshop-Benutzer nützlich sein, da meines Wissens die gleichen Konzepte für jedes Zeichenprogramm gelten und es für alles, was ich hier erwähne, in Gimp und möglicherweise in jedem anderen Programm, das Sie verwenden, ähnliche Vorgänge gibt verwenden.

Ein Teil davon richtet sich auch an Teilnehmer des LudumDare-Wettbewerbs und anderer ähnlicher Wettbewerbe, bei denen das Ziel darin besteht, innerhalb von 48 Stunden spontan ein Spiel zu erstellen. Meine Spiele schneiden in der Kategorie Grafik tendenziell gut ab (leider bleibt mir der Gameplay-Killer immer noch aus dem Weg), auch wenn ich mich selbst nicht für einen besonders guten Spielekünstler halte. Viele dieser Beispiele stammen aus meinen LD-Einträgen, und die meisten dieser Erfahrungen habe ich durch die Teilnahme an diesen Wettbewerben und den Zwang, Kunst unter extrem engen Fristen zu schaffen, gelernt. Darüber hinaus sollten sie für jeden von unschätzbarem Wert sein, der innerhalb eines kurzen Zeitrahmens oder eines begrenzten Budgets hochwertige Grafiken (oder etwas Ähnliches) erstellen möchte.

Der häufigste Fehler, den ich sehe, und der am einfachsten zu vermeidende. Die Standardpalette für die meisten Computer-Zeichenprogramme erinnert an die Tage von DOS (können Sie den Zusammenhang zwischen den Farben in dieser Palette und den Vier-Byte-Binärwerten von 00 bis 15 erkennen? Natürlich ist das so. Wenn Sie Wenn du es nicht siehst, wärst du ein echter Künstler.

Mit Palette meine ich nicht die 16 oder 256 Farbpalette der VGA-Zeiten. Ich meine nur ein koordiniertes System für Ihr Spiel. Wenn Sie mit einer gut ausgewählten Palette beginnen, werden Ihre „Kritzeleien“ ästhetisch ansprechend und sogar vorgefertigt erscheinen.

Aber wo finde ich eine Palette? Ich kann nicht einmal Farben erkennen, wenn ich mich morgens anziehe!

Nun, ein wenig Farbtheorie reicht weit, und wenn Sie sich fünfzehn Minuten Zeit nehmen, um im Internet nachzuschlagen, was „Farbtheorie“ ist, werden Sie am Ende definieren, was ein Spiel ist. Aber wenn Sie dafür keine Zeit haben, finden Sie hier einige Tipps, die erstaunlich gut funktionieren:

Für ein größeres Spiel möchten Sie möglicherweise eine andere Palette pro Level oder Bereich der Spielwelt verwenden. Wenn Ihre UI-Elemente und Ihre Hauptfigur in neutralen Farben dargestellt werden oder diese Paletten eine gemeinsame Hauptfarbe haben, können Sie sie gleichmäßig auf Ebenen oder Bereiche anwenden.

In diesem Beispiel wird eine „monochromatische“ Palette verwendet, bei der die Farben alle unterschiedliche Schattierungen eines sehr ähnlichen Tons haben. Andere Farbschemata sind abwechslungsreicher, aber das Wichtigste ist, dass die Farben zusammen gut aussehen.

Ressourcen:

1. MultiColr von idee labs
   Das Gute an dieser großartigen Website ist, dass Sie eine Palette erstellen und daraus eine Reihe von Fotos erstellen können, indem Sie einfach ein paar gewünschte Farben und ein Bild auswählen, aus dem Sie dann die Farben verwenden können.

Ich kann nicht malen!..

Vielleicht bist du einfach ein zu cooler Mensch, um zeichnen zu können. Vielleicht ist das alles Absicht. So ist das. Anstatt gute Kunst zu machen, wählen Sie ein Thema, das schlechte Kunst erfordert. Das hat funktioniert „SketchFighter“ Und „Buntstiftphysik“ auf Papier gezeichnet.

Nutzen Sie, was Ihnen zur Verfügung steht. Hast du Mist auf deinem Schreibtisch? Möglicherweise haben Sie eines der beliebtesten Spiele aller Zeiten entwickelt „Desktop-Tower-Defense“.

Die Leute fangen an, den Trick zu verstehen, aber er hat nicht mehr viele Jahre zu überleben. Seien Sie kreativ ... vielleicht sind Ihre Charaktere Kekse und Sie können sie buchstäblich backen. Oder ein Zombie-Speck greift Ihre Küche an. Oder auch behaarte Brust, die rasiert werden muss.

Tipp drei: Einfache Formen und Silhouetten

Kreis, Quadrat, Dreieck, Raute, Trapez, Parallelogramm usw. Sie wissen, wie man ihre Fläche genau berechnet, wissen aber, dass das Zeichnen schlecht ausfällt? Skizzieren Sie ein paar Formen von Hand und fügen Sie dann Augen (für die Figur) oder Räder (für das Fahrzeug) oder was auch immer hinzu. Sie könnten sich als lustig und absurd und völlig ungenau erweisen.

Je nachdem, wie viel Kaffee man bereits getrunken hat, können sie ganz unterschiedliche Formen haben. Alles in Ordnung! Das ist auch gut so, denn Fehler und Variationen schaffen „Individualität“ und machen sie lebendig. Benutzen Sie in Ihrem Zeichenprogramm keine Formwerkzeuge, das ist ein Sprite-Seelenzerstörer. Indem Sie ihre Umrisse deutlich machen, erleichtern Sie dem Spieler die visuelle Unterscheidung.

Eine Anmerkung: Versuchen Sie nicht, dies während eines Spieleschreibwettbewerbs herauszufinden. Testen Sie zunächst alles, bevor Sie es ausführen, damit Sie genau wissen, wie Sie was tun müssen. Sie werden viel Zeit aufwenden, aber während eines Wettkampfes kann es nur 15-20 Minuten dauern und wird einen großen Unterschied machen.

Und beeilen Sie sich auch nicht mit dem Backen, bis Sie mit den Texturen für die Modelle fertig sind. Sie können das „Backen“ nicht entfernen oder es zweimal durchführen.

Tipp elf: Kaufen Sie ein Tablet

Auch wenn Sie keine Ambitionen haben, Spielekünstler zu werden, müssen Sie sich ein Tablet kaufen, wenn Sie Kunstwerke am Computer zeichnen. Es muss nicht groß oder teuer sein; Sie können ein Tablet bei Wacom kaufen. Denn das Zeichnen mit der Maus ähnelt dem Zeichnen mit einem Ziegelstein auf Papier.

Viele Leute, die ich kenne und die zum ersten Mal ein Tablet gekauft haben, nutzten es nur langsam. Hier sind einige Tipps, die Ihnen helfen, das Beste aus Ihrem Tablet herauszuholen.

• Erhöhen Sie im Tablet-Bedienfeld die Stiftempfindlichkeit auf eine festere Einstellung. Dies bietet die beste Kontrolle beim Zeichnen.
• Das Zeichnen mit einem leeren Blatt Papier verändert das Gefühl völlig. Verschiedene Papiersorten: Büropapier, Zeitschriftenseiten, dickes Papier usw. – wird Ihnen dabei helfen, das Zeichnen auf einem Tablet in vollem Umfang zu erleben. Versuche es.
• Üben. Ich weiß, dass ich gelogen habe, bevor ich gesagt habe, dass keiner meiner Ratschläge Übung erfordert. Probieren Sie diese Übungen aus:
• Erstellen Sie in Photoshop zehn Quadrate hintereinander und füllen Sie diese mit Schwarz innerhalb eines Transparenzradius von null bis einhundert. Machen Sie darunter zehn leere Quadrate. Versuchen Sie, die unteren Quadrate zu schattieren, um die Hauptquadrate auszurichten. Versuchen Sie es mit anderen Pinseln und üben Sie mit der Druckempfindlichkeit des Stifts.
• Versuchen Sie, etwas zu schreiben, das Alphabet oder einfach nur Text. Beginnen Sie mit größeren Buchstabengrößen und arbeiten Sie sich dann nach unten vor. Dadurch können sich Ihre Hand und Ihre Augen beim Zeichnen an den Bildschirm gewöhnen.

Im heutigen Zeitalter der Touchscreen-basierten Benutzeroberflächen ist es von Vorteil, ein Tablet zu haben, um zu verstehen, wie Spiele funktionieren, die auf dieser Technologie basieren. Obwohl dieser Ansatz beim Vergleich der Maustechnologie nicht anders ist.

Im heutigen Artikel möchte ich ein wenig über CSS-Sprites sprechen und einige Links geben, über die Sie dieselben Sprites erstellen können. Die Technik der Verwendung von Sprites ist überhaupt nicht neu und wird schon seit langem verwendet, aber die Komplexität ihrer Erstellung schreckt Webmaster ab. Versuchen wir ihnen zu helfen...

Was sind CSS-Sprites?

Stellen Sie sich ein großes Bild vor, das alle Ihre Symbole, Trennlinien, Schaltflächen, Pfeile und andere Designkomponenten zeigt. Es lädt zusammen mit der Seite, alles ist wie gewohnt. Es werden einfach nicht mehrere Anfragen für alle Dateien erstellt, sondern mit einer Anfrage ausgeführt. Cool? Ohne Zweifel. Nach dem Laden wird der gewünschte Teil des Großbildes an der richtigen Stelle angezeigt.

Ich habe irgendwo Statistiken gesehen (ich weiß nicht mehr wo, deshalb gebe ich keinen Link) – in 5 bis 40 % der Fälle sind es die Seiten selbst, der Rest ist die Verarbeitung von Anfragen durch den Server. Es ist logisch anzunehmen, dass die Download-Geschwindigkeit proportional zunimmt, wenn die Anzahl der Anfragen sinkt.

Schauen wir uns die Vor- und Nachteile der Verwendung von Sprites genauer an:

Profis Verwendung von Sprites:

Minuspunkte Das sind Technologien:

• Beim Layouten muss nicht nur das Bild, sondern auch die Position des Fragments angegeben werden, was nicht ganz praktisch und vertraut ist.
• erhöhte Belastung des Servers. Ein großes Bild benötigt mehr RAM, wenn man die „Leerräume“ zwischen den Fragmenten berücksichtigt.
• Um ein Symbol zu ändern, müssen Sie an der gesamten Datei herumbasteln, was nicht sehr praktisch ist. Obwohl, vielleicht ist es zum Besseren

Wir entscheiden, was für wen wichtiger ist – Einfachheit oder Geschwindigkeit – und machen weiter. Wenn sich an der Auslastung des Servers nichts ändern lässt, gibt es Tools, um Probleme mit dem Layout und dem Sprite-Wechsel zu lösen.

Sprite-Generatoren— Online-Dienste, die grundsätzlich nach dem gleichen Schema funktionieren. Sie laden Ihren Bildersatz hoch, wählen das Sprite-Format aus und das System erstellt das Bild und das CSS-Markup für diese Datei.

Wo kann man Sprites erstellen?

Wahrscheinlich das älteste Tool zum Erstellen von CSS-Sprites. Eine Besonderheit ist, dass es eine russische Version der Schnittstelle gibt, was praktisch ist. Es ist hochgradig anpassbar, nicht nur die Erstellung des Bildes, sondern auch der CSS-Code. Insgesamt ein ausgezeichneter Generator, den ich empfehlen kann. Darüber hinaus kann der Dienst übrigens auch Favicons generieren und Zugriffsrechte für Unix-Systeme berechnen.

CSS-Sprites-Generator

Auch dieser Generator ist recht gut, verfügt über alle notwendigen Einstellungen und generiert eine Ausgabedatei von etwas kleinerer Größe als der vorherige Dienst. Eine Besonderheit ist die komfortable Ausgabe von CSS-Code für jedes Bild.

Ein recht funktionaler Generator, mit dem Sie nicht nur ein normales Sprite erstellen, sondern auch Bilder selbst verschieben und so kompakt wie möglich anordnen können. Außerdem kann es sowohl komprimierten CSS-Code als auch SASS-Code erzeugen.

Sass ist eine CSS-basierte Metasprache, die den Abstraktionsgrad von CSS-Code erhöhen und kaskadierende Stylesheet-Dateien vereinfachen soll.

Dieser Dienst unterscheidet sich von den anderen vorgestellten darin, dass er kein Sprite-Bild erstellt. Sie können es selbst in Photoshop oder woanders erstellen, es hier hochladen und der Dienst hilft Ihnen beim CSS-Code. Sehr übersichtliche und benutzerfreundliche Oberfläche. Ich empfehle es für diejenigen, die gerne alles selbst machen, ohne der Maschine zu vertrauen

Ein guter Generator, alles, was Sie zum Erstellen benötigen, ist vorhanden. Der einzige Nachteil besteht darin, dass jedes Bild einzeln heruntergeladen werden muss; Sie können es nicht in einem Bündel herunterladen. Ansonsten nichts Besonderes, solider Durchschnitt.

Der Dienst ist in HTML5 geschrieben und funktioniert nur in Chrome und Firefox, aber die Entwicklung solcher Dienste ist ermutigend. Das Web steht nicht still und das ist gut so. Sehr einfach, minimale Einstellungen. Wenn Sie jedoch eine schnelle und einfache Lösung wünschen, ist dieser Generator zu 100 % geeignet

Sprite-Generator für echte Jedi. Installieren Sie das Programm, geben Sie den Pfad zur CSS-Datei mit dem alten Layout an und dieser Dienst erledigt alles für Sie. Es verfügt über viele Funktionen – ich empfehle, die Dokumentation auf der offiziellen Website zu lesen.

Es ist fast ein vollständiges Analogon zu Spritebox und wird auch nur zum Erhalten von CSS-Code verwendet, mit dem Unterschied, dass hier die Auswahl des Elementrands nicht manuell, sondern automatisch erfolgt und die Genauigkeit der Verarbeitung deutlich höher ist. Funktioniert nur in Chrome und Firefox

Ein ausgezeichneter Service, der so funktioniert: Rufen Sie eine vorgefertigte Seite auf, die wie gewohnt gestaltet ist. Klicken Sie auf das Dienstsymbol (Sie müssen es zuerst mit einem Bookmarklet installieren) und fertig – der Dienst sammelt alle Bilder von dieser Seite und generiert ein Sprite mit Code. Es ist sehr praktisch, es gibt Einstellungen für genau das, was zusammengestellt werden muss. Im Allgemeinen - ein guter Service.

Ein sehr einfacher, aber verständlicher und praktischer Generator. Ziehen Sie die Bilder, die Sie kombinieren möchten, ordnen Sie sie nach Ihren Wünschen an und drücken Sie den Knopf – fertig sind Sprite und Code. Der Nachteil dieses Dienstes besteht darin, dass er nur in Chrome und Ognelis funktioniert.

Der Dienst ähnelt stark dem oben beschriebenen SpriteMe, mit dem Unterschied, dass hier alle Bilder und die zu ändernde CSS-Datei manuell hochgeladen werden müssen. Es gibt nur minimale Einstellungen, aber es macht seinen Job gut.

Ich hoffe, dass Sie jetzt keine Angst mehr vor der Arbeit mit CSS-Sprites haben und Ihre Projekte noch schneller werden.