本記事では、STYLYのSceneに画像を挿入して配置する方法と、画像を調整する方法について紹介します。
画像のアップロード方法
![1 - STYLY](https://styly.cc/wp-content/uploads/2018/06/1-6-1024x493.png)
Webエディタ画面
まずはSTYLYのWebエディタを開いてください。左上に “Assets” というボタンがあるのでそこをクリックします。
![2 - STYLY](https://styly.cc/wp-content/uploads/2018/06/2-3-1024x375.png)
挿入するAssetの種類を選ぶ画面
今回は画像を挿入したいので “Image” を選択します。
![3 - STYLY](https://styly.cc/wp-content/uploads/2018/06/3-3-1024x306.png)
画像のアップロード画面
“Select” をクリックすると、エクスプローラが起動して画像を選択できるようになるので、挿入したい画像を選択してください。挿入したい画像がまだPC内に保存されていない場合は、保存してから選択してください。
画像のファイル名が “Select” 横の欄に表示されたら、”Select” 下の “Upload” を選択してください。
このような画面になればアップロードは成功です。”Next” を選択して次に進みましょう。
取り込んだ画像をSceneに挿入する方法
![5 - STYLY](https://styly.cc/wp-content/uploads/2018/06/5-2.png)
画像の挿入画面1
画像をどのようなスクリーンに入れるか選択します。各スクリーンについて紹介します。Regular Screensは、サイズ比を変えたスクリーン、形状を変えたスクリーン、360°スクリーンがあります。3D Rotating Screensは、立体的かつ動きのあるスクリーンです。
![image25-1 - STYLY](https://styly.cc/wp-content/uploads/2018/06/image25-1.png)
画像の挿入画面2
- Square Screen:縦横サイズ比のスクリーン
- 16:9 Screen:16:9のサイズ比のスクリーン
- Original Aspect Screen:元画像のサイズ比のスクリーン
- Curved Screen:カーブスクリーン
- Tunel Screen:トンネルスクリーン
![360°Screen - STYLY](https://styly.cc/wp-content/uploads/2018/06/360°Screen-1024x621.gif)
360°Screen
![あ - STYLY](https://styly.cc/wp-content/uploads/2018/06/あ.gif)
Rotating Cube
![い - STYLY](https://styly.cc/wp-content/uploads/2018/06/い.gif)
Rotating Slanted Cube
![う - STYLY](https://styly.cc/wp-content/uploads/2018/06/う.gif)
Rotating Sphere
![え - STYLY](https://styly.cc/wp-content/uploads/2018/06/え.gif)
Rotating ICO Sphere
![お - STYLY](https://styly.cc/wp-content/uploads/2018/06/お.gif)
Rotating Star
- Rotating Cube:四角体に画像を張り付け、回転するスクリーン
- Rotating Slanted:斜めに傾けた四角体に画像を張り付け、回転するスクリーン
- Rotating Sphere:球体に画像を張り付け、回転するスクリーン
- Rotating ICO Sphere:ICO球体に画像を張り付け、回転するスクリーン
- Rotating Star:星形体に画像を張り付け、回転するスクリーン
今回は例としてOriginalScreenで挿入していきます。
画像の調整方法1、拡大縮小
![画像5 - STYLY](https://styly.cc/wp-content/uploads/2018/06/画像5.png)
画像調整画面1
画像を挿入しましたが、このままでは小さいですね。自分好みのサイズに変更しましょう。
![7 - STYLY](https://styly.cc/wp-content/uploads/2018/06/7.png)
画像調整画面2
エディタ画面右端のサイドボタンで “Scale” 状態にしてください。※後で述べますがこのボタンはmove/rotate/scaleの切り替えができ、それぞれ対象アセットに移動・回転・拡大縮小の操作ができます。
![画像6 - STYLY](https://styly.cc/wp-content/uploads/2018/06/画像6.png)
画像調整画面3
赤・青・緑・白のキューブをドラッグ&ドロップでそれぞれの向きに拡大縮小することも可能です。
今回は原型画像のアスペクト比を保つために画像下にあるX・Y・Zの数値を同じにすることで拡大します。
![画像7 - STYLY](https://styly.cc/wp-content/uploads/2018/06/画像7.png)
画像調整画面4
X・Y・Zを選択することで数値を打ち込むことが可能です。今回はそれぞれ10としました。
画像の調整方法2、移動
画像は大きくなりましたが、DefaultGroundが画像の真ん中を通過している様に見えるので画像を移動します。
※DefaultGround自体を移動することで画像をちゃんと見せることも可能です。
![画像8 - STYLY](https://styly.cc/wp-content/uploads/2018/06/画像8-1024x650.png)
画像調整画面5
サイドボタンの “Scale” を “Move” に変更してください。
砂浜が見えるようにしたいので、Yの値を1.2としました。
画像の調整方法3、回転
最後に、3つ目の機能であるRotateを紹介します。
StartPositionの人物の周囲に上記の画像を配置して、見渡す限り砂浜の画像が見えるというSceneを作っていきましょう。
![9 - STYLY](https://styly.cc/wp-content/uploads/2018/06/9-300x49.png)
画像調整画面6
左端のヒエラルキーメニューで挿入した画像を選択した状態で、複製ボタンを3回押してください。
4つの、まったく同じ画像ができたので、これをStartPositionの周囲に配置していきます。
複製した3つの画像を、Moveボタンで配置します。このときYの値は変える必要がないので(高さは一定なので)、XとZの値を調整しながら4つの画像が重ならないように配置してください
![10 - STYLY](https://styly.cc/wp-content/uploads/2018/06/10-1024x628.png)
画像調整画面7
うまく配置することができましたが、画像と画像の境目が違和感ありますね。連続した景色の様に見せたいので、片方の画像を反転させましょう。
サイドボタンを “Rotate” にして、片方の画像のYの値に180を足した値を入力しましょう。
![11 - STYLY](https://styly.cc/wp-content/uploads/2018/06/11-1024x708.png)
画像調整画面8
つながった景色みたいになりましたね。これで見渡す限り同じ景色が見えるSceneの完成です。
お疲れさまでした。今回はOriginal Aspectでのアップロード形式を紹介しましたが、それ以外にも形式はあるので画像の種類や作りたいSceneに合うようにいろいろ試してみてください。