tanaka's Programming Memo

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

STYLYを利用してHTC VIVEでVR

Unityメモ

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 ChromeかSafariかMicrosoft 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

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

Unityメモ

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

  • 音源データの書式の説明が古くなっていたので修正(2022/7/2)
  • 列挙子などの名前をパスカルケースに変更(2021/6/28)

目次

前提

Unityでとりあえず手っ取り早くBGMや効果音を鳴らしたい！というためのサンプルコードと手順です。機能は以下の通りです。

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

プロジェクトの準備

Unity2019.1.5での実装例です。

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

音源データのインポート

音データの種類

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

oggとmp3は録音したデータを圧縮したもので、やや音が劣化しますが容量が小さくなります。

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

wavは録音したデータをそのまま保存する形式です。同じ条件で録音した場合、oggやmp3よりも容量が大きくなる代わりに音の劣化がありません。

Unityではプロジェクトに音源データを加えた時に内部形式に変換するので、どの形式の音源を使ってもビルドや実行時に違いはありません。

WebGL環境だとキンキンした音の最後にノイズが入ることがあります。特にwav形式で発生する印象があります。そのような場合は、以下のようなサイトで形式を変更したりすると直ることがあります。

Load Typeについて

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

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

タイトルやゲームオーバー用の音源はStreamingにするとよいかも

BGMを鳴らす

BGMを鳴らします。

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

音源データをAudio Clip欄にドラッグ＆ドロップ

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

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 { get; private set; }

    /// <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は魔法のような音ということで、その順番に設定します

AudioClipを設定

効果音を鳴らす

スクリプトからTinyAudio.PlaySE(TinyAudio.SE.Click);のように呼び出せば指定した効果音が鳴ります。TinyAudio.SE.Clickは、TinyAudio.csの10行目付近に宣言してあります。SE列挙子の最初(0番目)なので、Se ListのElement 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します。数字キーの1、2、3でそれぞれ効果音が鳴ります。

数字キーを連打すると、効果音が同時に鳴ることが確認できます。今回のように音に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欄にドロップします

BGMの音源データを設定

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

ループ設定

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

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

効果音の増やし方や変え方

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

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

列挙子を増やす

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

TinyAudioプレハブを選択する

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

音を追加

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

まとめ

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

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

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

kan-kikuchi.hatenablog.com

qiita.com

参考URL

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

Unityメモ 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にしたいアセットを選択してInspectorのAddressにチェックを入れるか、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を使ってみる

Unityメモ

なんか凄いのが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を追加

以上で、TwistのDeformerが設定されました。

ネジってみる

  • 作成した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のインスタンスをInspectorかGetComponent<TwistDeformer>()で取得して、StartAngleやEndAngleプロパティーに値を設定すれば動きます。

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

Looking Glassの表示がずれる

LookingGlass ルキグラス

Looking Glass(ルキグラス)を表示したら、以下のように微妙にずれるという時は、メインモニターの方の設定が原因かも知れません。

f:id:am1tanaka:20190405224303j:plain
LookingGlassの表示がずれる

Someluさんの以下のツイートをなんとなく覚えていて、LookingGlassの方だけではなく、メインモニターの倍率も100%じゃないといけないということで、無事直りました！

UnityでMissingのオブジェクトを検索する

Unityメモ

以下書いたけど、Unity2018.3だとワーニングをダブルクリックすればどのオブジェクトか示してくれますね。ちょっと前に駄目だった気がしたのですが、気のせいだったかも・・・。一応なんかあった時の対処法ということで。

無料版のAssetを有料版に差し替える時やバージョンアップ時に、構造が変わってスクリプトがMissingになってしまうことがあります。しかし、Missingなのは分かるけど、どれ・・・という時の解決策をUnity Communityで見つけました。

wiki.unity3d.com

実装手順

  • Editorフォルダーをプロジェクト内のどこかに作成します(すでにあればそれを利用すればよい)
  • Editorフォルダー内にFindMissingScriptsRecursivelyという名前でC#スクリプトを作成します

f:id:am1tanaka:20190401213247p:plain
スクリプト作成

f:id:am1tanaka:20190401213504p:plain
スクリプトをコピー

  • FindMissingScriptsRecursively.csに貼り付けます

f:id:am1tanaka:20190401213557p:plain
貼り付け

以上で設定完了です。

Missingを探す

  • 探したいシーンを開きます
  • Windowメニューから、FindMissingScriptsRecursivelyを選択して、検索ボタンのあるウィンドウを開きます

f:id:am1tanaka:20190401213818p:plain
検索メニュー表示

  • Hierarchyウィンドウでオブジェクトを全て選択します

f:id:am1tanaka:20190401213716p:plain
オブジェクトを選択

  • Find Missing Scripts in selected GameObjectsボタンをクリックします

f:id:am1tanaka:20190401214102p:plain
検索実行

検索結果は、Consoleウィンドウに表示されます。

f:id:am1tanaka:20190401214144p:plain
コンソール画面

  • ????? has an empty script attached in position: ?という行があったら、Missingを持ったゲームオブジェクトがあったということです。先頭の?????の部分にオブジェクトの名前が表示されます
  • 上記のコンソールの行をクリックすると、Hierarchyウィンドウで該当するゲームオブジェクトが黄色で示されます

f:id:am1tanaka:20190401214459p:plain
Missingのあるゲームオブジェクト

以上です。

Missingのあるプレハブを見つけるには

Hierarchyウィンドウで選択したのと同様に、Projectウィンドウで調べたいオブジェクトを選択して、検索ボタンを押せばプレハブからもMissingを見つけてくれます。

参考URL

Unity1週間ゲームジャム「つながる」参加ブログ

unity1week

つながるというお題で、スタートからゴールに線を繋げる 跳ね玉 というゲームを作りました！unityroomにログインして遊んで評価を送信していただければ喜びます！

跳ね玉

跳ね玉 | フリーゲーム投稿サイト unityroom

企画から制作までの流れをメモがてら。

目次

企画ができるまで

最近では恒例になりました、秋葉原にあるコワーキングスペースWeeybleさんにおいてニムさん主催で開催されましたUnity1週間ゲームジャム準備会に参加するところからスタート。

今回も勢いをつけるためにライトニングトーク(LT)枠での参加。いつもはネットランキングやツイート方法、フレームワークの参考など技術的なことをお話していたのですが、ゲームデザインについて自分が調べたことを発表しました。3/9に資料作成した模様。

資料は以下で公開してます。

docs.google.com

準備会ではLT後、Looking Glassを持って行っていたのでどっちかというとそっちで遊んでいたような...。3/10の作業は以下のような感じでした。

  • Trelloで作業用ボード作成
  • Unityのプロジェクト作成、基本設定、ビルド、unityroomへの仮登録

一人企画会議

準備会から帰ったあとは一人企画会議です。Trelloのカードに以下のようにざっくりとテーマを書き出しました。

  • タイミング一発的なシンプルなルール
  • プリミティブな形をかっこよく見せる -> PPSを利用
  • 高さなどの眩暈要素 -> CameraPlayの波紋
  • ネットランキングとツイートでSNS要素を入れる

以下のような案が最初の方向性でした。

  • タイミングワンキー
  • 左右を選ぶ
  • ロープ
  • 棒高跳び的な
  • スポットライトに当たり続ける or 逃げる

ただ、この段階で具体的なイメージはまとまらず。次に、最近気になっていたPhysics.Simulate()による物理の先読みネタを考え始めました。テラシュールブログさんの以下のブログのやつです。

tsubakit1.hateblo.jp

そして日曜日の21時半ごろに以下をツイート。

この時に考えていたのが、跳ね玉のほぼそのままの企画です。

ついでにこんなことつぶやいていた。これは深入りしなくてよかった^^;

  • 超カジュアルゲームなら高さによるめまい要素を入れたり演出に時間をかけられる
  • パズルならPhysics.Simulate()を使えて、めまい要素は減るけどCameraPlayで揺らすのはできる

という2択。LT通りにやるならカジュアルゲーだけど、パズルの方がイメージがしっかりと固まっていて「つながる」のテーマも満たしている。Physics.Simulate()と念願のCameraPlayも使えそう。ということで、やりたいことができるパズル企画を選びました。

この後の開発の流れは後半にて。

学生さん作品

Sāya君. Bird Tree Life

前回、デビュー作のカードジャンゴーでいいねを沢山もらった狼幼女改めSāya君が今回も参加。

unityroom.com

画面が奇麗でずんずん成長してます。前作もそうですが、文字がなくてもストーリー性が出せるのが強い。サウンドや雰囲気でランクインしたり、おすすめや週間ランキングにも登場。お見事！！

f:id:am1tanaka:20190326185313p:plain
週間ランキング

f:id:am1tanaka:20190326185336p:plain
音楽

Alesta_WSさん. MicroChip

こちらも連続参加。ロシアからの留学生のAlesta_WSさんの作品。

unityroom.com

歯ごたえのあるパズルゲームです。説明が少ないのと音がなくて評価を落としてしまったのが残念。面白いゲームですが、元ネタはあるのだろうか。学校がはじまったら聞いてみよう。休みの期間で自力で完成させて公開しているのでえらいです!!

ゲームジャムを終えて

全体的によいコメントや評価をいただけて、頑張った甲斐がありました。評価ランキングでは、3/25までの最高順位で8位に入ることができました！！

f:id:am1tanaka:20190325223552p:plain
評価総合ランキング

僅差なのでいつまで持ちこたえられるか分からないので記念のスクショ。

今回から変更になった評価形式やランキングによって、多くの作品が並びますし、項目ごとに評価が分かって次回作への反省材料になります。unityroomがさらに進化！naichiさん、いつも本当にありがとうございます。

次回に向けて

参加された皆さんの作品を拝見するのもとても得るものが多いです。今回は特に以下のようなこと。

  • ゲームがシンプルでも強いものは強い
  • 画面は明るめに(地が黒くてもエフェクトで半分以上明るくなるとか、画面全体が暗くならないように)
  • キャラクター性、ストーリー性、作家性のいずれかがあるものは強い
  • ドット絵強い(これは自分には無理なのでプリミティブ方面を追う)

今回は時間を沢山使えましたが次回は時期的に難しいはず。上記を踏まえてコンパクトなものに挑戦したいと考えています。が、企画は水物なのでどうなるか。画面の明るさ問題は「絵作り」で結果が出たのでちょっと悩みどころなのですが、ビュー数を伸ばす手段として試す価値はありそうだと考えています。

naichiさん、素敵なサイトと1週間ゲームジャムをありがとうございます。今回も多くの収穫がありました。Weeybleさんで準備会や追い込み会でご一緒した皆様、また是非ご一緒できればうれしいです！今回も楽しい実況プレイをしてくださったぱふもどきさん、お疲れさまでした。沢山のゲーム、特にオンラインゲームを楽しめました。1週間ゲームに参加された皆様、遊んでくださって評価してくださった皆様、お疲れさまでした＆ありがとうございました！

引き続き、開発ログです。

開発ログ

初日：3/11(月)

テーマが発表されてすぐにモックアップの作成を開始しました。フォントはデザインの要の一つなので早めに選びます。今回の1週間ゲームジャムでは、フォントワークスさんが2か月間の無償ライセンスをご提供くださっていたので使おうとしたのですが、サイトを探してもやり方が見つかりません...。インストールフォルダってどこだ。どうやって探すんだ。ライセンスの内容もどうにも要領を得ず、知りたいことが分かりません。これはキビしい...。ということで、仕様ライセンスの解約とアンインストール。

そして、いつも通りフリーフォント探しの旅に出ました。いつもお世話になっているColissさんが2019年度版のフリーフォント総まとめを出して下さってました！！

この中から、今回のゲームにぴったりのかっこいいフォントが見つかりました。ありがたやありがたや。

ということで、解像度などを確定して、タイトル画面を作って0日目終わり。

作業再開は昼過ぎから、ゲーム画面のモックアップ作りを開始。PostProcessの設定をしたり、プレイヤーの玉やバウンドさせるやつの形を作ったり、アニメーションを作ったりで終了。

作業をしつつステージの構成についても検討。ガンズターンアプリ研究所さんの作品「WHEEL OF FORTUNE」のエンディング演出が素晴らしかったので、ステージ全体で何かを表現できないか考えました。

unityroom.com

ステージ全体が鳥のおもちゃの中で、電線を繋いでいってエンディングで羽ばたかせるのはどうだ、とか考えてました。アセットも探していたのですがよさそうなのが見つからず、方針を転換して今回のアイディアにしました。

f:id:am1tanaka:20190325002227j:plain
つなぐ

6ステージ分の基本的な形がまとめてできたので、ステージ作りは楽にできました。

2日目：3/12(火)

この日も昼過ぎから。

Sleek Renderは速度が速いのだけど、滑らかに形に合わせたBloomが出ないのですよね。ということで、公式PPSに変更することにしました。その後、玉の軌道予測と移動に取り掛かりました。

こんな感じで方針転換。ざっくりとしたものはこの日にできましたが、まだまだ不具合を抱えている状態でした。

また、バウンドさせる丸いのの地味さを解決するために、Pro Builderでエッジを作ってそこを発光させるようにしたりして画面はおおよそ整いました。

3日目：3/13(水)

評価順位の発表までずっとこう思ってました。が、評価ランキングでは絵作りが一番順位が高く、自己判断ってあてにならないなと思った次第^^; ご意見聞くの大事。

以前から使いたかったCamera Play - Asset Storeの演出をようやく入れることができました！いくつもコメントいただきましたし、間違いなく絵作りの評価が高かった理由の一つだと思います。満足^^

4日目：3/14(木)

ゲームの大枠をおおよそ実装。

ここに書いてある「Physics.SimulateがFixedUpdateを呼び出してしまう」というのは勘違いで、これが最終日まで問題がもつれる原因になりました。椿さんのブログに「FixedUpdateは呼ばれない」とちゃんと書いてあったのを誤読していたという...。国語力大事。

5日目：3/15(金)

5日目にして問題発生！

1つ順番が狂えばシミュレーションと実行結果が変わってしまうので苦戦しました。FixedUpdate()が不規則に呼ばれると勘違いしていたことで、余計にこんがらがってました。19時過ぎにようやくひと段落。

クリアのフローを作ったりと残りの作業をばばばばばっと。

6日目：3/16(土)

あと2日しかないし...。クリアが入ったので、残りのステージ作りに取り掛かりました。また、Stage4以降に出る紫のやつも作成。朝から作業を開始して、Stage6まで完了して以下をツイート。

ここからは怒涛の作業。バウンドするやつを壊せるようにしたり、仮エンディング、チュートリアル、ランキングをどどどっと実装しました。

チュートリアルの制作は2時間ぐらい。メッセージと説明用のオブジェクトを、ページごとのゲームオブジェクトの子供にして作っておいて、それをSetActive()で切り替えるというシンプルな方法で実装しました。

画面の変化は殆どないので画像無し。安心できない感じで最終日を迎えました。

最終日：3/17(日)

朝から仕上げの作業。やまださんのimgur版の画像ツイートと仮のエンディングを実装してお昼。Weeybleさんの追い込み会に出発！

weeyble-game.connpass.com

Weeybleさんでは、ラスボスである玉がバウンドさせるやつを抜けてしまうバグ退治。ここにきてようやくPhysics.Simulate()の振る舞いをDebug.Log()で追って、問題を突き止めました。原因はシミュレート自体ではなく、とあるフラグの初期化のタイミングでした。

17時半に解決したのであとは楽勝だと思ってたのですが、ここからラスボスの第２形態が...。初期化でコケるという超初歩的なバグが発生。初期化の流れが今一つ良くなくて、これの解決に20時ギリギリまでかかってしまいました。バウンドさせると消えるのがうまくいかず、最終ステージの仕掛けを一部省いたりしましたが、なんとかアップロード！！

ぴったりなスクショも取れまして。

これにて、公開完了となりました。めでたしめでたし。

その後のバージョンアップ

バウンドさせるやつが消える時の処理や、Stage2のバランス、この企画の冒頭で考えていたエンディングの演出の実装などを終えて、3/19の夜に最終版が仕上がりました！

以上、今回の「跳ね玉」の開発の流れでした。

参考URL