krpanoのlayer要素と属性について。

こんにちは。エンジニアの筒井です。
衣替えのタイミングを見誤り、若干寒い日々を過ごしています。

最近、業務でパノラマのオーサリングを行いました。

ネクストページでは360°パノラマというサービスを展開しています。
https://nxpg.net/360/

パノラマのオーサリングとは

まず、パノラマのオーサリングでどのようなことをしているか説明をします。
今回は、layer要素についての説明記事のため、それに関係する部分を紹介しようと思います。

いづよね360° VR動画お店紹介
こちらは私がオーサリングに携わってはいないのですが、制作実績として公開されているため、当記事で引用しています。

パノラマを見ると、オレンジ色のビックリマークや矢印のアイコンが表示されています。
それぞれクリックすると他のシーン(※)に飛んだり、説明が表示されたりします。
これらのアイコンを配置したり、クリックした時の挙動を設定したりという作業がオーサリングで行われます。

※このパノラマには矢印をクリックすることで「店舗」から「精米室」へ、「精米室」から「店舗」へと移動することができます。この「店舗」と「精米室」をそれぞれシーンと呼びます。

オーサリングツールについて

パノラマを制作するにあたって使用したのは、「krpano」というオーサリングツールです。

krpano公式サイト

krpanoでオーサリングする場合、データをxmlファイルで管理します。
今回はkrpanoで使用するxmlの構造のうち、よく使うlayerという要素と、layer要素内での使用頻度の高い属性について説明します。
公式リファレンスでは以下のページで説明がなされています。
https://krpano.com/docu/xml

layer要素について

layer要素とは、パノラマ内に画像・文字・背景色などを設置したいときに使用する要素です。

layer要素については、公式リファレンスでは以下の部分が相当します。
https://krpano.com/docu/xml/#layer

似ている要素としてhotspot要素が存在しています。
hotspot要素の詳しい説明は今回は割愛しますが、次の項目で説明する要素内で使用できる属性については、layer要素と同じものもあるので参考にしていただければと思います。
要素内では大きさ・位置などをそれぞれの属性で設定していきます。

要素内で使われる頻度の高い属性について

ここでは、要素内で使われる頻度の高い属性についていくつか紹介をします。

name属性
layer要素に名前をつける属性です。
パノラマでは要素に名前をつけておく必要があります。複数のlayer要素を親子関係にしたり、イベントを設定したりするときに、該当のlayer要素を呼び出せなくなるためです。

parent属性
複数のlayer要素を親子関係にするときに使用します。親となるlayer要素名を設定しておくと、その子要素となります。

visible属性
表示・非表示の切り替えを設定します。初期値はtrue(=表示)です。

align属性
要素を画面のどこに置くかを設定します。
中央(center)・左上(lefttop)・上端中央(top)・右上(righttop)・右端中央(right)・右下(rightbottom)・下端中央(bottom)・左下(left bottom)・左端中央(left)が設定可能です。

edge属性
align属性で設定された場所に、layer要素のどの位置が置かれるかを設定します。設定可能な値はalign属性と同じです。

align属性とedge属性に関しては公式リファレンスのイラストレーションを参考にするのがわかりやすいです！

width属性・height属性
横幅・縦幅を設定します。

width属性とheight属性に関しては、片方にpropを設定すると、縦横比を保ったままサイズを変更することができます。