Unityに関連する記事です

 ここから2回の手順に分けて、AR 空間内に画像の添付された3Dオブジェクトを生成します。
なお2Dオブジェクトにも応用できます。


Scene ビュー画像



Game ビュー画像(エディター)



実行動画 エディター
動画ファイルへのリンク



設計


 まずは AR 空間に生成するゲームオブジェクトを作成します。
作成したらプレハブにしておき、ゲーム実行時にスクリプトから動的な生成ができるようにします。

 ゲームオブジェクトには画像を添付しますが、画像をそのまま添付出来ませんので、マテリアルを作成します。

 また後程になりますが、画像はゲーム内で変更する必要もあります。こちらはマテリアルを変更する機能を利用することで画像変更が可能になりますので、
マテリアル制御を行うための処理を持つスクリプトも作成した上でプレハブにします。

 最後に、プレハブのゲームオブジェクトを生成する機能を持つスクリプトを作成し、実際にプレハブのゲームオブジェクトが生成されるかデバッグを行います。
ゲームオブジェクトを生成する機能が正常に動作していることを検証しておくことにより、生成機能には問題がないことを実証しておきます。

 例えば、AR 空間において上手くゲームオブジェクトが生成されない時、すでに生成機能には問題がないことが判明していれば、
問題となっているのは生成機能ではなく、平面感知機能などの AR 側の問題の可能性である、という風に、問題点を絞って検証していくことが出来るためです。

 問題点の切り分け手法を効果的に活用するためにも、各機能ごとに事前検証を行っておくことをお勧めします。



 まずここまでをこの手順で行い、次の手順では平面感知機能と
タップ時にプレハブにしたゲームオブジェクトを生成する機能を実装して完成させます。


画像のインポート


 任意の画像ファイルを Unity にインポートしてください。
Unity で扱える画像ファイルの拡張子は JPG や PNG などです。マニュアルを確認しておくとよいでしょう。
 
 インポートする際には、事前に Textures といったフォルダを作成しておいてから、
そのフォルダ内にドラッグアンドドロップして画像ファイルを追加すると管理しやすくなります。


参考サイト
Unity 公式マニュアル
テクスチャ
Unity 公式マニュアル
テクスチャのインポート


3Dオブジェクトの作成と設定


 3Dオブジェクトに画像ファイルを割り当てるには画像を元にしたマテリアルが必要になります。
マテリアルは手動で作成も出来ますが、3Dオブジェクトがあれば自動的に作成してくれる機能があります。

 そこでマテリアルの作成の前に、3Dオブジェクトを作成しておきます。
その方がマテリアル作成が楽になるためです。



 ヒエラルキーの空いている場所で右クリックをしてメニューを開き、3D Object → Quad を選択します。
名前を TextureView に変更します。

 Quad は薄い形状の3Dオブジェクトです。ゲーム画面に映画館のスクリーンのようなものを作ったり、
今回のように画像を片面に貼り付けて展示するようなケースに役立つメッシュ形状のオブジェクトです。

 Quad は表面側にのみマテリアルを貼り付けることが出来ます。


ヒエラルキー画像



インスペクター画像



Scene ビュー画像



Scene ビュー画像



マテリアルの作成


 3Dモデルの場合、インポートした画像をそのままゲームオブジェクトに貼り付けることは出来ません。
マニュアルにもあるように、画像を使ったマテリアルを作成し、シェーダーの設定をすることにより、
ゲームオブジェクトに画像を貼り付けることが出来ます。

 マテリアルの作成方法はいくつかありますが、最も簡単なのはシーン内にある3Dオブジェクトに画像ファイルをドラッグアンドドロップすることです。
この手順を行うと、画像を元にしたマテリアルを自動的に作成してくれます。

 それ以外にはスクリプトを作成するのと同じようにメニューからマテリアルが作成できます。
その場合には MainMaps 内の Albedo に画像ファイルをドラッグアンドドロップしてアサインします。

 いずれの場合にも Shader の設定は Standard になります。
こちらはそのまま利用しますので変更する必要はありません。


マテリアル設定時のゲームオブジェクト




 マテリアルを作成したら、マテリアルを選択します。
まずは名前をわかりやすい名称に変更しておきます。ここでは material_0 としました。
画像が増えるということは同じだけマテリアルも増えるため、連番式の名前にすることで管理しやすくするためです。

 またマテリアル専用のフォルダも用意しておくとよいでしょう。






 マテリアルを選択するとインスペクターがマテリアル用の設定に切り替わりますので、こちらで Rendering Mode を設定します。

 PNG 形式の画像ファイルで画像に透過性がある場合、Fade に設定します。
それ以外は Opaque に設定します。設定に合わせてシーン内あるゲームオブジェクトの見た目も変わります。


Rendering Mode ーOpaqueー



Rendering Mode ーFadeー



参考サイト
Unity 公式マニュアル
マテリアル Rendering Mode


TextureView スクリプトの作成


 作成したゲームオブジェクトにアタッチし、マテリアルの変更を行うためのメソッドを仮で用意しておきます。
マテリアルは MeshRenderer コンポーネント内に含まれている機能の1つです。
そのため、マテリアルを制御する場合には、マテリアルを管理している MeshRenderer コンポーネントの制御が必要になります。

 今回はまだマテリアルの差し替えは行いませんが、TODO の形で次回以降の修正に向けてコメントを残しておきます。

 またメソッド内にはデバッグを活用することにより、メソッドへの実行命令が正常に動作しているかを検証しておきます。


TextureView.cs

<= クリックすると開きます。


 スクリプトを作成したらセーブします。


TextureView ゲームオブジェクトに TextureView スクリプトをアタッチし、プレハブにする


 TextureView ゲームオブジェクトに TextureView スクリプトをドラッグアンドドロップしてアタッチします。

 アタッチの有無をインスペクターにて確認します。


インスペクター画像



 正常にアタッチされていることを確認後、TextureView ゲームオブジェクトをプレハブにします。
Prefabs フォルダを事前に用意しておいて、その中にプレハブ化することで管理しやすくなります。

 プレハブにしたら、ヒエラルキーより TextureView ゲームオブジェクトを削除します。


Prefabs フォルダ



プレハブ編集モード



TextureGenerator スクリプトの作成


 プレハブを生成するためのスクリプトを作成します。
生成後の管理も合わせて行います。

 今回は Start メソッドを利用して、生成する機能を持つメソッドを実行しています。
そのため、ゲーム実行時にプレハブのゲームオブジェクトを生成されるようになるので、生成機能のデバッグを行っています。

 平面感知機能と連動して動くように、プレハブのゲームオブジェクトを生成する機能の他、
すでにプレハブのゲームオブジェクトが生成されている場合には重複生成せずに移動させる機能などをメソッドで用意しています。


TextureGenerator.cs

<= クリックすると開きます。


 スクリプトを作成したらセーブします。


TextureGenerator ゲームオブジェクトを作成し、設定を行う


 ヒエラルキーの空いている場所で右クリックをしてメニューを開き、Create Empty を選択します。
新しいゲームオブジェクトが作成されますので、名前を TextureGenerator に変更します。


ヒエラルキー画像




 その後、先ほど作成した TextureGenerator スクリプトをドラッグアンドドロップしてアタッチします。

 インスペクターを確認してアタッチの有無を見た上で、アサイン情報が表示されていますので
プレハブの TextureView ゲームオブジェクトをドラッグアンドドロップしてアサインします。


インスペクター画像



 以上で設定は完了です。


ゲームを実行して動作を確認する


 まずはエディターにてゲームを実行し、実行時にプレハブのゲームオブジェクトを生成されるか確認します。
LogDebugger によってゲーム画面にログが表示されるかも一緒に確認しておきましょう。


実行動画 エディター
動画ファイルへのリンク


 問題なければ、実機でもテストを行ってください。


次の手順のための準備を行う


 1点、修正を行います。

 TextureGenerator スクリプト、Start メソッド内の処理をコメントアウトします。
この処理によって、ゲーム実行時にプレハブのゲームオブジェクトを生成していましたが、これはあくまでも生成機能が正常に動作しているかを確認するためのデバッグ用の処理であるため、
次回以降は不要となるためです。


TextureGenerator.cs
    void Start() {
    // デバッグ用
        //GenerateTextureImage(0, Vector3.zero);   //  ← コメントアウトします
    }



 以上でこの手順は終了です。

 => 次は 手順5 AR空間に画像付きのオブジェクトを生成する です。

コメントをかく


「http://」を含む投稿は禁止されています。

利用規約をご確認のうえご記入下さい

Menu



技術/知識(実装例)

2Dおはじきゲーム(発展編)

2D強制横スクロールアクション(発展編)

3Dダイビングアクション(発展編)

2Dタップシューティング(拡張編)

レースゲーム(抜粋)

2D放置ゲーム(発展編)

3Dレールガンシューティング(応用編)

3D脱出ゲーム(抜粋)

2Dリアルタイムストラテジー

2Dトップビューアドベンチャー(宴アセット使用)

3Dタップアクション(NavMeshAgent 使用)

2Dトップビューアクション(カエルの為に〜、ボコスカウォーズ風)

VideoPlayer イベント連動の実装例

VideoPlayer リスト内からムービー再生の実装例(発展)

AR 画像付きオブジェクト生成の実装例

AR リスト内から生成の実装例(発展)

private



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

管理人/副管理人のみ編集できます