Unity의 WebGL 빌드에서 Firestore에서 실시간으로 데이터를 검색하고 반영
개요
Unity의 WebGL 빌드에서 firestore에 액세스하고 싶습니다.
firebase의 SDK로 WebGL에서 동작하는 것이 없기 때문에 조금 궁리할 필요가 있다
흐름으로는
jslib 만들기
Assets 아래에 Plugins라는 디렉토리를 만들어 .jslib라는 확장명을 가진 파일을 만듭니다.
ES2015 이후의 기법은 사용할 수 없으므로 주의
firestore.jslib
mergeInto(LibraryManager.library, {
// 関数呼び出し
Hello: function () {
window.alert("Hello, world!");
},
Firestore: function() {
// firebaseのconfig
var firebaseConfig = {
apiKey: "xxxxxxxxxxxxxxxxx",
authDomain: "xxxxxxxxxxxxxxxxxxxxxxx",
databaseURL: "xxxxxxxxxxxxxxxxxxx",
projectId: "xxxxxxxxxxxxxxxxx",
storageBucket: "xxxxxxxxxxxxxxxxxxxx",
messagingSenderId: "xxxxxxxxxxxxxxxxxx",
appId: "xxxxxxxxxxxxxxxxxxxxxxx"
}
// firebaseの初期化
firebase.initializeApp(firebaseConfig);
var db = firebase.firestore();
db.collection("unity").doc("IHzXZcKpKwOiVFEVPbYT")
.onSnapshot(function(doc) {
console.log("Current data: ", doc.data());
SendMessage('Text', 'UpdateText', doc.data().text);
});
}
});
C # 측 스크립트
다음 스크립트를 빈 객체에 붙여 둡니다.
TextManager.cs
using UnityEngine;
using System.Runtime.InteropServices;
using UnityEngine.UI;
public class TextManager : MonoBehaviour
{
[DllImport("__Internal")]
private static extern void Firestore();
// js側から更新が合った時に呼び出される関数
public void UpdateText(string newText)
{
// テキストコンポーネントの取得
Text text = GameObject.Find("Text").GetComponent<Text>();
text.text = newText;
}
void Start()
{
//js側の関数を呼び出してデータの監視開始
Firestore();
}
}
빌드하여 만든 index.html에서 firebaseSDK를로드하도록 수정
WebGL처럼 빌드하면 index.html이 표시되므로 미세 수정
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity WebGL Player | firestore-test</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">
<script src="TemplateData/UnityProgress.js"></script>
<script src="Build/UnityLoader.js"></script>
<script>
var unityInstance = UnityLoader.instantiate("unityContainer", "Build/Build.json", {onProgress: UnityProgress});
</script>
</head>
<body>
<div class="webgl-content">
<div id="unityContainer" style="width: 960px; height: 600px"></div>
<div class="footer">
<div class="webgl-logo"></div>
<div class="fullscreen" onclick="unityInstance.SetFullscreen(1)"></div>
<div class="title">firestore-test</div>
</div>
</div>
// ここでfirebaseを読み込む
<script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-firestore.js"></script>
</body>
</html>
덤
같은 방식으로 데이터를 추가하고 업데이트 할 수 있으므로 저장 데이터와 같은 관리에 사용할 수 있습니다.
참고
Reference
이 문제에 관하여(Unity의 WebGL 빌드에서 Firestore에서 실시간으로 데이터를 검색하고 반영), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/bunchan_k/items/4c0208e2a390c7fea271텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
