Photoshop-animaatio Sprite Sheetille

Kun työskentelet sprite-arkkien kanssa, ensimmäinen askel on luoda animaatio, joka sisältää sprite-arkin spritejä. On olemassa erilaisia ​​animaatio-ohjelmia, kuten Flash^R ja Photoshop^R. Tässä opetusohjelmassa luomme Photoshopissa yksinkertaisen animaation ja vietämme sen PNG-sekvenssinä tuontiin TexturePackeriin.

Aloita uusi kuva, jonka koko on 256 x 256 korkeus x 72 res. Miksi käytämme 256: ta? Useimmissa mobiilisovelluksissa suositellaan kahden kankaan kokoa. Joten on hyvä käytäntö pysyä tällä alueella, jos mahdollista. Meillä on kymmenen kehystä pomppivan pallon animaatiolle.

1. Piirrä ensimmäisessä kerroksessa pieni punainen pallo alareunan keskelle.
   
   
2. Avaa Animaatio-paneeli. Käytämme Frame-tilaa. Ensimmäinen kehys on jo siellä.
   
   
3. Napsauta pientä kolmiota 0 sekunnin vieressä ja aseta fps arvoon .2.
   
   
4. Napsauta paneelin alaosassa Kopioi valitut kehykset -kuvaketta lisätäksesi uuden kehyksen Animaatio-paneeliin.
   
   On olemassa muutamia tapoja käyttää kerroksia-paneelia animaation luomiseen. Minusta on helpompaa luoda uusi taso Tasot-paneeliin jokaiselle Animaatiot-paneelin kehykselle.
   
   
5. Nyt kun meillä on kaksi kehystä Animaatio-paneelissa, tarvitsemme toisen kehyksen Tasot-paneelissa. Napsauta hiiren kakkospainikkeella tasoa 1 ja valitse monista taso valikosta. Nimeä tämä toinen kerros uudelleen tasoksi 2.
   
   Meillä on nyt kaksi kehystä Animaatio-paneelissa ja kaksi kerrosta Tasot-paneelissa. Mutta meidän on koordinoitava niitä yhdessä.
   
   
6. Valitse ensimmäinen kehys Animaatiot-paneelista. Sammuta tasot-paneelissa kerroksen 2 näkyvyys siten, että kerros 1 on ainoa näkyvä kerros.
   
   
7. Valitse Animaatio-paneelin toinen kehys. Sammuta Tasot-paneelissa kerroksen 1 näkyvyys ja ota kerroksen 2 näkyvyys käyttöön.
   
   Ei, kun napsautat Toista-painiketta Animaatio-paneelissa, huomaat, että pallo liikkuu ylös ja alas kuvaikkunassa.
   
   
8. Valitse toinen kehys Animaatio-paneelista ja lisää uusi kehys.
   
   
9. Kopioi tasot-paneelissa kerros 2 ja nimeä se tasoksi 3.
   
   
10. Kun kehys 3 on edelleen valittuna Animaatio-paneelissa, sammuta kerroksen 2 näkyvyys. Siirrä punaista palloa hiukan ylöspäin kerroksessa 3.
    
    
11. Sammuta animaation paneelin kehyksissä 1 ja 2 kerroksen 3 näkyvyys.
    
    Toista nämä vaiheet vielä kolmella kehyksellä. Sitten sinulla tulisi olla 6 kehystä ja vain yksi kerros näkyy jokaisessa.
    
    Kehys 1 - kerros 1 näkyvissä
    Kehys 2 - kerros 2 näkyvissä
    Kehys 3 - kerros 3 näkyvissä
    Kehys 4 - kerros 4 näkyvissä
    Kehys 5 - kerros 5 näkyvissä
    Kehys 6 - kerros 6 näkyvissä
    
    

Seuraava →

Tekijänoikeus 2018 Adobe Systems Incorporated. Kaikki oikeudet pidätetään. Adobe-tuotteen näyttökuva (t) uusitaan Adobe Systems Incorporatedin luvalla. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Ilotulitteet, Contribute, Captivate, Flash Catalyst ja Flash Paper on / on joko [a] rekisteröity tavaramerkki (t) tai Adobe Systems Incorporatedin tavaramerkki (t) Yhdysvalloissa ja / tai muissa maissa.

SpritePile - 3D Update (Huhtikuu 2021)