unityroom에서 JavaScript 라이브러리 사용
15907 단어 JavaScriptUnityWebGLtech
성과물
제목과 같이 unityroom에 JavaScript 라이브러리가 사용됩니다.실제 실행 중인 프레젠테이션과 코드를 공개했다.
개시하다
유닛은 편하지만 신경 써야 할 일을 생각하면 금방 귀찮아진다.개체 플랫폼별로 로컬 플러그인을 쓰고 Unity도 작동합니다.NET용 라이브러리를 조립해야 합니다.
WebGL의 경우 브라우저의 API를 직접 두드리려는 경우도 있습니다.이 경우
.jslib 확장자 파일을 준비하고 브라우저 옆에 있는 API를 두드리는 것이 정공법이다.간단한 기능이라면 조금.jslib만 쓰면 되지만 복잡한 기능을 유니티의 독특한 형식.jslib으로 모두 실현하는 것은 매우 번거롭다.이 문제를 방지하는 방법 중 하나는 이미 공개된 JavaScript의 라이브러리를 사용하는 것입니다.구체적으로 어떻게 하면 좋을지 말하려면 사용하고 싶은 파일의 홈 페이지를 Unity WebGL 플레이어로 끼워 넣고 Script 태그로 읽으면 된다.몇 가지 방법이 있지만 유닛룸에서 사용하려면 설치 방법에 한계가 있다.
예를 들어 자신의 서버나 Firebase Hosting을 사용해 웹GL 게임을 공개했다면 바로''''대신 바꿀 수 있었을 것이다.Unity WebGL 플레이어에서 읽을 "페이지의 적절한 위치로 직접 이동
쓰기
<script src="hoge.js"></script>
동적 Script 태그 추가
이 문제는 "}"을 동적으로 편집하고 스크립트 탭을 설치해서 피할 수 있습니다.구체적으로 다음과 같은
.js 파일을 준비하고 게임이 시작될 때 유닛에서 호출하십시오.Sample.jslib
mergeInto(LibraryManager.library,
{
InjectionJs: function (url) {
url = Pointer_stringify(url);
var s = document.createElement("script");
s.setAttribute('src', url);
document.head.appendChild(s);
},
InjectionCSS: function (url) {
url = Pointer_stringify(url);
var s = document.createElement("link");
s.setAttribute('href', url);
s.setAttribute('rel', 'stylesheet');
document.head.appendChild(s);
},
SwalFireBase: function (body) {
body = Pointer_stringify(body);
Swal.fire(body);
}
});
using System.Runtime.InteropServices;
public class Sample : MonoBehaviour
{
[DllImport("__Internal")]
public static extern void InjectionJs(string url);
[DllImport("__Internal")]
public static extern void InjectionCSS(string url);
[DllImport("__Internal")]
private static extern void SwalFireBase(string body);
void Awake()
{
#if !UNITY_EDITOR && UNITY_WEBGL
{
var url = "https://cdn.jsdelivr.net/npm/sweetalert2@11";
InjectionJs(url);
}
#endif
}
public void ShowMessage(string body)
{
SwalFireBase(body);
}
}
js 파일 위치 정보
대부분의 경우 JavaScript 라이브러리는 CDN에서 공개되기 때문에 URL로 읽습니다.(예: Three.js 등.https://unpkg.com/[email protected]/build/three.min.js
그렇지 않다면 Firebase Hosting 등 초대 서비스로 호스트에서 읽어보자.
.jslib Unity에서 파일을 지원하지 않으므로 Unity 프로젝트에 포함할 수 없습니다.자신의 서버나 Firebase Hosting을 사용하여 WebGL 게임을 공개하는 경우 대부분의 경우 Streaming Assets 폴더를 사용해야 하기 때문에 .js 파일을 Streaming Assets 폴더에 놓고 읽을 수도 있다.그러나 unityroom의 경우 StreamingAssets 폴더를 사용할 수 없습니다.따라서 상술한 방법으로 대응하자.샘플 정보
글 첫머리에도 시위 행진과 코드가 공개됐다.
나는 상당히 재미있는 자바스크립트 프로그램 라이브러리를 만들어 보았다.자신이 인터넷 논밭이 아니기 때문에 각자의 도서관에 대한 이해가 매우 얕다는 것을 주의하세요.
1.SweetAlert2
풍부한 모드 창을 쉽게 실현할 수 있는 프로그램 라이브러리인 것 같습니다.특별한 권한이 필요하지 않기 때문에 유닛룸도 사용할 수 있다고 생각합니다.이번에 시도한 라이브러리 중에 가장 편리한 것 같아요.
Google Map과 유튜브에 iframe이 편입된 모드 창이 강하다는 것을 보여줄 수 있을 것 같습니다.구글의 견본에서 브라우저의 Geometry API를 두드려 현재 소재지의 위도 경도를 가져와 지도에 표시하려고 했지만 유닛룸에서는 작동하지 않았다.WebGL 플레이어가 iframe에 의해 모래상자로 만들어졌기 때문이다.무엇이든 실행하면 문제가 있기 때문에 안전성은 당연하다.
2.Uppy
파일 업로드기.파일을 지정한 끝에 업로드할 수 있습니다.모드 창에 표시할 수 있기 때문에 iframe에 끼워 넣은 유닛 룸에서도 쉽게 사용할 수 있습니다.드래그 앤 드롭도 지원됩니다.
3.Pushbar
유닛룸에서 사용할 기회가 없을 것 같습니다.화면의 위아래 좌우로 메뉴를 움직여 표시할 수 있습니다.슬라이딩 메뉴는 DOM을 동적으로 조작해서 만들어야 하기 때문에 사용하기가 매우 번거롭다.DOM 작업을 쉽게 할 수 있는 프로그램 라이브러리 같은 것을 가져오거나 미리 준비한 파일을 동적으로 읽을 수 있다면 실용적일 수 있습니다.
4.Push.js
이것은 알림 전송을 쉽게 사용할 수 있는 프로그램 라이브러리입니다.이것은 유닛 룸에서 실행되지 않는다고 소개했습니다.Gif는 unityroom이 아니라 로컬 서버에서 시도한 것입니다.uniryroom에서 사용할 수 없는 이유는 위에서 언급한 Geometry API와 같습니다.iframe에서는 기본적으로 사용자 허가가 필요한 조작을 할 수 없습니다.이번에 소개한 프로그램 라이브러리에도 푸시 알림이 있어 방치 게임에 편입될 수 있어 기대되지만 사용할 수 없어 아쉽다.
후기
이번 보도는 웹GL에 웹RTC의 DataChannel을 사용하기 위한 각종 조사와 검증을 위한 내용이었다.저쪽도 공개됐는데 괜찮으시면 보세요.
참고 문헌
Reference
이 문제에 관하여(unityroom에서 JavaScript 라이브러리 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/5ena/articles/f66d20bc228083텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
