Sprite og CSS sprites

Fra LiavaagWiki
Hopp til navigering Hopp til søk
Den utskrivbare versjonen støttes ikke lenger eller har rendringsfeil. Oppdater eventuelle bokmerker i nettleseren din og bruk nettleserens standard utskriftsfunksjon i stedet.

Innledning

Sprite er en datamaskingrafikk-komponent og en bitmap grafikk som kan flyttes rundt på skjermen uavhengig av annen grafikk. En sprite er utformet for å være del av en større scene, som kan være et statisk bilde, eller animert grafikk. Eksempler på sprites er objekter i 2D-videospill, ikoner som er en del av et brukergrensesnitt for applikasjoner, og bilder på nettsteder (Christensson, 2012). På 1980-tallet og utover 1990-tallet var sprites den vanligste måten å integrere grafikk i videospill. Å skape sprites er en form for pikselkunst.

Historie

Bruken av sprites stammer fra arkadespill. Signetics utviklet de første video/grafikkprosessorene som kunne generere sprite-grafikk for hjemmesystemer. Signetics 2636 videoprosessoren ble først anvendt på det tyske videospillet 1292 Advanced Programmable Video System i 1976 (Wikipedia, 2018). I 1977 implementerte Atari VCS, også kjent som Atari 2600, hardware sprite med fem grafiske objekter som kunne flyttes uavhengig innenfor spillområdet (Wikipedia, 2018). Men begrepet «sprite» var ikke i bruk på denne tiden. I programmeringsmanualens kapittel 6 ble VCS sprites kalt «The Moveable Objects Graphics», «Missile Graphics», «Ball Graphics», og «Player Graphics» (Wright, 1979). Hvert av disse objektene (spillerne, missilene, og ballen) hadde sine egne egenskaper og begrensninger. I 1977 ville en Atari 2600 med en 160x192 pikselskjerm med en byte per piksel trengt 30.720 byte minne for displaykortet hvis den ikke hadde brukt sprites. Prisen på 4 kilo RAM i 1977 koster omtrent $ 125, så prisen på minnet til Atari 2600 skjermkortet alene ville kostet $ 900 (Hague, 2013). Til sammenligning var salgsprisen på Atari 2600 kun $ 200. Dette fikk de til ved å bygge et videosystem med monokrom bakgrunn, og med kun to enkeltfargede sprites som dekket én enkelt horisontal linje (Hague, 2013). For mer komplekse skjermbilder skrev spill-koden og omskrev data for hver linje på TV-skjermen, noe som gjorde sitt til at Atari 2600 ble solgt med 128 byte RAM istedenfor 30k (Hague, 2013). Med sprites ble det spart mye minne på at grafiske kunstnere opprettet små 2D-bilder som ble brukt til å representere tegn og andre objekter. Programmerere hentet opp disse sprites i kildekoden, og tilordnede egenskaper som når sprites ble vist og hvordan de samhandlet med andre sprites (Christensson, 2012). Også på 1990-tallet viste spillkonsollene til kreativitet for å vise imponerende grafikk. Skjermbildet ble satt sammen av smarte koder som la sammen fliser, spriter, og paletter uten nevneverdig involvering fra en underdimensjonert 16-biters CPU (Hague, 2013). En dyr PC på 1990-tallet var utvilsomt mer kraftig enn Super Nintendo, men det stoppet ikke spillkonsollen fra å gi en flott spillopplevelse som en ditto PC kunne se langt etter.

{{#ev:youtube|Tfh0ytz8S0k}}

Sprites til andre formål

Mens sprites er blitt mindre vanlige i moderne videospill, brukes de fortsatt av programvareutviklere til andre formål. Sprites brukes ofte til å legge til knapper, symboler og andre brukergrensesnittelementer til programmer. Sprites kan være spesielt nyttige for å tilpasse grafikk som ikke støttes av operativsystemets programmeringsgrensesnitt (Christensson, 2012).

Sprite animasjon

Sprites kan også brukes til animasjoner, som kan være nyttig i interaktiv applikasjonsutvikling. Sprite animasjoner kan tegnes på HTML5 canvas-elementer som så blir animert med bruken av JavaScript. Diverse bilderuter av en animasjon kan inkluderes i et enkelt bilde, og ved hjelp av HTML5 canvas-elementet og JavaScript, kan en enkelt bilderute tegnes av gangen (Malone, 2014).

CSS sprites

Fremveksten av 3D-spill har gjort sprite utdatert, men sprites brukes fremdeles på nettet for navigasjonsknapper, og for å legge til visuell appell til nettsider. Spriteark har lenge vært populært blant webutviklere til å laste inn nettstedgrafikk (Christensson, 2012). Ved å kombinere et stort antall sprites, herunder knapper, navigasjonsgrafikk, bakgrunner med mer til et enkelt bilde, kan alle sprites lastes ned og bufres av en brukers nettleser med en enkelt forespørsel til serveren. Bildene vises da ved hjelp av CSS egenskaper som definerer plasseringene til individuelle sprites innenfor bildet (Christensson, 2012).

HTTP/2 og sprites

En undersøkelsen utført av Benoît Beraud og Alexandre Masselot, ble det vist at selv om den nye HTTP/2-protokollen forbedrer sidelasteytelsen betydelig, så har tiden ennå ikke kommet for å helt glemme front-end optimaliseringer (Beraud et al, 2015). Konklusjonen på undersøkelsen viste tydelig at optimalisering med sprite fortsatt er relevant, selv med HTTP/2-protokollen.

Kilder

Liavaag.org