Introduction to Pixel Art for Games

leer pixelkunst door dit coole karakter te maken!

Dit is een gastpost van Glauber Kotaki, een ervaren 2D-spelartiest die te huur is.

Pixel Art is erg populair in games deze dagen, en om een aantal goede redenen:

  1. Looks. Pixel art ziet er geweldig uit! Er is iets te zeggen over het maken van het meeste over elke pixel in een sprite.
  2. Nostalgie., Pixel art brengt een groot nostalgisch gevoel terug voor gamers die opgroeiden met het spelen van Nintendo, Super Nintendo of Genesis (zoals ikzelf!)
  3. Leergemak. Pixel art is een van de makkelijkste vormen van digitale kunst om te leren, vooral als je een meer van een programmeur type dan een kunstenaar ;]

dus wil je proberen je hand op een aantal pixel art? Volg samen met mij En Ik zal je laten zien hoe je een eenvoudige maar cool spel karakter dat u kunt gebruiken of tweaken in je eigen games te maken!,

en als bonus, nadat ik je heb laten zien hoe je het personage maakt, zal Ray je laten zien hoe je het kunt integreren in een iPhone spel!

om samen met deze tutorial te volgen, hebt u Adobe Photoshop nodig. Als u geen Photoshop hebt, kunt u een gratis proefversie downloaden van Adobe.

Lees verder om enkele pixels te pushen!

Wat Is Pixel Art?

voordat we beginnen, laten we heel duidelijk zijn over wat pixelkunst is – het is niet zo voor de hand liggend als je zou denken., Het is ook een kwestie van enige discussie en stijl, maar houd rekening met deze definitie omwille van deze tutorial :]

De makkelijkste manier om pixelkunst te definiëren is door te zeggen wat geen pixelkunst is: dat wil zeggen, alles wat pixels genereert is geen pixelkunst. Hier zijn enkele voorbeelden:

gradiënt

gradiënten: twee kleuren kiezen en die tussen hen berekenen in een ruimte-interval. Ziet er cool uit, maar geen pixel kunst!,

vervagen

vervagen hulpmiddelen: de pixels identificeren en repliceren/bewerken om een nieuwe versie van de vorige afbeelding te maken. Opnieuw niet pixel art.

Anti-alias

Anti-alias tool (in principe, het genereren van nieuwe pixels in verschillende kleuren om iets ‘gladder’te laten lijken). Je moet ze nu vermijden.,

sommigen zouden zeggen dat zelfs automatisch gegenereerde kleuren ook geen pixelkunst zijn, wat impliceert dat layer blending effecten (het mengen van pixels tussen twee lagen in een vooraf ingesteld algoritme) niet zijn toegestaan. Maar aangezien de meeste hardware tegenwoordig kan omgaan met miljoenen kleuren, dit kan genegeerd-nog steeds, het gebruik van minder kleuren is een goede praktijk van pixel art.

Andere hulpmiddelen zoals het lijngereedschap of het paint bucket-Gereedschap genereert ook automatisch pixels, maar omdat u ze kunt configureren om geen anti-alias te zijn, worden hun randen, waardoor u controle hebt over elke pixel die ze vullen, beschouwd als ‘pixel art friendly’.,

uiteindelijk draait pixelkunst om het zorgvuldig plaatsen van elke pixel in een sprite, meestal handmatig en met een beperkt kleurenpalet. Laten we het proberen!

aan de slag

voordat u begint met het maken van uw eerste pixel art-asset, moet u zich ervan bewust zijn dat pixel art niet gemakkelijk van grootte kan worden veranderd. Als je probeert het te verkleinen, zal het eruit zien als een puinhoop. Als je probeert het op te schalen, kan het er OK uitzien zolang je een veelvoud van twee gebruikt (maar zal natuurlijk meer pixelated zijn).,

om dit probleem te voorkomen, moet je eerst nadenken over hoe groot je spel karakter/vijand/spel element moet zijn voordat je begint. Dit moet worden gebaseerd op de schermgrootte van het apparaat dat u targeting, en hoe groot u wilt dat de “pixels” te kijken.

bijvoorbeeld, laten we zeggen dat je wilt dat het spel er dubbel zo groot uitziet op een iPhone 3GS (“Ik wil echt een retro, pixel look geven aan mijn spel!”), die resolutie is 480×320 pixels. Dan is uw werkresolutie de helft van die grootte, of 240×160 pixels.,

Open een nieuw canvas op Photoshop (bestand > nieuw…) en stel dezelfde grootte in zodat u er naar kunt kijken en de grootte voor uw karakter kunt kiezen.

daar: 32×32 pixels!

Ik koos 32 × 32 pixels niet alleen omdat het goed genoeg lijkt voor deze resolutie, maar 32×32 pixels is ook een macht van 2, wat ook handig kan zijn voor game-engines(tegelgroottes zijn vaak een macht van twee, texturen zijn opgevuld tot een macht van twee, enz.,)

Tip: zelfs als de game-engine die u gebruikt elke afbeeldingsgrootte accepteert, is het toch een goede gewoonte om even aantal afbeeldingsafmetingen te gebruiken. Op deze manier, als het beeld ooit moet worden geschaald, zullen de afmetingen duidelijker worden verdeeld wat resulteert in een betere look.

het maken van uw eerste teken

Pixel art is bekend, op zijn beste vorm, voor zijn scherpe en gemakkelijk te lezen graphics: U kunt het karakter gezicht, ogen, haar, lichaamsdelen identificeren met slechts een paar pixels., Echter, de ontwikkelaar grootte is veel ingewikkelder: hoe kleiner je karakter is, hoe moeilijker het is om alles te passen.

om dingen praktischer te maken, Kies wat het kleinste, leesbare ding op het teken zal zijn. Ik kies altijd de ogen, omdat ze (magisch) een van de beste manieren zijn om leven te geven aan een personage.

kies in Photoshop het Potloodgereedschap. Als u het niet kunt vinden, houdt u het penseelgereedschap ingedrukt en scroll naar beneden naar Potloodgereedschap (dit zou de tweede moeten zijn)., U hoeft alleen maar de grootte van het penseel te wijzigen tot penseelgrootte 1 (U kunt op de balk gereedschapsopties klikken en de grootte wijzigen of gewoon de ‘

een nieuw project aanmaken met de iOS\cocos2d v2.x \ cocos2d iOS-sjabloon, noem het PixelArt en selecteer iPhone voor de apparaatfamilie.

sleep het uiteindelijke pixelkunstkarakter dat u hebt gemaakt naar uw project.

open dan HelloWorldLayer.m en vervang de init methode met het volgende:

we positioneren de sprite naar de linkerkant van het scherm en draaien hem om zodat hij naar rechts kijkt.,

compileer en voer uit, en je ziet je sprite zoals verwacht op het scherm:

echter, zoals we eerder in deze tutorial hebben besproken, wilden we de kunst kunstmatig groot maken, zodat de individuele pixels echt zichtbaar zijn om een extra-blocky koele pixel art feel te geven.

dus voeg deze extra regel toe binnen de init methode:

hero.scale = 2.0;

Easy, right? Compileren en uitvoeren en … wacht even, onze sprite is wazig!

Dit komt omdat Cocos2D anti-aliassen standaard art wanneer het schaalt., Voor pixelkunst willen we dat niet – we willen de harde randen behouden.

gelukkig is dit vrij eenvoudig op te lossen! Voeg gewoon deze extra regel toe:

;

Dit configureert Cocos2D om de afbeelding te schalen zonder anti-aliasing, zodat het er nog steeds “pixelachtig” uitziet.”Compileren en uitvoeren en w00t-het werkt!

merk het voordeel op van het gebruik van pixelkunst – we konden een kleinere afbeeldingsgrootte gebruiken dan wat daadwerkelijk op het scherm wordt weergegeven, waardoor veel textuurgeheugen werd bespaard., En we hoeven zelfs geen aparte beelden voor het Retina-display te bieden, omdat we die blokachtige look willen!

dat is het voor mij-terug naar Glauber, wie zal het afronden!

waar moet ik nu naartoe?

Ik hoop dat jullie allemaal genoten hebben van deze tutorial en wat meer geleerd hebben over pixelkunst!

voordat we gaan, hier zijn enkele laatste tips:

  • onthoud altijd om het gebruik van anti-alias, kleurverlopen of te veel kleuren voor uw activa te vermijden. Dit is voor je eigen bestwil, tenzij je echt weet wat je doet.,
  • als je echt een retro stijl wilt emuleren, zoek dan naar kunst van oude consoles met beperkingen, zoals 8-bit of 16-bit consoles.
  • Er zijn tal van stijlen in pixel art afgezien van de ‘retro’. Als hardware geavanceerd, activa kunnen meer of gewoon anders (sexier!) kleur. Dit leidde tot meer variatie en zelfs nieuwe artiesten die niet wisten hoe ze oudere hardware moesten gebruiken om pixelkunst te maken. Nieuwere consoles zoals Game Boy Advance, Nintendo DS, Playstation 1 en sommige mobiele telefoons hebben games met deze stijlen, dus kijk naar die!,
  • sommige stijlen gebruiken geen donkere omtrekken; andere gebruiken zelfs geen lichte of schaduwvariatie. Het hangt af van de stijl! Weten hoe je de kunst schaduw is goed, dat is waarom we gingen door het in deze tutorial, maar houd in gedachten de stijl die je gaat voor.
  • als u zeker bent, kunt u meer gedetailleerde tutorials zoeken naar deze termen: isometrisch, dithering, anti-alias (Ja, Er is een manier om het te maken zonder automatische hulpmiddelen), celout en subpixel animatie.,

Pixel Art lijkt makkelijk te nagelen omdat het gemakkelijk is om te beginnen, maar het is eigenlijk erg veeleisend en duurt enige tijd om het onder de knie te krijgen en goede pixel art te maken.

de beste manier om je vaardigheden te verbeteren is om te oefenen, oefenen, oefenen-en wat feedback te krijgen van collega pixelartiesten!

Ik beveel het plaatsen van je werk in pixel art forums aan zodat andere artiesten je advies geven – een geweldige manier om je techniek te verbeteren! Begin klein, oefen veel en krijg feedback, en je kunt geweldige game-ready pixel art maken!,

als je vragen hebt over pixel art, neem dan deel aan de forumdiscussie hieronder – en ik hoop in de toekomst wat geweldige pixel art van jullie te zien! :]

Dit is een gastpost van Glauber Kotaki, een ervaren 2D – spelartiest die te huur is.

raywenderlich.com wekelijks

De raywenderlich.com nieuwsbrief is de makkelijkste manier om op de hoogte te blijven van alles wat u als mobiele ontwikkelaar moet weten.

ontvang een wekelijkse samenvatting van onze tutorials en cursussen, en ontvang een gratis uitgebreide e-mail cursus als bonus!,

gemiddelde waardering

4.8 / 5

voeg een waardering toe voor deze inhoud

Meld u aan om waardering

18 beoordelingen

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *