효과는 웹페이지입니다

SignalRGB의 효과(Lightscripts라고 불림)는 기본적으로 SignalRGB API와 상호작용하는 웹페이지이며, 올바르게 작동하려면 몇 가지 간단한 규칙을 따라야 합니다. 모든 Lightscript에는 세 가지 필수 HTML 태그인 <head>, <body>, <script>가 필요합니다.

<head>

이 섹션에는 필요한 <meta> 태그를 포함해야 합니다. “API 참조” 섹션에서 자세히 설명하듯이, 이 태그들은 사용자 입력 필드(색조 슬라이더, 숫자 선택기 등)를 만들거나 기본 애플리케이션에서 시각적 입력을 가져오는 SignalRGB API에 접근할 수 있습니다. 또한 이 섹션의 <title> 태그는 Signal 앱에서 효과에 레이블을 지정합니다.

이전 예시를 다시 살펴보겠습니다:

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

이 헤더에는 네 개의 태그가 포함되어 있습니다: <title> 태그와 설명, 게시자, 기본 숫자 슬라이더를 나타내는 세 개의 <meta> 태그. 정적 효과의 헤더는 일반적으로 작지만, 화면의 동작에 반응하는 효과는 각각 여러 해상도 설정이 있는 수십 개의 미터를 포함할 수 있습니다. 체계적으로 정리하고 좋은 명명 규칙을 따르는 것이 중요합니다.

<head>

<body>

본문에는 단 하나의 요소인 <canvas> 태그만 포함됩니다. 이 태그의 필수 속성은 스크립트에서 캔버스를 가져오는 데 사용하는 id와 width, height입니다. SignalRGB의 표준 크기는 너비 320px, 높이 200px입니다.

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

<body>

<script>

이 태그에서 마법이 일어납니다. 이 스크립트에는 세 가지 기본 섹션이 있으며, Lightscript 개발자에게 표준으로 간주되어야 하는 두 가지 함수가 있습니다: update와 window.requestAnimationFrame.

변수 선언

스크립트 범위의 모든 변수는 개발 과정을 단순화하기 위해 함께 선언해야 합니다. 앞으로는 미터 선언도 여기에 포함될 예정이지만, 지금은 간단한 선택입니다.

var c: 앞서 만든 캔버스 태그를 가져오는 데 사용합니다.
var ctx: 캔버스 요소의 2D 컨텍스트로, 효과를 편집할 수 있는 영역입니다.
height, width, hue: 프로세스를 단순화하기 위해 여기에 선언됩니다.

초기 업데이트 호출

코드 블록 하단에서 window.requestAnimationFrame(update)를 참조합니다. “update”는 애니메이션의 세부 사항을 처리하는 함수의 이름입니다. 각 프레임의 업데이트된 상태가 시청자에게 움직임의 환상을 만들어냅니다.

여기서 사용하는 방법이 중요합니다: update 함수의 각 작업은 실행하는 데 약간의 시간이 걸리므로 update()를 직접 호출하면 애니메이션이 지연될 수 있습니다. 예를 들어, 첫 번째 콜백은 100ms가 경과했다고 생각하고, 다음 것은 110ms, 이런 식으로 계속될 수 있습니다.

window.requestAnimationFrame을 사용하면 현재 타임스탬프가 콜백 함수와 중첩된 콜백에 전달되어 작은 실행 간격에도 불구하고 애니메이션 상태가 유지됩니다.

요약하면, 애니메이션을 업데이트하려면 window.requestAnimationFrame(callback) 메서드를 사용하십시오!

업데이트 함수

이 함수는 작동하는 Lightscript의 핵심이며, 매 프레임마다 실행되므로 가능한 한 단순하고 효율적으로 유지해야 합니다. 초기 스크립트 로드 및 함수 호출 후 update는 내부 window.requestAnimationFrame 호출을 통해 계속 실행됩니다.

이 예시에서 각 프레임은 네 가지 주요 작업을 수행합니다:

ctx.fillStyle로 캔버스 채우기 스타일을 설정합니다. 색상, 패턴 또는 그라디언트가 될 수 있으며, 다음 ctx.fillStyle 호출이 덮어쓸 때까지 유지됩니다.
**ctx.fillRect(x, y, width, height)**로 (이전에 설정한 채우기 스타일로) 직사각형을 만듭니다. 이 경우 직사각형은 전체 캔버스를 나타냅니다.
헤더에 있는 사용자 입력 변수인 speed만큼 hue를 증가시킵니다.
HSL (색조, 채도, 밝기) 표준에 맞도록 hue를 0-360 범위로 제한합니다.

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

이 일반 패턴 **(스타일 설정, 도형 그리기, 변수 편집)**이 캔버스 애니메이션의 표준입니다.

색상이 잘못된 경우, 스타일 채우기를 빠뜨린 것입니다.
도형이 잘못된 경우, 도형 채우기를 빠뜨린 것입니다.
시간이 지나도 아무것도 변하지 않는 경우, 변수를 편집하지 않은 것입니다.

자세한 내용과 문제 해결 조언은 HTML5 + JS 다음 페이지를 참조하십시오.

<script>