PlayCanvasではHTML, CSSを使って手軽にUIの作成等を行うことが可能です。
ここでは簡単な情報の入出力を行うサンプルと共に使い方を紹介します。また、コード全文を記事の最後に記載しておりますので参考までにお使いください。
全画面表示はこちら
Editorから新規にHTML, CSS, Scriptを作成
[HTML]
<div class="container">
<h2>.....
</div>[CSS]
.container {
position: absolute;
background-color: rgba(51,51,51,0.6);
top: calc(50% - 100px);
left: calc(50% - 150px);
width: 300px
}HTMLに必要となる要素を記述します。デフォルトでは画面の見えない位置に挿入されてしまうため、すべてをまとめたdiv要素をCSSから配置を変更します。
なお、PlayCanvasではHTML及びCSSは文字列として扱われるため拡張子はつきません※。
ScriptからHTML, CSSをロード
[Script]
// in initialize method...
//HTMLリソースのロード及び初期化
var htmlAsset = this.app.assets.find('index');
var div = document.createElement('div');
div.innerHTML = htmlAsset.resource;
document.body.appendChild(div);
htmlAsset.on('load', function () {
div.innerHTML = htmlAsset.resource;
});
// CSSリソースのロード及び初期化
var cssAsset = this.app.assets.find('Style');
var style = document.createElement('style');
document.head.appendChild(style);
style.innerHTML = cssAsset.resource;
cssAsset.on('load', function() {
style.innerHTML = cssAsset.resource;
});
上記のコードをinitializeメソッド内で実行することでHTML, CSSがシーンにロードされます。
HTMLへ出力
ゲームのスコアや、ステートなど、画面へのテキスト出力が必要となるシチュエーションは多くあります。
モバイル端末ではconsole.log()を確認することができないので、HTMLの利用が便利です。
[HTML]
<p id="text">Num of entitys : </p>[Script]
document.getElementById("text").innerHTML = "Num of entitys : " + score;上記のようにHTMLでidを定義し、Scriptからdocument.getElementById().innerHTMLメソッドを使用して書き換えることが可能です。
HTMLから入力
HTMLはinput要素を使用することで多くの入力インタフェースを実装することが可能です。このサンプルでは、select, color, range, button要素をそれぞれ紹介します。
select, color, range
[HTML]
<select id="select" name="select">[Script]
var select = document.getElementById("select").value出力時と同じように、document.getElementById()でエレメントを取得しそのなかのvalueプロパティに入力された値が可能されています。
button
[HTML]
<input id="button" type="button" name="button" value="Add Entity" size="40">[Script]
//in update method
document.getElementById("button").onclick = function(){
//call if you push button
}button要素は上記のように記述することでイベントを取得できます。
コード全文
index.html
<div class='container'>
<h2>HTML Sample</h2>
<form>
<p>Type : <select class="styled-select black rounded" id="select" name="select">
<option value="box">Box</option>
<option value="sphere">Sphere</option>
<option value="cone">Cone</option>
<option value="cylinder">Cylinder</option>
</select></p>
<p>Color : <input id="color" value="#ffffff" type="color" name="color" size="40"></p>
<p>Size : <input id="range" type="range" name="range" size="40"></p>
<p><input class="button2" id="button" type="button" name="button" value="Add Entity" size="40"></p>
</form>
<p id="text">Num of entitys : </p>
</div>
style.css
body {
font-family: "Courier New", Courier, monospace;
text-align: center;
}
p {
color: #fff;
}
h2 {
color: #fff;
}
.container {
position: absolute;
background-color: rgba(51,51,51,0.6);
top: calc(50% - 100px);
left: calc(50% - 150px);
width: 300px
}
.button {
position: relative;
background-color: #f7d034;
border-radius: 4px;
color: #fff;
line-height: 52px;
-webkit-transition: none;
transition: none;
box-shadow: 0 3px 0 #f7ba59;
text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
width: 200px
}
.button:hover {
top: -4px;
box-shadow: 0 7px 0 #f7ba59;
}
.button:active {
top: 3px;
box-shadow: none;
}
htmlsample.js
var Htmlsample = pc.createScript('htmlsample');
var root;//ヒエラルキーのルートを取得
// initialize code called once per entity
Htmlsample.prototype.initialize = function() {
//HTMLリソースのロード及び初期化
var htmlAsset = this.app.assets.find('index');
var div = document.createElement('div');
div.innerHTML = htmlAsset.resource;
document.body.appendChild(div);
htmlAsset.on('load', function () {
div.innerHTML = htmlAsset.resource;
});
// CSSリソースのロード及び初期化
var cssAsset = this.app.assets.find('Style');
var style = document.createElement('style');
document.head.appendChild(style);
style.innerHTML = cssAsset.resource;
cssAsset.on('load', function() {
style.innerHTML = cssAsset.resource;
});
//Rootを代入
root = this.app.root.findByName("Root");
};
// update code called every frame
Htmlsample.prototype.update = function(dt) {
this.entity.model.type = document.getElementById("select").value.toString();//セレクタからモデルタイプを変更
//color要素から色情報を取得
var col = document.getElementById("color").value.toString();
col = col.split("");
var colR = col[1] + col[2];
var colG = col[3] + col[4];
var colB = col[5] + col[6];
//マテリアルに色情報を代入 PlayCanvasでは0-1に変換
this.entity.model.material._diffuse.r = parseInt(colR,16)/255;
this.entity.model.material._diffuse.g = parseInt(colG,16)/255;
this.entity.model.material._diffuse.b = parseInt(colB,16)/255;
this.entity.model.material.diffuseMapTint = new pc.Color(parseInt(colR,16)/255,parseInt(colG,16)/255,parseInt(colB,16)/255);
this.entity.model.material.update();
//range要素からsizeに代入
var size = document.getElementById("range").value / 50;
this.entity.setLocalScale(size,size,size);
//text要素にScene内のEntity数を出力
document.getElementById("text").innerHTML = "Num of entitys : " + root._children.length;
//buttonを押した際のイベントハンドラ
document.getElementById("button").onclick = function(){
//オブジェクトを新規作成
var obj = new pc.Entity();
obj.addComponent("model",{
type:document.getElementById("select").value.toString()
});
obj.setLocalScale(size,size,size);
//ランダムな位置に生成する
obj.setLocalPosition((Math.random()-0.5)*7,(Math.random()-0.5)*7,(Math.random()-0.5)*7);
var col = document.getElementById("color").value.toString(); //example #ac67e3
col = col.split("");
var colR = col[1] + col[2];
var colG = col[3] + col[4];
var colB = col[5] + col[6];
obj.model.material._diffuse.r = parseInt(colR,16)/255;
obj.model.material._diffuse.g = parseInt(colG,16)/255;
obj.model.material._diffuse.b = parseInt(colB,16)/255;
obj.model.material.diffuseMapTint = new pc.Color(parseInt(colR,16)/255,parseInt(colG,16)/255,parseInt(colB,16)/255);
obj.model.material.update();
root.addChild(obj);
}
};
// swap method called for script hot-reloading
// inherit your script state here
Htmlsample.prototype.swap = function(old) {
};
// to learn more about script anatomy, please read:
// http://developer.playcanvas.com/en/
コメント
0件のコメント
サインインしてコメントを残してください。