Effekter är webbsidor

Effekter i SignalRGB, kända som Lightscripts, är i grunden webbsidor som interagerar med SignalRGB API, och de måste följa några enkla regler för att fungera korrekt. Varje Lightscript kräver tre väsentliga HTML-taggar: <head>, <body> och <script>.

<head>

Det här avsnittet bör innehålla alla nödvändiga <meta>-taggar. Som beskrivs i avsnittet “API-referens” kan dessa taggar skapa fält för användarinmatning (som hue-reglage, nummerplockar, osv.) eller ge tillgång till SignalRGB API för att hämta visuell inmatning från ditt primära program. Dessutom ger en <title>-tagg i det här avsnittet din effekt en etikett i Signal-appen.

Låt oss gå tillbaka till det föregående exemplet för en tydligare förstå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>

Den här rubriken innehåller fyra taggar: en <title>-tagg och tre <meta>-taggar som täcker beskrivning, utgivare och ett grundläggande nummerreglage. Medan statiska effektrubriceringar vanligtvis är små kan effekter som reagerar på åtgärder på skärmen innehålla dussintals mätare, var och en med flera upplösningsinställningar. Det är viktigt att hålla sig organiserad och följa bra namnkonventioner.

<head>

<body>

Brödtexten innehåller bara ett element – <canvas>-taggen. De viktigaste attributen för den här taggen är id, som används för att hämta canvas i skriptet, och width och height. Standarddimensionerna för SignalRGB är 320px för bredd och 200px för höjd.

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

<body>

<script>

Det är här magin händer. Det finns tre grundläggande avsnitt i det här skriptet, tillsammans med två funktioner som bör betraktas som STANDARD för Lightscript-utvecklare: update och window.requestAnimationFrame.

Variabeldeklarationer

Alla skriptscoped-variabler bör deklareras tillsammans för att förenkla din utvecklingsprocess. I framtiden inkluderar detta även mätardeklarationer, men för nu har vi ett enkelt urval.

var c: Används för att hämta canvas-taggen från tidigare.
var ctx: 2D-kontexten för canvas-elementet, vilket är det redigerbara området för din effekt.
height, width och hue: Deklareras här för att förenkla processen.

Initialt uppdateringsanrop

Längst ned i kodblocket refererar jag till window.requestAnimationFrame(update). “Update” är namnet på funktionen som hanterar animationsspecifika aspekter. Det uppdaterade tillståndet i varje bildruta skapar illusionen av rörelse för tittarna.

Metoden som används här är avgörande: Eftersom varje operation i din update-funktion tar en liten tid att utföra kan direkta anrop till update() orsaka fördröjningar i animationerna. Exempelvis kanske den första återanropen tror att 100 ms har gått, nästa 110 ms, och så vidare.

Genom att använda window.requestAnimationFrame skickas den aktuella tidsstämpeln till återanropsfunktionen och dess kapslade återanrop, vilket bevarar animationens tillstånd trots små körningsgap.

Kort sagt, använd metoden window.requestAnimationFrame(callback) för att uppdatera din animation!

Update-funktionen

Den här funktionen är central för ett fungerande Lightscript och behöver vara så enkel och strömlinjeformad som möjligt eftersom den körs varje bildruta. Efter den initiala skriptladdningen och funktionsanropet fortsätter update att köra via sitt interna window.requestAnimationFrame-anrop.

I det här exemplet utförs fyra huvudoperationer per bildruta:

Ange canvasens fyllnadsstil med ctx.fillStyle. Det kan vara en färg, ett mönster eller en gradient och bevaras tills det skrivs över av nästa ctx.fillStyle-anrop.
Skapa en rektangel (med den tidigare inställda fyllnadsstilen) med ctx.fillRect(x, y, width, height). I det här fallet representerar rektangeln hela canvas.
Öka hue med speed, användarinmatningsvariabeln i rubriken.
Begränsa hue till intervallet 0–360 för att passa inom HSL (hue, saturation, lightness)-standarden.

<script>
    // Variabeldeklarationer -------------------------
    // Hämta canvas-elementet från DOM
    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; }
      // Anropa funktionen igen
      window.requestAnimationFrame(update);
    }

    // Initialt uppdateringsanrop ----------------------------
    window.requestAnimationFrame(update);
</script>

Det här generella mönstret (ange fyllnad, rita form, redigera variabler) är standarden för canvas-animationer.

Om färgen är fel har du missat ett stilfyllnadsanrop.
Om formen är fel har du missat ett formfyllnadsanrop.
Om ingenting förändras över tid har du inte redigerat dina variabler.

För mer detaljer och felsökningsråd, kolla in vår nästa sida om HTML5 + JS.

<script>