Programmazione del gioco a colori in Hype

• Potrebbe 18, 2024

Nel tutorial precedente, abbiamo importato le immagini per un gioco da colorare per iBooks Author^R che stiamo realizzando in Hype Pro. Ora aggiungeremo gli elementi interattivi al gioco.

Apri il tuo documento Hype e cominciamo.

Il nostro primo passo è aggiungere un'identità a ciascuno dei livelli che devono scomparire quando si fa clic. Ciò include gli strati di disegni al tratto per il corpo di anatra, ala e becco. Assegnando a ciascuno di questi livelli un ID elemento univoco, possiamo quindi programmare la visibilità di questi livelli con JavaScript.

1. Apri Identity Inspector.
   
   
2. Seleziona il livello duck_body_line nella linea temporale principale.
   
   
3. In Identity Inspector, aggiungi un ID elemento univoco. Usiamo l'ID di Corpo.
   
   
4. Seleziona il livello duck_wing_line e aggiungi Ala come ID elemento univoco.
   
   
5. Seleziona il livello duck_beak_line e aggiungi Becco come ID elemento univoco.
   
   

Ora che i layer hanno ID elemento univoci, possiamo aggiungere l'azione a questi layer. Useremo JavaScript e la proprietà Display per controllare la visibilità di questi livelli. Il valore predefinito della proprietà Display per un'immagine è in linea, il che significa che l'immagine viene visualizzata all'interno del resto dell'HTML e non si avvia su una nuova riga.

Per nascondere le immagini utilizzeremo JavaScript per modificare il valore della proprietà di visualizzazione da in linea per nessuna per ciascuno dei livelli di line art. Questo rivelerà i livelli di riempimento del colore qui sotto.

object.style.display = "none"

1. Apri la finestra di ispezione Azioni.
   
   
2. Seleziona il livello duck_body_line.
   
   
3. Nella sezione Clic del mouse (Tap), fai clic sull'icona Più.
   
   
4. Nel menu a discesa Azione, scegli Esegui JavaScript.
   
   
5. Poiché si tratta di un JavaScript personalizzato, impostare il menu a discesa Funzione su Nuova funzione. Questo aprirà una nuova finestra con il codice JavaScript predefinito e una funzione chiamata untitledFunction.
   
   
6. Cambia il nome della funzione da untitledFunction per BodyFunction. Vedrai il nome della scheda cambiare in BodyFunction ().
   
   Successivamente aggiungeremo il codice per impostare la proprietà display nessuna per il Corpo elemento. Aggiungi il seguente codice sulla riga vuota 5.
   
   hypeDocument.getElementById ("Body"). style.display = "none";
   
   
7. Torna alla finestra della scheda Scena senza titolo e seleziona il livello duck_wing_line.
   
   
8. Ripetere il passaggio precedente per modificare il nome della funzione in WingFunction e aggiungi il seguente JavaScript.
   
   hypeDocument.getElementById ("Wing"). style.display = "none";
   
   
9. Seleziona il livello duck_beak_line, cambia il nome della funzione in BeakFunction e aggiungi il seguente JavaScript.
   
   hypeDocument.getElementById ("Beak"). style.display = "none";
   
   Questo è tutto. Proviamo nel browser. Se tutto va bene, esporta il progetto come widget Autore di iBooks.
   
   
10. Dal menu, fai clic su File - Esporta come HTML5 - Widget Autore dashboard / iBooks.
    
    

Istruzioni Video: The Story of Tetris | Gaming Historian (Potrebbe 2024).