게임/앱 연동

앱이나 게임에 SignalRGB 지원을 추가하는 것은 빠르고 간단합니다. HTTP POST 요청을 전송할 수 있는 프로젝트라면 SignalRGB의 광범위한 호환 장치를 활용할 수 있습니다.

앱이나 게임이 SignalRGB와 연동하는 방법은 두 가지입니다: 기존 효과를 트리거하거나, 직접 개발한 커스텀 효과와 통신하는 것입니다. 첫 번째 방법은 개발 시간이 훨씬 적게 걸리지만 미리 제작된 효과 라이브러리로 제한됩니다. 두 번째 방법은 더 많은 시간이 필요할 수 있지만, 생성할 수 있는 효과의 종류와 수에 대한 무한한 가능성을 열어줍니다.

궁극적으로 어떤 방법이 프로젝트에 가장 적합한지는 개발자가 결정해야 합니다. 두 방법 모두 훌륭한 조명 경험을 제공할 수 있습니다.

게임 효과 라이브러리

자체 조명 효과를 개발하지 않고도 SignalRGB의 방대한 미리 제작된 효과 라이브러리를 활용할 수 있습니다. SignalRGB 앱 URL을 사용하면 SignalRGB에서 다운로드할 수 있는 모든 공개 조명 효과를 쉽게 설치하고 활성화할 수 있습니다.

앱이나 게임이 처음 실행될 때 활성화할 조명 효과를 설치하여 모든 효과가 빠르게 트리거되도록 하는 것이 권장됩니다.

다음 API 경로를 사용할 수 있습니다:

요청 URI	목적
signalrgb://effect/install/EffectName	`EffectName`이라는 조명 효과를 설치합니다
signalrgb://effect/apply/EffectName	`EffectName`이라는 조명 효과를 활성화합니다

선택한 엔진이나 언어가 커스텀 URL 프로토콜 핸들러와 통신할 수 없는 경우에도 이 SignalRGB API를 사용할 수 있습니다. C:\Users\<username>\AppData\Local\VortxEngine에 위치한 SignalRgbLauncher.exe 실행 파일을 --url 인수에 사용할 API 경로를 설정하여 실행하십시오. 앱이 전면에 표시되지 않도록 하려면 ?-silentlaunch-를 추가할 수 있습니다.

예를 들어 Azure라는 효과를 설치하려면 다음 인수로 실행 파일을 실행합니다:

SignalRgbLauncher.exe --url=effect/apply/Azure?-silentlaunch-

Unity

Unreal Engine

다음 C++ 클래스를 Unreal Engine에서 사용하여 SignalRGB 효과를 설치하고 활성화할 수 있습니다.

#include "SignalEffectApi.h"

void SignalEffectApi::ApplyEffect(const std::string& effect) {
  const TCHAR* appdataPath = FPlatformProcess::UserSettingsDir();
  const FString exePath = FString(appdataPath) + TEXT("\\VortxEngine\\SignalRgbLauncher.exe");
  const FString params = TEXT("--url=effect/apply/") + FString(effect.c_str()) + TEXT("?-silentlaunch-");
  FPlatformProcess::CreateProc(*exePath, *params, true, false, false, nullptr, 0, nullptr, nullptr);
}

void SignalEffectApi::InstallEffect(const std::string& effect) {
  const TCHAR* appdataPath = FPlatformProcess::UserSettingsDir();
  const FString exePath = FString(appdataPath) + TEXT("\\VortxEngine\\SignalRgbLauncher.exe");
  const FString params = TEXT("--url=effect/install/") + FString(effect.c_str()) + TEXT("?-silentlaunch-");
  FPlatformProcess::CreateProc(*exePath, *params, true, false, false, nullptr, 0, nullptr, nullptr);
}

#pragma once

#include "CoreMinimal.h"

class SignalEffectApi
{
public:
  void ApplyEffect(const std::string& effect);
  void InstallEffect(const std::string& effect);
};

앱이 실행될 때 사용하려는 효과를 설치하여 효과가 빠르게 트리거될 수 있도록 하는 것이 권장됩니다.

다음 예시는 SignalEffectApi 클래스를 사용하여 효과를 설치하고 활성화하는 방법을 보여줍니다.

#include "SignalEffectApi.h"

...
  // Initialize effect API.
  SignalEffectApi srgbEffect;

  // Set the name of the effect you wish to install.
  std::string effectName = "Azure";

  // Install the effect.
  srgbEffect.InstallEffect(effectName);

  // Apply the effect.
  srgbEffect.ApplyEffect(effectName);

...

커스텀 효과

HTTP 요청을 사용하여 SignalRGB와 직접 통신하는 것은 요청 구조를 알면 쉽게 구현할 수 있습니다. 요청의 구조는 다음과 같습니다:

요청 유형: POST

요청 URI: http://localhost:16034/canvas/event?sender=your-app-name&event=your-event

앱에서 전송되는 모든 명령은 동일한 sender 변수를 사용해야 합니다. event 변수는 SignalRGB에 전달할 데이터가 들어가는 곳입니다.

효과 내에서 모든 데이터는 onCanvasApiEvent 함수를 통해 전송됩니다. 이 함수를 사용하여 효과가 HTTP 요청에 어떻게 응답하는지 처리하십시오.

예시 코드

이 기본 예시는 Unity 또는 Unreal Engine 게임이 SignalRGB와 통신하여 커스텀 조명 효과에서 이벤트를 트리거하는 방법을 보여줍니다. 그러나 HTTP POST 요청을 전송하는 모든 방법을 사용하여 커스텀 조명 효과를 제어할 수 있습니다. 이러한 유연성 덕분에 거의 모든 게임이나 애플리케이션에 SignalRGB 지원을 추가할 수 있습니다.

조명 효과

API 경로로 전송된 모든 이벤트는 onCanvasApiEvent 함수를 통해 조명 효과로 전달됩니다. 이벤트를 관리하는 방법은 여러 가지가 있지만, 다음 예시는 간단하고 이해하기 쉽게 유지합니다. 여러 이벤트가 있는 더 복잡한 것을 개발하는 경우 이벤트와 해당 조명 효과를 추적하기 위해 상태 핸들러 방법을 사용하는 것을 고려하십시오.

<head>
  <title>CustomApiEffect</title>
  <meta description="Effect description goes here." />
  <meta publisher="Your Name Here" />
</head>

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

<script>
  var c = document.getElementById("exCanvas");
  var ctx = c.getContext("2d");
  var width = 320;
  var height = 200;

  var activeEvent = ""; // Variable to store most recent event

  function onCanvasApiEvent(apiEvent) {
    if (apiEvent["sender"] == "apiTestApp") { // Only respond to API events with the sender "apiTestApp". You should change this to the sender string your app uses.
      activeEvent = apiEvent["event"]; // Set the activeEvent variable to the most recent API event data.
    }
  }

  function update() {
    if (activeEvent == "allRed") { // Turn the canvas all red in response to an allRed event
      ctx.fillStyle = '#FF0000';
      ctx.fillRect(0, 0, width, height);
    } else { // Otherwise, make the canvas all black
      ctx.fillStyle = '#000000';
      ctx.fillRect(0, 0, width, height);
    }

    window.requestAnimationFrame(update);
  }

  window.requestAnimationFrame(update);
</script>

Unity

다음과 같은 함수를 사용하면 Unity가 SignalRGB와 통신할 수 있습니다. 그러나 HTTP POST 요청을 전송하는 모든 방법을 사용할 수 있습니다.

using UnityEngine;
using UnityEngine.Networking;
using System.Collections;
using System.Collections.Generic;

public class SendAllRedEventBehavior : MonoBehaviour
{
    void Start()
    {
        StartCoroutine(Upload());
    }

    IEnumerator Upload()
    {
        UnityWebRequest www = UnityWebRequest.Post("http://localhost:16034/canvas/event?sender=apiTestApp&event=allRed");
        yield return www.SendWebRequest();

        if (www.result != UnityWebRequest.Result.Success)
        {
            Debug.Log(www.error);
        }
        else
        {
            Debug.Log("Sent lighting event to SignalRGB!");
        }
    }
}

Unreal Engine

다음 C++ 클래스를 Unreal Engine에서 사용하여 SignalRGB API를 통한 통신을 활성화할 수 있습니다. 요청 URI의 sender 매개변수를 라이트스크립트에서 사용하는 것과 일치하도록 변경하십시오.

#include "SignalApi.h"

void SignalApi::SendEvent(const std::string& sender, const std::string& event) {
  Http = &FHttpModule::Get();
  TSharedRef<IHttpRequest> Request = Http->CreateRequest();
  std::string requestUri = "http://localhost:16034/canvas/event?sender="+ sender + "&event=" + event;
  Request->SetURL(requestUri.c_str());
  Request->SetVerb("GET");
  Request->SetHeader(TEXT("User-Agent"), "X-UnrealEngine-Agent");
  Request->SetHeader("Content-Type", TEXT("application/json"));
  Request->ProcessRequest();
}

#pragma once

#include "CoreMinimal.h"
#include "Runtime/Online/HTTP/Public/Http.h"

class SignalApi
{
public:
  FHttpModule* Http;
  void SendEvent(const std::string& sender,const std::string& event);
};

게임 코드에서 조명 효과를 트리거하려면 트리거하려는 이벤트의 이름과 앱 또는 게임이 SignalRGB에 자신을 식별하는 데 사용할 이름을 지정하여 SendEvent 함수를 호출하십시오.

#include "SignalApi.h"

...
  // Set the sender variable.
  const std::string SAPI_APPNAME = "apiTestGame";
  // Initialize SignalApi class.
  SignalApi sapi;
  // Set the name of the event.
  std::string eventName = "weaponFired";
  // Send API event to SignalRGB.
  sapi.SendEvent(SAPI_APPNAME, eventName);

...

using UnrealBuildTool;

public class SignalApiTest : ModuleRules
{
  public SignalApiTest(ReadOnlyTargetRules Target) : base(Target)
  {
    PCHUsage = PCHUsageMode.UseExplicitOrSharedPCHs;

    PublicDependencyModuleNames.AddRange(new string[] { "Core", "CoreUObject", "Engine", "InputCore", "HeadMountedDisplay", "EnhancedInput", "Http" }); // you MUST add Http to this array or the build will fail!
  }
}