Efekty to strony internetowe

Efekty w SignalRGB, znane jako Lightscripts, są w zasadzie stronami internetowymi, które komunikują się z API SignalRGB i muszą spełniać kilka prostych zasad, aby działać poprawnie. Każdy Lightscript wymaga trzech podstawowych tagów HTML: <head>, <body> i <script>.

<head>

Ta sekcja musi zawierać wszystkie niezbędne tagi <meta>. Jak opisano w sekcji “Dokumentacja API”, te tagi mogą tworzyć pola wejściowe użytkownika (takie jak suwaki odcieni, wybory liczb itp.) lub uzyskiwać dostęp do API SignalRGB, aby pobierać dane wejściowe wizualne z twojej głównej aplikacji. Ponadto tag <title> w tej sekcji przypisze etykietę twojemu efektowi w aplikacji Signal.

Przyjrzyjmy się ponownie poprzedniemu przykładowi, aby lepiej zrozumieć:

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

Ten nagłówek zawiera cztery tagi: tag <title> i trzy tagi <meta> zawierające opis, wydawcę i prosty suwak liczbowy. Chociaż nagłówki efektów statycznych są zwykle małe, efekty reagujące na działania ekranu mogą zawierać dziesiątki mierników, z których każdy ma wiele ustawień rozdzielczości. Ważne jest, aby być zorganizowanym i stosować dobre konwencje nazewnictwa.

<head>

<body>

Body zawiera tylko jeden element — tag <canvas>. Podstawowe atrybuty tego tagu to id, używane do pobierania canvas w skrypcie, oraz szerokość i wysokość. Domyślne wymiary dla SignalRGB to 320px szerokości i 200px wysokości.

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

<body>

<script>

Ten tag jest miejscem, gdzie dzieje się magia. W tym skrypcie są trzy podstawowe części, wraz z dwiema funkcjami, które powinny być uważane za STANDARD dla deweloperów Lightscript: update i window.requestAnimationFrame.

Deklaracje zmiennych

Wszystkie zmienne o zasięgu skryptowym powinny być deklarowane razem, aby uprościć twój proces deweloperski. W przyszłości będą to również deklaracje mierników, ale na razie mamy prosty zestaw.

var c: Służy do pobierania tagu canvas z wcześniej.
var ctx: Kontekst 2D elementu canvas, edytowalne obszar dla twojego efektu.
wysokość, szerokość i odcień: Są tutaj deklarowane, aby uprościć proces.

Pierwsze wywołanie aktualizacji

Na dole bloku kodu odwołuję się do window.requestAnimationFrame(update). “Update” to nazwa funkcji obsługującej specyfikacje animacji. Zaktualizowany stan w każdej klatce tworzy iluzję ruchu dla widzów.

Używana tutaj metoda jest kluczowa: ponieważ każda operacja w twojej funkcji aktualizacji zajmuje trochę czasu na wykonanie, bezpośrednie wywołanie update() może powodować opóźnienia w animacjach. Na przykład pierwszy callback myśli, że minęło 100ms, następny 110ms i tak dalej.

Używając window.requestAnimationFrame, aktualny znacznik czasu jest przekazywany do funkcji callback i zagnieżdżonych callbacków, zachowując stan animacji mimo małych przerw w wykonaniu.

W skrócie: używaj metody window.requestAnimationFrame(callback) do aktualizacji swojej animacji!

Funkcja aktualizacji

Ta funkcja jest centralna dla działającego Lightscript i powinna być tak prosta i usprawniona jak to możliwe, ponieważ jest wykonywana w każdej klatce. Po wstępnym załadowaniu skryptu i wywołaniu funkcji, update pozostaje aktywna przez swoje wewnętrzne wywołanie window.requestAnimationFrame.

W tym przykładzie każda klatka wykonuje cztery główne operacje:

Ustaw styl wypełnienia canvas za pomocą ctx.fillStyle. Może to być kolor, wzorzec lub gradient i pozostaje aktywny do momentu nadpisania przez następne wywołanie ctx.fillStyle.
Utwórz prostokąt (z wcześniej ustawionym stylem wypełnienia) za pomocą ctx.fillRect(x, y, szerokość, wysokość). W tym przypadku prostokąt reprezentuje cały canvas.
Iteruj odcień za pomocą szybkości, zmiennej wejściowej użytkownika w nagłówku.
Ogranicz odcień do zakresu 0-360, aby pasował do standardu HSL (odcień, nasycenie, jasność).

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

Ten ogólny wzorzec (ustawienie stylu wypełnienia, rysowanie kształtu, edycja zmiennych) jest standardem dla animacji canvas.

Jeśli kolor jest nieprawidłowy, pominąłeś wypełnienie stylem.
Jeśli kształt jest nieprawidłowy, pominąłeś wypełnienie kształtu.
Jeśli nic nie zmienia się w czasie, nie edytowałeś swoich zmiennych.

Aby uzyskać więcej szczegółów i porad dotyczących rozwiązywania problemów, sprawdź naszą następną stronę o HTML5 + JS.

<script>