Animație sprite. Animații de sprite adaptive cu ImageMagick și GreenSock

Termenul „sprites” a apărut atunci când computerele au învățat să combine imaginile în mișcare cu un fundal nemișcat. Acest lucru s-a întâmplat la mijlocul anilor șaptezeci ai secolului trecut. Prima piesă hardware care a făcut posibilă afișarea unei imagini cu sprite pe un monitor a fost acest cip de la Texas Instruments, care a găsit o utilizare largă în computerele de acasă și console de jocuri la sfârșitul anilor optzeci.

Dacă un sprite este o imagine statică, atunci o serie de aceste imagini care se înlocuiesc rapid una pe cealaltă constituie o animație numită sprite. Acest tip animația diferă prin faptul că nu întregul cadru (cadru) este cel care se schimbă pe ecran, ci doar o mică bucată din el în care apar sprite-urile. Animația sprite este uneori numită și animație software.

Când computerele erau mari, sprite-urile erau foarte mici, măsurând 8 pe 8 pixeli și puteau fi colorate în 4-8 culori. Cel mai faimos erou al primelor jocuri cu sprite a fost Mario preferatul tuturor. Datorită dimensiunii mici a sprite-ului, a fost imposibil să desenezi o gură pentru acest personaj: așa a apărut mustața caracteristică a lui Mario, iar eroul a devenit recunoscut.

Pe măsură ce puterea computerului a crescut, sprite-urile au crescut, devenind pline de culoare, din ce în ce mai asemănătoare cu personaje reale de desene animate. Apogeul răspândirii animației cu sprite a avut loc în anii nouăzeci: atât pe computere, cât și pe console de jocuri, a înflorit genul „jocurilor de luptă”, unde toată lumea se putea simți ca Bruce Lee. Genul „acțiune” popular de atunci în cinema a contribuit la aceasta. Cine dintre noi nu a jucat Mortal Kombat, pe baza căruia s-a făcut chiar un film! Aceste „jocuri de luptă” erau în întregime bazate pe sprite.

Exemple de sprite-uri din jocurile Street Fighter

Cu toate acestea, genul „platform arcade” a devenit și mai popular, unde animația sprite-ului a condus cu adevărat. La începutul anilor 90, la studioul Disney a început o eră renascentist: noi capodopere s-au născut an de an. Jocurile bazate pe celebrele desene animate ale studioului au avut o cerere fără precedent. Posibilitățile de animație cu sprite au crescut atât de mult încât într-un joc arcade te-ai putea cufunda literalmente în atmosfera desenului animat. Jocurile au fost adevărate capodopere - se potrivesc cu caracteristicile animate originale! „Aladdin”, „The Lion King”, „Hercule”, „The Jungle Book” și multe alte jocuri cu sigla Disney sunt incluse pentru totdeauna în colecția arcade de aur. Aceasta a fost adevărata perioadă de glorie a animației cu sprite.

Arcade Regele Leu (1994)

Toate sprite-urile care compun animația sunt stocate în dosar special sub forma unei hărți raster mari (bitmap). Această imagine se numește „hartă” deoarece program de joc caută în mod constant sprite-ul dorit după coordonate. Să presupunem că zona de animație este de 16 pe 32 de pixeli, iar punctul de pornire pe harta de bit la momentul necesar este al 84-lea pixel pe orizontală și al 460-lea pixel pe verticală. Aceste date sunt introduse de programator în codul jocului. Astfel, un bitmap este un fel de „storyboard” de animație sprite, „conectat” în codul programului și ascuns de vizualizatorul exterior. De exemplu, așa arată acest „storyboard” pentru jocul „The Lion King”, personajul este micul Simba:

Un alt gen popular de jocuri care foloseau sprite-uri au fost căutările animate. Este demn de remarcat faptul că astăzi acesta este probabil singurul gen de jocuri pentru computere desktop, unde animația sprite este încă folosită pe scară largă. Mulți dintre noi sunt familiarizați cu jocurile din seria „Petka și Vasily Ivanovich”, „Pilot Brothers” și alte căutări animate interne populare. De asemenea, sunt bazate pe sprite.

Captură de ecran din jocul „Pilot Brothers: In the Footsteps of the Striped Elephant” (1997)

La începutul mileniului, animația tradițională a început să cedeze loc animației 3D. Același lucru s-a întâmplat în lume jocuri pe calculator- caracterele sprite au început să fie înlocuite cu cele poligonale. Chiar și jocurile bazate pe noi desene animate Disney, realizate folosind tehnici clasice de animație, au fost transferate în spațiul tridimensional. Exemple - „Tarzan”, „Lilo și Stitch”, „Brother Bear”, „Prițesa și broasca”.

Captură de ecran din jocul „Brother Bear” (2002)

Cu toate acestea, animația sprite nu dispare încă din scenă. Continuă să fie utilizat pe scară largă în design (amintiți-vă de „ajutoarele” de mai devreme versiuni Microsoft Office), în programe educaționale, precum și în jocuri - în principal pentru dispozitive mobile. În plus, în zilele noastre sprite-urile sunt folosite în animația Flash și GIF, dar nu sunt stocate ca bitmap, ci în formatul unui fișier grafic cu mai multe straturi, unde fiecare cadru de animație este situat pe un strat separat. În Adobe After Effects, puteți plasa o animație creată dintr-o secvență într-o scenă fisiere grafice. Strict vorbind, aceasta este și o animație sprite, doar sursa sprite-urilor nu este o imagine cu mai multe straturi sau bitmap, ci folder separat pe computer. Așa că sprites, ca și zânele magice, sunt întotdeauna gata să vină în salvarea animatorului, mai ales atunci când creează jocuri! :)

Sprite-uri din jocul Angry Birds (2009)

Sprite-uri din jocul Dust: an Elysian Tail (2012)

12 octombrie 2011 ora 12:00

Animarea sprite-urilor folosind CSS, JS și Canvas

Dezvoltare site,
Pânză

Salutare tuturor. Acum câteva zile, din întâmplare, am dat peste „Space Rangers 2: Dominators” într-un cache de discuri. Nu l-am instalat, pentru că acum nu am suficient timp pentru a mă scufunda corect în el. Am decis să văd ce era pe disc. M-am uitat la Fan Art și acolo am văzut un program pentru resursele rangerilor minieri. Așa că am decis să văd din ce sunt făcuți dominatorii noștri. După ce am făcut un pic de clic, am găsit fișiere cu animație în format GAI. Am început să admir acea animație. Am vrut să le salvez ca „gif-uri”, dar de ce nu mi-a permis acel program să salvez animația? Puteți salva fie cadrul curent, fie toate fișierele ca PNG. Am decis să salvez toate cadrele, și au fost 150. Pozele sunt toate acolo, de ce să nu faci aceeași animație cu ele.

Sprite

Pentru a mă mulțumi cu o astfel de animație, am luat CSS + JS pentru a ajuta. Ce ar trebui să fac cu 150 de fișiere imagine? Greutatea lor nu este critică, deși cântăresc mai mult de un megaoctet în total. Principalele probleme cu ei încărcare simultanăși manipulare. Așa că am decis să le „lipesc” într-una singură. Încărcați doar unul, iar folosind CSS + JS nu va trebui decât să îl poziționați corect.
Tot ce rămâne este să alegeți metoda de „lipire”. Sunt programator și toți suntem leneși :), așa că am renunțat imediat la lipirea manuală editor grafic. În primul rând, m-am grăbit, ca de obicei, spre PHP și biblioteca GD. Dar lasă mult de dorit atunci când vine vorba de lucrul cu PNG-uri translucide. Apoi m-am gândit, ce altceva pot folosi pentru a „lipi” imaginile împreună? Și m-am hotărât pe ceea ce este acum pe buzele tuturor, ceea ce acum este considerat la modă - HTML5. El este responsabil pentru lucrul cu grafica - Canvas și îmi place foarte mult acest „delicios”. De aceea am decis să-l „lipesc” pe „pânză”.
Și așa voi adăuga această etichetă la HTML:

În JS voi specifica o mască pentru numele imaginii, prima imagine și numărul ultimei (nu a trebuit să redenumesc pozele, deoarece toate sunt în ordine). Ar trebui să arate cam așa:

Var primul = "000"; //partea numerică a numelui primei imagini var last = 49; //numarul ultimei imagini var num = 0; //iterator var maskFileName = ["2HULL_PEOPLE_P_A_", ".png"];//nume imagine mask var dir = "ship"; //directorul în care se află imaginile

Acum puteți specifica dimensiunea sprite-ului pe care doriți să-l obțineți și puteți obține contextul acestuia:

Var canvas = document.getElementById("sprite"); //selectați canvasul nostru canvas.width = (ultimul + 1) * 75; //seteaza latimea, in functie de cantitate canvas.height = 75; var latime = 0; //variabila in care vom inregistra shift var context = canvas.getContext("2d"); //obține contextul

Pentru a facilita conversia din număr în șir (analog cu str_pad din PHP), am scris o funcție de conversie cu un nume sălbatic - zerofikator():

Funcția zerofikator(int, length) ( //ca intrare obținem numărul și lungimea șirului de caractere var prefix = ""; for (var i = num.toString().length; i< length; i++) { prefix += "0"; } return prefix + num; }

Funcția draw() ( var img = document.createElement("img"); /* de fiecare dată când apelăm această funcție creăm un nou obiect imagine */ img.onload = function () ( //când imaginea este încărcată desenăm cu el pe pânză context.drawImage(img, width, 0); width += 75; //de fiecare dată o deplasăm cu lățimea imaginii pentru a desena în dreapta imaginii anterioare, și nu pe ea if (zerofikator(num, first.length) != zerofikator(last, first.length)) ( //verificați dacă am ajuns la ultimul desen num++; //mărește iteratorul draw(); //și rulați din nou funcția ) ) img.src = dir + "/" + maskFileName + zerofikator( num, first.length) + maskFileName; //colectați numele fișierului imagine pentru a încărca ) draw(); //apelați funcția pentru prima dată

După lansarea unei astfel de pagini, vom vedea o imagine largă cadru cu cadru, pe care, dacă o salvăm, o putem numi sprite. Apropo, sprite-ul salvat cântărește 615 KB, iar 150 de imagini cântăresc 1.189 KB, hmm, acesta este un alt plus :).

Am decis să adaug transformarea direct în fișier făcând clic pe pânză (rezolvă problema salvării pentru unele browsere):

Canvas.onclick = function () ( window.location = context.canvas.toDataURL("image/png"); );

Animaţie

Ei bine, acum putem începe animația.
Adăugăm câteva „fete” la HTML-ul cu care vom lucra în continuare:

Var stiluri = (); styles.cursor = „pointer”; //pentru a clarifica faptul că acesta este elementul nostru, schimbați cursorul styles.width = "75px"; //dimensiuni element styles.height = "75px"; var elementId = "pistol"; // id-ul elementului în care animația va fi var imgName = "canvas.png"; // nume fișier sprite

Funcția spriteAnimation(elementId, imgName, stiluri) ( var img = document.createElement("img"); var offset = 0; img.onload = function () ( //de îndată ce sprite-ul este încărcat var element = document.getElementById (elementId) ; element.style.cursor = styles.cursor; element.style.width = styles.width; element.style.height = styles.height; element.style.background = "url("" + imgName + "" ) " + offset + "px 50%"; //schimbați stilurile pentru elementul nostru var i = 0; element.onmouseover = function() ( //atașați mouseover-ul handler interval = setInterval(function()) ( //rulați interval dacă (offset< img.width) { //для смены позиции изображения i++; // если дошли до конца спрайта } else { i = 0; // то возвращаемся к началу } offset = 75 * i; //сдвиг по слайду element.style.background = "url("" + imgName + "") " + offset + "px 50%"; //меняем позиционирование спрайта } , 1000/24) //24 кадра в секунду } element.onmouseout = function(){ //вешаем обработчик на убирание курсора мыши clearInterval(interval) //удаляем интервал (прекращаем анимацию) } } img.src = imgName; //даем имя нашего спрайта }

Da, trebuie să apelați și această funcție:

SpriteAnimation(elementId, imgName, stiluri); spriteAnimation("navă", "navă.png", stiluri);

Și pentru a face să pară adecvat, puteți adăuga o imagine cu fundal și o poziționați corect:

Animația sprite este unul dintre acele lucruri în care, în ciuda întregii sale primitive, funcționează cu succes și este folosit grafica pe computerși jocuri de mai bine de un sfert de secol. Chiar și jocurile 3D au sprites - de exemplu, panouri publicitare cu explozie. Multe jocuri de browser și flash folosesc animație sprite, deoarece este foarte simplă și nu necesită performanta ridicata- schimbați doar cadrele și gata!

Dacă un sprite este o imagine statică, atunci o serie de aceste imagini care se înlocuiesc rapid una pe cealaltă constituie o animație numită sprite. Acest tip de animație este diferit prin faptul că nu întregul cadru (cadru) este cel care se schimbă pe ecran, ci doar o mică bucată din el în care apar sprite-urile. Animația sprite este uneori numită și animație software.

La începutul mileniului, animația tradițională a început să cedeze loc animației 3D. Același lucru s-a întâmplat și în lumea jocurilor pe calculator - personajele sprite au început să fie înlocuite cu cele poligonale. Cu toate acestea, animația sprite nu dispare încă din scenă. Continuă să fie utilizat pe scară largă în design (amintiți-vă de „ajutoarele” de la mai multe versiuni anterioare Office), în programe educaționale, precum și în jocuri - în principal pentru dispozitive mobile. În plus, în zilele noastre sprite-urile sunt folosite în animația Flash și GIF, dar nu sunt stocate ca bitmap, ci în formatul unui fișier grafic cu mai multe straturi, unde fiecare cadru de animație este situat pe un strat separat. În Adobe After Effects, puteți plasa o animație creată dintr-o secvență de fișiere grafice într-o scenă. Strict vorbind, aceasta este și o animație sprite, doar sursa sprite-urilor nu este o imagine cu mai multe straturi sau bitmap, ci un folder separat de pe computer. Așa că sprites, ca și zânele magice, sunt întotdeauna gata să vină în salvarea animatorului, mai ales atunci când creează jocuri!

Sprite

Pentru a mă mulțumi cu o astfel de animație, am luat CSS + JS pentru a ajuta. Ce ar trebui să fac cu 150 de fișiere imagine? Greutatea lor nu este critică, deși cântăresc mai mult de un megaoctet în total. Principalele probleme sunt legate de încărcarea și manipularea lor simultană. Așa că am decis să le „lipesc” într-una singură. Încărcați doar unul, iar folosind CSS + JS nu va trebui decât să îl poziționați corect.
Tot ce rămâne este să alegeți metoda de „lipire”. Sunt programator și toți suntem leneși :), așa că am renunțat imediat la lipirea manuală într-un editor grafic. În primul rând, m-am grăbit, ca de obicei, spre PHP și biblioteca GD. Dar lasă mult de dorit atunci când vine vorba de lucrul cu PNG-uri translucide. Apoi m-am gândit, ce altceva pot folosi pentru a „lipi” imaginile împreună? Și m-am hotărât pe ceea ce este acum pe buzele tuturor, ceea ce acum este considerat la modă - HTML5. El este responsabil pentru lucrul cu grafica - Canvas și îmi place foarte mult acest „delicios”. De aceea am decis să-l „lipesc” pe „pânză”.
Și așa voi adăuga această etichetă la HTML:

În JS voi specifica o mască pentru numele imaginii, prima imagine și numărul ultimei (nu a trebuit să redenumesc pozele, deoarece toate sunt în ordine). Ar trebui să arate cam așa:

Acum puteți specifica dimensiunea sprite-ului pe care doriți să-l obțineți și puteți obține contextul acestuia:

Pentru a facilita conversia din număr în șir (analog cu str_pad din PHP), am scris o funcție de conversie cu un nume sălbatic - zerofikator():

Am decis să adaug transformarea direct în fișier făcând clic pe pânză (rezolvă problema salvării pentru unele browsere):

Canvas.onclick = function () ( window.location = context.canvas.toDataURL("image/png"); );

Animaţie

Ei bine, acum putem începe animația.
Adăugăm câteva „fete” la HTML-ul cu care vom lucra în continuare:

Da, trebuie să apelați și această funcție:

SpriteAnimation(elementId, imgName, stiluri); spriteAnimation("navă", "navă.png", stiluri);

Și pentru a face să pară adecvat, puteți adăuga o imagine cu fundal și o poziționați corect:

rotație variabilă, care stabilește unghiul de rotație al sprite-ului.

Apăsarea butonului A face ca culoarea sprite-ului să se schimbe - culoare nouă este selectat la întâmplare. Apăsarea butonului S duce la o scădere a parametrului de scară, care este responsabil pentru dimensiunea sprite-ului afișat pe ecran, apăsarea butonului W duce la o creștere a parametrului de scară și, în consecință, la o scădere a dimensiunii a sprite-ului.

Parametrul origin specifică originea coordonatelor pentru sprite. În mod implicit, coordonatele poziției sprite-ului corespunde colțului din stânga sus. Relativ la stânga colțul de sus, în acest caz, sprite-ul este și el rotit. Pentru ca rotația să aibă loc în jurul centrului sprite-ului, scriem variabilei Origine rezultatul împărțirii lungimii și lățimii sprite-ului la 2. Ca urmare, sprite-ul, în primul rând, este afișat pe ecran luând în considerare luați în considerare noua origine a coordonatelor pentru acesta și, în al doilea rând, în timpul rotației sprite-ului, se face în jurul centrului sprite-ului, nu în jurul colțului din stânga sus. Să aruncăm o privire mai atentă la comanda Draw, pe care am folosit-o pentru a afișa sprite-ul pe ecran. În tabel 10.1. este descris fiecare dintre parametrii săi.

Tabelul 10.1. Descrierea parametrilor comenzii Draw

Element	Descriere
MySprite	Textura sprite
poziţie	Poziția sprite-ului
spRec	Un dreptunghi care delimitează un sprite într-o textură poate fi folosit pentru a afișa diferite zone ale texturii
culoare	Nuanță de sprite
rotație	Unghiul de rotație a sprite-ului
origine	Originea coordonatelor sprite-ului, în raport cu care sprite-ul este rotit și afișat pe ecran
scară	Dimensiunea sprite-ului.
SpriteEffects.None	Efect de ieșire sprite - vă permite să rotiți sprite-ul cu 180 de grade sau, dacă parametrul este setat la None - nu afectează în niciun fel poziția sprite-ului
(plutitor) 0	Adâncimea sprite-ului. Poate varia de la 0 la 1

În fig. 10.1. puteți vedea ecranul de joc al proiectului P6_1.

Acum să ne uităm la animația sprite.

Animație Sprite

Pentru a crea un sprite animat, trebuie să pregătiți material sursă adecvat. De obicei, fișiere sursă pentru sprite-uri animate, includeți mai multe imagini secvențiale. Fiecare dintre aceste imagini reprezintă un cadru separat de animație. Provocarea creării de sprite-uri animate este de a dezvolta un mecanism care permite imaginilor să se schimbe cu o anumită viteză.

Să creăm un sprite pe care îl vom anima. Am folosit un sprite pentru animație, format din două imagini (Fig. 10.2.). Când este animat, va fi creat un efect de clipire - culoarea neagră va fi înlocuită cu verde.

Să creăm un proiect standard de joc, să-l numim P6_2. În Lista 10.2. Este afișat codul pentru clasa Game1. În acest proiect, ne-am descurcat fără a crea componente de joc suplimentare, implementând toate funcționalitățile necesare în clasa principală de joc.

Utilizarea sistemului; folosind System.Collections.Generic; folosind Microsoft.Xna.Framework; folosind Microsoft.Xna.Framework.Audio; folosind Microsoft.Xna.Framework.Content; folosind Microsoft.Xna.Framework.GamerServices; folosind Microsoft.Xna.Framework.Graphics; folosind Microsoft.Xna.Framework.Input; folosind Microsoft.Xna.Framework.Net; folosind Microsoft.Xna.Framework.Storage; spațiu de nume P6_2 ( ///

/// Acesta este tipul principal pentru tine joc ///

clasa publică Game1: Microsoft.Xna.Framework.Game ( GraphicsDeviceManager graphics; SpriteBatch spriteBatch; Texture2D texture; // Numărul de cadre din imagine const int frames = 2; // Frecvența animației - frames per second const int framesPerSec = 10; / / Cadrul curent de afișat int numberOfFrame=0; //Timpul în care este afișat un cadru float timePerFrame; //Timpul care a trecut de la începutul afișării cadrului curent float totalElapsed; //Poziția poziția Vector2 de ieșire a sprite-ului; //Dreptunghi pentru setarea poziției cadrului în imagine. Rectangle sprRec; //Frame width int widthFrame = 64; public Game1() ( graphics = new GraphicsDeviceManager(this); Content.RootDirectory = "Content"; ) protected override void Initialize() ( poziție = nou Vector2( 100, 100); //Timpul pentru un cadru este calculat ca rezultat al împărțirii a 1 secundă //la numărul specificat de cadre pe secundă timePerFrame = (float)1 / framesPerSec; sprRec = nou dreptunghi (0, 0, 64, 64); baza.Initialize(); ) protected override void LoadContent() ( // Creați un nou SpriteBatch, care poate fi folosit pentru a desena texturi. spriteBatch = new SpriteBatch(GraphicsDevice); texture = Content.Load ("animaţie"); // TODO: folosește this.Content pentru a încărca conținutul jocului tău aici ) protected override void UnloadContent() ( // TODO: Descarcă orice conținut non ContentManager aici ) // Această procedură este folosită pentru a anima sprite-ul // Este nevoie de numărul de secunde care au trecut de la apelul anterior //al procedurii de actualizare void ChangeFrame(float elpT) ( //Măriți timpul total de afișare al sprite-ului cu //timpul scurs de la ultimul apel proceduri totalElapsed += elpT; //dacă timpul total de afișare al unui sprite este mai mare decât timpul //alocat unui sprite if (totalElapsed > timePerFrame) ( //Dacă numărul de cadre este egal cu numărul de cadre-1 dacă (numberOfFrame == cadre- 1) ( //setează numărul cadrului la 0 numberOfFrame = 0; ) //în caz contrar, crește numărul cadrului cu 1, altfel numberOfFrame++; //creează un nou dreptunghi //Coordonatele lui X corespunde coordonatei colțului din stânga sus / /din cadrul, Y este 0, lungimea și lățimea sunt întotdeauna egale cu 64 sprRec = new Rectangle( (int)widthFrame * numberOfFrame, 0, 64, 64); //resetare totalElapsed la 0 totalElapsed = 0; ) ) suprascris protejat void Update(GameTime gameTime) ( //Apelați procedura de animație sprite //treceți timpul scurs ca parametru după //ultimul apel Update ChangeFrame((float)gameTime.ElapsedGameTime.TotalSeconds); base.Update(gameTime); ) protected override void Draw(GameTime gameTime) ( graphics.GraphicsDevice.Clear(Color.CornflowerBlue); spriteBatch.Begin( ); spriteBatch.Draw(texture, position, sprRec, Color.White); spriteBatch.End(); bază.Draw(gameTime); ) ) ) Lista 10.2. Codul clasei Game1

Dacă descriem pe scurt secvența de lucru a acestui proiect, obținem următoarele: în ciclul Update() numim procedura ChangeFrame(), căreia îi trecem timpul care a trecut de la ultimul apel la Update(). În cadrul acestei proceduri verificăm dacă timpul curent este suficient