Implementeer sprite-sheet-animaties

Verificatie omgeving

Ramen

• Vensters 11

Unity-editor

• 2020.3.25f1

Pakketten met invoersystemen

• 1.2.0

Vereisten voor deze tip

De volgende instellingen zijn vooraf geconfigureerd als voorwaarde voor de uitleg van deze tips.

• Introductie van het Input System Package
• Lijn de camera (2D) uit met het canvas

Wat is Sprite Sheet-animatie?

In moderne games worden personages en effecten geanimeerd door 3D-modellen te bewegen, explosies in realtime te berekenen en effecten weer te geven. Dit is mogelijk geworden omdat de rekenkracht van gameconsoles is toegenomen, maar aangezien de oude gameconsoles niet zoveel kracht hadden, was spritesheet-animatie die continu van beeld wisselde om het te laten lijken alsof het bewoog, de mainstream. Het principe is hetzelfde als dat van anime die op tv wordt gespeeld. Sprite-sheet-animaties worden door minder games gebruikt dan in het verleden, maar ze worden nog steeds vaak gebruikt omdat de belasting die nodig is voor berekeningen veel lager is.

Sprite-bladanimatie schakelt en geeft meerdere afbeeldingen achter elkaar weer. Het is zeldzaam om zoveel afbeeldingsbestanden voor te bereiden als er zijn, en in principe zijn alle weergavepatronen in één afbeelding opgenomen. Dit maakt het gemakkelijker om afbeeldingsbestanden te beheren en vermindert de belasting van het laden van afbeeldingsbestanden. Het afbeeldingsbestand dat deze animatie samenvat, wordt een "sprite-blad" genoemd.

Een sprite-werkblad maken

Een sprite-blad is in wezen gewoon een afbeeldingsbestand. Aangezien het niets met Unity te maken heeft, kunt u het maken met een beeldbewerkingstool. Het uiteindelijke bestandsformaat is een PNG-bestand dat Unity aankan.

Daarnaast zijn er de volgende regels voor het maken van sprite-sheets.

• Verenig de afbeeldingsgrootte van alle frames. Als de eerste afbeelding bijvoorbeeld 32x32 pixels is, zijn de tweede en volgende afbeeldingen 32x32 pixels. Als u bijvoorbeeld een sprite-blad maakt in een "3x2"-formaat met 6 frames, is de grootte van het sprite-blad 96x64 pixels.
• U kunt de afbeelding vrij uitlijnen, zoals "6x4" of "2x8", maar zorg ervoor dat u deze maakt in de veronderstelling dat alle frames worden gevuld. Als het "6x4" is, zijn het 24 frames, enzovoort. Als het een animatie van 13 frames is, bereid deze dan voor met "1x13" of "13x1".
• Omdat het een animatie is, is deze goed uitgelijnd, zodat er geen verkeerde uitlijning is in de frames ervoor en erna.
• De richting van de animatie begint bij de cel linksboven en gaat naar rechts, en als je helemaal naar rechts gaat, begint het van links een stap naar beneden en gaat het weer naar rechts.

In feite hoef je het bovenstaande niet strikt in Unity te doen, maar het is veel gemakkelijker om van tevoren de specificaties te bepalen.

Deze keer zal ik een sprite-blad gebruiken om de volgende nummers te verwisselen. Een vierkant is 32x32 pixels. Het bestaat uit 24 "6x4" frames, dus de afbeeldingsgrootte is 192x128 pixels.

Het sprite-blad configureren in de Unity-editor

Nadat je je project hebt gemaakt, voeg je een sprite-bladbestand toe aan je project. Hier wordt aangenomen dat de bestandsnaam .NumberAnimation

NumberAnimation Selecteer het bestand en vul het infovenster als volgt in:

Er zijn veel andere instellingen die kunnen worden geconfigureerd, maar laten we het voorlopig laten zoals het is. Eenmaal geconfigureerd, klikt u op de knop "Sprite Editor".

Als onderstaand dialoogvenster verschijnt, klik je de knop "Toepassen". In feite moeten de instellingen van deze inspecteur worden opgeslagen, en als u naar beneden scrolt, is er een knop "Toepassen", dus u moet de instellingen met deze knop opslaan. Het wordt ook opgeslagen door "Toepassen" in het dialoogvenster, dus het maakt niet uit op welke manier u het opslaat.

De Sprite-editor verschijnt. In dit gedeelte gaan we aan de slag met het splitsen van de sprite van de sprite sheet.

Er is een knop genaamd "Slice" in de linkerbovenhoek, klik erop en verander het type in "Raster op celgrootte". In dit sprite-blad is één grootte van de sprite "32x32" pixels, dus voer 32 in voor elke pixelgrootte. Als u klaar bent, klikt u op de knop Segment.

Deze afbeelding is moeilijk te begrijpen omdat het vanaf het begin duidelijk verdeeld lijkt te zijn, maar het wordt gedeeld door 1 sprite 32px. Druk op de "Ctrl"-toets en de gesplitste lijn verschijnt groen.

Sla het na het splitsen op met de knop "Toepassen".

Als u op het driehoekje in het afbeeldingsbestand van het project klikt om het uit te vouwen, kunt u zien dat de sprite is verdeeld.

Sprite-plaatsing en animatie

Sleep de set sprite in de weergave en plaats deze.

Vervolgens verschijnt er een dialoogvenster, dus sla het op NumberAnimation als . Dit bestand bevat de animatie-instellingen.

De eerste sprite wordt in de weergave geplaatst en er worden een animatiecontroller en animatieclip in het project gemaakt. Als de afbeelding klein is, stelt u de schaal in om deze groter te maken.

Op dit punt worden de standaard animatie-instellingen toegepast, zodat je het spel gewoon kunt spelen. Je zou moeten kunnen zien dat de sprite-animatie beweegt zodra het spel begint.

Voorkomen dat animaties worden herhaald

Selecteer het animatieclipbestand (NumberAnimation.anim) in uw project.

In het infovenster is er een selectievakje voor "Looptijd", dus schakel het uit.

Als je het spel uitvoert, zul je zien dat de animatie stopt bij 24. Het is effectief voor eenmalige explosie-effecten.

Wijzig de snelheid van de animatie

Selecteer de sprite die je wilt animeren in de hiërarchie.

Selecteer vervolgens het tabblad Animatie. Als u geen tabblad Animatie hebt, selecteert u Venster > Animatie > Animatie in het menu.

Er is een getal dat "sample" wordt genoemd, wat een aantal keren is om in één seconde van beeld te wisselen. In dit voorbeeld is de animatie 24 frames, dus de animatie wordt elke 2 seconden herhaald.

Als u dit getal verlaagt, wordt de animatiesnelheid langzamer en als u deze verhoogt, neemt de snelheid toe.

Over andere geavanceerde animatie-instellingen

De verschillende animatie-instellingen worden afzonderlijk toegelicht in de animatiespecifieke tips. Deze instellingen zijn niet exclusief voor sprite-animaties, maar zijn niet exclusief voor de Het is hetzelfde als het opzetten van andere bewegingsanimaties en 3D-animaties.

In deze tip leggen we uit hoe je van een spritesheet naar een animatie kunt gaan.