Share
In deze zelfstudie concentreren we ons op de botgebaseerde 2D-animatiegereedschappen die door de Unity-engine worden geboden. Het belangrijkste idee is om de grondbeginselen van 2D-animatie te presenteren en aan te leren, zodat u deze kunt toepassen op uw eigen games. In dit bericht zullen we het project opzetten, de activa definiëren en de eerste voorbereidingen treffen voor de animatie.
Voordat we de tutorial beginnen, willen we Chenguang (DragonBonesTeam) bedanken voor het verstrekken van de gamekunst die is gebruikt om deze tutorialserie te produceren.
Deze tutorial is voornamelijk gericht op twee groepen game-ontwikkelaars:
We gaan ervan uit dat je enkele programmeervaardigheden hebt, dus we zullen de code niet uitvoerig behandelen. Om deze tutorial te kunnen volgen, moet je natuurlijk Unity downloaden.
Volg voor een snelle start met Unity onze vorige zelfstudie die u kennis laat maken met de Unity 2D-omgeving en de bijbehorende gereedschappen en kenmerken. We raden u ten zeerste aan dit te doen als u niet bekend bent met Unity.
Deze demo toont de geanimeerde draak waar we naar streven:
Start Unity en maak een nieuw project door te selecteren Nieuw project… van de het dossier menu. De Project Wizard zal verschijnen. Maak nu een nieuw 2D project, gevolgd door een nieuwe map genaamd Sprites (in je Middelen directory).
Nu de projectmap is georganiseerd, is het tijd om de gameactiva te importeren. Je kunt ze vinden in de map Assets van de GitHub-repo van deze tutorial. (U kunt gewoon klikken ZIP downloaden op de laatste pagina als u niet bekend bent met GitHub.) Houd er rekening mee dat deze map items bevat voor de hele tutorialserie, dus er zijn er enkele die u pas later zult gebruiken.
Vergelijk de volgende twee afbeeldingen voordat u verdergaat:
In het eerste beeld is de draak verdeeld in verschillende lichaamsdelen (hoofd, lichaam, armen, enzovoort). In de tweede wordt de ninja in verschillende poses getoond, met een opeenvolging van poses voor verschillende acties. Hiermee kun je je heel goed voorstellen hoe de avatar in je spel zal bewegen.
De ninja-sprite is wat we a noemen sprite vel of sprite atlas. Dit type sprite was erg populair bij de klassieke 2D-games en het is nog steeds heel gewoon.
De drakensprite vereist een recentere 2D-animatietechniek, normaal gesproken genaamd op botten gebaseerde animatie. Zoals de naam al doet vermoeden, is de animatie per bot, waarbij elk bot van het lichaam een specifieke actie of animatie kan hebben. Door alle hoofdgedeelte van het personage gescheiden te houden, kunnen de ontwikkelaars de animaties rechtstreeks in de engine maken. Deze nieuwe animatietechniek lijkt erg veel op wat wordt gebruikt in 3D-animatie.
In deze zelfstudie gaan we focussen op botgebaseerde animatie. Merk echter op dat Unity dat niet doet waar op bot gebaseerde animatie, dus we zullen het simuleren.
Sleep het spritebestand naar de editor en plaats het op de Sprites map, zoals zo:
Voordat een willekeurig personage gereed is voor animatie, moet u een Tafereel naar het project. Maak een scenes map in uw Middelen map, maak vervolgens een nieuwe scène en sla deze op als Test.scene in deze map. Aan het einde van deze stap zou je zoiets als dit moeten hebben:
Nu, nog steeds in de project tab, selecteer de draak Sprite, kijk dan naar de Inspecteur paneel:
Zoals je kunt zien in de Sprite-modus eigendom in de Inspecteur, de Sprite-modus ingesteld op single. Dit betekent dat de engine de gehele textuur als geheel gebruikt bij het maken van een nieuwe sprite. Omdat we de lichaamsdelen gescheiden hebben in de draak, we willen niet dat dit gebeurt. We moeten daarom het Sprite-modus van single naar Meerdere.
Wanneer u de optie verandert, een nieuwe knop met het label Sprite Editor komt naar voren:
Momenteel is de Sprite Editor slicing tool werkt niet goed op gecomprimeerde afbeeldingen. Om het beste resultaat voor de geanimeerde sprites te garanderen, moet je de Formaat waarde onderaan de Inspecteur tab uit de standaardoptie, Compressed, naar Ware kleur. Dan klikken Van toepassing zijn.
Selecteer nu de drakensprite en klik op de Sprite Editor knop. Een nieuw venster verschijnt:
In de linkerbovenhoek van het venster vindt u de Plak knop. Klik erop en er verschijnt een ander menu:
Met dit menu kunt u de parameters wijzigen van hoe de sprite door de motor wordt gesneden. Als je de segmenten instelt op automatisch, de motor probeert de verschillende delen van het personage in de afbeelding te detecteren. U kunt een minimumgrootte voor de segmenten definiëren, een spil (het punt waarrond het segment roteert) en een van de volgende drie methoden:
U kunt ook de Type parameter naar rooster. Dit geeft je andere opties:
Net als in de automatische modus, kunt u het draaipunt van de sprite selecteren, maar u hebt ook een optie om de pixelgrootte te definiëren. Deze waarde bepaalt de hoogte en breedte van de tegels in pixels.
Selecteer voor deze afbeelding de automatisch modus en druk op de Plak knop. Het resultaat zou vergelijkbaar moeten zijn met dit:
Zoals je ziet, sneed de editor de verschillende delen van de sprite in verschillende rechthoeken. Dit zijn de onderdelen die je gaat gebruiken om je personage te bouwen. Zoals hierboven vermeld, is dit geen perfecte botanimatie, maar elk onderdeel wordt afzonderlijk geanimeerd.
Als u dubbelklikt in een van de gegenereerde rechthoeken, wordt een pop-upvenster geopend met de eigenschappen van dat specifieke deel van de sprite:
U kunt de naam van de gegenereerde sprite, de positie, de grootte en het draaipunt wijzigen. U kunt ook de positie- en groottewaarden wijzigen door de blauwe punten op de hoekpunten van de rechthoeken te slepen. De blauwe cirkel in het midden van de geselecteerde rechthoek geeft het draaipunt aan.
Voor deze sprite is het veilig om Unity de individuele sprites automatisch te laten maken. In meer complexe sprites wilt u de sprites mogelijk handmatig definiëren. U kunt dit doen door te klikken en de linkermuisknop over de afbeelding slepen om een rechthoek te definiëren.
Zodra u de muisknop loslaat, maakt Unity een sprite van die rechthoek.
U kunt op de trimmen om de rechthoek aan de sprite aan te passen. Herhaal vervolgens dit proces voor alle sprites die u wilt genereren.
Omdat de automatische modus prima werkt voor deze afbeelding, hoeft u de sprites niet handmatig te definiëren.
Het volgende dat u moet doen, is om de draaipunten aan te passen aan de verschillende gegenereerde sprites. Deze stap is erg belangrijk voor de animatie.
Kortom, u moet het draaipunt naar het gebied slepen waar de sprite zich bij het parent-lichaamsdeel zal voegen. U wilt bijvoorbeeld het draaipunt van het hoofd dicht bij het nekgebied bewegen. Dit zorgt ervoor dat, wanneer je het personage animeert, alle bewegingen, bijvoorbeeld de rotaties, zich rond dat punt oriënteren, waardoor het personage op een realistische manier kan bewegen. Als je de draaipunten op hun oorspronkelijke plaatsen zou verlaten, zou je eindigen met vreemde animaties, omdat het personage niet in staat zou zijn om op een realistische manier te bewegen.
Denk aan de draaipunten van de leden als de gewrichten van een pop. Om de pop te laten bewegen, moeten de gewrichten correct geplaatst zijn, toch? Dezelfde regels zijn van toepassing op de draaipunten.
Als u het draaipunt wilt verplaatsen, sleept u de blauwe cirkel in het midden van elke sprite naar de juiste plaats (dit is het punt waarop het verbinding moet maken met het bovenliggende hoofdgedeelte). In de volgende afbeelding ziet u de spil op de juiste plaats:
Het staartgedeelte zou er als volgt uit moeten zien:
Heb je het idee gekregen? Super goed! Herhaal het proces voor de resterende delen. (Je kunt de spil voor de zwarte stip in het midden laten staan, we zullen hier meer over vertellen in de volgende sectie.) Denk eraan, je wilt een drakenanimatie, geen animatie van Frankenstein.
Als u klaar bent, klikt u op Van toepassing zijn:
Als je snel de map bekijkt waarin je de sprites hebt, kun je zien dat de drakensprite nu een pijl ernaast heeft:
Druk op de pijl en je zult alle delen waaruit ons drakenkarakter bestaat afzonderlijk kunnen zien:
Nu je je personage in verschillende sprites hebt gesneden, kun je beginnen met het plaatsen van de sprites in de scène. Omdat de draak uit meerdere lichaamsdelen bestaat, moet je het personage bouwen.
Het eerste wat je moet doen, is de zwarte stip van de drakensprite naar de scène slepen. Dit object werkt als een Zwaartepunt voor je karakter. Later zul je je aandacht daar richten; wees er echter nu van bewust dat dit de basis is voor je personage.
Neem nu het lichaam van de draak en plaats het over de zwarte stip, als volgt:
Herhaal dit proces totdat je je draak hebt geassembleerd. Tegen het einde zou het er ongeveer zo uit moeten zien:
Eindelijk heb je je draak klaar, maar zoals je misschien opmerkt, ziet het er raar uit. Sommige delen die onder het lichaam zouden moeten zitten, zijn er overheen of omgekeerd. Dat gebeurt omdat we de drakendelen zonder een specifieke volgorde hebben toegevoegd.
Voordat we dit probleem oplossen, laten we de drakensched in een enkel spelobject veranderen. Zoals je misschien al gemerkt hebt, werken de verschillende delen van de draak nu als individuele game-objecten - je moet ze in een enkel game-object groeperen voordat je ze kunt gaan animeren.
Om alle sprites correct te groeperen, gebruik je de sprite met de zwarte stip als het belangrijkste spelobject; alle andere lichaamsdelen moeten worden gegroepeerd onder de sprite-massa. Sleep eenvoudig een sprite naar de black-dotsprite in de Hiërarchie om het onder de zwarte stip te groeperen.
Op de volgende afbeelding kunt u zien hoe de sprite-hiërarchie eruit moet zien nadat u de game-objecten hebt gegroepeerd.
Voordat je verdergaat, hernoem je je basisgame-object naar Draak. Wanneer u de Draak game-object, kunt u nu alle delen van het personage op de scène verplaatsen.
Maar wat als u slechts één enkele sprite wilt verplaatsen? Als je bijvoorbeeld alleen de hand wilt bewegen, weet je dat de arm is verbonden met de hand, dus als je hem verplaatst, moet alle hand ook bewegen, juist? Als u dit probeert, ziet u dat dit niet het geval is. Wanneer je de arm selecteert en verplaatst, blijven de resterende delen van het lichaam stil. Dus, om het volledige lichaamsdeel te verplaatsen, moet je een hiërarchie in je sprite maken.
Om dit proces meer intuïtief te maken, hernoemt u de lichaamsdelen (door met de rechtermuisknop te klikken en te selecteren andere naam geven) met hun respectievelijke namen, zoals zo:
Beschouw het karakter van een hiërarchie als een boom, met wortels, een stam en takken. De zwarte punt gedraagt zich als de wortel van de boom; als je hem verplaatst, beweegt het hele personage. Na de wortel komt de kofferbak; in dit geval is uw stam het lichaam van het teken, dus dit is de volgende sprite in de hiërarchie. Alle andere lichaamsdelen zijn takken van de boom. Je kunt echter nog takken van takken hebben, zoals bijvoorbeeld in de staart - de Staart Tip is een tak van de Staart, enzovoorts…
Organiseer de sprites van je personage volgens deze hiërarchie:
Nu, als u de bovenarm verplaatst, volgen alle delen van de arm. Geweldig, is het niet?
Voordat je het personage kunt animeren, is er nog een laatste detail waarvoor we moeten zorgen. Zoals we hebben besproken, worden de sprite-onderdelen niet in de juiste volgorde getekend. Om dit op te lossen, moet u de waarde van de wijzigen Bestel in laag parameter voor elke afzonderlijke sprite.
Gebruik de volgende waarden voor elke Sprite om er zeker van te zijn dat de zelfstudie succesvol is:
Accentsconagua
0 3 4 4 5 4 5 1 2 1 2 4 5 Tegen het einde zou je draak er ongeveer zo uit moeten zien:
Om dit gedeelte te beëindigen, centreer je je personage gewoon op het scherm. Doe dit door de Transformeren waarden van de middenpositie tot (0, 0, 0).
Dit is het eerste deel van de serie. U hebt nu een 2D-teken met de juiste sprite-volgorde en hiërarchie.
Als je vragen of feedback hebt over wat we tot nu toe hebben behandeld, kun je hieronder een reactie achterlaten.
