本記事では、STYLYのSceneに画像を挿入して配置する方法と、画像を調整する方法について紹介します。
画像のアップロード方法

Webエディタ画面
まずはSTYLYのWebエディタを開いてください。左上に “Assets” というボタンがあるのでそこをクリックします。

挿入するAssetの種類を選ぶ画面
今回は画像を挿入したいので “Image” を選択します。

画像のアップロード画面
“Select” をクリックすると、エクスプローラが起動して画像を選択できるようになるので、挿入したい画像を選択してください。挿入したい画像がまだPC内に保存されていない場合は、保存してから選択してください。
画像のファイル名が “Select” 横の欄に表示されたら、”Select” 下の “Upload” を選択してください。
このような画面になればアップロードは成功です。”Next” を選択して次に進みましょう。
取り込んだ画像をSceneに挿入する方法

画像の挿入画面1
画像をどのようなスクリーンに入れるか選択します。各スクリーンについて紹介します。Regular Screensは、サイズ比を変えたスクリーン、形状を変えたスクリーン、360°スクリーンがあります。3D Rotating Screensは、立体的かつ動きのあるスクリーンです。

画像の挿入画面2
- Square Screen:縦横サイズ比のスクリーン
- 16:9 Screen:16:9のサイズ比のスクリーン
- Original Aspect Screen:元画像のサイズ比のスクリーン
- Curved Screen:カーブスクリーン
- Tunel Screen:トンネルスクリーン

360°Screen

Rotating Cube

Rotating Slanted Cube

Rotating Sphere

Rotating ICO Sphere

Rotating Star
- Rotating Cube:四角体に画像を張り付け、回転するスクリーン
- Rotating Slanted:斜めに傾けた四角体に画像を張り付け、回転するスクリーン
- Rotating Sphere:球体に画像を張り付け、回転するスクリーン
- Rotating ICO Sphere:ICO球体に画像を張り付け、回転するスクリーン
- Rotating Star:星形体に画像を張り付け、回転するスクリーン
今回は例としてOriginalScreenで挿入していきます。
画像の調整方法1、拡大縮小

画像調整画面1
画像を挿入しましたが、このままでは小さいですね。自分好みのサイズに変更しましょう。

画像調整画面2
エディタ画面右端のサイドボタンで “Scale” 状態にしてください。※後で述べますがこのボタンはmove/rotate/scaleの切り替えができ、それぞれ対象アセットに移動・回転・拡大縮小の操作ができます。

画像調整画面3
赤・青・緑・白のキューブをドラッグ&ドロップでそれぞれの向きに拡大縮小することも可能です。
今回は原型画像のアスペクト比を保つために画像下にあるX・Y・Zの数値を同じにすることで拡大します。

画像調整画面4
X・Y・Zを選択することで数値を打ち込むことが可能です。今回はそれぞれ10としました。
画像の調整方法2、移動
画像は大きくなりましたが、DefaultGroundが画像の真ん中を通過している様に見えるので画像を移動します。
※DefaultGround自体を移動することで画像をちゃんと見せることも可能です。

画像調整画面5
サイドボタンの “Scale” を “Move” に変更してください。
砂浜が見えるようにしたいので、Yの値を1.2としました。
画像の調整方法3、回転
最後に、3つ目の機能であるRotateを紹介します。
StartPositionの人物の周囲に上記の画像を配置して、見渡す限り砂浜の画像が見えるというSceneを作っていきましょう。

画像調整画面6
左端のヒエラルキーメニューで挿入した画像を選択した状態で、複製ボタンを3回押してください。
4つの、まったく同じ画像ができたので、これをStartPositionの周囲に配置していきます。
複製した3つの画像を、Moveボタンで配置します。このときYの値は変える必要がないので(高さは一定なので)、XとZの値を調整しながら4つの画像が重ならないように配置してください

画像調整画面7
うまく配置することができましたが、画像と画像の境目が違和感ありますね。連続した景色の様に見せたいので、片方の画像を反転させましょう。
サイドボタンを “Rotate” にして、片方の画像のYの値に180を足した値を入力しましょう。

画像調整画面8
つながった景色みたいになりましたね。これで見渡す限り同じ景色が見えるSceneの完成です。
お疲れさまでした。今回はOriginal Aspectでのアップロード形式を紹介しましたが、それ以外にも形式はあるので画像の種類や作りたいSceneに合うようにいろいろ試してみてください。