tanaka's Programming Memo

プログラミングについてのメモ。

STYLYを利用してHTC VIVEでVR

HTC Viveで3Dモデルを表示して、うろうろ見回るというのをSTYLYでやってみました。手順をざっと残しておきます。

目次

事前調査

STYLYに行き着くまでに調べた候補です。

STYLY

styly.cc

今回利用したサービスです。VRコンテンツをWebブラウザーで作成して公開できるサービスで、デザイナー向けということでUnityなどを介さなくてもWebブラウザーとツールで完結できるのが優秀です。HMDで空間を編集するツールや、作ったVR空間をVR表示するビュアーなどあります。Unityからシーンをアップロードするのも簡単にできて、ビュアーではワープ移動が最初から実装されているので本当に手軽に使えます。

VR Chat

www.vrchat.net

VR空間にアバターを表示して、ほかのプレイヤーと交流できるサービスです。Unityを使ってワールドの構築などが可能です。Unityを介する必要があることと、今回はアバターとかチャットが不要だったので保留にしました。

vrcworld.wiki.fc2.com

SteamVR Plugin

assetstore.unity.com

Steamから出ているUnityのVRプラグインです。様々な有効なサンプルが含まれているアセットです。既存のサンプルに表示したいモデルをインポートすればいけそうでしたが、シーンを整理したりするのが面倒そうだったので保留にしました。

VR Samples

assetstore.unity.com

Unity公式のVRのサンプル集です。4つのミニゲームによるVRの作例といった感じで、ちょっと今回やりたいことと違う方向性だったので保留にしました。

STYLYのざっとした流れ

デザイナー向けのサービスで、手軽にモデルの読み込みとシーン内のワープなどの基本動作ができるため、STYLYでやることにしました。Unityからシーンのアップロードも可能なので、Unityに読み込めるモデルであれば持っていくことができます。FBXとVRMのモデル、どちらも手軽に動かせました。

  1. STYLYのサイトでアカウントを作成してログイン
  2. VR空間の作成はWebブラウザーでできます。Google ChromeSafariMicrosoft Edgeに対応。Firefoxは現状では非対応の模様
    • Unityにアセットをインポートすれば、自作のプレハブやシーンをアップロードして、簡単にSTYLYのシーンに配置できます
  3. VR空間をHMDで表示するにはビュアーをダウンロードします。以下の3種類あります

ビュアーを起動して、STYLYのアカウントでサインインすると作成したシーンを表示できます。

現時点では、Oculus GoやQuestには非対応のようです。こちらの方法でいけるかも? → Oculus QuestでSteamVRのゲームを動かす(Riftcat/ALVR/VirtualDesktop) | VRまにあっくす!

HMDに表示するまでの流れ

詳しくは公式サイトということで、ざっくりHTC Viveで表示するまでの手順です。

サインアップとログイン

  • STYLY - VR creation platformを開いて、Sign upします
    • スクリーン名とメールアドレス、パスワードを設定するだけです
  • SIGN UPをクリックすると、一番下にLog in hereと小さくあるので、クリックしてログインします

アプリのダウンロード

ログインすると以下のようなページが表示されます。

f:id:am1tanaka:20190614091837p:plain
Get VR Client

  • HMDで表示してみたいのでGet VR Clientをクリックします

表示されている機種以外のもので利用したい場合は、Other downloadsをクリックして対応するものを選択してください。

  • Steamのページが開きます。2019/6/14現在、まだβ版だったので早期アクセス扱いになります。ページをスクロールさせて「STYLYを使用」の無料をクリックします
  • 指示に従って操作して、インストールを完了させます
  • インストールが完了したら、Steamメニューをクリックして、STYLYをクリックして起動します

f:id:am1tanaka:20190614092743p:plain
STYLYを起動

問題がなければ、VRコンテンツの一覧が表示されます。何かウィンドウが表示されたら、それぞれ対応してください。

  • アプリの更新があると、SteamVR Updateのウィンドウが表示されます。その場合は、DismissをクリックすればOKです
  • Bluetoothのエラーが表示されたら、Bluetooth Settingsをクリックして、Update bluetooth driverをクリックして、ドライバーを更新します
  • 他にも何かエラーが表示されたら、対応してください

HMDに表示してみる

インストールしたSTYLYアプリを起動すると、公開されているVRコンテンツが表示されます。

f:id:am1tanaka:20190620131704p:plain
STYLY VRホーム画面

なんでもよいので気になったものをクリックすると、HMDに表示されて、見まわしたり、ウォークスルーできます。

コントローラーの1と2で、親指のところの丸いやつの操作割り当てが違います。

f:id:am1tanaka:20190620132303j:plain
親指のところの丸いやつ

一方はスクリーンショット撮影、もう一方でワープ移動ができます。

モデルの読み込み

styly.cc

上記に詳しくありますが、以下が利用できます。

  • Google Poly の3Dモデル
  • Sky and Groundsから、背景の空と、地面を選んで入れることができます
  • 3D Modelsから、STYLYが提供する標準モデルを入れることができます。モデルやパーティクルもあります
  • Filtersから、画面の色味を設定するフィルターを選べます
  • Uploadsから、自作モデルをアップロードして利用できます。対応フォーマットは以下の通りです
  • Unityからアップロードするなら、VRMなどのUnityで読み込めるモデルも利用できます
  • アップロードしたことがあるモデルは、My Modelsから再利用できます
  • その他、画像、BGM、動画、PDFなどをインポートできます

自作モデルをアップしてみる

STYLYのWebエディターからできます。

以上で、WebブラウザーにSTYLY Studioが起動します。

  • Create Sceneタブをクリックします
  • Titleを入力して、CREATEボタンをクリックします
  • 初期画面は以下のような感じで、平行光(Directional Light)、デフォルトの地面、デフォルトの空が読み込まれています

f:id:am1tanaka:20190620133649p:plain
デフォルトのシーン

  • 左上のメニューからAssetsをクリックします

f:id:am1tanaka:20190620133743p:plain
Assetsボタン

  • 何を読み込むかを選びます。3Dモデルなら3D Modelをクリックします
  • 以下のいずれかを選びます。自分でモデルをアップロードしたり、以前アップロードしたモデルを利用したい場合はMy Models & Uploadをクリックします
    • Poly 3D Models
      • Google Polyに公開されているモデルを読み込みます
    • Sky and Grounds
      • スカイボックスや地面を読み込みます
    • 3D Models
      • STYLY謹製のパーティクルやモデルを読み込みます
    • My Models & Upload
      • 自分で作成したモデルをアップロードしたり、以前アップロードしたモデルを読み込みます
  • タイトルを入力して、Selectボタンでファイルを選択したら、Uploadボタンを押してモデルをアップロードします
  • アップロードが完了したら、My Modelsに追加されるので、クリックして選択するとシーンに配置されます

f:id:am1tanaka:20190620134437p:plain
モデルの読み込み完了

以上でシーンを作成して、そこにモデルを読み込みました。保存は自動的に行われるので、特に操作はありません。

あとはSTYLYビュアーを起動して、自分のアカウントでSign inするとシーンが一覧に表示されるようになるので、選択すればHMDで見ることができます。

アップロードしたモデルやシーンはデフォルトでは非公開

アップロードしたモデルが素材として公開されてしまうか心配でしたが、原則として非公開でした。

現在の仕様では、アップロードされたモデルはアップロードしたアカウント以外からは利用されることはありません。また、内部的に利用しているモデル一位識別子も予測不可能で十分長い文字列になっています。

(STYLY よくあるご質問(Q&A) | STYLY 「アップロードしたMy Modelsを削除するにはどうしたらよいですか」より)

一度アップロードしたモデルは削除できないとありますが、My Modelsから削除できました。名前変更しないと同じ名前のモデルがアップされちゃうので邪魔になるんですよね。これは助かります。

シーンも公開の設定をしない限り、プライベートになります。安心して使えます。

f:id:am1tanaka:20190620134710p:plain
シーンはデフォルトではPrivate

Unityとの連携

UnityからSTYLYにアセットをアップロードする方法 | STYLYより抜粋です。

  • 2019/6/14時点では、Unity2017.4.xに対応しています。
  • アップロードできるのはモデル、パーティクル、ライト、シェーダー、PlayMaker(2019年3月現在、1.8.xに対応)を用いたアセットです
  • スクリプトは反映されないので、何らかのインターラクションを付けたい場合はPlayMakerが必要です。PlayMakerの基本アクションはほぼ利用できるとのことです

簡単なFPS的なものは作れるようです。詳しくは以下参照。

Playmaker情報まとめ | STYLY

シーンをアップロードしてみる

  • こちらに従ってUnity2017.4.xをインストールして、プラグインをインポート、APIキーの設定などを行います
  • カメラ座標を0, 1.5, -5に設定(STYLYビュアーでは起動時にプレイヤーの位置を0, 0, -5に配置します。目の高さ分、上になるので、Yは1.5ぐらいで設定すればおおよそSTYLYビュアーの起動時の状態になります)
  • 適当にシーンを作成

f:id:am1tanaka:20190614102845p:plain
Sample Scene

  • シーンを保存
  • Projectウィンドウから保存したシーンを右クリックして、STYLY > Upload prefab or scene to STYLYをクリック

以上でアップロードが開始します。ビルドをしてからのアップロードになるので、やや時間がかかります。Upload successed.と表示されたら完了です。

アップロードしたシーンをHMDで表示する

Unityでアップロードしたシーンはモデル扱いになるため、STYLY Studioでシーンに配置する必要があります。

  • STYLY Studioを開いて、Sign inします
  • 新しくシーンを作成するか、モデルを読み込みたいシーンをクリックして、シーンを開きます
  • 左上のメニューのAssetsをクリックします

f:id:am1tanaka:20190614104000p:plain
Assetsをクリック

  • 3D Model > My Models & Uploadをクリックします
  • アップロードしたシーンがあるので、クリックします
  • デフォルトでSTYLYの地面とSkyboxが作成されます。不要な場合は[Ground]と[Skybox]の右の歯車をクリックして、ごみ箱アイコンをクリックして消します

編集が完了したら、STYLYビュアーを起動して、Log inしてシーンを呼び出せば見ることができます。

STYLYビュアー実行中に編集した場合

STYLYビュアーでHMD実行中に、WebブラウザーのSTYLY Studioでシーンを編集することができます。編集した内容はその都度サーバーにアップされますが、STYLYビュアーには自動的に反映されません。再読み込み操作でもダメなようです。STYLYビュアーで一度Homeに戻ってから、シーンを開き直してください。

まとめ

以上で、今回やりたかった自作のモデルをVR空間に表示して、その中をワープ移動するということができました。自分で作った3Dワールドやオブジェクト、VRoidで作ったキャラクターを手軽に表示できるのでオススメです。

トリガーを引いたら大砲が発射されたり、何かをきっかけにキャラクターをアニメーションさせるにはPlayMakerが必要になります。そのあたりのカスタマイズ性が上がってくるとさらに強力になってきそうです。

参考URL

styly.cc

assetstore.unity.com

vr-maniacs.com

SpriteでBloomするSpriteGlow

みんな大好きBloomをスプライトやUIでもできるようにしてくれるSpriteGlowというアセットがあります。

github.com

アセットストアではなくGitHubでMITライセンスで公開されています。

あっという間にできますので設定方法をまとめておきます。

目次

手法

このアセットは、スプライトの画像の周りにBloom用のHDRの縁を描画します。Bloom効果自体は、PostProcessing StackやMK Glow Freeといった既存のポストプロセス機能を利用するという経済的(?)な手法です。

下準備

Unity2018.2.20での作業手順を示します。

組み込みたいプロジェクトをUnityで開きます。ここでは、ユニティちゃん 2Dデータのコインを光らせてみたいと思います。同様に作業をする場合は、UNITY-CHAN! OFFICIAL WEBSITEからユニティちゃん 2Dデータをダウンロードして、プロジェクトにインポートしておいてください。

インポートが完了したら、UnityChan2D/Demo/Scenes/World 1-1シーンをダブルクリックして開いておきます。

ポストプロセスの設定

PostProcessing StackV2やMK Glow Freeをプロジェクトにインポートします。Bloomだけ使うならMK Glow Freeの方が手順が楽です。Vignetteなど他のエフェクトも使いたい場合はPostProcessing Stack V2にするとよいでしょう。

MK Glow Freeの場合

MK Glow Freeはこちらからインポートできます。

インポートしたら、Main CameraにMKGlowスクリプトをアタッチしておきます

f:id:am1tanaka:20190612143100p:plain
MKGlowスクリプトをアタッチ

これ以降の調整は、SpriteGlowを組み込んだあとに行います。

PostProcessing Stack V2

PostProcessing Stackについてはこちらに手順をまとめています。

記事に従ってBloomが動作するように設定してください。

SpriteGlowを設定する

SpriteGlowパッケージをインポートする

GitHubリポジトリーを開いて、必要なパッケージをダウンロードしてインポートします。

  • 以下を開きます

github.com

  • README.mdの最初の方にありますSpriteGlow.unitypackageのリンクをクリックして、パッケージをダウンロードします
  • ダウンロードしたSpriteGlow.unitypackageをドラッグして、UnityのProjectウィンドウにドロップして、インポートします

光らせたいオブジェクトへの設定

光らせたいオブジェクトに設定を加えます

  • Sceneウィンドウで光らせたいコインをクリックして選択します

f:id:am1tanaka:20190612143802p:plain
光らせたいオブジェクトを選択

  • ProjectウィンドウからSpriteGlowフォルダーを開いて、SpriteGlowEffectスクリプトをドラッグして、Inspectorウィンドウにドロップして、アタッチします

f:id:am1tanaka:20190612144039p:plain
スクリプトをアタッチ

以上で、スプライトの周りに白い枠が描画されるようになります。

f:id:am1tanaka:20190612144133p:plain
Glowが描画される

あとは、Bloomの効果が発揮されるようにHDR設定をします。

HDR設定

  • HierarchyウィンドウからMain Cameraをクリックして選択します
  • InspectorウィンドウのCameraコンポーネントにあるAllow HDR設定にチェックを入れます

f:id:am1tanaka:20190612144341p:plain
CameraのHDR設定

この段階で光った場合は、調整作業に進んでください。光ってない場合はGraphicsのHDRを有効にします。

  • Editメニューをクリックして開いて、Project Settings > Graphicsを選択します
  • InspectorウィンドウのUse Defaultsのチェックを外します
  • Use HDR設定が3か所あるので、チェックを入れて有効にします

f:id:am1tanaka:20190612144913p:plain
HDR設定

以上で輝き始めます。MK Glow Freeの場合は以下のようになりました。

f:id:am1tanaka:20190612144451p:plain
光った(けど光り過ぎ)

あとはちょうどよい光り方になるように調整します。

MK Glow Freeの光り方を調整する

MK Glow Freeは、Post Processing Stackに比べて強めに光る感じです。MKGlow自体の調整を加えておきます。

  • Hierarchyウィンドウから、Main Cameraをクリックして選択
  • InspectorウィンドウのMK Glowコンポーネントから、Intensityの値を小さくします。0.25ぐらいがちょうどよさそうでした

f:id:am1tanaka:20190612145654p:plain
MKGlowの調整

f:id:am1tanaka:20190612145734p:plain
光るアイテム

他のパラメーターも変更して、何が変わるか確認してみてください。

オブジェクト側の調整

オブジェクト側でも光り方を調整できます。

  • 調整したコインをクリックして選択します
  • InspectorウィンドウのSprite Glowコンポーネントで、光り方を調整できます

f:id:am1tanaka:20190612145913p:plain
Sprite Glowスクリプト

まとめ

以上です。PostProcessの設定に慣れていれば、あっという間に使えると思います。HDRだけ加えてくれるというのがスマートですね。お手軽にBloomが使えて、Bloom好きには堪らないアセットです。

記事の中の画像はUnityちゃん2Dデータを利用しました(コインがプレハブじゃなかったのは誤算でした^^;)。

ユニティちゃんライセンス

この作品はユニティちゃんライセンス条項の元に提供されています

参考URL

Unityで簡易にBGMと効果音を鳴らす

UnityでささっとBGMや効果音を鳴らす方法です。

目次

前提

Unityは多機能なので、フェードイン&フェードアウトや3Dサウンド、シーンを跨いだ曲の再生、AudioMixerへの対応など、様々なオーディオ効果を実装できます。しかし、そのためには相応の学習コストがかかるため、特に初学者だとかなり時間が必要になるでしょう。それらは後回しにして、先にゲームを完成させたいところです。

そこで、BGMと効果音を鳴らすだけに機能を絞って、手っ取り早く実装する手順をまとめます。機能は以下の通りです。

  • BGM
    • シーンごとに、設定したBGMを再生します
    • BGMはループ再生させることも、させないこともできます
    • 同じシーン内で曲は変えません
    • シーンを跨いだBGMの再生には対応しません
  • SE
    • 1つのオブジェクトですべての効果音を再生します
    • 3Dサウンドは使いません

プロジェクトの準備

Unity2019.1.5での実装例です。

  • Unityでプロジェクトを新規に作るか、音を鳴らしたいプロジェクトを開きます
  • 利用したい音源データ(oggmp3wavなど)を用意したら、Projectウィンドウの任意のフォルダーにドラッグ&ドロップしてインポートします
    • BGMをAudios/BGMフォルダー、SEをAudios/SEフォルダーにまとめた場合、以下のような感じになります

f:id:am1tanaka:20190610214221p:plain
音源データのインポート

音データの種類

Unityでは色々な音声データが利用できます(オーディオファイル - Unity マニュアル)。それらのうち、主に利用するのはoggmp3wavの3種類かと思います。

oggmp3は録音したデータを圧縮したもので、やや音が劣化しますが容量が小さくなります。両者の違いはそれほどないのでどちらを選んでも構いません。

(参考: oggとMP3の違いは何でしょうか?持ってるmp3の機械には対応してるみた... - Yahoo!知恵袋)

wavは録音したデータをそのまま保存する形式です。同じ条件で録音した場合、容量が大きくなる代わりに音質はよくなります。ハイエンドな高音質な環境向けの場合、wavを選ぶのも手です。ただし、WebGL環境だとwav形式の音にノイズが入る場合があります。特別な狙いがないのであれば、BGMも効果音もoggmp3の方がよいでしょう。

wavファイルは、以下のサイトなどでoggmp3に変換できます。

Load Typeについて

読み込んだ音声データを選択した時にInspectorに表示される設定です。効果音やゲーム中のBGMの場合はデフォルトのままにします。

タイトル画面やゲームオーバーなど、処理が多少重くなっても構わないようなシーンでは、Load TypeStreamingに変更すると音が鳴り始めるのが早くなる(はず)で、よさげです。

f:id:am1tanaka:20190610182854p:plain
タイトルやゲームオーバー用の音源はStreamingにするとよいかも

BGMを鳴らす

BGMを鳴らします。

  • HierarchyウィンドウのCreateをクリックして、Create Emptyをクリックして空のゲームオブジェクトを作成して、名前をTinyAudioなどにします
  • InspectorウィンドウのAdd Componentをクリックして、Audio > Audio Sourceをクリックします
  • Projectウィンドウから、そのシーンで鳴らしたいBGMの音源ファイルをドラッグして、InspectorウィンドウのAudio Clip欄にドロップします

f:id:am1tanaka:20190610185243p:plain
音源データをAudio Clip欄にドラッグ&ドロップ

  • BGMをループ再生したい場合は、InspectorウィンドウのLoop欄にチェックを入れます

f:id:am1tanaka:20190610185400p:plain
Loop設定

以上で設定完了です。UnityをPlayするとBGMが再生されます。BGMはこれでOKです。

効果音を鳴らすためのクラスを作る

効果音はTinyAudioというクラスを作成して、スクリプトから呼び出して鳴らすようにします。

  • Hierarchyウィンドウから先ほど作成したTinyAudioオブジェクトをクリックして選択します
  • InspectorウィンドウのAdd Componentをクリックして、New scriptをクリックして、TinyAudioなどの名前でスクリプトを作ります
    • スクリプトは、Scriptsフォルダーなどを作って、そこにまとめておくのがオススメです
  • Projectウィンドウから作成したTinyAudioスクリプトをダブルクリックしてエディターで開きます
  • 以下のコードを入力、あるいはコピペします
using UnityEngine;

public class TinyAudio : MonoBehaviour
{
    public static TinyAudio Instance;

    /// <summary>
    /// seListに設定する効果音の種類を以下に定義します。
    /// </summary>
    public enum SE
    {
        CLICK,
        HIT,
        MAGIC
    }

    [Tooltip("効果音のAudio Clipを、SEの列挙子と同じ順番で設定してください。"), SerializeField]
    AudioClip[] seList;

    AudioSource audioSource;

    private void Awake()
    {
        Instance = this;
        audioSource = GetComponent<AudioSource>();
    }

    /// <summary>
    /// SEで指定した効果音を再生します。
    /// </summary>
    /// <param name="se">鳴らしたい効果音</param>
    public static void PlaySE(SE se)
    {
        Instance.audioSource.PlayOneShot(Instance.seList[(int)se]);
    }
}
  • 上書き保存したら、Unityに切り替えます
  • HierarchyウィンドウからTinyAudioオブジェクトをクリックして選択します
  • Projectウィンドウから効果音のファイルをドラッグして、InspectorウィンドウのSe List欄にドロップします
    • 設定する順番は、TinyAudioスクリプトSE列挙子に対応付けていきます。CLICKはクリック音、HITは攻撃音、MAGICは魔法のような音ということで、その順番に設定します

f:id:am1tanaka:20190610190734p:plain
AudioClipを設定

効果音を鳴らす

スクリプトからTinyAudio.PlaySE(TinyAudio.SE.CLICK);のように呼び出せば指定した効果音が鳴ります。TinyAudio.SE.CLICKは、TinyAudio.csの10行目付近に宣言してあります。SE列挙子の最初(0番目)なので、Se ListElement 0に設定した音が鳴ります。

数字キーで効果音を鳴らす機能を実装しましょう。

  • HierarchyウィンドウのCreateをクリックして、Create Emptyをクリックして、空のゲームオブジェクトを作成して、SETestなどの名前にします
  • InspectorウィンドウのAdd Componentをクリックして、New scriptを選択して、SETestなどの名前にします
    • SETestスクリプトは、Scriptsフォルダーに移動しておくとよいです
  • SETestスクリプトをダブルクリックして、以下のコードにします
using UnityEngine;

public class SETest : MonoBehaviour
{
    void Update()
    {
        if (Input.GetKeyDown(KeyCode.Alpha1))
        {
            TinyAudio.PlaySE(TinyAudio.SE.CLICK);
        }
        if (Input.GetKeyDown(KeyCode.Alpha2))
        {
            TinyAudio.PlaySE(TinyAudio.SE.HIT);
        }
        if (Input.GetKeyDown(KeyCode.Alpha3))
        {
            TinyAudio.PlaySE(TinyAudio.SE.MAGIC);
        }
    }
}

以上で保存して、Unityに切り替えてPlayします。数字キーの123でそれぞれ効果音が鳴ります。

数字キーを連打すると、効果音が同時に鳴ることが確認できます。今回のように音に3D空間の効果を使わない場合は、1つのAudio SourceでBGMも効果音も鳴らせます。

シーン切り替えに対応する

他のシーンでもBGMを鳴らせるようにします。

  • HierarchyウィンドウからTinyAudioオブジェクトをドラッグして、Projectウィンドウにドロップしてプレハブ化します
    • プレハブは、Prefabsなどのフォルダーを作ってまとめておくのがおススメです
  • ついでにSETestオブジェクトのドラッグ&ドロップしてプレハブ化しておきます
  • [Ctrl]+[S]キーでシーンを保存します
  • 新しいシーンを作るか、既存の別のシーンに切り替えます
  • Projectウィンドウから、TinyAudioプレハブをドラッグして、Hierarchyウィンドウにドロップします
  • 必要に応じて、ProjectウィンドウからSETestプレハブをドラッグして、Hierarchyウィンドウにドロップします(効果音の再生テストが不要な場合は不要です)
  • HierarchyウィンドウのTinyAudioオブジェクトをクリックして選択します
  • 新しいシーン用のBGMをProjectウィンドウからドラッグして、InspectorウィンドウのAudioClip欄にドロップします

f:id:am1tanaka:20190610214835p:plain
BGMの音源データを設定

  • BGMをループさせたいかどうかに応じて、InspectorウィンドウのLoop欄のチェックをつけるか、外します

f:id:am1tanaka:20190610185400p:plain
ループ設定

以上で完了です。PlayするとBGMが鳴ります。SETestオブジェクトを設定してあれば、数字キーの123で効果音が鳴ります。

シーンを切り替えたら、そのシーンに設定したBGMが鳴り始めます。

効果音の増やし方、あるいは変更の仕方

効果音を増やしたり、内容を変更したい場合、TinyAudioクラスのSE列挙子の宣言を変更して、それに合わせてTinyAudioオブジェクトに設定する効果音リストを更新します。

  • ProjectウィンドウからTinyAudioスクリプトをダブルクリックして、エディターで開きます
  • 使いたい効果音を全て列挙子SEに定義します。例えば食べる効果音を増やしたいなら、EATなどの名前で定義を追加します

f:id:am1tanaka:20190610222908p:plain
列挙子を増やす

  • 上書き保存したらUnityに切り替えます
  • ProjectウィンドウのTinyAudioプレハブをクリックして選択します

f:id:am1tanaka:20190610223041p:plain
TinyAudioプレハブを選択する

  • Projectウィンドウから追加したい音データをドラッグして、InspectorウィンドウのSe List欄にドロップするか、Sizeを増やして該当するスロットにドロップします
    • 以下、matchstick-put-fire1を追加している例です

f:id:am1tanaka:20190610223359p:plain
音を追加

以上で完了です。あとはスクリプトからTinyAudio.PlaySE(TinyAudio.SE.EAT);のように呼び出すことで、新しく追加した音を鳴らすことができます。

まとめ

シーン切り替え時に効果音が途切れたり、BGMがシーンを跨げないなど気になる部分はありますが、一先ずBGMと効果音を鳴らすことができました。2DゲームやUIのシステム音など、鳴っている場所の影響を受けない音はここで紹介した以下のような方法が効率よいです。

  • BGMは、Audio SourceAudio Clip欄に音データを設定して再生
  • SEは、PlayOneShot()で再生

3D対応させたり、最初に記載したような多様な機能を実装したい場合は以下のブログなどが役に立つと思います。

kan-kikuchi.hatenablog.com

qiita.com

参考URL

購入アセット

2019年5月のマッドネスセールでゲットしたアセットです。作例などはまた後日。

f:id:am1tanaka:20190506223724p:plain

目次

PolyWorld: Woodland Toolkit

アフィリエイトリンクです。

真っ先に購入したアセットです。

  • Terrainで作成した地形をフラットシェーディングなローポリ地形に変換できる
  • LODと範囲で分割ができる
  • 一般的なモデルをフラットシェーディングのローポリ化できる
  • 同じローポリテイストの洞窟メッシュなど、小物も付属
  • ローポリ雲がよい

開発中のゲームのマップ画面や背景をローポリテイストでまとめてみようとということで購入しました。マップ画面、鋭意作成中です!

Vectrosity

アフィリエイトリンクです。

初版が2010年にリリースされた古参のアセットです。前回の1週間ゲームジャムで公開した跳ね玉で、玉の軌道をUnity謹製のLine Rendererで描画しているのですが、角度が悪かったりするとテクスチャが歪んでしまうのが気になってました。今後もこのような演出はすると思うので、よさげなので購入してみました。

Automatic LOD

アフィリエイトリンクです。

こちらはポリゴン数を減らしてくれるアセットです。ローポリテイストではなく、遠くのオブジェクトのポリゴン数を減らして負荷を軽くするLOD用のメッシュを作成するためのアセットです。Mesh Simplifyというポリゴンを減らすアセットを含んでいて、減らしたポリゴンをLODに対応させてくれます。

Sketchfabで入手したモデルを1週間ゲームジャムで使う際にポリゴンを減らしたかったことがあって、今すぐ使うあてはないのですがこの機会に購入しました。最近、あまり3Dゲーム作ってないので出番があるといいなぁ...。

今回は以上

今回購入したものは以上3つでした。Voxel Playも面白そうだったのですが、今作ってる作品のテイストを考えた時にボクセルよりもローポリかな、と感じたので今回は外しました。

Poly Worldは早速これでマップ作りをはじめています。Vectrosityは時間をみて、跳ね玉に組み込んでみようかなと思ってます。Automatic LODは何に使おうか...。そのうち、Looking Glass用のなんかに使いそうな気がする...。

セールで購入を検討しているアセット

5/1からアセットストアのセールが始まる!

assetstore.info

購入を検討中のアセットです。今のところ殆どがセール対象外ですが、デイリーセールがあるようなのでそれ狙いです。

※このページのリンクには、アフィリエイトは設定していません。

マップ画面を作成のためのやつ

VoxelorerBirdのマップ画面を作る際に欲しいアセット。

PolyWorld: Woodland Toolkit

assetstore.unity.com

セール対象品のTerrainや3Dモデルをフラットなローポリにするアセットです。地形をProBuilderで作る手もあるけど、テクスチャを塗ったり木を生やそうとするとTerrainエディター使えた方が楽かなということで。

Low Poly Terrain

assetstore.unity.com

こちらも同じくTerrainツールとかハイトマップからローポリの地形を作れるアセット。PolyWorldよりも地形作成に特化したものになっています。LODモデルが作れるらしいのも魅力。

Z! Low Poly Nature Pack

assetstore.unity.com

2019年4月23日に出たばかりの新作アセット。同じくVoxelorerBirdのマップ画面で使えそうということで。木の種類が多いのに加えて、雲や水面があるのが魅力。

PolyWorldが人気ですが、自分の用途的にはLow Poly Terrainの方が合っているかなという気がしていて、一先ずデイリーセールをチェックして、Low Poly Terrainが出なければPolyWorld購入かなと考えてます。

最適化アセット

Mesh Combine Studio 2

assetstore.unity.com

MCS Caves & Overhangs

assetstore.unity.com

マップを自動的に分割&統合してくれるやつと、隠れた場所のメッシュを消してくれる拡張パック。

演出用のやつ

Fast Bloom optimized for Mobile

assetstore.unity.com

2019年1月10日にリリースされた新しいモバイル用のBloomアセット。とにかく速いということで、価格もそれほどではないので、これはセールにならなくても購入するかも。

Ghost Shaders

assetstore.unity.com

公開できていない作品で使おうか検討していたシェーダー。お化け的なキャラを出すのによさそうで、今後もなにかと使えそうなのでデイリーセールに登場したら確保しておこうかと。

Definitive Stylized Water

assetstore.unity.com

ローポリに合いそうで奇麗な水面のアセット。VoxelorerBirdのマップに使えそうだし、今後もあったら何かと使えそうなので、これもデイリー狙い。

Mobile Fast Shadow

assetstore.unity.com

モバイル用の高速な影。最終更新が去年の9月で、2017に対応していないというようなコメントもあってちょっと危険な感じ。デイリーに入ったら試しに買ってみようかと。

検討中

Automatic LOD

assetstore.unity.com

Unity上でメッシュ数を減らすことができるアセット。セール対象になっていて凄く良さげなのだけど、喫緊で使う目的がないので検討中。

True Clouds/Fog(Mobile&PC)

assetstore.unity.com

VoxelorerBirdのマップ画面で、まだロックされている入り口を隠しておくために漂わせたい雲の生成に使えるかな?と思ってるアセット。最近の流行りのシェーダーでやるフォグはオブジェクトの周りに発生させるとかできないみたいなので、その用途でモバイル向けだとこれかなと。セール対象なので、Z! Low Poly Nature Packのセール状況次第でこちらの方を購入するかも。

今のところこんな感じです。デイリーで何が登場するか楽しみです。

Addressableアセットシステムを使ってみる

Addressableアセットシステムは、テキストなどのデータファイルをそれを指定する文字列などのアドレスで読み込む仕組みです。手軽にコンテンツのデータの作成や配布をするのに役立ちます。

Addressableアセットシステムは、依存関係(Dependencies)の一覧を使って、様々な場所から非同期にデータを読み込むことができます。直接参照したり、これまでのAsset Bundleを使ったり、リソースフォルダーを使うこともできます。

以下の公式ドキュメントをざっくり読んで、Addressableアセットの設定、作成、スクリプトからの読み込みをしてみます。

docs.unity3d.com

目次

使う上での注意点

  • 対応するのは、Unity2018.2以降
  • Addressables System 0.5.3で動作確認
  • 2019/4/25の時点ではまだreview版なので、仕様変更や不具合が発生する場合があります。正規のプロジェクトで使うかどうかは慎重に
  • 一通りの設定を終えるまではエラーが発生する場合があります。とりあえずエラーが出ても、アセットを読み込むところまで進めてください

Addressableアセットの設定と作成

インストール

Addressableアセットパッケージは、Package Managerからインストールできます。Package ManagerからAddressables Systemをインストールします。

アセットをAddressableに設定する

2通りの方法があります。Package ManagerでAddressables Systemをインストールしたら、Addressableにしたいアセットを選択してInspectorAddressにチェックを入れるか、Addressablesウィンドウを表示して、そこにドラッグ&ドロップします。

Addressableウィンドウは、WindowメニューからAsset Management > Addressable Assetsを選択して開きます。AddressableにしたいアセットをProjectウィンドウからドラッグして、AddressablesウィンドウのAssetタブにドロップします。

設定したアセットのデフォルトアドレスはプロジェクトのAssetパスです。例えばAssets/images/myImage.pngのようになります。これはInspectorウィンドウや、Addressablesウィンドウでユニークな他の文字列に変更することができます。

Addressableアセットをはじめて設定した時は、プロジェクトフォルダーにAssets/AddressableAssetsDataフォルダーが作成されて、必要なデータが作成されるので、バージョン管理システムを利用している場合は管理に加えてください。

読み込みやAddressからのゲームオブジェクト生成

実行中に読み込みやアセットから生成ができます。Loadingアセットでは、アセットバンドルのデータも含む読み込みに必要なすべてのアセットをメモリーに読み込みます。必要になった時にアセットを読み込んで使うことができます。Instantiating loads the Asset(アセットの読み込みと生成)の場合は読み込んだと同時にシーンにアセットが生成されます。

Addressableアセットにアクセスするスクリプトでは、冒頭で以下を追加しておきます。

using UnityEngine.AddressableAssets;

データの読み込み、および、読み込みとInstantiateは以下のメソッドで実行します。

LoadAsset

Addressables.LoadAsset<GameObject>("AssetAddress");

InstantiateAsset

Addressables.Instantiate<GameObject>("AssetAddress");

上記のいずれも非同期なので、読み込み完了時に処理する場合は以下のようにコールバックを設定します。特に、LoadAssetの場合は、読み込み後にデータを利用することになるので、以下の仕組みが必要になるはずです。以下、testdata.csvというテキストアセットを読み込んで、完了したらログ表示する例です。テキストアセットのエンコードUTF8Nです。

using UnityEngine;
using UnityEngine.AddressableAssets;

public class AddressableLoader : MonoBehaviour {

    void Start () {
        Addressables.LoadAsset<TextAsset>("testdata.csv").Completed += onLoadDone;
    }

    void onLoadDone(UnityEngine.ResourceManagement.IAsyncOperation<TextAsset> obj)
    {
        Debug.Log(obj);
    }
}

以上で、Addressableアセットを作成して、スクリプトから利用することができます。

これ以降、以下の項目を必要に応じて進めるとよいでしょう。

参考URL

メッシュを変形するDeformを使ってみる

なんか凄いのがMITライセンスで公開されたのを知って、取り急ぎ使い方をば。メッシュを変形させるライブラリです。以下のようなことができます。

f:id:am1tanaka:20190406160924g:plain
Twist Deform

github.com

沢山種類があるので、詳しくは上記のGitHubリポジトリーで動画が見れます。

目次

要件

Unity2018.3以降が必要です。

インストール方法

依存関係を解決する必要があるので、リポジトリーのファイルをそのままプロジェクトに突っ込むだけでは動きません。以下のインストール手順に従います。

Deform/Installation.md at master · keenanwoodall/Deform · GitHub

  • Unityを閉じておきます
  • 組み込みたい2018.3以降のUnityのプロジェクトのPackagesフォルダーをエクスプローラーなどで開きます

f:id:am1tanaka:20190406161050p:plain
Packagesフォルダー

  • manifest.jsonを何らかのエディターで開きます

f:id:am1tanaka:20190406161103p:plain
manifest.jsonを開く

  • すでに書かれている部分はそのままにして、 "dependencies": {の下に以下の行を追加します
// :
"com.beans.deform": "https://github.com/keenanwoodall/Deform.git",

f:id:am1tanaka:20190406161121p:plain
dependenciesを追加

  • 上書き保存してエディターを閉じます

以上できたら、Unityを起動してプロジェクトを開きます。そうすると、自動的に依存関係も含めてDeformがインストールされます。

原文には、ZIPをダウンロードして組み込む手順も掲載されています。

変形させる

以下を参考に、Twistでキューブ(Cube)をねじってみます。

Deform/GettingStarted.md at master · keenanwoodall/Deform · GitHub

ねじるためのCubeを作成する

変形のための頂点が必要なので、通常のGame Objectから作成するCubeだとうまくいきません。Deformがそれ用のCubeを作ってくれますのでそれを使います

  • ToolメニューからDeform > Creatorを選択します

f:id:am1tanaka:20190406161220p:plain
Creatorウィンドウを開く

  • Creatorウィンドウが開きますので、Create Deformableボタンをクリックします

f:id:am1tanaka:20190406161255p:plain
Deformableの作成

Wireframeを表示してみると、以下のように1辺が16分割された立方体であることが確認できます。

f:id:am1tanaka:20190406161315p:plain
作成されたCubeの確認

ちなみに、普通に作ったCubeは以下の通りなので、辺の途中がねじれないのでうまくDeformできません。

f:id:am1tanaka:20190406161327p:plain
標準のCube。これだと複雑な変形ができない

  • Hierarchyウィンドウで、作成したDeformable Objectをクリックして選択したら、CreatorウィンドウのTwistボタンをクリックします

f:id:am1tanaka:20190406161421p:plain
Twistを追加

以上で、TwistDeformerが設定されました。

ネジってみる

  • 作成したCubeの子供に追加されたTwistオブジェクトを選択します
  • Cubeの上下にオレンジ色の円柱状のハンドルが表示されるので、それをドラッグするとCubeがねじれます!

f:id:am1tanaka:20190406161500p:plain
ねじる!

  • Twistの座標や回転、大きさを変化させると、ねじれ方が変わります

f:id:am1tanaka:20190406160924g:plain
Twist Deform

Cube以外のメッシュを変形させたい場合

既存のモデルに適用したい場合は、そのモデルを選択して、CreatorウィンドウのCreate DeformableボタンをクリックすればOKです。あとの作業は同じです。

スクリプトから使う

利用したいコードの先頭に以下を追加します。

using Deform;

Twistを制御したい場合は、TwistDeformerインスタンスInspectorGetComponent<TwistDeformer>()で取得して、StartAngleEndAngleプロパティーに値を設定すれば動きます。

using UnityEngine;
using Deform;

public class TwistTest : MonoBehaviour
{
    TwistDeformer twistDeformer;
    float now = 0;

    private void Awake()
    {
        twistDeformer = GetComponent<TwistDeformer>();
    }

    void Update()
    {
        now = Mathf.Repeat(now + Time.deltaTime * 360f, 360f);
        twistDeformer.StartAngle = now;
        twistDeformer.EndAngle = -now;
    }
}

上記のようなスクリプトを作成してTwistオブジェクトにアタッチすると自動的にねじれます。

詳細は...

英語ですが、以下の動画で操作が分かります。控えめに言って凄いです。

www.youtube.com

関連URL

github.com