Importeren en Gebruiken van Animaties

Met hyperPad kun je objecten creëren met aangepaste animaties. Je hebt twee keuzes als het gaat om animaties. Je kunt animaties importeren als individuele frames, of als een complete sprite sheet.

Individuele Frames:

Je kunt een animatiecyclus maken door een reeks individuele frame-afbeeldingen te importeren.

Om te beginnen, moet je je eerste frame of een afbeelding importeren om je object voor te stellen vanaf de "Assetbibliotheek" (Zie Importeren van Assets). Zodra je je object hebt geïmporteerd, tik en houd je vinger op het object waaraan je animaties wilt toevoegen, dit brengt het Assetmenu naar boven.

Kies vanuit het Assetmenu "Voeg Animatie Toe", dit verschijnt met de optie om te importeren vanuit Camera Roll of Dropbox. Zie "Importeren van Assets" voor meer details over deze opties.

Zodra je je gewenste importbron hebt geselecteerd, kun je alle frames van de animatie selecteren, en tik je op "Klaar" in de rechterbovenhoek om door te gaan met het importeren van deze frames.

Je wordt vervolgens gevraagd om een naam voor de animatiecyclus in te voeren.

Wanneer je de naam van de cyclus hebt ingevoerd, zal hyperPad een sprite sheet creëren met alle animatiecycli voor dat asset (inclusief de oorspronkelijke assetgrafiek). Houd er rekening mee dat hyperPad alleen een sprite sheet genereert met een maximale resolutie van 2048x2048 pixels. Dit betekent dat de totale grootte van elk geïmporteerd frame (inclusief de oorspronkelijke asset) niet groter kan zijn dan de maximale sprite sheetgrootte.

Als je met grotere afbeeldingen werkt, veel animatieframes, of beide. Kom je waarschijnlijk een fout tegen die aangeeft dat je de maximale sprite sheetgrootte hebt overschreden. Als je vasthoudt aan het gebruik van zulke grote graphics, dan zijn er een paar manieren om dit te omzeilen.

1. Verdeel je animatiesequenties over meerdere objecten. Elk zal zijn eigen 2048x2048 sprite sheet hebben. Dus heb een "loop" object, heb een "Jump" object, etc. Waar elk object de animatiecyclus (of meerdere cycli) opslaat. Op deze manier genereer je meerdere sprite sheets van 2048x2048.

2. Importeer ze niet als animatiecycli. Importeer eenvoudig elk animatieframe als hun eigen afbeelding. Gebruik dan het Gedrag "Speel Animatie" en voeg elk frame handmatig toe aan de animatietijdlijn in de gedragsinstellingen.

Sprite Sheets:

Je kunt aangepaste sprite sheets maken en ze in hyperPad importeren door je project te koppelen aan Dropbox. Om meer te leren over het koppelen van je project aan Dropbox, zie "Importeren van Assets".

Om aangepaste sprite sheets te maken, kun je elk hulpmiddel gebruiken dat in staat is een "Cocos2D" compatibele sprite sheet te maken. Alle sprite sheets moeten een gekoppeld PLIST-bestand hebben dat de metadata van de sprite sheet bevat. Je kunt het helpartikel "Ondersteunde Asset Types" bekijken om meer te leren over compatibele sprite sheets.

Animaties Bekijken:

Als je asset animaties heeft, wordt het gelabeld in de "Assetbibliotheek" als een "Geanimeerd" asset.

Om de animaties van een asset te bekijken, open je het "Asset Menu" door je vinger op de geanimeerde asset te tikken en vast te houden en kies je "Bekijk Animaties".

Vanuit hier kun je het "Asset Menu" opnieuw openen en "Bekijk Animatie" selecteren. Het pop-upvenster speelt de animatie af en toont ook nuttige informatie.

Als je op een animatiecyclus tikt en deze vasthoudt, opent het het Assetmenu zodat je de individuele frames voor die cyclus kunt bekijken.

Animaties Gebruiken:

Je kunt een geanimeerd asset direct op de canvas toevoegen, of het "Speel Animatie" gedrag gebruiken om een animatie op aanvraag te laten draaien.

Om een geanimeerd asset rechtstreeks op de canvas toe te voegen, start je de "Assetbibliotheek" en bekijk je de animaties van het geanimeerde asset. Als je een animatiecyclus selecteert, wordt deze toegevoegd aan de "Dock", zodat je deze direct in je scène kunt slepen.

Wanneer je een animatiecyclus aan de canvas toevoegt, wordt er een object gemaakt en wordt automatisch het "Speel Animatie" gedrag eraan toegevoegd. Als je de animatie-instellingen voor die object moet wijzigen, kun je dat doen vanuit de Gedragingen van het object.

Gebruik van het "Speel Animatie" Gedrag:

Als je een animatie wilt afspelen bij een gebeurtenis, zoals wanneer een gebruiker op een knop drukt of een joystick verplaatst, dan kun je het "Speel Animatie" gedrag gebruiken.

Begin met het toevoegen van een geanimeerd asset aan de canvas. Kies vervolgens het object en start de "Gedrag Editor" vanuit de "Objecteigenschappen".

In dit voorbeeld laten we het object een animatie afspelen wanneer erop wordt gedrukt. Begin met het toevoegen van het "Begonnen Aan Te raken" gedrag.

Voeg vervolgens het "Speel Animatie" gedrag toe vanuit de FX-categorie, en verbind het met het "Begonnen Aan Te raken" gedrag dat je eerder hebt toegevoegd.

Eenmaal verbonden, tik op het "Speel Animatie" gedrag om de "Gedragseigenschappen" te bekijken. Vanuit de gedragseigenschappen kun je wijzigen welk object je wilt animeren, welke animatie je wilt afspelen, en andere verschillende parameters die de afspeelinstellingen van de animatie beïnvloeden.

In de gedragseigenschappen tik je op het vakje met het label "Selecteer Animatie". Dit opent de animatietijdlijn, zodat je frames of een animatiecyclus kunt toevoegen.

Om animaties aan de tijdlijn toe te voegen, kun je het "Assetbibliotheek" icoon tikken om de assetbibliotheek te openen. Elke grafische asset waarop je tikt, wordt automatisch geselecteerd en aan de tijdlijn toegevoegd.

Als je een animatiecyclus wilt toevoegen, druk en houd dan een geanimeerd asset om het "Asset Menu" te openen. Selecteer vanuit het Assetmenu "Bekijk Animaties". De Assetbibliotheek toont nu alle animatiecycli die je eerder aan het asset hebt toegevoegd. Tik op een cyclus om deze aan de tijdlijn toe te voegen.

Wanneer je klaar bent met het toevoegen van animaties aan de tijdlijn, kun je op het gedragscherm tikken om de tijdlijn te sluiten en terug te keren naar de gedragseditor.

Als je op "Afspelen" tikt, zal het object alleen animeren wanneer je erop tikt.