スーパーボールをたくさん発生させ、STYLYへアップロードするまでの手順を解説します
![2_capture - STYLY](https://styly.cc/wp-content/uploads/2018/08/2_capture.gif)
これから作るスーパーボールサンプル
- 1
- 2 床を作る
- 3 スーパーボールを作る
- 4
- 5 ボールをPrefab化する
- 6 PlayMakerでスーパーボールを出す
- 7 ボールを100個出す
- 8 スーパーボールの色をランダムにする
- 9 ボールが落下するようにする
- 10 スーパーボールが跳ね返るようにする
- 11
- 12
- 13 STYLYへのアップロード
サンプル
STYLY GALLERYでサンプル空間を体験できます。
Unityのサンプルプロジェクト
https://github.com/styly-dev/STYLY-Unity-Examples/tree/master/Assets/STYLY_Examples/SuperBall
準備
今回の記事では、ボールの生成にPlaymaker を使用します。 https://assetstore.unity.com/packages/tools/visual-scripting/playmaker-368
PlayMakerで出来ること
今回の記事では、Playmakerを使用して以下のことを行っています。 ・オブジェクトをランダムな位置に出す ・オブジェクトのマテリアルを差し替える ・複数あるマテリアルの中からマテリアルをランダムに1つ選択する ・イベント遷移を利用した処理のくり返し
オブジェクトをランダムな位置に出す
Playmakerを利用することで、実行するたびにオブジェクトをバラバラな位置に出すということができます。
![img_5ba2d364c9844 - STYLY ランダムな位置にオブジェクトを出す](https://styly.cc/wp-content/uploads/2018/09/img_5ba2d364c9844-1024x205.png)
ランダムな位置にオブジェクトを出す
Playmakerの以下のアクションを使用しています。
- Create Object
- Random Float
- Set Vector3 XYZ
オブジェクトのマテリアルを差し替える
Playmakerを利用することで、オブジェクトのマテリアルをランダムに差し替えることができます。
![img_5ba2d47362e2e - STYLY マテリアルを差し替える](https://styly.cc/wp-content/uploads/2018/09/img_5ba2d47362e2e-1024x163.png)
マテリアルを差し替える
Playmakerの以下のアクションを使用しています。
- Set Random Material
処理をくり返す
Playmakerを利用することで、処理を繰り返し実行することができます。
![img_5ba2d5d35e9b2 - STYLY オブジェクトを作る処理を100回繰り返す](https://styly.cc/wp-content/uploads/2018/09/img_5ba2d5d35e9b2-300x245.png)
オブジェクトを作る処理を100回繰り返す
Playmakerのイベント遷移機能を利用して実現しています。
床を作る
まず最初に床を作ります
![floor_sample - STYLY これから作る床](https://styly.cc/wp-content/uploads/2018/08/floor_sample.png)
これから作る床
板オブジェクトの作成
HierarchyのCreateボタンをクリックし、3D Object/Planeを選択してPlaneオブジェクトを作成します。
![4_create_plane - STYLY Planeの作成](https://styly.cc/wp-content/uploads/2018/08/4_create_plane.png)
Planeの作成
Planeのスケール値を(4,4,4)に設定します。
![5_plane_scale - STYLY Planeのスケール変更](https://styly.cc/wp-content/uploads/2018/08/5_plane_scale.png)
Planeのスケール変更
床の完成です
![floor_sample - STYLY 作成した床](https://styly.cc/wp-content/uploads/2018/08/floor_sample.png)
作成した床
スーパーボールを作る
次に、スーパーボールを作成します。
![3_ball_sample - STYLY これから作るスーパーボール](https://styly.cc/wp-content/uploads/2018/08/3_ball_sample-e1537194402723.png)
これから作るスーパーボール
球オブジェクトの作成
Hierarchy上でSphereを作成します。
![6_create_sphere - STYLY Sphereを作成](https://styly.cc/wp-content/uploads/2018/08/6_create_sphere.png)
Sphereを作成
白い球状のオブジェクトが作成されます。
![7_sphere - STYLY 作成されたSphere](https://styly.cc/wp-content/uploads/2018/08/7_sphere-300x222.png)
作成されたSphere
ボールに色を付ける
ボールに色を付けるため、マテリアルを作成します。 マテリアルを利用することでボールに色をつけることができます。
![img_5b8880b3c2958 - STYLY これから作る予定の色付きボール](https://styly.cc/wp-content/uploads/2018/08/img_5b8880b3c2958-300x298.png)
これから作る予定の色付きボール
Hierarchyウィンドウ上で右クリックし、Create/Materialを選択してマテリアルを作成します。
![9_create_material - STYLY マテリアル作成](https://styly.cc/wp-content/uploads/2018/08/9_create_material-e1535673102475.png)
マテリアル作成
今回は青いボールのマテリアルを作るので、名前はBall_Blueにしておきます。
![img_5b8883c406f7c - STYLY 作成したマテリアル](https://styly.cc/wp-content/uploads/2018/08/img_5b8883c406f7c.png)
作成したマテリアル
マテリアルの色を青にする
作成したマテリアルはデフォルトでは白いのでこれを青くします。 Ball_Blueマテリアルを選択した状態で、Inspector上のEmissionチェックボックスにチェックを入れます。
![10_click_emission - STYLY Emissionにチェックを入れる](https://styly.cc/wp-content/uploads/2018/08/10_click_emission.png)
Emissionにチェックを入れる
色の入力欄が出現するので、これをクリックして色を設定します
![11_click_color - STYLY 色をクリック](https://styly.cc/wp-content/uploads/2018/08/11_click_color.png)
色をクリック
![img_5b9e3e3de692d - STYLY 色の設定](https://styly.cc/wp-content/uploads/2018/09/img_5b9e3e3de692d.png)
色の設定
青色のマテリアルの完成です。
マテリアルの確認
マテリアルをSphereにドラッグ&ドロップすると、マテリアルをボールにくっつけた時の色を確認することができます。
![drag_material - STYLY マテリアルをSphereに登録](https://styly.cc/wp-content/uploads/2018/09/drag_material.gif)
マテリアルをSphereに登録
残りの4色のマテリアルも用意
同様の手順でマテリアルを複数用意しておきます。
![img_5b9e3fa2147f4 - STYLY マテリアルを用意](https://styly.cc/wp-content/uploads/2018/09/img_5b9e3fa2147f4.png)
マテリアルを用意
今回は青、緑、ピンク、赤、黄色の5色のマテリアルを使用します。
ボールをPrefab化する
次にPlaymakerからボールを出せるように、ボールをPrefab化します。 まずはHierarchyにあるSphereをProjectビューへドラッグ&ドロップし、Prefabを作成します。
![drag_sphere - STYLY Prefab作成](https://styly.cc/wp-content/uploads/2018/09/drag_sphere.gif)
Prefab作成
分かりやすさのため、 SuperBallという名前へ変更します。
![img_5b9f13742dacf - STYLY Sphereの名前をSuperBallにする](https://styly.cc/wp-content/uploads/2018/09/img_5b9f13742dacf.png)
Sphereの名前をSuperBallにする
ボールのScaleは(0.4, 0.4, 0.4)にしておきます。
![img_5b9fc244c5c20 - STYLY Scaleを(0.4, 0.4, 0.4)にする](https://styly.cc/wp-content/uploads/2018/09/img_5b9fc244c5c20.png)
Scaleを(0.4, 0.4, 0.4)にする
以上でPrefabの準備作業は完了です。 次にPlayMaker上の作業へ移ります。
PlayMakerでスーパーボールを出す
最初にPlayMakerを使ってボールを出してみます。
PlayMaker起動
メニューの PlayMaker / PlayMaker Editorを選び、PlayMakerエディタを起動します。
![img_5b9e416ce56c0 - STYLY PlayMakerエディタの起動](https://styly.cc/wp-content/uploads/2018/09/img_5b9e416ce56c0-e1537098132787.png)
PlayMakerエディタの起動
Action Browserも起動します。
![img_5b9e42649deaf - STYLY Action Browserの起動](https://styly.cc/wp-content/uploads/2018/09/img_5b9e42649deaf.png)
Action Browserの起動
見やすさのため、ウィンドウを以下のように配置します。
FSMの追加
HierarchyのPlaneを選択した状態で、PlayMaker上で右クリックし、”Add FSM”を選択します。
![make_statemachine - STYLY FSMの作成](https://styly.cc/wp-content/uploads/2018/09/make_statemachine.gif)
FSMの作成
FSMが作成されました。 FSMはPlayMakerで処理を実行する基礎となる物です。 STARTステートから始まり、そのあと処理がState 1 へ遷移する、という流れになっています。
Create Objectアクションを登録する
今回は State 1 に「ボールを作成する」という処理を追加していきます。 ボール(オブジェクト)を作成する処理を実行したい場合、「Create Object」アクションを利用します。 State 1を選択している状態で、Action BrowserからCreate Objectをドラッグ&ドロップします。
![img_5b9f0fa234341 - STYLY Create Objectアクションの登録](https://styly.cc/wp-content/uploads/2018/09/img_5b9f0fa234341.png)
Create Objectアクションの登録
State 1にCreate Objectアクションが登録されます
![img_5b9f10e60abf2 - STYLY State 1に登録されたCreateObject アクション](https://styly.cc/wp-content/uploads/2018/09/img_5b9f10e60abf2.png)
State 1に登録されたCreateObject アクション
このCreate Objectアクションが「オブジェクトを作成する」という処理になります。
Create ObjectアクションにPrefabを登録
「オブジェクトを作成する」という処理を登録できたわけですが、「何のオブジェクトを作成するか」も指定する必要があります。 HierarchyのSuperBallプレハブをGameObjectの欄へドラッグ&ドロップして登録します
![img_5b9f176555119 - STYLY SuperBallをCreateObjectアクションへ登録](https://styly.cc/wp-content/uploads/2018/09/img_5b9f176555119.png)
SuperBallをCreateObjectアクションへ登録
SuperBallプレハブを登録した状態でゲームを再生すると、SuperBallが作成されます。 作成されるオブジェクト名は プレハブ名 + “(Clone)” というテキストになります。
![img_5b9f18046f185 - STYLY ゲーム再生時に作成されるSuperBall](https://styly.cc/wp-content/uploads/2018/09/img_5b9f18046f185.png)
ゲーム再生時に作成されるSuperBall
SuperBallの生成位置を変えてみる
次に、スーパーボールの生成位置を上のほうへズラしてみましょう。
変数posの用意
Action Browserから “Set Vector3 Value” を “Create Object” の上へドラッグ&ドロップします
![drag_set_vector3_value - STYLY Set Vector3 Value アクションの登録](https://styly.cc/wp-content/uploads/2018/09/drag_set_vector3_value.gif)
Set Vector3 Value アクションの登録
次にボールの3次元的な位置を扱う変数posを用意します。
![make_variable_position - STYLY 変数posの用意](https://styly.cc/wp-content/uploads/2018/09/make_variable_position.gif)
変数posの用意
変数posはスーパーボールの3次元座標(x,y,z)を保存しておくための入れ物のような役割をするものです。
変数posの設定
次に変数posに(0,2,0)を設定します。
ボール生成位置に変数posを設定する
CreateObjectアクションのPositionをクリックし、ポップアップメニューの中からposを選択します
![img_5b9f4e7810efe - STYLY Positionをクリック](https://styly.cc/wp-content/uploads/2018/09/img_5b9f4e7810efe.png)
Positionをクリック
![img_5b9f4ed90d221 - STYLY posを選択](https://styly.cc/wp-content/uploads/2018/09/img_5b9f4ed90d221.png)
posを選択
以上の設定を終えることでpos(= (0,2,0))の位置にボールが生成されるようになります。
ボール生成位置が(0,2,0)になっていることの確認
ゲームを再生すると、スーパーボールの位置が(0,2,0)になっていることが確認できます。
ボールの生成位置をランダムにしてみる
次に、ボールの生成位置をランダムにしてみましょう。 上記で追加した”Set Vector3 Value”アクションですが、これは不要なので削除します。
Random Floatアクションの登録
ステートへRandom Float アクションを3回ドラッグ&ドロップしてCreateObjectの上側に3回登録します
![img_5b9f542fe7cc6 - STYLY Random Floatを3回登録](https://styly.cc/wp-content/uploads/2018/09/img_5b9f542fe7cc6.png)
Random Floatを3回登録
Random Float アクションはランダムな数値を生成する処理です
Set Vector3 XYZアクションの登録
次にSet Vector3 XYZアクションをRandonFloatとCreate Objectの間の位置に登録します。
![img_5b9f54e871f94 - STYLY Set Vector3 XYZの登録](https://styly.cc/wp-content/uploads/2018/09/img_5b9f54e871f94.png)
Set Vector3 XYZの登録
Set Vector3 XYZは 3次元座標データ(X, Y, Z) のXとYとZの数値を設定する処理です。
登録したアクションの確認
登録後、以下にような並び方になっていればOKです。
![img_5b9f557897392 - STYLY 登録したアクションの確認](https://styly.cc/wp-content/uploads/2018/09/img_5b9f557897392.png)
登録したアクションの確認
Random Floatアクションの設定
RandomFloatを以下のように設定します。 変数X,Y,Zは存在しないため、 “New Variable…”から自分で作る必要があります。
![img_5b9f51c27cbe7 - STYLY Random Floatの設定](https://styly.cc/wp-content/uploads/2018/09/img_5b9f51c27cbe7.png)
Random Floatの設定
Set Vector3 XYZアクションの設定
Set Vector3 XYZを以下のように設定します
![img_5b9f5651927cb - STYLY Set Vector3 XYZの設定](https://styly.cc/wp-content/uploads/2018/09/img_5b9f5651927cb.png)
Set Vector3 XYZの設定
これでランダムな数値を持つ座標posが作成されるようになります。 変数posはCreateObjectにて利用されているため、スーパーボールがpos(ランダムな位置)に生成されるようになります。
ボールがランダムな位置に生成されていることの確認
ゲームを再生すると、ボールの位置がランダムな数値になっていることが確認できます。 再生するたびに位置が毎回バラバラな値になります。
![img_5b9f571cb0e22 - STYLY ボールがランダムな位置に生成されていることの確認](https://styly.cc/wp-content/uploads/2018/09/img_5b9f571cb0e22.png)
ボールがランダムな位置に生成されていることの確認
ボールを100個出す
これまで、「ランダムな位置にボールを生成する」という処理をPlayMakerで組んできました。 このボール生成処理を100回繰り返すことで「ボールをランダムな位置に100個出す」という処理を実現できます。
ステートを整理して見やすくする
ここで見やすさのため、三角アイコンをクリックして登録アクションを折りたたんでおきます。
![img_5b9f586b0b104 - STYLY 三角形アイコンをクリックして折りたたむ](https://styly.cc/wp-content/uploads/2018/09/img_5b9f586b0b104.png)
三角形アイコンをクリックして折りたたむ
繰り返しの実装
繰り返し処理の流れ
STEP1. 数値が0のカウンタを用意する STEP2. カウンタを1増やす STEP3. ボールを生成する STEP4. カウンタが100より小さい場合はSTEP2へ戻る STEP5. カウンタが100に等しい場合は終了 プログラミングではfor構文と呼ばれているものですが、これをPlayMaker上で実装していきます。
カウンタ用の変数の追加
まず、PlayMakerウィンドウの”Variables”タブを選択します。 ウィンドウの下側にある New Variableのところに loop_counterと入力し、 Variable TypeをIntに設定します。 この状態でAddボタンを押すと、Int型の変数 loop_counterが作成されます。
![img_5b9f5934322ba - STYLY カウンタ用の変数の追加](https://styly.cc/wp-content/uploads/2018/09/img_5b9f5934322ba.png)
カウンタ用の変数の追加
![img_5b9f59e171040 - STYLY 登録された変数の確認](https://styly.cc/wp-content/uploads/2018/09/img_5b9f59e171040.png)
登録された変数の確認
カウンタを1増加させるアクションの追加
カウンタ変数を増やすためには、Int Add アクションを利用します。 まず、Int Addアクションをステートの最初へドラッグ&ドロップします。
![img_5b9f848455c73 - STYLY Int Addの登録](https://styly.cc/wp-content/uploads/2018/09/img_5b9f848455c73.png)
Int Addの登録
次に、Int Variableを”loop_counter”、Add を “1”に設定します
![img_5b9f852401788 - STYLY loop_counter設定後のステート](https://styly.cc/wp-content/uploads/2018/09/img_5b9f852401788.png)
loop_counter設定後のステート
変数loop_counterの数値を1増やす処理が追加できました。
イベント遷移の追加
ループカウンタが100未満の時はステートの最初へ遷移する、という流れを作るためにEventを追加します。 Eventは条件分岐での遷移先を指定するときに必要となるものです。 PlayerMakerウィンドウのEventsタブをクリックし、ウィンドウの下側にあるAdd Eventの部分に“スーパーボール作成”と入力し、Enterします。
![img_5b9f87bb7e205 - STYLY Eventの追加](https://styly.cc/wp-content/uploads/2018/09/img_5b9f87bb7e205.png)
Eventの追加
Eventが追加され、リストに表示されます。
次に、画面左に表示されているState 1を右クリックし、 Add Transition -> スーパーボール作成の順に選択してTransitionを追加します。
![add_transition - STYLY State1へEvent追加](https://styly.cc/wp-content/uploads/2018/09/add_transition.gif)
State1へEvent追加
スーパーボール作成の部分をState 1へドラッグし、矢印を貼ります。
![transition_to_state1 - STYLY 遷移の設定](https://styly.cc/wp-content/uploads/2018/09/transition_to_state1.gif)
遷移の設定
これで、”スーパーボール作成”Eventを呼び出したときにState1の最初へ遷移するようになりました。 ここで追加した”スーパーボール作成”Eventは条件分岐にて利用します。
処理の繰り返しを作る
処理の繰り返しを作るため、以下の条件分岐を実装します。 ・ループカウンタが100未満の場合は最初に遷移 ・100に等しい場合は終了 Int Compare アクションを利用することで、Int変数の値に応じた条件分岐を実装することができます。 プログラミングのif文のような機能をもったアクションです。
Int Compareアクションの追加
まずは、ActionブラウザからInt Compareをステートの最後へドラッグ&ドロップ。
![img_5b9f860b43908 - STYLY Int Compareの登録](https://styly.cc/wp-content/uploads/2018/09/img_5b9f860b43908.png)
Int Compareの登録
次にInt Compareの設定を行います。 Integer 1 には “loop_counter”を設定、Integer 2 には 100を設定、 Less Thanに”スーパーボール作成”を指定します。
![int_compare - STYLY Int Compareの設定](https://styly.cc/wp-content/uploads/2018/09/int_compare.gif)
Int Compareの設定
以上で繰り返しの設定は終了です。 これでloop_counterが100より小さい場合は最初へ遷移、それ以外では遷移を行わない(終了する)ようになりました。
ボールが100個生成されることを確認してみる
ゲームを再生すると、シーンに100個のスーパーボールが生成されます。
![img_5b9f8e9bcded5 - STYLY 作成されるスーパーボールの確認](https://styly.cc/wp-content/uploads/2018/09/img_5b9f8e9bcded5.png)
作成されるスーパーボールの確認
ボールの親を設定する
Hierarchy直下にボールがを生成するのは汚いので、SetParentアクションを使って親を設定すると良いでしょう。 CreateObjectのStoreObjectでスーパーボールを代入先を指定し、 SetParentアクションのGame Objectの部分で親を設定させる対象のオブジェクトを指定しています。
![img_5b9fb7b9ee8e1 - STYLY 作成したスーパーボールの親を設定](https://styly.cc/wp-content/uploads/2018/09/img_5b9fb7b9ee8e1.png)
作成したスーパーボールの親を設定
ゲームを再生すると、Planeの中にスーパーボールが入っていることが確認できます。。
![img_5b9fb73b24430 - STYLY Planeの中にスーパーボールが作成される](https://styly.cc/wp-content/uploads/2018/09/img_5b9fb73b24430.png)
Planeの中にスーパーボールが作成される
スーパーボールの色をランダムにする
次に、スーパーボールのマテリアルをランダムに設定してカラフルにしていきます。
![img_5b9f91838a541 - STYLY マテリアルをランダムにしたスーパーボール](https://styly.cc/wp-content/uploads/2018/09/img_5b9f91838a541.png)
マテリアルをランダムにしたスーパーボール
スーパーボールにFSMを追加
スーパーボールのPrefabを選択した状態で、PlayMakerウィンドウ上で右クリックしてAdd FSMを選択します。
![img_5b9f8fb60563a - STYLY SuperBallプレハブへFSM追加](https://styly.cc/wp-content/uploads/2018/09/img_5b9f8fb60563a.png)
SuperBallプレハブへFSM追加
State1を選択した状態で、Set Random Material アクションを登録します。 Set Random Materialアクションは登録したマテリアルからランダムに一つのマテリアルを選択し、モデルのマテリアル差し替えます。
![img_5b9f9032eae91 - STYLY Set Random Materialアクションの追加](https://styly.cc/wp-content/uploads/2018/09/img_5b9f9032eae91.png)
Set Random Materialアクションの追加
SetRandomMaterialアクションにマテリアルを登録します。
![img_5b9f909d6f7df - STYLY 使用したいマテリアルを登録](https://styly.cc/wp-content/uploads/2018/09/img_5b9f909d6f7df.png)
使用したいマテリアルを登録
スーパーボールの色がランダムになることを確認する
ゲームを再生するとスーパーボールがカラフルになります。
![img_5b9f91838a541 - STYLY 実行結果](https://styly.cc/wp-content/uploads/2018/09/img_5b9f91838a541.png)
実行結果
ボールが落下するようにする
スーパーボールにRigidbodyコンポーネントをアタッチすると、スーパーボールが重力落下するようになります。
![img_5b9f924d7bf0e - STYLY Rigidbodyコンポーネントの追加](https://styly.cc/wp-content/uploads/2018/09/img_5b9f924d7bf0e.png)
Rigidbodyコンポーネントの追加
ゲームを再生すると、スーパーボールが落下します。
![rigidbody_result - STYLY 実行結果](https://styly.cc/wp-content/uploads/2018/09/rigidbody_result-1.gif)
実行結果
(注意)ボール生成時にボールが重なっているとハジケ飛んでしまいます。
![rigidbody_result - STYLY ボールが重なっている場合、はじけ飛ぶ](https://styly.cc/wp-content/uploads/2018/09/rigidbody_result.gif)
ボールが重なっている場合、はじけ飛ぶ
スーパーボールが跳ね返るようにする
PhysicsMaterialを利用して、ボールが跳ねるようにします。
Physics Material作成
Projectウィンドウ上で右クリックし、Physics Materialを作成します。
![img_5b9f93fca4825 - STYLY Physics Materialの作成](https://styly.cc/wp-content/uploads/2018/09/img_5b9f93fca4825.png)
Physics Materialの作成
Physics Materialの設定
PhysicsMaterialを以下のように設定します。
![img_5b9f957d76757 - STYLY Physics Materialの設定](https://styly.cc/wp-content/uploads/2018/09/img_5b9f957d76757.png)
Physics Materialの設定
Friction(摩擦の係数)は0.0、Bounciness(跳ねやすさの値)を1.0にしています。 跳ねやすさを下げたい場合はBouncinessを小さくします。
Physics Materialの登録
PhysicsMaterialをSuperBallプレハブへ登録します。
![img_5b9f94e3a5c6b - STYLY Physics Materialの登録](https://styly.cc/wp-content/uploads/2018/09/img_5b9f94e3a5c6b.png)
Physics Materialの登録
床に対しても同様に登録します。
再生すると、ボールが跳ねることが確認できます。
![physics_material_result - STYLY 実行結果](https://styly.cc/wp-content/uploads/2018/09/physics_material_result.gif)
実行結果
以上でスーパーボールの作成は完了となります。
STYLYへのアップロード
Prefabの作成
分かりやすさのため、Planeオブジェクトを”SuperBallPlane”という名前へ変更します。
![img_5b9fbc077fdfd - STYLY 名前を変更して"SuperBallPlane"にする](https://styly.cc/wp-content/uploads/2018/09/img_5b9fbc077fdfd.png)
名前を変更して”SuperBallPlane”にする
SuperBallPlaneをProjectビューへドラッグ&ドロップし、Prefab化します
![img_5b9fbc44679ff - STYLY Prefabの作成](https://styly.cc/wp-content/uploads/2018/09/img_5b9fbc44679ff.png)
Prefabの作成
PrefabをSTYLYへアップロードする
Prefabを右クリックし、Upload prefab to STYLY を選択します。
![img_5b9fbcbe67633 - STYLY アップロードの実行](https://styly.cc/wp-content/uploads/2018/09/img_5b9fbcbe67633.png)
アップロードの実行
アップロードウィンドウが出てくるので、完了するまで待ちます。
![img_5b9fbd0f06944 - STYLY アップロード中ウィンドウ](https://styly.cc/wp-content/uploads/2018/09/img_5b9fbd0f06944.png)
アップロード中ウィンドウ
Upload succeededと出ればアップロード完了です。
![img_5b9fbfc0f1ae8 - STYLY アップロード完了ウィンドウ](https://styly.cc/wp-content/uploads/2018/09/img_5b9fbfc0f1ae8.png)
アップロード完了ウィンドウ
STYLY上での確認
STYLYの3D ModelsにあるSuperBallPlaneをクリックすると、先ほど作成したスーパーボールを配置することができます。
![img_5b9fc0847b740 - STYLY 3D Modelsの選択](https://styly.cc/wp-content/uploads/2018/09/img_5b9fc0847b740.png)
3D Modelsの選択
![img_5b9fc0b26f376 - STYLY My Modelsの選択](https://styly.cc/wp-content/uploads/2018/09/img_5b9fc0b26f376.png)
My Modelsの選択
![img_5b9fc0d8b2f60 - STYLY SuperBallPlaneの選択](https://styly.cc/wp-content/uploads/2018/09/img_5b9fc0d8b2f60.png)
SuperBallPlaneの選択
![img_5b9fc0fdb7eef - STYLY STYLY上でスーパーボールが出現](https://styly.cc/wp-content/uploads/2018/09/img_5b9fc0fdb7eef.png)
STYLY上でスーパーボールが出現