Effekter er hjemmesider

Effekter i SignalRGB, kendt som Lightscripts, er i bund og grund hjemmesider der interagerer med SignalRGB API’en og skal følge nogle enkle regler for at fungere korrekt. Hvert Lightscript kræver tre grundlæggende HTML-tags: <head>, <body> og <script>.

<head>

Dette afsnit skal indeholde alle nødvendige <meta>-tags. Som beskrevet i afsnittet “API-reference” kan disse tags oprette brugerinputfelter (f.eks. farvetone-reguleringer, talinput osv.) eller tilgå SignalRGB API’en for at hente visuelle inputs fra det primære program. Derudover tildeler et <title>-tag i dette afsnit effekten et navn i Signal-appen.

Lad os kigge på det foregående eksempel igen for bedre forståelse:

<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>

Denne header indeholder fire tags: et <title>-tag og tre <meta>-tags der dækker beskrivelse, udgiver og en simpel talregulering. Mens headerne for statiske effekter typisk er lille, kan effekter der reagerer på skærmhandlinger indeholde snesevis af målere med flere opløsningsindstillinger. Det er vigtigt at forblive organiseret og følge gode navngivningskonventioner.

<head>

<body>

Body indeholder præcis ét element — <canvas>-tagget. De vigtigste attributter for dette tag er id, som bruges til at hente canvas i scriptet, samt width og height. Standardmålene for SignalRGB er 320 px for bredden og 200 px for højden.

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

<body>

<script>

Her sker magien. Der er tre grundlæggende afsnit i dette script samt to funktioner der bør betragtes som STANDARD for Lightscript-udviklere: update og window.requestAnimationFrame.

Variabeldeklarationer

Alle script-dækkende variabler bør deklareres samlet for at forenkle udviklingen. I fremtiden vil dette også inkludere målererklæringer, men for nu har vi et enkelt udvalg.

var c: Bruges til at hente canvas-tagget fra oven.
var ctx: 2D-konteksten for canvas-elementet — dvs. det redigerbare område for effekten.
height, width og hue: Disse deklareres her for at forenkle processen.

Første update-kald

Sidst i kodeblokken refereres window.requestAnimationFrame(update). “Update” er navnet på den funktion der styrer animationsdetaljerne. Den opdaterede tilstand i hvert frame skaber en illusion af bevægelse for seerne.

Den metode der bruges her er afgørende: Eftersom hver operation i update-funktionen tager en lille smule tid at udføre, kan direkte kald af update() medføre forsinkelser i animationerne. Det første callback antager f.eks. måske at 100 ms er gået, det næste 110 ms og så videre.

Ved brug af window.requestAnimationFrame sendes det aktuelle tidsstempel til callback-funktionen og dens indlejrede callbacks, hvilket bevarer animationens tilstand på trods af små udførelsesgab.

Kort sagt: Brug window.requestAnimationFrame(callback) til at opdatere animationen!

Update-funktionen

Denne funktion er central for et fungerende Lightscript og skal være så enkel og effektiv som mulig, da den kører hver frame. Efter første scriptindlæsning og funktionskald fortsætter update med at køre via sit interne window.requestAnimationFrame-kald.

I dette eksempel udfører hvert frame fire primære operationer:

Canvas-fyldstilen sættes med ctx.fillStyle. Dette kan være en farve, et mønster eller en gradient og forbliver aktivt indtil det overskrives af næste ctx.fillStyle-kald.
Et rektangel (med den tidligere satte fyldstil) oprettes med ctx.fillRect(x, y, width, height). I dette tilfælde repræsenterer rektanglet hele canvas.
hue-værdien øges med speed, brugerinputvariablen i headeren.
hue begrænses til området 0–360 for at overholde HSL (Hue, Saturation, Lightness)-standarden.

<script>
    // Variabeldeklarationer -------------------------
    // Hent canvas-element fra DOM'en
    var c = document.getElementById("exCanvas");
    var ctx = c.getContext("2d");
    var width = 320;
    var height = 200;
    var hue = 0;

    // Update-funktion --------------------------------
    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; }
      // Kald funktionen igen
      window.requestAnimationFrame(update);
    }

    // Første update-kald ----------------------------
    window.requestAnimationFrame(update);
</script>

Dette generelle mønster (sæt fyldstil, tegn form, redigér variabler) er standarden for canvas-animationer.

Hvis farven er forkert, mangler et style-fill.
Hvis formen er forkert, mangler et shape-fill.
Hvis ingenting ændrer sig over tid, blev variablerne ikke redigeret.

Se vores næste side om HTML5 + JS for yderligere detaljer og fejlfindingstips.

<script>