Efektler Web Sayfalarıdır

SignalRGB’deki efektler, Lightscripts olarak bilinir, özünde SignalRGB API’siyle etkileşime giren web sayfalarıdır ve düzgün çalışmak için bazı basit kurallara uymak zorundadırlar. Her Lightscript üç temel HTML etiketi gerektirir: <head>, <body> ve <script>.

<head>

Bu bölüm, gerekli <meta> etiketlerini içermelidir. “API Referansı” bölümünde ayrıntılandırıldığı gibi bu etiketler, kullanıcı girdi alanları (renk tonu kaydırıcıları, sayı seçiciler vb. gibi) oluşturabilir veya birincil uygulamanızdan görsel girdi çekmek için SignalRGB API’sine erişebilir. Ayrıca bu bölümdeki bir <title> etiketi, efektinize Signal uygulaması içinde bir etiket atayacaktır.

Daha iyi anlamak için önceki örneği yeniden inceleyelim:

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

Bu başlık dört etiket içermektedir: bir <title> etiketi ve üç <meta> etiketi; bunlar açıklama, yayıncı ve temel bir sayı kaydırıcısını kapsamaktadır. Statik efekt başlıkları genellikle küçük olsa da ekrandaki eylemlere yanıt veren efektler, her birinin birden fazla çözünürlük ayarına sahip olduğu düzinelerce metre içerebilir. Düzenli kalmak ve iyi adlandırma kurallarını takip etmek önemlidir.

<head>

<body>

Gövde yalnızca bir öğe içerir — <canvas> etiketi. Bu etiket için temel nitelikler, betikteki canvas’ı getirmek için kullanılan id ile width ve height’tır. SignalRGB için standart boyutlar genişlik için 320 piksel, yükseklik için 200 pikseldir.

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

<body>

<script>

Sihrin gerçekleştiği yer burasıdır. Bu betikte, Lightscript geliştiricileri için STANDART olarak değerlendirilmesi gereken iki fonksiyonun yanı sıra üç temel bölüm bulunmaktadır: update ve window.requestAnimationFrame.

Değişken Bildirimleri

Betik kapsamındaki tüm değişkenler, geliştirme sürecinizi basitleştirmek için birlikte bildirilmelidir. İleride bu bölüm metre bildirimlerini de içerecektir, ancak şimdilik basit bir seçim sunulmaktadır.

var c: Daha önceki canvas etiketini getirmek için kullanılır.
var ctx: Canvas öğesinin 2D bağlamı; efektiniz için düzenlenebilir alan.
height, width ve hue: Süreci basitleştirmek için burada bildirilir.

İlk Güncelleme Çağrısı

Kod bloğunun alt kısmında window.requestAnimationFrame(update) referansı verilmektedir. “Update”, animasyon özelliklerini işleyen fonksiyonun adıdır. Her karede güncellenen durum, izleyiciler için hareket yanılsaması oluşturur.

Burada kullanılan yöntem kritik öneme sahiptir: Güncelleme fonksiyonunuzdaki her işlemin çalışması kısa bir süre aldığından update()’i doğrudan çağırmak animasyonlarda gecikmeye neden olabilir. Örneğin, ilk geri çağırma 100ms geçtiğini düşünebilir, sonraki 110ms vb.

window.requestAnimationFrame kullanıldığında, mevcut zaman damgası geri çağırma fonksiyonuna ve iç içe geri çağırmalarına aktarılır; böylece küçük yürütme boşluklarına rağmen animasyonun durumu korunur.

Kısacası, animasyonunuzu güncellemek için window.requestAnimationFrame(callback) yöntemini kullanın!

Güncelleme Fonksiyonu

Bu fonksiyon, çalışan bir Lightscript’in merkezindedir ve her kare çalıştığı için mümkün olduğunca basit ve akıcı olması gerekir. İlk betik yüklemesinden ve fonksiyon çağrısından sonra update, dahili window.requestAnimationFrame çağrısı aracılığıyla çalışmaya devam edecektir.

Bu örnekte her kare dört temel işlem gerçekleştirir:

ctx.fillStyle ile canvas dolgu stilini ayarla. Bu bir renk, desen veya degrade olabilir ve bir sonraki ctx.fillStyle çağrısıyla üzerine yazılana kadar devam eder.
ctx.fillRect(x, y, genişlik, yükseklik) ile (önceden ayarlanmış dolgu stiliyle) bir dikdörtgen oluştur. Bu durumda dikdörtgen tüm canvas’ı temsil eder.
Başlıkta bulunan kullanıcı girdi değişkeni speed ile hue’yu yinele.
HSL (renk tonu, doygunluk, açıklık) standardına uymak için hue’yu 0-360 aralığıyla sınırla.

<script>
    // Değişken Bildirimleri -------------------------
    // Canvas öğesini DOM'dan al
    var c = document.getElementById("exCanvas");
    var ctx = c.getContext("2d");
    var width = 320;
    var height = 200;
    var hue = 0;

    // Güncelleme fonksiyonu --------------------------------
    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; }
      // Fonksiyonu yeniden çağır
      window.requestAnimationFrame(update);
    }

    // İlk güncelleme çağrısı ----------------------------
    window.requestAnimationFrame(update);
</script>

Bu genel desen (dolguyu ayarla, şekil çiz, değişkenleri düzenle) canvas animasyonları için standarttır.

Renk yanlışsa, bir stil dolgusu atladınız.
Şekil yanlışsa, bir şekil dolgusu atladınız.
Zaman içinde hiçbir şey değişmiyorsa, değişkenlerinizi düzenlemediniz.

Daha fazla ayrıntı ve sorun giderme tavsiyeleri için HTML5 + JS hakkındaki bir sonraki sayfamıza göz atın.

<script>