Sceneに画像を配置するときのコツ

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

画像のアップロード方法

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

今回は画像を挿入したいので “Image” を選択します。

“Select” をクリックすると、エクスプローラが起動して画像を選択できるようになるので、挿入したい画像を選択してください。挿入したい画像がまだＰＣ内に保存されていない場合は、保存してから選択してください。

画像のファイル名が “Select” 横の欄に表示されたら、”Select” 下の “Upload” を選択してください。

このような画面になればアップロードは成功です。”Next” を選択して次に進みましょう。

取り込んだ画像をSceneに挿入する方法

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

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

 

• Rotating Cube：四角体に画像を張り付け、回転するスクリーン
• Rotating Slanted：斜めに傾けた四角体に画像を張り付け、回転するスクリーン
• Rotating Sphere：球体に画像を張り付け、回転するスクリーン
• Rotating ICO Sphere：ICO球体に画像を張り付け、回転するスクリーン
• Rotating Star：星形体に画像を張り付け、回転するスクリーン

今回は例としてOriginalScreenで挿入していきます。

画像の調整方法１、拡大縮小

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

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

赤・青・緑・白のキューブをドラッグ＆ドロップでそれぞれの向きに拡大縮小することも可能です。

今回は原型画像のアスペクト比を保つために画像下にあるＸ・Ｙ・Ｚの数値を同じにすることで拡大します。

Ｘ・Ｙ・Ｚを選択することで数値を打ち込むことが可能です。今回はそれぞれ10としました。

画像の調整方法２、移動

画像は大きくなりましたが、DefaultGroundが画像の真ん中を通過している様に見えるので画像を移動します。

※DefaultGround自体を移動することで画像をちゃんと見せることも可能です。

サイドボタンの “Scale” を “Move” に変更してください。

砂浜が見えるようにしたいので、Ｙの値を1.2としました。

画像の調整方法３、回転

最後に、３つ目の機能であるRotateを紹介します。

StartPositionの人物の周囲に上記の画像を配置して、見渡す限り砂浜の画像が見えるというSceneを作っていきましょう。

左端のヒエラルキーメニューで挿入した画像を選択した状態で、複製ボタンを３回押してください。

４つの、まったく同じ画像ができたので、これをStartPositionの周囲に配置していきます。

複製した３つの画像を、Moveボタンで配置します。このときＹの値は変える必要がないので（高さは一定なので）、ＸとＺの値を調整しながら４つの画像が重ならないように配置してください

うまく配置することができましたが、画像と画像の境目が違和感ありますね。連続した景色の様に見せたいので、片方の画像を反転させましょう。

サイドボタンを “Rotate” にして、片方の画像のYの値に180を足した値を入力しましょう。

つながった景色みたいになりましたね。これで見渡す限り同じ景色が見えるSceneの完成です。

お疲れさまでした。今回はOriginal Aspectでのアップロード形式を紹介しましたが、それ以外にも形式はあるので画像の種類や作りたいSceneに合うようにいろいろ試してみてください。