Share
Unity's 4.3 update was een grote deur die openzwaaide voor 2D-game-ontwikkelaars, met veel nieuwe tools en manieren om 2D-game-ontwikkeling te benaderen in deze toch al krachtige engine. In deze tutorial laat ik je zien hoe je een personage in Inkscape kunt maken dat kan worden gebruikt in de geweldige nieuwe editor van Unity 4.3.
Een paar tips over het maken van gamekarakters voordat we beginnen:
Open Inkscape en selecteer Bestand> Nieuw . Selecteer in de lijst met beschikbare opties de grootte die waarschijnlijk de resolutie van je spel is. 640 x 480, 800 x 600, of 1024 x 768 zijn veelvoorkomende spelresoluties voor de pc - voor dit project zal ik kiezen 800 x 600.
Maak een nieuwe laag door te selecteren Laag> Laag toevoegen (Shift-Control-N) en noem het "schets". Zet het op Onder de huidige laag.
Breng je concepten samen. In dit geval heb ik zojuist een eenvoudige schets gebruikt die ik heb gemaakt Sketchbook Pro. Ik heb de neiging om ten minste twee actieweergaven van het personage te maken, zodat ik een goed beeld krijg van hoe ik wil dat het wordt geanimeerd en welke stukjes ik nodig heb om het in stukjes te splitsen.
U kunt uw concept eenvoudig vanuit een ander programma kopiëren en plakken of het bestand naar Inkscape slepen en neerzetten.
Als u het bestand sleept en neerzet, selecteert u embed, niet link. Je zult de schets hoe dan ook later weggooien omdat het niet nodig is voor het hele proces.
Conceptschetsen helpen je idee te stollen, zodat je niet blindelings werkt. Pas het formaat van je tekening aan naar elke maat waar je comfortabel aan kunt werken met behulp van de formaatgrepen.
Klik op de schets en slot de verhoudingen van de afbeelding door op de te klikken Vergrendel pictogram.
Vergrendeling van verhoudingen voorkomt vervorming. Omdat de Inkscape Preset-paletten over het algemeen niet erg mooi zijn voor games, heb ik de neiging om vooraf mijn eigen paletten te maken.
U kunt uw Inkscape-palet bewerken door naar uw Inkscape-map onder de Delen> Paletten submap.
Het bestand bevindt zich mogelijk op een andere locatie, afhankelijk van uw besturingssysteem. Klik met de rechtermuisknop "Inkscape.gpl" en selecteer openen met uw favoriete teksteditor. Ik heb net gebruikt Wordpad.
Je kunt nu je eigen toevoegen RGB en Hex waarden in de lijst en ze verschijnen in de volgorde waarin u ze hebt geplaatst. Als u niet bekend bent met Hex- en RGB-codes, zijn er veel gemakkelijk toegankelijke diagrammen die u kunt vinden op internet of in de kleurenkiezer van vrijwel elk beeldbewerkingsprogramma..
Je kunt er hier een vinden:
Hier zijn de ranges die ik gebruikte voor de verschillende delen van het lichaam van de Octopus voor degenen onder u die graag paletten verzamelen:
Hoofdonderdeel
Accentsconagua
# 6E0454 # A4005C # BC1878 # DC4470 # EB636D # F39383 # FAC9AC Ogen
# 392131 Slakkenhuis
# 343059 # 43467E # 3E5796 # 5A69C0 # 6796E8 # 7EAFEE # 7EC7D9 Slak lichaam
# 84473C # A5674F # CE894E # F3B46B # F9CE64 # F9E57A # FBFB9E Je kunt deze codes kopiëren en in je .gpl-bestand plakken en ze opslaan, en ze zullen er de volgende keer zijn dat je Inkscape uitvoert.
Ik raad aan om een kopie van je originele .gpl-bestand te bewaren voor het geval er iets misgaat.
Voeg de codes toe zoals deze worden weergegeven in het bestand. Je kunt ze plaatsen in de volgorde waarin je ze wilt laten verschijnen. Teken eerst het hoofdgedeelte. Ik gebruik gewoon een eenvoudige cirkelvorm voor het lichaam van de octopus. Ik heb de slag ingesteld op 3.5px in de objecteditor (Shift-Control-F) maar je kunt het jouwe maken wat je maar wilt.
Teken de poten allemaal als afzonderlijke stukjes op een nieuwe laag met behulp van de Bezier Curve-tool (Shift-F6).
Vergeet niet dat om een echte curve te krijgen, u de muisknop ingedrukt moet houden nadat u hebt geklikt om het tweede knooppunt / punt te positioneren en het rond te slepen. In plaats van het handmatig aanpassen van de lijn en kleur aan het been, kunnen we klikken op een object dat vergelijkbaar is (zoals de cirkel) en het kopiëren (Controle-C) en ga naar Bewerken> Stijl plakken of (Control-Shift-V) om de stijl van het gekopieerde object te evenaren.
Dit is een goede manier om ervoor te zorgen dat al je objectvullingen en streken uniform zijn. Misschien wil je ook benen in verschillende posities tekenen, zodat ze opnieuw kunnen worden gebruikt om meer animaties te maken.
Je kunt ook het hele lichaam met de benen in verschillende posities tekenen als je niet wilt dat de benen allemaal onafhankelijk van elkaar bewegen.
Vergeet niet dat je stukken bij elkaar kunt voegen door beide objecten te selecteren en ze te combineren via Pad> Unie of Ctrl-Shift-+ of gewoon Controle-+ met de numpad.
Om een vloeiendere curve te krijgen, voeg ik vaak extra punten toe en verwijder ze vervolgens nadat ik de vorm heb die ik wil.
Ik zet de Lichaam laag met behulp van de oog pictogram naast de laagnaam die ik wil uitschakelen.
Ga in Bewerk het pad volgens knooppunten mode (F2) en klik in het knooppunt dat u wilt verwijderen en druk op Sleutel verwijderen.
U kunt aanpassen met behulp van de handvatten op de andere knooppunten als er iets misgaat, of door het knooppunttype in de werkbalk te wijzigen. Omdat ik wil dat de benen aan de linker- en rechterkant bijna hetzelfde zijn, kopieer ik de linkerzijde en bewerk ik deze een beetje.
Breng het Lichaam laag door naar de laag in de vervolgkeuzelijst te gaan en op de te klikken oog pictogram nogmaals, zodat u het been op de juiste manier kunt positioneren. Selecteer de poot (die u automatisch terugbrengt naar de pootlaag) en kopieer deze (Controle-C) plak het dan (Controle-V).
Draai de afbeelding om met de Draai horizontaal knop of door op de te drukken H sleutel.
Dit maakt de octopus gemakkelijker te animeren.
Verplaats het been in de gewenste positie. Ik heb het ook horizontaal geplet voor perspectief, met behulp van de formaatgrepen.
Als u problemen ondervindt met het afbreken van de afbeelding bij het dimensioneren, gaat u naar Beeld> Snap. Ik ga de voorpoten in meerdere stukken maken om meer diepte toe te voegen. Maak een nieuwe laag (Shift-Control-N) om de benen toe te voegen die voor het lichaam zullen zijn.
Voeg een ovaal toe met de Oval Tool en kopieer en plak de stijl van de benen op het ovaal.
Op deze manier kunnen we een dobberende beweging toevoegen aan de voorste tentakel als we dat willen. Voeg nu een tweede ovaal toe en draai het. U kunt objecten draaien door tweemaal op het object te klikken en vervolgens de handvatten te gebruiken.
Nu kan dit deel van de tentakel afzonderlijk bewegen! Nu kun je gewoon het been kopiëren en omdraaien om het andere been in te vullen
Maak je voorlopig niet al te veel zorgen over de tentakelpositie, het wordt aangepast in Unity. Laten we schaduw en hoogtepunten aan de octopus toevoegen voordat we naar het gezicht gaan. Ik doe dit door ovalen te maken en vervolgens een ander ovaal te gebruiken om de delen "af te trekken" die ik niet wil.
Plaats de markering op de plaats waar u hem wilt hebben. Kopieer en plak nu de cirkel en pas deze aan waar je wilt wegsnijden. Maak er een andere kleur van, zodat het gemakkelijker te zien is. Ik geef er de voorkeur aan om het dezelfde kleur te geven als het hoofdgedeelte.
Ik vind deze methode het beste voor ballonnen en andere ronde, glanzende objecten. Nu Shift-Select in beide kringen, zorg ervoor dat u de hoogtepuntcirkel als laatste selecteert en ga naar Pad> Verschil.
Een mooie vloeiende highlight! kiezen alle objecten en Groep hen (Controle-G) om ervoor te zorgen dat ze niet worden verplaatst van waar u ze wilt hebben.
Opmerking: U kunt de stijl van een object nog steeds kopiëren en plakken door rechtstreeks pad te selecteren / bewerken op knooppunt, zelfs wanneer ze zijn gegroepeerd.
Teken ook een aantal hoogtepunten op de poten, met behulp van de Bézier-tool (Shift-F6). Zorg ervoor dat je op de laag tekent met de juiste tentakel en groepeer ze met hun bijbehorende stuk als je klaar bent. Probeer dezelfde kleur te gebruiken als bij het vorige hoogtepunt.
U kunt minder of meer hoogtepunten toevoegen, naar uw smaak. Ik trok de ogen met behulp van de Cirkelgereedschap (F5). Ik doe hetzelfde hier dat ik deed met de tentakels om ervoor te zorgen dat ze hetzelfde waren; kopieer en plak het linkeroog en pas opnieuw aan voor positie en perspectief.
Hij heeft nu een eenvoudige verzameling van peepers. Teken een eenvoudige mond met de Bezier Curve-tool, en pas de instellingen aan in het menu voor lijnen en vulling (Shift-Control-F).
Je kunt met deze instellingen spelen om ze te krijgen zoals je wilt. Ik besloot wat meer hoogtepunten toe te voegen om hem wat meer diepgang te geven. Als je merkt dat je later nieuwe dingen toevoegt die verschijnen boven eerdere objecten wanneer je ze hergroepeert, selecteer en knip je het object dat erachter zit (Controle-X), klik op het object waar u het wilt plakken dat op dezelfde laag staat en selecteer Bewerken> Plakken op zijn plaats of (Controle-Alt-V).
Door uw groepen schoon te houden, kunt u later uw sprite-werkblad organiseren. Ik heb ook een tweede highlight toegevoegd, opnieuw met Bezier-curven en de Cirkelgereedschap, alleen deze keer gebruik ik de # F39383 kleur.
Hoewel er een paar opkomende programma's zijn die een eenvoudige toevoeging van dynamische verlichting aan 2D-kunst mogelijk maken (zoals Sprite Lamp), zijn ze nog steeds erg rudimentair en zijn ze vooral bedoeld voor pixelart, dus we zullen ze zelf moeten toevoegen voor nu!
Voor een punt van belang, voeg ik ook een slak toe bovenop het hoofd van de octopus. Ik zal het lichaam eerst maken met de Bezier Curve Tool (Shift-F6). Ik zal de slak op een nieuwe laag zetten, maar ik hoef er ook geen voor de schaal te maken, zolang ze maar goed gegroepeerd zijn. Je kunt ze op afzonderlijke lagen maken als je dat wilt.
Zoals eerder zal ik alle onnodige knooppunten verwijderen en het lichaam gladstrijken met de Pad bewerken op knooppunt (F2) modus. U kunt ook rond meerdere knooppunten selecteren en deze in deze modus verplaatsen.
Voeg nu wat lichtere tinten toe om het volume van de slak naar voren te brengen. Nogmaals zal ik de gebruiken Bezier-curve gereedschap (Shift-F6).
Als je merkt dat je een bocht maakt, heb je het te steil gemaakt en kan je het niet verbinden zonder dat dit gebeurt:
Jij kan klik met de rechtermuisknop om de curve te verlaten en vervolgens handmatig opnieuw verbinden.
Om de basis van de schaal te maken, teken een cirkel met de Cirkelgereedschap (F5). ik gebruikte # 5A69C0 als de slag en # 7EC7D9F als de vulling.
Gebruik de Bezier-curve gereedschap (Shift-F6) om de onderste "lip" van de schaal te maken.
Gebruik de Spiraal gereedschap om de juiste vorm aan de schaal toe te voegen (F9) en stel de bochten naar 1.50.
Draai nu en positioneer de spiraal zodat deze op een echte schaal lijkt. Ik heb ook de dop voor de spiraal op gezet Ronde dop om een harde rand te vermijden.
Voor het hoogtepunt van de slakkenhuisvesting zullen we opnieuw de bezier-curve gebruiken. Ik gebruik alleen wit voor de kleur, maar ik zal de vorm instellen 50% ondoorzichtigheid zodat het mengt. U kunt de dekking in het Menu Vulling en lijn (Shift-Control-F).
Ga door met de rest van de hoogtepunten. U kunt de stijl van de eerste markering naar de andere markeringen kopiëren en plakken en ook de dekking kopiëren en plakken, wat het een stuk eenvoudiger maakt.
Het is vermeldenswaard dat ik de schelp en het slakkenlichaam afzonderlijke groepen heb gemaakt. Ik ga ze apart opslaan voor het geval ik ze later wil animeren.
Laten we eerst de schets verwijderen om hem uit de weg te ruimen. Klik op de "schets" en druk op de Delete-toets. Zorg ervoor dat je de laag ontgrendelt voordat je probeert deze te verwijderen of je kunt dit niet doen. U kunt ook de daadwerkelijke laag verwijderen uit de Laagmenu. Zorg er wel voor dat de laag die u wilt verwijderen actief is op het moment dat u hem verwijdert.
Zorg ervoor dat je je bestand opslaat voordat je het volgende deel doet (hoewel het de moeite waard is om op te merken dat je toch vaak moet opslaan, voor het geval dat). Ga hiervoor naar Bestand> Opslaan als (Shift-Control-S).
Nu moet je de stukjes van de octopus scheiden zodat ze ver genoeg uit elkaar liggen voor het snijgereedschap in Unity om op te pikken dat het afzonderlijke stukjes zijn. Er zijn instellingen die je in Unity kunt aanpassen om dit te helpen, maar een georganiseerd sprite-blad is altijd beter.
Dit is een goede test voor je groepsvaardigheden. Als je alle juiste stukjes bij elkaar hebt gegroepeerd, zou dit relatief eenvoudig moeten zijn. U kunt meer leren over Grouping in Inkscape dankzij een handige tutorial die hier op Tuts is gemaakt+. Click-drag elk stuk om ze te regelen hoe je wilt.
Ik lijn ook de randen van objecten uit op de buitenkant van het vel. Hoewel computers nu zo snel zijn dat je het misschien niet te veel opvalt, is het altijd beter om op te slaan wat je kunt en het werkblad zo klein mogelijk te maken. Open je richten menu (Shift-Control-A) en zorg ervoor Ten opzichte van is ingesteld op de Laatst geselecteerd in plaats van de pagina, omdat de objecten worden geëxporteerd en niet de pagina.
Dit betekent dat het eerste object en alle daaropvolgende geselecteerde objecten worden uitgelijnd op basis van de positie van het laatst geplaatste object.
De uitlijning hoeft niet perfect te zijn. Hier probeer je alleen maar de witte ruimte zoveel mogelijk te verkleinen, en uitlijnen is een gemakkelijke manier om dat te doen. Het belangrijkste is om ervoor te zorgen dat een object het blad niet meer uitbreidt dan nodig is.
Verpak het vel zo strak mogelijk. Er zijn programma's om dit te doen, maar velen vinden het sneller om het gewoon in Inkscape op te nemen.
Als u er echter liever een gebruikt (of al elke afbeelding afzonderlijk hebt geëxporteerd voor gebruik in andere game engines), kunt u Texture Packer hier downloaden:
Het is gratis beschikbaar voor Mac, Windows en Linux!
Sla het blad op als een apart bestand, nogmaals zodat je de originele compositie hebt (je zou ze ook beide in hetzelfde bestand kunnen bewaren als je dat zou willen).
U zult merken dat de ogen onnodig ver uit elkaar lijken voor textuurverpakking. Dit komt omdat ik ervoor heb gekozen om ze als één object te behandelen in plaats van dat elk oog onafhankelijk werkt. Je kunt dit doen en ze dan nog steeds als afzonderlijke ogen in eenheid splitsen.
Selecteer alle objecten tegelijk door op het hele gebied te klikken en te slepen alsof u ze allemaal in een doos probeert te plaatsen (zie onderstaande afbeelding).
Nu om uw blad te exporteren! kiezen Bestand> Exporteren (Shift-Control-E). U kunt het blad exporteren naar een formaat dat aan uw behoeften voldoet, maar ik heb het net zo lang bewaard als het formaat waarmee ik begon in Inkscape.
U kunt de bestandsnaam in het vak bestandsnaam bewerken, zodat het iets herkenbaars is. Anders wordt het door Inkscape genoemd als de laatste pad of groep die was geselecteerd (bijv. g720.png).
Mogelijk merkt u het Batch-exportobjecten keuze. Je kunt eigenlijk alles gewoon exporteren als zijn eigen bestand op deze manier, maar onthoud dat de vorm die het is in Inkscape de geëxporteerde grootte is, dus je moet het misschien handmatig aanpassen.
Opmerking: er is momenteel een bug in Inkscape. Als u het bestand een naam geeft wanneer alle objecten zijn geselecteerd en u probeert om te exporteren, exporteert het alleen het laatste object omdat ze nu allemaal hetzelfde heten.
Als u nu naar het geëxporteerde bestand kijkt, ziet u het blad met transparantie.
Voor dit deel van de tutorial ga ik ervan uit dat je weet hoe je Unity kunt openen en een project kunt starten. Als u niet bekend bent met Unity, is er op de Unity-website voldoende documentatie voor beginners. Ik ga het proces van het verkrijgen van een sprite sheet in Unity uitleggen en het verknippen voor gebruik in een game.
Open uw project en zorg ervoor dat uw editor in de 2D-modus staat (om dingen gemakkelijker te maken) door naar Bewerken> Projectinstellingen> Editor en selecteren 2D als de Standaard Gedragsmodus.
Sleep het sprite-blad van je Bestandsverkenner in jouw Middelen map.
Selecteer het sprite-blad en open de Inspector via Venster> Inspecteur (Control-3).
Verander de Sprite-modus naar Meerdere. Hiermee kunt u de spriteditor openen.
Ware kleur is een goede keuze voor de Formaat zoals het het beste is voor mooie, schone beelden, vooral als het gaat om sprites met pixelkunst. Uw andere instellingen kunnen afhankelijk zijn van het individuele project.
Open de Sprite Editor.
U hebt ook toegang via de Inspecteur Klik Plak. Normaal zou ik gewoon kiezen automatisch en laat het zoals het is, maar ik kan dat in dit geval niet doen omdat het de ogen in twee delen zou splitsen, zoals zo:
Klik op een van de selectievakjes en om dit te verhelpen Verwijder het. Strek nu het andere begrenzingsvak uit om zowel ogen als klik op te nemen Van toepassing zijn.
Als u een doos verliest of een nieuwe moet maken omdat deze niet goed is gesneden, klik en sleep in een lege ruimte.
Klik terugkeren om wijzigingen ongedaan te maken die u niet hebt toegepast. Je kunt ook opmerken dat het vak rechtsonder een plaats heeft om elk stuk te noemen. Dit is erg belangrijk voor de organisatie, alsof je een van de sprites naar het scherm sleept, ze krijgen automatisch een naam, ongeacht de Naam vak geeft aan. Een andere parameter die u hier kunt aanpassen, is spil die het belangrijkste ankerpunt van de sprite aangeeft. Wanneer u de sprite in de animator roteert, draait deze rond dit punt.
Pas alle draaipunten aan naar waar je wilt klikken en slepen de cirkel in het midden van elke sprite, of door ze handmatig in te typen in de Draai het veld.
Klik Van toepassing zijn wanneer klaar. Nu kunt u al uw sprites zien als afzonderlijke objecten in de Project> Activummap.
Nu kunnen we de stukjes naar de scène slepen om te maken Game-objecten. Laten we eerst een lege maken Spelobject (Control-Shift-N) en noem het "Octopus".
Klik op de Game-object in de Hiërarchie en ga naar de Inspecteur om het te hernoemen.
Nu kunt u de andere lichaamsdelen naar de Octopus slepen Game-object in de Hiërarchie en rangschik ze zoals je wilt, maar zorg ervoor dat ze gecentreerd zijn over het lege Game-object.
Er is een klein probleem ... Zoals je misschien hebt gemerkt, zijn de tentakels van de octopus niet helemaal in de volgorde waarin we ze willen hebben. We kunnen dit oplossen Lagen sorteren in de Inspecteur. Normaal gesproken zou ik een nieuwe sorteerlaag voor de Octopus kunnen maken, maar voorlopig laat ik hem gewoon staan en pas ik de cijfers aan.
Hoe hoger het nummer, hoe dichter het object bij de camera ligt. Laten we nu een testscène en het project opslaan (Bestand> Scene opslaan). Eenheid kan vastlopen als je begint met dieper ingrijpen, dus ik raad aan om vaak te sparen.
Omdat ik geen echt spelproject maak, noem ik deze "testscene" voorlopig alleen maar. Dit personage heeft nog geen animaties, dus het is nauwelijks "game ready". De animator in Unity is buitengewoon krachtig, maar er is een beetje een leercurve!
Het is goed voor kunstenaars om te weten hoe hun kunst eruit zal zien in de engine en hoe ze kunnen worden geanimeerd om grafische afbeeldingen geschikt te maken voor game-ontwikkeling. Het is de moeite waard om op te merken dat zelfs nadat u tot dit punt bent gekomen, u uw blad eenvoudig kunt bijwerken en terugzetten in de activamap (Unity standaard naar uw projectmap in "Documenten") en het spel zal automatisch worden bijgewerkt. Houd er rekening mee dat als u de grootte van de sprite op wat voor manier dan ook wijzigt, zelfs als u "extra's" toevoegt, moet u het blad mogelijk opnieuw snijden.
