Share
Wat je gaat creërenVeel game-ontwikkelaars zijn eerst programmeurs en artiesten als tweede. Of je nu pixelkunst gebruikt omdat je de 'retro'-look prefereert, of je hebt gewoon niet de tijd of ervaring om je kunst naar een hoger niveau te tillen, dit simpele effect kan de visuele aantrekkingskracht van je game enorm vergroten.
Deze afgeschuinde pixelstijl wordt bereikt door eerst je 1: 1 pixelart te vergroten met behoud van de originele beeldverhouding. Vervolgens kunt u, via een zeer eenvoudig proces dat kan worden toegepast tijdens het maken van items of tijdens runtime, uw standaardpixeldiagram omzetten in iets dat er geweldig uitziet, zelfs bij HD-resoluties. Het effect is zo eenvoudig dat het in bijna elke programmeertaal, ontwikkelomgeving en engine kan worden toegepast. In deze tutorial zal ik je schuine pixels op zo'n manier voorstellen dat je dit effect met vertrouwen kunt implementeren in je eigen game-project.
Dus wat is precies een afgeschuind pixel? Een enkele pixel is het kleinste grafische element dat wordt gebruikt om kunst in digitale vorm weer te geven, dus in zekere zin kun je pixels zien als 2D-bouwstenen. Een afgeschuind pixel breidt alleen maar uit met dat bouwsteenconcept door kunstmatige diepte in te voeren.
Dingen worden een beetje verwarrend wanneer je je realiseert dat afgeschuinde pixels zijn samengesteld uit meerdere 'gewone' pixels, maar het is eigenlijk niet zo dichtbij als ingewikkeld als het lijkt. Om het proces volledig te begrijpen, beginnen we vanaf het begin met een basiskennis van pixels.
Laten we eerst de pixelafmetingen en -verhoudingen bespreken. De bovenstaande afbeelding toont dezelfde sprite in de oorspronkelijke grootte en vervolgens helemaal vergroot tot vijf keer die grootte. Voor elke vergroting neemt ook de oorspronkelijke bouwsteen van de pixel toe. Wanneer een standaardpixel vijf keer wordt vergroot (500%), wordt het een 5x5 pixelsblok. Nu blijft er een sprite achter die een beeldverhouding van 1: 5 heeft. Dit getal betekent simpelweg dat elke 1x1 pixel in de originele sprite nu wordt weergegeven door een blok van 5x5 pixels. De volledige sprite, oorspronkelijk 14 x 15 pixels, is nu 70 x 75 pixels groot.
Nu onze sprite is samengesteld uit veel grotere pixelblokjes, kunnen we zien hoe afgeschuinde pixels werken.
De bovenstaande afbeelding toont dezelfde sprite met behulp van standaardpixels aan de linkerkant en afgeschuinde pixels aan de rechterkant. Met standaardpixels bestaat elk blok van 5x5 uit dezelfde kleur. In het afgeschuinde pixelvoorbeeld kunnen we zien dat het 5x5-blok nu uit meerdere verschillende tinten van dezelfde kleur bestaat.
Het eerste vierkant in elke versie is het 5x5 pixelblok dat de standaard 1x1 pixel in het originele beeld vertegenwoordigt. De tweede reeks vierkanten is een vergrote versie van dit blok van 5x5 om de samenstelling van het afgeschuinde pixelblok te tonen. Deze pixels zijn zo gerangschikt dat ze de illusie van diepte geven, met hooglichten in de rechterbovenhoek van het 5x5 blok en schaduwen in de linkerbenedenhoek. Wanneer gecombineerd om de uiteindelijke afbeelding te maken, resulteert dit in een sprite die lijkt te bestaan uit kleine, afgeschuinde blokken, in plaats van platte, 2D pixels.
Nu u de basisprincipes van afgeschuinde pixels begrijpt, laten we in het kort samenvatten hoe dit effect wordt bereikt.
Eerst moet je bepalen of je dit effect tijdens runtime in je eigenlijke spel gaat implementeren of je kunstactiva met afgeschuinde pixels "ingebakken" wilt genereren. In beide gevallen wordt het afgeschuind pixeleffect op ongeveer dezelfde manier bereikt.
U begint met het maken van een schuine sprite die dezelfde dimensie heeft als uw uiteindelijke vergrote sprite-blok. Als uw uiteindelijke kunstwerk bijvoorbeeld 1: 4 is (vier keer vergroot), dan maakt u een schuine blok met 4 x 4. Deze schuine kant wordt vervolgens bovenop het vergrote sprite- of gamevenster toegepast en herhaald om het hele scherm te vullen. Door rond te spelen met overvloeimodi en dekking, kunt u verschillende resultaten bereiken.
Ik zal later beide methoden gedetailleerder behandelen, maar we moeten nu aandacht besteden aan enkele kritische regels en richtlijnen.
Hoewel dit effect eenvoudig kan worden bereikt door een eenvoudige overlay toe te passen, zijn er verschillende belangrijke dingen die kunnen voorkomen dat de afgeschuinde pixels correct worden uitgelijnd.
Het meest voor de hand liggende probleem is de sprite-afmeting versus de afkanting van de schuine overlapping. Al uw bedrijfsmiddelen moeten de vergrotingsverhouding volgen die wordt bepaald door de grootte van uw afschuiningblok, of de schuine lijnen zullen niet consistent zijn.
Het is ook belangrijk om de grootte van je gamevenster te bepalen voordat je een van je items vergroot. Als je gamevenster 640x480 px is en je een 4x4-afschuining (verhouding 1: 4) wilt gebruiken, moeten je originele items zijn ontworpen op 160 x 120 pixels. Denk er bij het vergroten van kunstitems aan dat alles 'X' keer groter moet zijn dan de oorspronkelijke grootte, waarbij 'X' een geheel getal is.
Elke verandering in de gameweergave of individuele sprite-positionering moet ook zorgvuldig worden overwogen bij het proberen om de schuine overlay te tekenen. Dit brengt ons bij de belangrijkste regel om te volgen:
Netwerkbeweging is verplicht! In de bovenstaande afbeelding hebben we een correct voorbeeld van een beweging op basis van een raster aan de linkerkant en een onjuist voorbeeld aan de rechterkant. Omdat de oorspronkelijke items vier keer zijn vergroot, moeten alle verticale en horizontale bewegingen naar een 4x4-raster worden geknipt. De sprite van de kat, rechts, heeft één pixel naar rechts en één pixel naar beneden verplaatst, waardoor de sprite de stroom even schuine blokken heeft verbroken.
Dat was een voorbeeld van een afgeschuind pixeleffect dat werd 'ingebakken' bij de activa. In het volgende voorbeeld ziet u wat er gebeurt als u de op rasters gebaseerde beweging niet volgt terwijl u het effect implementeert runtime:
U ziet hoe de overlappende pixeloverlay enigszins verkeerd is uitgelijnd over de gehele afbeelding. Dit komt omdat de schuine overlay het volledige gamevenster bedekt en niet beweegt, terwijl de spritten eronder bewegen maar niet snappen naar het 4x4-raster. Onthoudt dat allemaal in-game beweging moet zich aanpassen aan het raster dat wordt bepaald door de grootte van je schuine kant, wat wordt bepaald door je vergrotingsverhouding.
Ja, het is logischer om dit effect te implementeren in uw spelcode in plaats van tijdens het maken van items. Door dit effect tijdens het maken van items toe te passen, hebt u echter meer vrijheid om snel te experimenteren en de perfecte stijl te vinden die bij uw project past. U kunt verschillende overlays toepassen met verschillende overvloeistijlen, de verzadiging en het contrast van uw onderliggende kunst aanpassen en kleuren vervangen om precies het juiste evenwicht te vinden voordat u uw definitieve look kiest..
Dit is een vergroot voorbeeld van een 6x6 afschuiningblok. Je wilt je schuine kanten op een transparante achtergrond houden, maar ik heb hier blauw gebruikt, zodat je het verschil in dekking kunt zien.
Om dit schuine blok te maken, ben ik begonnen met een canvas dat past bij mijn beoogde uiteindelijke afmeting. In dit specifieke voorbeeld heb ik een 6x6-afbeelding gemaakt die bedoeld is voor 1: 6 pixelart (600% vergroting). Vervolgens begon ik met een borstel van één pixel in de linkerbenedenhoek en paste ik drie pixels zwart toe met een dekking van 75%. Toen ik van de hoek wegging, verminderde ik de dekking van mijn penseel tot 50% en uiteindelijk tot 25%. Ik heb toen dezelfde techniek gespiegeld, maar dan met wit, te beginnen in de linkerbovenhoek.
Met veel algemene hulpmiddelen, zoals Photoshop en GIMP, kunt u aangepaste patronen maken en definiëren. Dit is de snelste en gemakkelijkste manier om het volledige canvas te vullen met een afgeschuinde pixeloverlay. Voor het bovenstaande voorbeeld heb ik de blauwe achtergrond verwijderd en het afschuiningsblok als een patroon opgeslagen. Nu, wanneer ik deze overlay op mijn kunst wil toepassen, hoef ik alleen maar het verfemmer-gereedschap te gebruiken om het patroon op de bovenste laag te laten vallen.
Nadat u een aantal aangepaste schuine blokpatronen hebt gedefinieerd, kunt u beginnen met het experimenteren met verschillende stijlen. Hierboven hebben we vier verschillende schuine stijlen toegepast op dezelfde afbeelding. Merk op hoe subtiele veranderingen in de constructie en dekking van de verschillende schuine kanten de vorm en de levendigheid van de resulterende sprites sterk kunnen veranderen. Experimenteer met verschillende grootten en stijlen om het type schuine rand te vinden dat uw pixelkunst complimenteert.
De verschillende overvloeimodi die de meeste tekengereedschappen bieden, kunnen ook resulteren in drastisch verschillende effecten.
In de bovenstaande afbeelding wordt dezelfde afschuining toegepast met behulp van drie verschillende overvloeimodi. De standaard Overlay-modus creëert een zeer opvallend en levendig beeld, met een intens contrast tussen de lichte en donkere gebieden van de schuine kant. De modus Kleur branden dempt de lichte delen van de afschuining volledig, waardoor een bijna driehoekige en onsamenhangende afschuining ontstaat. De modus Zacht licht is perfect voor gedempte kleuren, waardoor er een minder uitgesproken afgeschuinde rand ontstaat.
In plaats van het invoegen van elementen in uw game waarin dit effect is ingebakken, kunt u in plaats daarvan de afgeschuinde pixeloverlay tijdens runtime genereren. Dit zal resulteren in een game die veel meer schaalbaar en aanpasbaar is als je ooit besluit om de assets, roosterbeweging of gamevenster later te veranderen.
Hoewel ik u niet precies kan vertellen hoe u dit effect in uw specifieke project kunt implementeren, kan ik u zeker in de juiste richting wijzen. De meeste game-IDE's hebben de algemene functionaliteit die vereist is voor dit effect, dus u zou geen problemen moeten hebben met het integreren van een afgeschuinde pixeloverlay in uw project. Flash- en ActionScript-gebruikers kunnen bijvoorbeeld ColorMatrixFilter gebruiken om overvloeimodi toe te passen op de schuine overlapping en gebruikers van Game Maker kunnen de ingebouwde voorgrondhulpmiddelen gebruiken, of zelfs een speciaal afgeschuind overlay-object maken dat rust op een specifieke laag boven de kunst middelen.
Eerst moet u beslissen hoe u de initiële asset-uitbreiding gaat aanpakken. Ik raad aan om pixelafbeeldingen van 1: 1 te gebruiken en alles te schalen voordat u het op het scherm tekent, en vervolgens de overlappende overlay toe te passen als een nabewerkingseffect.
Ten tweede zou je moeten nadenken over het maken van een debug-menu waarmee je verschillende schuine maten en overvloeimodi kunt testen. Je weet nooit hoe verschillende kleuren en bewegingen op bepaalde schuine overlays zullen reageren, dus speel het veilig en experimenteer met zoveel combinaties als je kunt. Misschien is het tijdens bepaalde scènes van je game nodig om de dekking of de overvloeimodus te wijzigen, zodat het echt handig kan zijn om deze in realtime te testen.
Je moet ook plannen hoe je de HUD of GUI voor je spel gaat gebruiken. Wilt u dat deze elementen boven of onder de afgeschuinde pixeloverlay zitten??
Het afgeschuind pixeleffect toegepast op een paar bekende old-school games.Dit effect is een prachtige manier om je gamekunst te verfraaien zonder dat je complexe algoritmen, shaders of een waanzinnig getalenteerde artiest nodig hebt. Ben je gehaast voor tijd in een game jam? Dit is een snelle en gemakkelijke manier om een beetje extra visuele glans aan uw werk toe te voegen.
Het meest waardevolle aspect van dit effect is echter dat het je aanmoedigt om je handen vuil te maken en te experimenteren, wat je ongetwijfeld zal leiden naar een reeks andere ontdekkingen onderweg.
Accentsconagua