Nederlandse Game Maker Community

Games => Resources => Topic gestart door: Ceymoonie op 6 Juli 2014, 16:36:21



Titel: Tips voor 8-bit/pixel spriten en animeren.
Bericht door: Ceymoonie op 6 Juli 2014, 16:36:21
Hey NGMC :),
Voor een project wil ik alles in een 8-bit/pixel style maken. Het probleem is nu; ik weet niet hoe ik dat het beste kan aanpakken.
Voorbeeld:
(http://fc07.deviantart.net/fs38/f/2008/326/a/6/a63f18905511c6be3558194e17f0191e.png)
En hoe kan ik de vecht animaties dan het beste maken?
Alvast bedankt voor iedereen die hier reageert :).

Mvg. Casper.


Titel: Re: Tips voor 8-bit/pixel spriten en animeren.
Bericht door: ShroomProductions op 6 Juli 2014, 16:53:10
Ik verwijs best vaak naar deze site, dit keer ook weer:
http://gas13.ru/v3/tutorials/sywtbapa_world_of_sprites.php (http://gas13.ru/v3/tutorials/sywtbapa_world_of_sprites.php)

Hier heb je waarschijnlijk ook wel wat aan
http://natomic.com/hosted/marks/mpat/index.html (http://natomic.com/hosted/marks/mpat/index.html)

Verder zul je iets specifieker moeten aangeven waar je moeite mee hebt als je meer uitleg/hulp nodig hebt ;)



Titel: Re: Tips voor 8-bit/pixel spriten en animeren.
Bericht door: Ceymoonie op 6 Juli 2014, 19:23:49
Ik verwijs best vaak naar deze site, dit keer ook weer:
http://gas13.ru/v3/tutorials/sywtbapa_world_of_sprites.php (http://gas13.ru/v3/tutorials/sywtbapa_world_of_sprites.php)

Hier heb je waarschijnlijk ook wel wat aan
http://natomic.com/hosted/marks/mpat/index.html (http://natomic.com/hosted/marks/mpat/index.html)

Verder zul je iets specifieker moeten aangeven waar je moeite mee hebt als je meer uitleg/hulp nodig hebt ;)


Bedankt :), die eerste link kende ik inderdaad al, maar die tweede nog niet.
Ik denk dat waar ik het meeste moeite mee heb is de shading, wat is het mmoste voor 8-bit look sprites? Want er zijn blijkbaar heel veel manieren van shading :s.


Titel: Re: Tips voor 8-bit/pixel spriten en animeren.
Bericht door: ShroomProductions op 6 Juli 2014, 19:39:01
'Echte' 8 bit sprites (denk aan spellen voor de NES) hebben vaak weinig of helemaal geen shading omdat er gewoon niet genoeg kleuren gebruikt konden worden in een spel om nog tinten over te hebben voor verschillende shades. Vaak werd ook om deze reden dithering (http://kitted.deviantart.com/art/DITHERING-TUTORIAL-Basics-69747353) gebruikt om te besparen op kleuren.

16 bit sprites (denk aan Super Nintendo spellen) hadden dit probleem al een stuk minder, en hier zie je dan ook dat er meestal veel meer shading wordt toegepast, en de sprites een stuk kleurrijker zijn.

Vergelijk die 8 bit NES Mega Man in jouw beginpost maar eens met de 16 bit versie:
(http://www.one-quest.com/wp-content/uploads/2013/10/megamanx.jpg)
Eigenlijk het enige stukje shading op de 8 bit versie is de highlight op zijn hand/wapen (en dat is gewoon dezelfde tint als de rest van zijn pak), terwijl de 16 bit versie volledig is voorzien van shading.


Titel: Re: Tips voor 8-bit/pixel spriten en animeren.
Bericht door: Lucas De Smet op 6 Juli 2014, 23:58:03
De kleuren die de NES ondersteund:
(http://dev.bowdenweb.com/nes/a/i/nes-color-palette.png)


Titel: Re: Tips voor 8-bit/pixel spriten en animeren.
Bericht door: Ceymoonie op 7 Juli 2014, 11:14:39
'Echte' 8 bit sprites (denk aan spellen voor de NES) hebben vaak weinig of helemaal geen shading omdat er gewoon niet genoeg kleuren gebruikt konden worden in een spel om nog tinten over te hebben voor verschillende shades. Vaak werd ook om deze reden dithering (http://kitted.deviantart.com/art/DITHERING-TUTORIAL-Basics-69747353) gebruikt om te besparen op kleuren.

16 bit sprites (denk aan Super Nintendo spellen) hadden dit probleem al een stuk minder, en hier zie je dan ook dat er meestal veel meer shading wordt toegepast, en de sprites een stuk kleurrijker zijn.

Vergelijk die 8 bit NES Mega Man in jouw beginpost maar eens met de 16 bit versie:
(http://www.one-quest.com/wp-content/uploads/2013/10/megamanx.jpg)
Eigenlijk het enige stukje shading op de 8 bit versie is de highlight op zijn hand/wapen (en dat is gewoon dezelfde tint als de rest van zijn pak), terwijl de 16 bit versie volledig is voorzien van shading.
Bedankt :).
De kleuren die de NES ondersteund:
(http://dev.bowdenweb.com/nes/a/i/nes-color-palette.png)
Dat wist ik idd, vandaar die /pixel :angel:.



Ik zat er aan te denken om het simpel te houden zoals mijn normale style:
(http://g2f.nl/0pr53k3)
Alleen lijkt het of ie zo staat:
(http://g2f.nl/0jotilh)
Is dat op te lossen :question:?

Mvg. Casper.


Titel: Re: Tips voor 8-bit/pixel spriten en animeren.
Bericht door: Ruk op 7 Juli 2014, 13:16:55
Probeer zijn hoofdje eens en klein beetje naar rechts te laten draaien, hetzelfde geld voor de voetjes.
Het linkerarmpje kun je zo laten, het rechter-armpje verschuif je ietsjes naar links. Of bedoelde je dat niet?

Ook is het altijd wel handig om te kijken hoe andere mensen het doen, dus veel referentiemateriaal zoeken en shit na proberen te doen, niet passief door hersenloos over te tekenen, maar actief door erbij na te denken en jezelf vragen te stellen. Net zoals je in je begin post deed door mega-man als referentie te gebruiken :D


Titel: Re: Tips voor 8-bit/pixel spriten en animeren.
Bericht door: Ceymoonie op 7 Juli 2014, 13:36:17
Probeer zijn hoofdje eens en klein beetje naar rechts te laten draaien, hetzelfde geld voor de voetjes.
Het linkerarmpje kun je zo laten, het rechter-armpje verschuif je ietsjes naar links. Of bedoelde je dat niet?

Ook is het altijd wel handig om te kijken hoe andere mensen het doen, dus veel referentiemateriaal zoeken en shit na proberen te doen, niet passief door hersenloos over te tekenen, maar actief door erbij na te denken en jezelf vragen te stellen. Net zoals je in je begin post deed door mega-man als referentie te gebruiken :D
Bedankt :).
Als ik het goed begrijp beschrijf je aan het begin hoe je hem naar links kan laten kijken. Dat was niet mijn vraag, maar toevallig had ik daar net problemen mee :p.

Ik kijk eigenlijk met al mijn sprites op Google naar inspiratie :).

Dit heb ik nu:
(http://puu.sh/a0wM8/5546cfd60d.png)
Heeft iemand nog tips :)?

Mvg. Casper.


Titel: Re: Tips voor 8-bit/pixel spriten en animeren.
Bericht door: ShroomProductions op 7 Juli 2014, 13:58:09
Probeer ze eens een wat interessantere houding te geven. Kaarsrechte lijnen kun je het beste proberen te vermijden (en dat is soms best lastig)

Mijn poging:
(http://i62.tinypic.com/24v0dxj.png)


Titel: Re: Tips voor 8-bit/pixel spriten en animeren.
Bericht door: Ceymoonie op 7 Juli 2014, 15:15:52
Probeer ze eens een wat interessantere houding te geven. Kaarsrechte lijnen kun je het beste proberen te vermijden (en dat is soms best lastig)

Mijn poging:
(http://i62.tinypic.com/24v0dxj.png)
Bedankt :).
Mag ik die outline gebruiken als basis?
En wil je daar credits voor?


Titel: Re: Tips voor 8-bit/pixel spriten en animeren.
Bericht door: ShroomProductions op 7 Juli 2014, 16:12:14
Citaat
Mag ik die outline gebruiken als basis?
Ja hoor
Citaat
En wil je daar credits voor?
Nope


Titel: Re: Tips voor 8-bit/pixel spriten en animeren.
Bericht door: Ceymoonie op 7 Juli 2014, 16:38:18
Ja hoorNope

Bedankt :).
De vechter ziet er nu zo uit:
(http://g2f.nl/00pmv1y)
Er zitten wel veel rechte lijnen in, maar het is veel beter dan eerst :).


Titel: Re: Tips voor 8-bit/pixel spriten en animeren.
Bericht door: ShroomProductions op 7 Juli 2014, 20:58:53
Ik verveelde me:
(http://i59.tinypic.com/2mpzolj.png)
(http://i61.tinypic.com/2q34q4y.png)

De eerste versie gebruikt dezelfde kleuren als die van jou, behalve de kleur van de ogen/mond van jouw versie. Daar voor in de plaats heb ik rood gekozen en hem een riem/band gegeven voor wat contrast (riem vind ik niet zo goed gelukt overigens). Ook heb ik puur zwart toegevoegd voor de outline, en puur wit voor de ogen. (voor de pupil/iris dezelfde kleur blauw gebruikt als zijn pak).

Tweede versie alleen het haar een wat warmere en iets donkerdere tint gegeven.

Derde versie (meer richting 16 bit) schouder iets aangepast, een oranje tint voor wat contrast in het haar toegevoegd (ook gebruikt als highlight kleur voor de riem), en een turquoise tint voor de highlights op het pak toegevoegd. Verder nog de donkerste blauw tint wat veranderd, en beide huid tinten veranderd.


Titel: Re: Tips voor 8-bit/pixel spriten en animeren.
Bericht door: Ceymoonie op 7 Juli 2014, 22:00:56
Ik verveelde me:
(http://i59.tinypic.com/2mpzolj.png)
(http://i61.tinypic.com/2q34q4y.png)

De eerste versie gebruikt dezelfde kleuren als die van jou, behalve de kleur van de ogen/mond van jouw versie. Daar voor in de plaats heb ik rood gekozen en hem een riem/band gegeven voor wat contrast (riem vind ik niet zo goed gelukt overigens). Ook heb ik puur zwart toegevoegd voor de outline, en puur wit voor de ogen. (voor de pupil/iris dezelfde kleur blauw gebruikt als zijn pak).

Tweede versie alleen het haar een wat warmere en iets donkerdere tint gegeven.

Derde versie (meer richting 16 bit) schouder iets aangepast, een oranje tint voor wat contrast in het haar toegevoegd (ook gebruikt als highlight kleur voor de riem), en een turquoise tint voor de highlights op het pak toegevoegd. Verder nog de donkerste blauw tint wat veranderd, en beide huid tinten veranderd.
Bedankt, ik kopieer niets over, maar ik heb er enorm veel aan :).


Titel: Re: Tips voor 8-bit/pixel spriten en animeren.
Bericht door: ShroomProductions op 7 Juli 2014, 22:13:04
Hier nog een bonus omdat de houding zich er wel erg goed voor leende  :P
(http://i62.tinypic.com/zycb47.png)


Titel: Re: Tips voor 8-bit/pixel spriten en animeren.
Bericht door: Ceymoonie op 7 Juli 2014, 23:07:55
Hier nog een bonus omdat de houding zich er wel erg goed voor leende  :P
(http://i62.tinypic.com/zycb47.png)
xD.


Titel: Re: Tips voor 8-bit/pixel spriten en animeren.
Bericht door: StefanJanssen op 9 Juli 2014, 11:14:21
En dit is een voorbeeld van hoe het niet moet:
(http://updo.nl/file/6f1dc511.png) (http://updo.nl/file/6f1dc511.png)


Titel: Re: Tips voor 8-bit/pixel spriten en animeren.
Bericht door: Ceymoonie op 9 Juli 2014, 11:17:45
En dit is een voorbeeld van hoe het niet moet:
(https://snapr.pw/i/update-available-on-snapr.pw_e7c384a1eb.png)
De link doet het niet...


Titel: Re: Tips voor 8-bit/pixel spriten en animeren.
Bericht door: StefanJanssen op 9 Juli 2014, 12:53:02
Hier wel maar zal zo even ergens uploaden


Titel: Re: Tips voor 8-bit/pixel spriten en animeren.
Bericht door: ShroomProductions op 9 Juli 2014, 13:09:26
Haha nice!

Zo'n combinatie van hoge en lage resolutie kan best leuk uitpakken trouwens, dus laat je vooral niet tegenhouden. Maar als je echt voor een 8 of 16 bit stijl wilt gaan moet je dit natuurlijk vermijden.


Titel: Re: Tips voor 8-bit/pixel spriten en animeren.
Bericht door: StefanJanssen op 9 Juli 2014, 13:22:55
Waarschijnlijk kun je het nu wel zien?


Titel: Re: Tips voor 8-bit/pixel spriten en animeren.
Bericht door: ShroomProductions op 9 Juli 2014, 14:49:24
Het leek me misschien handig om te zien hoe zo'n sprite nou tot stand komt, dus ik heb een nieuwe gemaakt from scratch in wat meer stappen

(http://i59.tinypic.com/35i8v9g.png)

(http://i57.tinypic.com/o91w5j.png)


Titel: Re: Tips voor 8-bit/pixel spriten en animeren.
Bericht door: Ceymoonie op 9 Juli 2014, 16:43:03
En dit is een voorbeeld van hoe het niet moet:
(http://updo.nl/file/6f1dc511.png) (http://updo.nl/file/6f1dc511.png)
Ziet er nog niet zo slecht uit ook :p.

Het leek me misschien handig om te zien hoe zo'n sprite nou tot stand komt, dus ik heb een nieuwe gemaakt from scratch in wat meer stappen

(http://i59.tinypic.com/35i8v9g.png)

Nooit aan gedacht om er steeds een layer bij te doen, ik maakt altijd alles in een keer. Dit ziet er veel handiger uit :).


Titel: Re: Tips voor 8-bit/pixel spriten en animeren.
Bericht door: ShroomProductions op 9 Juli 2014, 16:56:26
Citaat
Nooit aan gedacht om er steeds een layer bij te doen, ik maakt altijd alles in een keer.

Het zijn geen aparte layers (al kan dat soms best handig zijn inderdaad). Ik ben gewoon telkens na wat dingetjes te hebben aangepast op een nieuwe subimage verder gegaan zodat je een beetje het proces kunt zien. Ik begin met te bepalen hoe veel verticale pixels elk deel van de sprite ongeveer mag gebruiken (de lijnen links in beeld). Zo als je ziet begin ik met wat simpele lijnen voor de vorm van de armen en benen. Als de basis vorm eenmaal klopt is het veel makkelijker om de rest er omheen te tekenen. Er zit overigens best veel trial & error tussen sommige frames.
Hoe verder de voortgang hoe kleiner de aanpassingen worden. De laatste paar frames zijn alleen kleine kleur wijzigingen.


www.game-maker.nl © 2003, 2007 Nederlandse Game Maker Community