読者です 読者をやめる 読者になる 読者になる

デジハリでVRをマスターするブログ

デジハリ本科VRコースでの成長日記です。

<h3>UnityでWebGLを作る</h3>

こんにちは。デジハリVRコースのyoneridaです。

入学前なんですが早速Unityをいじいじしてみました。

 

UnityってWebGL書き出しできるかなと思いネット記事を探したのですが見つからなかったので僕なりの手順を書いてみました。

 

※ちなみにWebGLについては、下記のリンクがわかりやすく教えてくれています。

 

では、まずPersonalプラン(無料プラン)をインストール:

store.unity.com

順々にIntroduceやら、Licenseやらをポチポチ進めていくと、急に「Unity component selection」という、やたらチェックボックスだらけの項目に移動します。。。

今回はWebGLをテストしたいので、「WebGL Build Suupport」もチェックをしました。

f:id:yonerida:20170116072447p:plain

docs.unity3d.com

もし仮に既にUnityをダウンロードしちゃったけど、チェックボックスに何もチェックしてないという方も安心してください。またダウンロードしたUnityインストール用のファイルをもう一度開いてもらって、再度インストールして、チェックボックスを入れれば追加されます。

 

では早速、

f:id:yonerida:20170116092513p:plain

新規プロジェクトを立ち上げて、Project nameをHELLO_WOLRDに変更して、Create projectボタンを押します。

f:id:yonerida:20170116092414p:plain

Unityの画面が立ち上がりました。

まずは、Hierarchy(左上にある)のCreateボタンを押します。そうすると、下図のように様々なカテゴリーが出てくるので、3D Objectと書かれている部分をマウスオーバーし、続いて出てくるTerrainという部分をクリックしてください。

f:id:yonerida:20170116092443p:plain

そうすると、下記のような大きいステージが出来上がります。

f:id:yonerida:20170116092448p:plain

ただ、今のままだとデカすぎて扱いづらいので、これを小さくしていきます。

右側のHierarchyにあるTerrainをクリックし、Inspectorと書かれているところをクリックすると、PositionやらRotateやら、Scaleやらが記載されていると思います。

さらに下を見ると、Terrainというセクションに7つ横並びになっているパネルがあると思います。 それをクリックし、スクロールするとHeightとWidthという項目があるので、そこのサイズを両方とも100にしてください。

そして、Sceneを見てみると小さくなっていることがわかります。ただ今のステージのままだと少しPositionがずれてしまっているので、Positionの値をx: -50, z:-50に設定してください。そうするとステージが綺麗にセンターに行くと思います。

f:id:yonerida:20170116092503p:plain

次にステージの表面を編集していきます。

上記画像のTerrainのパネル部分に赤枠が書かれていると思います。そこのボタンを押します。その状態で、Scene画面のステージの上でクリックすると、、、なんとステージがもっこりします。www (もしもっこりしない場合は下記画像の赤枠部分の値が0になっている可能性があります)

f:id:yonerida:20170116092508p:plain

 

さらにステージをよりリアルにするために、ステージにテクスチャーを貼ります。

f:id:yonerida:20170116092300p:plain

上記画像を参考に、Assets → Import Package からEnviromentとCharactersをインポートします。そうすると、下のAssetsエリアにStandard Assetsというフォルダが入ったと思います。

その状態で、HierarchyのTerrainを再びクリックします。InspectorにあるTerrainのパネルから下記画像の部分をクリックし、Edit Textures...というボタンをクリックしてください。f:id:yonerida:20170116092419p:plain

f:id:yonerida:20170116092426p:plain

Add Terrain TextureにあるSelectを押して、

f:id:yonerida:20170116092432p:plain

GrassRockyAlbedoというテクスチャーをクリックして、×ボタンを押してください。

最後にAddをクリックするとステージがより良い感じになっていると思います。

f:id:yonerida:20170116092439p:plain

ステージはこんな感じで良いと思います。

次にこのステージを歩き回るために、キャラクターを配置したいと思います。

ProjectのAssetsにあるStandard Assetsをクリックし、Characters→FirstPersonCharacter → Prefabsの順番にクリックしていってください。そうすると下記画像のように青い箱みたいなのがあると思うので、それをHierarchyにドラック&ドロップしてください。

ステージにカメラとSoundマークが配置されたと思います。配置されたらMain Cameraは邪魔なので、削除しちゃいましょう。

f:id:yonerida:20170116092318p:plain

今のままだと少し、キャラクターが埋まってしまっているので、PositionのY軸を2に設定してください。

f:id:yonerida:20170116092325p:plain

その状態で真ん中上にあるプレイボタンを押すと、ステージを歩き回ることができます。(WASDキーで歩くことができます。)

今のままでも良いのですが、せっかくなので、このステージに恐竜を配置しちゃいましょう。

Asset StoreからAllosaurusという3Dモデルをインポートしましょう。

f:id:yonerida:20170116092332p:plain

インポートできたら、先ほどのキャラクターのように下のProjectのAssetsから下の画像の青いラインが入っている文字の順番で選択し、Hierarchyにドラッグ&ドロップします。そうするとステージに恐竜ちゃんが配置されます。

f:id:yonerida:20170116092344p:plain

ここまでで簡単ですが、一通り世界を構築したので、これからWebGLでビルドする作業をします。

まずは、デスクトップでも、書類でもどこでも良いので、新規フォルダを作成し、適当な名前に変更してください。僕は、helloworldというフォルダを作成しました。

f:id:yonerida:20170116092404p:plain

フォルダを作成したら、左上にあるFileから、Build Settings...を選んでください。

f:id:yonerida:20170116092305p:plain

選ぶと下記画像のようにBuild Settingsが出てくるので、1.Add Open Scenesを押し、ファイル名を適当な名前で保存(僕はMain)。2.WebGLを選択し、Switch Platformを押す。3.Buildを押す。そうすると最後にこのファイルをどこに保存するか問われるので、先ほど作ったフォルダを選択し、クリックするとBuildが勝手に始まる。

f:id:yonerida:20170116092313p:plain

かなり時間かかるので、気ままにティータイム。。。

終わると下記画像のようなファイルが入ってくるので、あとはホームページを上げる容量でサーバにアップすれば無事見ることができます!

f:id:yonerida:20170116092409p:plain

 

完成したURL:

Unity WebGL Player | HELLO_WORLD

以上がUnityでWebGLを作る手順でした!!!!