Programování barevné hry v Hype

• Smět 4, 2024

V předchozím tutoriálu jsme importovali obrázky pro hru omalovánky pro autora iBooks^R které vyrábíme v Hype Pro. Nyní do hry přidáme interaktivní prvky.

Otevřete svůj dokument Hype a začněme.

Naším prvním krokem je přidání identity ke každé vrstvě, která musí po kliknutí zmizet. To zahrnuje vrstvy čárového grafiky pro tělo, křídlo a zobák kachny. Přiřazením každé z těchto vrstev jedinečné ID prvku můžeme naprogramovat viditelnost těchto vrstev pomocí JavaScriptu.

1. Otevřete inspektor identity.
   
   
2. Vyberte vrstvu duck_body_line v hlavní časové ose.
   
   
3. V Inspektoru identity přidejte jedinečné ID prvku. Pojďme použít ID Tělo.
   
   
4. Vyberte vrstvu duck_wing_line a přidejte ji Křídlo jako jedinečné ID prvku.
   
   
5. Vyberte vrstvu duck_beak_line a přidejte ji Zobák jako jedinečné ID prvku.
   
   

Nyní, když mají vrstvy jedinečné ID prvků, můžeme do těchto vrstev přidat akci. K ovládání viditelnosti těchto vrstev použijeme JavaScript a vlastnost Display. Výchozí hodnota vlastnosti zobrazení pro obrázek je v souladu, což znamená, že se obrázek zobrazí ve zbytku HTML a nezačíná na novém řádku.

Pro skrytí obrázků použijeme JavaScript ke změně hodnoty vlastnosti zobrazení z v souladu na žádný pro každou z vrstevnic. Tím se zobrazí níže uvedené vrstvy výplně barev.

object.style.display = "none"

1. Otevřete inspektor akcí.
   
   
2. Vyberte vrstvu duck_body_line.
   
   
3. V části Kliknutí myší (klepnutí) klepněte na ikonu Plus.
   
   
4. V rozbalovací nabídce Akce vyberte Spustit JavaScript.
   
   
5. Protože se jedná o vlastní JavaScript, nastavte rozbalovací nabídku Funkce na novou funkci. Otevře se nové okno s výchozím kódem JavaScript a funkcí s názvem untitledFunction.
   
   
6. Změňte název funkce z untitledFunction na BodyFunction. Uvidíte název karty změnit na BodyFunction ().
   
   Dále přidáme kód pro nastavení vlastnosti zobrazení na žádný pro Tělo živel. Na prázdný řádek 5 přidejte následující kód.
   
   hypeDocument.getElementById ("Body"). style.display = "none";
   
   
7. Vraťte se do okna záhlaví Scéna bez názvu a vyberte vrstvu duck_wing_line.
   
   
8. Opakujte předchozí krok pro změnu názvu funkce na WingFunction a přidejte následující JavaScript.
   
   hypeDocument.getElementById ("Wing"). style.display = "none";
   
   
9. Vyberte vrstvu duck_beak_line, změňte název funkce na BeakFunction a přidejte následující JavaScript.
   
   hypeDocument.getElementById ("Beak"). style.display = "none";
   
   A je to. Vyzkoušejte v prohlížeči. Pokud vše půjde dobře, exportujte projekt jako widget autora iBooks.
   
   
10. V nabídce klikněte na Soubor - Exportovat jako HTML5 - Widget autorů na řídicí panel / iBooks.
    
    

Video Návody: Jak vytvořit hru EFEKTIVNĚ a SNADNO?! (Smět 2024).