前回はDOMを追加しました
しかし、DOM追加しただけで、CSSによるstyleがついていません…
PlayCanvasだけではないですが、canvas要素などのコンテンツの上にDOMを乗せていきます！
#Projectを用意
前回のDOMを追加したProjectを使っていきます。
前回のProjectではcontentというclass名のDOMが追加しました。
#CSSの付与の仕方
DOMにstyleを付けますが、方法はいくつかあります。
今回は前回作ったaddHTML.jsに追記する形でいきます。
var AddHtml = pc.createScript('addHtml');
AddHtml.prototype.initialize = function() {
var domContent = document.createElement("div");
domContent.classList.add("content");
document.body.appendChild(domContent);
};
##JavaScriptからDOMごとにstyleを付与
ここではdomContentが大事になってきます。
domContentはHTMLElementというインターフェースで、これはDOM要素のことを言っていると思ってもらえれば良いかなと。
これにはstyleプロパティがあり、これを使ってstyleをJavaScriptから指定することができます。
例えば以下のようにする。
var AddHtml = pc.createScript('addHtml');
AddHtml.prototype.initialize = function() {
var domContent = document.createElement("div");
domContent.classList.add("content");
document.body.appendChild(domContent);
domContent.style.width = "500px";
domContent.style.height = "500px";
domContent.style.background = "#ffffff";
};
すると、幅と高さが500x500の白い正方形ができるはずですが、見えませんね…
Developerツールで見ると存在はしているようです。
また、styleもちゃんと当たっているのがわかります。
なぜ見えていないのか、という話は後ほどします。
##JavaScriptからCSSを書く
先ほどは、domContentstyleにstyleプロパティを使ってstyleをつけましたが、
直接JavaScriptsにCSSの記述でstyleを書くこともできます。
var AddHtml = pc.createScript('addHtml');
AddHtml.prototype.initialize = function() {
var domContent = document.createElement("div");
domContent.classList.add("content");
document.body.appendChild(domContent);
var createCss = function () {
var css = [
'.content {',
' width: 500px;',
' height: 500px;',
' background: #ffffff;',
'}',
].join('\n');
var style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
document.head.appendChild(style);
};
};
実はこの書き方は個人的に好きではないです。
ですが、PlayCanvasのLoading Screenを構成している__loading.jsには、この書き方でcssを追記していますね。
class名で指定したいとか、hoverとかのCSSアニメーションなんかもつけたい場合には使える手段です。
##CSSを属性から読み込む
先ほどまではJavaScriptからstyleを指定していましたが、
WebならCSSでstyleを指定するのがいいですよね。私はその方が良いです。
CSSファイルを新規作成します。
jsファイルを新規作成するのと同じ手法ですが、今回はコードエディターから。
上部メニューのCreate NewからCSS Assetを作成。
名前も変えておきましょう
ビジュアルエディターからでも新規作成・名前変更は可能です。
CSSファイルを作ったら、これをweb上に反映させます。
作っただけではダメなんです。ちゃんと配置させます。
AddHtml.jsで先ほど作ったstyle.cssを読み込ませていきます。
外部ファイルであるstyle.cssをAddHtml.jsで使うために、attributesを使います。
これはAddHtml.jsに属性を追加することができ、AssetやEntityも属性として登録してスクリプトで操作することが容易になります。
ここではstylesheetという属性名でAssetsのstyle.cssを呼び出しています。
HTML5においてCSSファイルはlink要素のhrefプロパティから参照することでstyleを読み込むことができます。
そのlink要素をheadタグに追加することで完了です。
var AddHtml = pc.createScript('addHtml');
AddHtml.attributes.add("stylesheet",{type:"asset",assetType:"css"});
AddHtml.prototype.initialize = function() {
var domContent = document.createElement("div");
domContent.classList.add("content");
document.body.appendChild(domContent);
var link = document.createElement('link');
link.rel = "stylesheet";
link.href = this.stylesheet.getFileUrl();
document.head.appendChild(link);
};
attributesで追加した属性は以下のように登録ができます。
スクリプトを更新するだけでは反映されませんが、Parseを押すことで解消されます。
#作ったDOM要素が見えなかった件について
.content {
width: 500px;
height: 500px;
background: #fff;
}
これは先ほど作ったstyleですが、白い正四角形が見えていたはずですが見えませんでしたね。
一体なぜなのか。
##Positionのせいなのね
canvas要素にあるposition: absolute;というプロパティがその原因です。
positionは要素の配置方法を指定することができます。
HTMLリファレンスの解説を引用しながら解説してみます。
positionには4つの値があります。
- static
- 配置方法は指定無し。positionの初期値。
- relative
- 相対位置への配置。
- absolute
- 絶対位置への配置。
- 親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となる。
- 親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となる。
- fixed
- 絶対位置への配置となるのはabsoluteと同様だが、スクロールしても位置が固定されたままとなる。
この配置で大事なのはstaticなのか、static以外なのかというところです。
staticは平面上にぺったりくっついている感じです。
それに対して、static以外のrelative、absolute、fixedは、staticの平面の更に上に乗っかっている感じです。
レイヤー層がpositionによって違ってきますね。
そのため、canvas要素がレイヤーが上に来てしまって、AddHtml.jsから追加した要素が見えなくなってしまっていたんですね。
ここまで来たらどうしたら良いか、わかってきますね。
.content {
position: absolute;
width: 500px;
height: 500px;
background: #ffffff;
}
おーレイヤーが上に来ましたね！
これでDOMが追加できましたし、styleを理解し操作することでレイヤーも分けられました。
###Positionのいろんな使い方
####左上（初期位置）
.content {
position: absolute;
top: 0;
left: 0;
}
####右上
.content {
position: absolute;
top: 0;
right: 0;
}
####左下
.content {
position: absolute;
bottom: 0;
left: 0;
}
####右下
.content {
position: absolute;
bottom: 0;
right: 0;
}
####中央配置
私はこれが一番理屈に合った中央配置なので使っているだけですが、
中央配置には色んなやり方がありますので、検索してみましょう
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%)
}
配置以外にも、z-indexというz軸の値を使うこともできます。
top,bottomがy軸で、left,rightがx軸といえば、わかりやすいですね。
z軸はレイヤーの順番を任意で変えることができるので色々活用していきましょう。
.content {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
そんなこんなで今回はstyleで装飾つけるまでやりました…
え？
「装飾というかpositionの話しかしてないじゃん」
そうですね…
確かにpositionしかやっていないですね……
もちろん、CSSでは色んなstyleを指定することができます！
ですが、今回の解説は少し長くなったのできたのでここまで。
もっと装飾をつけていく話は、次回の記事で！
お楽しみに〜！