PlayCanvas 편집기에 HTML, CSS를 삽입하는 방법

PlayCanvas

웹에서 게임을 만드는 엔진, 엔진 자체의 소스 코드는 GitHub에서 오픈 소스 코드로 공개됩니다.2018년경 Snap에 인수되었습니다.이후 개발을 계속해 최근 10일에 한 번씩 새로운 기능을 발표했다.
https://github.com/playcanvas/engine/releases

개요

PlayCanvas의 코드 편집기는 브라우저에서 개발된 것이기 때문에 좀 고통스럽다

웹 개발자와 게임 개발자 사이에는 상당한 갭이 있다.

구축 메커니즘을 고려한다.

전제 조건

PlayCanvas는 게임 편집기로서 기본 개발은 이 웹 브라우저의 편집기에서 완성됩니다.
한 달 정도 개발을 시도했지만 기본적인 개발 절차는 3개 정도의 절차로 진행됐다.

3D 모델 소재 만들기

PlayCanvas에서 카메라 위치 조정, 텍스처 설정

배포

PlayCanvas의 편집에서 개발된 부분은 편집 등을 갖추고 있지만 배치할 때 웹 페이지에 편입할 때 PlayCanvas에서 DOM 작업을 하는 것을 볼 수 있으며, PlayCanvas가 실행될 때 DOM이나 PlayCanvas가 구축될 때 떨어진 HTML 파일을 iframe에서 이동하는 방법이 많다.
공식 견본의 이 페이지는 Canvas에 덮여 있다
BMW i8 - PLAYCANVS
이 페이지에 iframe 표시
VOXCELCANVAS

PlayCanvas 게임에 웹 요소 추가

며칠 전에 행한 예제 2차원 한스톤 를 HTML 포함 객체로 사용합니다.
한스톤이 사용한 샘플 여기2차원 휴대용 편성 강좌
부팅 좀 외롭지만 이렇게 사용합니다. HTML/CSS 추가

스크립트를 빈 실체에 추가하고 원하는 이름으로 저장합니다

시작 시 HTML 및 CSS를 추가할 스크립트를 추가합니다. ui.js const Ui = pc.createScript("ui"); Ui.attributes.add("css", { type: "asset", assetType: "css", title: "CSS Asset" }); Ui.attributes.add("html", { type: "asset", assetType: "html", title: "HTML Asset" }); Ui.prototype.initialize = function() { const body = document.getElementsByTagName("body")[0]; const head = document.getElementsByTagName("head")[0]; const style = `<style>${this.css.resource}</style>`; body.insertAdjacentHTML("afterbegin", this.html.resource); head.insertAdjacentHTML("afterbegin", style); }; HTML·CSS 추가 좋아하는 HTML 추가 Launch를 다시 사용하면 시작 시 HTML이 추가됩니다.