소개

Unity에서는 WebGL 용 빌드에서 브라우저와 함께 작동하도록 JavaScript 플러그인을 만들 수 있습니다.
Unity 2019에서 WebGL에서 파일 대화 상자를 처리하는 프로젝트가 있었지만,
요 전날 Unity 2020으로 업데이트하고 빌드했는데 브라우저(Google Chrome)에서 다음과 같은 오류가 발생했습니다.
이번에는 그 대처에 대해 공유하려고합니다.
※JavaScript 에 대해 자세하지 않기 때문에, 실수등 있을지도 모릅니다만 양해 바랍니다.

TypeError: Cannot read property 'addEventListener' of null at [関数名]

버전

Unity 2020.3.13f1

전제

WebGL에서 파일 대화 상자를 처리하는 방법으로 다음 기사의 FileImporter.jslib
참고로 하고 있었습니다.

Unity의 WebGL 출력에서 ​​HTML 파일 선택 대화 상자를 표시하여 외부 파일 로드

오류 내용 및 원인

TypeError: Cannot read property 'addEventListener' of null at [関数名]

FileImporter.jslib 안에서 addEventListener 를 사용하고 있는 것은 한 곳, document.getElementById('#canvas') 뒤만입니다.
아무래도 ID: #canvas 로 Canvas 를 얻을 수 없게 된 것 같습니다…
아마도 Unity 2020부터 WebGL 빌드 파일의 출력 형식이 변경되었을 수 있습니다.

빌드 출력의 index.html을 들여다 보면,



그래서 #canvas가 아니라 unity-canvas라는 ID가 부여되게 된 것 같습니다.
또한 조금 아래로



에서 미리 취득해 주고 있으므로, getElementById 를 사용하지 않아도 변수 canvas 로서 직접 액세스 할 수 있을 것 같습니다.

대처

따라서 FileImporter.jslib의 두 위치

document.getElementById('#canvas').removeEventListener('click', OpenFileDialog);

document.getElementById('#canvas').addEventListener('click', OpenFileDialog, false);

,

document.getElementById('unity-canvas').removeEventListener('click', OpenFileDialog);

document.getElementById('unity-canvas').addEventListener('click', OpenFileDialog, false);

또는,

canvas.removeEventListener('click', OpenFileDialog);

canvas.addEventListener('click', OpenFileDialog, false);

다시 작성하여 작동합니다.