Importazione e utilizzo delle animazioni

Con hyperPad puoi creare oggetti con animazioni personalizzate. Hai due scelte per quanto riguarda le animazioni. Puoi importare le animazioni come fotogrammi singoli, oppure un'intera sprite sheet.

Fotogrammi Singoli:

Puoi creare un ciclo di animazione importando una sequenza di immagini di fotogrammi singoli.

Per iniziare, devi importare il tuo primo fotogramma o un'immagine che rappresenti il tuo oggetto dalla "Asset Library" (vedi Importazione di Asset). Una volta importato il tuo oggetto, tocca e tieni premuto il dito sull'oggetto a cui vuoi aggiungere animazioni, questo farà apparire il Menu Asset.

Dal Menu Asset seleziona "Aggiungi Animazione", si aprirà una finestra con l'opzione di importare dal Rullino Fotografico o da Dropbox. Vedi "Importazione di Asset" per maggiori dettagli su queste opzioni.

Una volta selezionata la tua fonte di importazione desiderata, puoi selezionare tutti i fotogrammi dell'animazione, quindi tocca "Fatto" nell'angolo in alto a destra per continuare a importare questi fotogrammi.

Ti verrà quindi chiesto di inserire un nome per il ciclo di animazione.

Una volta inserito il nome del ciclo, hyperPad creerà una sprite sheet con tutti i cicli di animazione per quell'asset (inclusa la grafica dell'asset originale). Tieni presente che hyperPad genererà solo una sprite sheet con una risoluzione massima di 2048x2048 pixel. Questo significa che la dimensione totale di ogni fotogramma importato (inclusa l'asset originale) non può superare la dimensione massima della sprite sheet.

Se stai trattando immagini più grandi, molti fotogrammi di animazione o entrambi. Probabilmente ti imbatterai in un errore che dice che hai superato la dimensione massima della sprite sheet. Se sei determinato a utilizzare tali grafiche di grandi dimensioni, ci sono un paio di modi per aggirare il problema.

1. Suddividi le tue sequenze di animazione tra più oggetti. Ognuno avrà la propria sprite sheet 2048x2048. Quindi, crea un oggetto "camminata", un oggetto "salto", ecc. Dove ogni oggetto memorizza il ciclo di animazione (o più cicli). In questo modo generi più sprite sheet 2048x2048.

2. Non importarli come cicli di animazione. Importa semplicemente ogni fotogramma di animazione come propria immagine. Quindi usa il comportamento Riproduci Animazione e aggiungi manualmente ogni fotogramma alla timeline dell'animazione nelle proprietà del comportamento.

Sprite Sheet:

Puoi creare sprite sheet personalizzati e importarli in hyperPad collegando il tuo progetto a Dropbox. Per saperne di più su come collegare il tuo progetto a Dropbox, consulta "Importazione di Asset".

Per creare sprite sheet personalizzati, puoi utilizzare qualsiasi strumento in grado di creare una sprite sheet compatibile con "Cocos2D". Tutte le sprite sheet devono avere un file PLIST abbinato contenente i metadati della sprite sheet. Puoi vedere l'articolo di aiuto "Tipi di Asset Supportati" per saperne di più sulle sprite sheet compatibili.

Visualizzare Animazioni:

Se il tuo asset ha animazioni, sarà contrassegnato nella "Asset Library" come un asset "Animato".

Per visualizzare le animazioni di un asset, apri il "Menu Asset" toccando e tenendo premuto il dito sull'asset animato e seleziona "Visualizza Animazioni".

Da qui, puoi riaprire il "Menu Asset" e selezionare "Anteprima Animazione". La finestra popup riprodurrà l'animazione e ti mostrerà anche informazioni utili.

Se tocchi e tieni premuto un ciclo di animazione, si aprirà il Menu Asset permettendoti di visualizzare i fotogrammi singoli per quel ciclo.

Utilizzare Animazioni:

Puoi aggiungere un asset animato direttamente sulla canvas, o utilizzare il comportamento "Riproduci Animazione" per eseguire un'animazione su richiesta.

Per aggiungere un asset animato direttamente sulla canvas, lancia l'"Asset Library" e visualizza le animazioni dell'asset animato. Se selezioni un ciclo di animazione, verrà aggiunto al "Dock" consentendoti di trascinarlo direttamente nella tua scena.

Quando aggiungi un ciclo di animazione alla canvas, verrà creato un oggetto e il comportamento "Riproduci Animazione" verrà aggiunto automaticamente. Se hai bisogno di cambiare le impostazioni di riproduzione dell'animazione per quell'oggetto, puoi farlo dalle proprietà dei Comportamenti dell'oggetto.

Utilizzare il Comportamento "Riproduci Animazione":

Se hai bisogno di riprodurre un'animazione in un evento, come quando un utente preme un pulsante o muove un joystick, puoi utilizzare il comportamento "Riproduci Animazione".

Inizia aggiungendo un asset animato alla canvas. Poi seleziona l'oggetto e lancia l'"Editor di Comportamenti" dalle "Proprietà dell'oggetto".

In questo esempio, faremo in modo che l'oggetto riproduca un'animazione quando viene premuto. Inizia aggiungendo il comportamento "Tocca Iniziato".

Successivamente, aggiungi il comportamento "Riproduci Animazione" dalla categoria FX, e collegalo al comportamento "Tocca Iniziato" che hai aggiunto in precedenza.

Una volta connesso, tocca il comportamento "Riproduci Animazione" per visualizzare le "Proprietà del Comportamento". Dalle proprietà del comportamento puoi cambiare quale oggetto animare, quale animazione riprodurre e altri vari parametri che influenzano la riproduzione delle animazioni.

Nelle proprietà del comportamento, tocca sulla casella etichettata "Seleziona Animazione". Questo farà apparire la timeline delle animazioni, permettendoti di aggiungere fotogrammi o un ciclo di animazione.

Per aggiungere animazioni alla timeline puoi toccare l'icona "Asset Library", per aprire la libreria degli asset. Qualsiasi asset grafico che tocchi verrà selezionato automaticamente e aggiunto alla timeline.

Se vuoi aggiungere un ciclo di animazione, premi e tieni premuto un asset animato per aprire il "Menu Asset". Dal Menu Asset, seleziona "Visualizza Animazioni". La Asset Library mostrerà ora tutti i cicli di animazione che hai precedentemente aggiunto all'asset. Toccare un ciclo lo aggiungerà alla timeline.

Una volta terminato di aggiungere animazioni alla timeline, puoi toccare sulla schermata del comportamento per chiudere la timeline e tornare all'editor di comportamento.

Se premi "Riproduci", l'oggetto si animatorà solo quando lo tocchi.