Blog #3

Tjena!

Slutet av projektet närmar sig, vi går in i andra halvan av projektet och vi fokuserar på beta versionen. Under denna vecka har jag arbetat med att animera ”Höken” som kanske är en av de svåraste hinder för spelaren i spelet Trowl. Anledningen till jag säger detta är på grund av hökens rörelsemönster som ska efterlikna Medusa Head från Castlevania, med andra ord diagonalt ner och upp som en våg genom hela skärmen.

Innan jag startade igång med arbetet, så passade jag på att ändra designen på höken efter att ha fått feedback från alpha presentationen. Enligt feedbacken vill de ha tydligare kontraster mellan bakgrunden och fienderna.

Hawk

Den nya höken

När den uppdaterade höken var färdig, så var det dags att animera den. För att göra animationen så använde jag Photoshops Frame Animation, vilket ger mig möjligheten att rita bildruta för bildruta utan att vara beroende av en Timeline. Men innan jag började med animationen, letade jag upp sprite sheets med ving animationer, eftersom att våran animation ska efterlikna en hök som flaxar med sina vingar. Med hjälp av referenserna insåg jag att ving animationer liknar nästan som en Walk cycle animation. Med andra ord, dela in halva ”flax momentet” (när vingarna går från den högsta flaxpunkten till den lägsta flaxpunkten) i flera bildrutor, för att sedan återanvända den första halvan av bildrutorna i omvänd ordning (se sprite sheet).

Med hjälp av denna metod började jag med att använda den nya spriten som underlag, för att sedan rita ut varje bildruta för den första halvan av ”flax momentet” (jag vet, flax momentet låter dumt, men jag vet inte vad jag ska kalla det). Något som jag hade i åtanke var att ju fler bildrutor man hade, desto långsammare kommer animationen att vara. När den första halvan av animationen var färdig så återanvände jag halvan (i omvänd ordning) för att avsluta animationen. Med det gjort så var animationen färdigt. Det tog 14 bildrutor med fördröjning på 0,06 s för varje bildruta. Med hjälp av dessa 14 bildrutor kunde jag göra en sprite sheet. Ett tips är att använda View → Show → Grid när man ska placera sina bildrutor när man gör sprite sheets i Photoshop. Ett annan tips är att använda Glueit som är ett program som gör detta åt dig (sålänge du sparar alla dina bildrutor som PNG).

hawk_sprite_sheet

Sprite sheet

Är jag nöjd med resultatet? Jodå, lagom nöjd är man, men det finns en del finslipning kvar att göra under helgen.

Hawk_animation_kopia

Kadar Ali, Grupp 16

About Kadar Ali Hassan

2015 Graphics