Help us understand the problem. What is going on with this article?

PlayCanvasのエディター上でHTML, CSSを組み込む方法

More than 1 year has passed since last update.

PlayCanvasとは

Webでゲームを作るためのエンジンでエンジン自体のソースコードはGitHub上でオープンソースで公開されております。2018年頃にSnapに買収されています。その後も開発は続いており最近は10日に1回程のペースで新機能がリリースされております。
https://github.com/playcanvas/engine/releases

概要

  • PlayCanvasのコードエディターはブラウザ上で開発することになるので少しつらい
  • Web開発者とゲーム開発者の溝がかなりありそう。
  • ビルドの仕組みを考えている。

前提

PlayCanvasはゲームエディターで基本的な開発はこのウェブのブラウザ上のエディターで完結されます。
1ヶ月ほど開発をしてみたのですが、基本的な開発フローとしては3つほどの流れで行いました。

  1. 3Dモデル・素材を作成
  2. PlayCanvas上でカメラの位置の調整、テクスチャの設定
  3. デプロイ

PlayCanvasのエディターの中で開発をしている分にはエディターなどが整備されておりますが、デプロイの時においてウェブに組み込む際には、PlayCanvas上でDOM操作をしてPlayCanvasの実行時にDOMを被せる or PlayCanvasビルド時に落ちてきたHTMLファイルをiframe上で動かす方法が多く見られます。

公式のサンプルにあるこちらのページはCanvasの上にかぶせて表示
BMW i8 - PLAYCANVS

こちらのページはiframeを表示している
VOXCELCANVAS

PlayCanvasのゲーム上にWebの要素を組み込む

HTMLを組み込む対象として、先日行われた2Dハンズオンのサンプルを使用します。

ハンズオンで使用したサンプルこちら2Dハンズオンチュートリアル

起動

少し寂しいですが、このまま使用します。

HTML/CSSを追加

  1. 空のEntityに対してスクリプトを追加をして好きな名前で保存

起動時に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が追加されます。

yushimatenjin
インターネットに無限の可能性を感じています。
https://twitter.com/Mxcn3
playcanvas
"PlayCanvasは、ブラウザ向けに作られたWebGL/HTML5ゲームエンジンです。PlayCanvas運営事務局は日本国内でのPlayCanvasの普及を目的に活動しています"
https://playcanvas.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした