Unity WebGL ScreenShot 저장하는 방법

주의사항)

Unity WebGL에서는 로컬 파일 시스템에 직접 접근해 저장하는 기능이 제한되어 있기 때문에, 일반적인 PC 빌드처럼 Application.persistentDataPath에 스크린샷을 저장할 수는 없습니다. 대신 WebGL에서는 다음과 같은 방식으로 스크린샷을 캡처하고, 사용자가 이미지를 다운로드하도록 해야함

 

 

1) 유니티 스크립트 생성

    public class ScreenshotWebGL : MonoBehaviour
    {
#if UNITY_WEBGL && !UNITY_EDITOR
    [DllImport("__Internal")]
    private static extern void DownloadImage(string base64, string filename);
#endif

        public void CaptureScreenshot()
        {
            StartCoroutine(TakeScreenshot());
        }

        private IEnumerator TakeScreenshot()
        {
            yield return new WaitForEndOfFrame();

            Texture2D tex = new Texture2D(Screen.width, Screen.height, TextureFormat.RGB24, false);
            tex.ReadPixels(new Rect(0, 0, Screen.width, Screen.height), 0, 0);
            tex.Apply();

            byte[] imageBytes = tex.EncodeToPNG();
            string base64 = System.Convert.ToBase64String(imageBytes);
            Destroy(tex);

#if UNITY_WEBGL && !UNITY_EDITOR
        DownloadImage(base64, "screenshot.png");
#else
            Debug.Log("스크린샷 기능은 WebGL에서만 작동합니다.");
#endif
        }
    }

 

2) .jslib 파일 만들기

Assets/Plugins/WebGL/Screenshot.jslib

mergeInto(LibraryManager.library, {
  DownloadImage: function (base64Ptr, fileNamePtr) {
    var base64 = UTF8ToString(base64Ptr);
    var fileName = UTF8ToString(fileNamePtr);

    var a = document.createElement("a");
    a.href = "data:image/png;base64," + base64;
    a.download = fileName;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  }
});

 

Unity의 WebGL에서 C# → JS 연결 시 사용하는 공식 방식

---

구체설명)

❓ C#에서 DownloadImage(...)를 호출했는데, 그 함수는 어디 있어요?

그 함수는 자바스크립트(JS) 코드 안에 있어요.

Unity WebGL은 게임이 브라우저에서 실행되기 때문에,
브라우저에서 실행되는 코드인 JavaScript와 소통해야 할 필요가 생겨요.

 

 C# 쪽 (Unity 코드)

[DllImport("__Internal")] private static extern void DownloadImage(string base64, string filename);

이 부분은 "C#에서 JavaScript 함수 하나 연결할게요!" 라고 선언하는 부분이에요.

• "__Internal" 은 "브라우저 안에서 제공되는 JS 함수" 라는 뜻이에요.
• DownloadImage(...) 함수는 C#이 아니라 JS에 있어야 합니다.

 

JS코드 풀이

 1. mergeInto(LibraryManager.library, { ... })

• Unity WebGL에서 C# ↔ JS 연결을 위해 필수 포맷
• 이 안에 정의된 함수는 C#에서 호출할 수 있게 돼요.

 2. DownloadImage: function (base64Ptr, fileNamePtr) { ... }

• 이름을 맞춰야 해요! C#에서 DownloadImage(...) 라고 썼으니까, JS에서도 같은 이름의 함수를 만들어야 해요.
• base64Ptr과 fileNamePtr은 C#에서 넘겨준 문자열이에요 (메모리 포인터 형태로 전달됨).

3. UTF8ToString(base64Ptr)

• 포인터(base64Ptr)를 자바스크립트용 문자열(base64) 로 바꿔주는 함수
• Unity에서 넘어온 데이터를 자바스크립트가 읽을 수 있게 해주는 거예요

 4. var a = document.createElement("a");

• <a> 태그를 새로 만듭니다. 이건 "다운로드 링크" 역할을 해요.

 5. a.href = "data:image/png;base64," + base64;

• 만들어진 링크에 base64 이미지 데이터를 연결해요.
• "data:image/png;base64," 는 "이건 PNG 이미지야!" 라고 브라우저에 알려주는 신호예요.

6. a.download = fileName;

• 사용자가 다운로드할 때 사용할 파일 이름 지정

7. a.click();

• 자바스크립트로 클릭 이벤트를 강제로 발생시켜서
• 다운로드를 자동으로 시작하게 해요!

8. document.body.appendChild(a); ... removeChild(a);

• 링크를 웹페이지에 추가한 뒤, 클릭하고 바로 제거해요.
• 화면에 아무것도 안 뜨게 하기 위한 깔끔한 처리입니다.

브라우저에서 제공하는 JS 기능들 (예시)

 

기능	관련 JS 함수
파일 다운로드	a.href, a.download, Blob, URL.createObjectURL
클립보드 복사	navigator.clipboard.writeText()
알림창	alert(), confirm(), prompt()
로컬 저장	localStorage.setItem()
마우스 잠금	document.body.requestPointerLock()
전체 화면 전환	document.documentElement.requestFullscreen()
서버 요청	fetch(), XMLHttpRequest
카메라/마이크 접근	navigator.mediaDevices.getUserMedia()

 

 

 

자료)

https://github.com/Hashory/unity-webgl-screenshot?tab=readme-ov-file

GitHub - Hashory/unity-webgl-screenshot: An example of saving a screenshot in Unity webGL.

 

 

https://docs.unity3d.com/Manual/webgl-interactingwithbrowserscripting.html

 

 

https://eunjin3786.tistory.com/521

[Unity] 스크린 캡쳐 / 앨범에 저장하기

https://eunjin3786.tistory.com/532

[Unity] 네이티브 플러그인

https://github.com/yasirkula/UnityNativeGallery

GitHub - yasirkula/UnityNativeGallery: A native Unity plugin to interact with Gallery/Photos on Android & iOS (save and/or load