Efekti su veb-stranice

Efekti u SignalRGB-u, poznati kao Lightscripts, u suštini su veb-stranice koje interaguju sa SignalRGB API-jem, i moraju poštovati nekoliko jednostavnih pravila da bi ispravno funkcionisali. Svaki Lightscript zahteva tri ključna HTML taga: <head>, <body> i <script>.

<head>

Ovaj odeljak treba da sadrži sve potrebne <meta> tagove. Kao što je objašnjeno u odeljku “API referenca”, ovi tagovi mogu kreirati polja korisničkog unosa (kao što su klizači nijanse, birači brojeva, itd.) ili pristupiti SignalRGB API-ju za preuzimanje vizuelnog unosa iz glavne aplikacije. Pored toga, <title> tag u ovom odeljku će označiti vaš efekat u Signal aplikaciji.

Vratimo se na prethodni primer za bolje razumevanje:

<head>
    <title>Hue Cycle</title>
    <meta description="Stock hue cycle."/>
    <meta publisher="WhirlwindFX" />
    <meta property="speed" label="Cycle Speed" type="number" min="1" max="10" default="2">
</head>

Ova zaglavlje sadrži četiri taga: jedan <title> tag i tri <meta> taga, koji uključuju opis, izdavača i osnovni numerički klizač. Dok zaglavlja statičkih efekata su obično mala, efekti koji reaguju na radnje na ekranu mogu uključivati desetine merača, svaki sa različitim podešavanjima rezolucije. Važno je ostati organizovan i pratiti dobre konvencije imenovanja.

<head>

<body>

Body sadrži samo jedan element — <canvas> tag. Važni atributi za ovaj tag su id, koji se koristi za preuzimanje platna u skripti, i width i height. Standardne dimenzije za SignalRGB su 320px za širinu i 200px za visinu.

<body style="margin: 0; padding: 0;">
    <canvas id="exCanvas" width="320" height="200"></canvas>
</body>

<body>

<script>

Ovde se dešava magija. Postoje tri osnovna dela ove skripte, zajedno sa dve funkcije koje bi trebalo smatrati STANDARDNIM za programere Lightscript-a: update i window.requestAnimationFrame.

Deklaracije promenljivih

Sve promenljive sa opsegom skripte treba deklarisati zajedno radi lakšeg procesa razvoja. U budućnosti, ovo će uključivati i deklaracije merača, ali za sada imamo jednostavne opcije.

var c: Ovo se koristi za preuzimanje canvas taga od pre.
var ctx: 2D kontekst canvas elementa, tj. oblast koja se može uređivati za vaš efekat.
height, width i hue: Ovi su deklarisani ovde radi lakoće.

Inicijalni poziv za ažuriranje

Na dnu bloka koda, referenciram window.requestAnimationFrame(update). “Update” je naziv funkcije koja posebno upravlja animacijom. Stanje koje se ažurira u svakom frejmу stvara iluziju kretanja za posmatrača.

Metoda koja se koristi ovde je važna: Pošto svaka operacija u vašoj update funkciji oduzima malo vremena za izvršavanje, direktno pozivanje update() može uzrokovati kašnjenje u animaciji. Na primer, prvi povratni poziv može misliti da je prošlo 100ms, sledeći 110ms, i tako dalje.

Korišćenjem window.requestAnimationFrame, trenutna vremenska oznaka se prosleđuje callback funkciji i njenim ugneždenim povratnim pozivima, održavajući stanje animacije uprkos malim prazninama u izvršavanju.

Ukratko, koristite metodu window.requestAnimationFrame(callback) za ažuriranje animacija!

Update funkcija

Ova funkcija je srce funkcionalnog Lightscript-a i treba biti što jednostavnija i sažetija jer se izvršava svaki frejm. Nakon inicijalnog učitavanja skripte i poziva funkcije, update će nastaviti da se izvršava kroz unutrašnji window.requestAnimationFrame poziv.

U ovom primeru, svaki frejm izvodi četiri glavne operacije:

Postavi stil ispune platna sa ctx.fillStyle. Ovo može biti boja, uzorak ili gradijent, i trajaće dok ga ne prepiše sledeći ctx.fillStyle poziv.
Kreiraj pravougaonik (sa prethodno postavljenim stilom ispune) sa ctx.fillRect(x, y, width, height). U ovom slučaju pravougaonik predstavlja celo platno.
Inkrementiraj hue sa speed, promenljivom korisničkog unosa koja se nalazi u zaglavlju.
Ograniči hue na opseg 0-360 da odgovara standardu HSL (hue, saturation, lightness).

<script>
    // Variable Declarations -------------------------
    // Get the canvas element from the DOM
    var c = document.getElementById("exCanvas");
    var ctx = c.getContext("2d");
    var width = 320;
    var height = 200;
    var hue = 0;

    // Update function --------------------------------
    function update()
    {
      // 1
      ctx.fillStyle = 'hsl('+ hue + ', 100%, 50%)';
      // 2
      ctx.fillRect(0, 0, width , height);
      // 3
      hue+=(speed / 4);
      // 4
      if (hue > 360) { hue = hue % 360; }
      // Re-call the function
      window.requestAnimationFrame(update);
    }

    // Initial update call ----------------------------
    window.requestAnimationFrame(update);
</script>

Ovaj opšti obrazac (postavi ispunu, nacrtaj oblik, uredi promenljivu) je standard za canvas animacije.

Ako je boja pogrešna, propustili ste postavljanje stila.
Ako je oblik pogrešan, propustili ste crtanje oblika.
Ako nema promena tokom vremena, ne uređujete promenljive.

Za više informacija i savete za rešavanje problema, pogledajte našu sledeću stranicu o HTML5 + JS.

<script>