たるこすの日記

たるこすの日記

リアルからバーチャルへ、バーチャルからリアルへ

Unity お絵かきアプリで魔法陣を書く

こんにちは、たるこすです。
前回のブログで作成した2Dお絵かきアプリで、さらに魔法陣を書けるようにします。
前回: Unity で2Dお絵かきアプリを作る - たるこすの日記

以下のブログで紹介されているように、書いた線を万華鏡のように一定間隔に回転させて配置することで魔法陣が簡単に書けるようになります。
魔法陣を描いて遊ぶアプリ作りました! Mahougen #Pistatium

Unity での実装

前回作成したお絵かきアプリでは、Plane に設定した Texture をマウスやタップに応じて動的に変化させていました。 この元々の Plane を OriginalPlane と呼ぶことにします。

絵を複製するための Plane(CopyPlane)をいくつか用意し、それらに OriginalPlane と同じテクスチャを設定すれば、 書いた絵は CopyPlane にも反映されるようになります。 あとは、CopyPlane を OriginalPlane と同じ位置で一定間隔で回転した位置に配置すれば良いです。

また、Plane の scale.x の値をマイナスにすれば絵を反転させることができます。

今回の方法では、Texture に書き込まれているのは自分で書いた線のみです。
画面に表示されている、OriginalPlane と CopyPlane の絵を合わせたテクスチャを取得するには、 Camera と RenderTexture を使用します。

  • Assets 内で、 Create > RenderTexture を作成
  • Hierarchy で、Create > Camera を作成

Inspector で Camera の設定を変更します。

  • Background を透明に
  • Projection を Orthographic に
  • Transform, Size などで映る範囲を調整
  • Target Texture にさきほど作成した RenderTexture を設定

f:id:tarukosu:20170219194608p:plain

出来上がったもの

完成したアプリは以下のように動作します。

実は、お絵かきアプリを作っている目的は書いた絵を HoloLens で表示させることでした。
今回の改良で魔法陣が書けるようになったので、さらにモンスターを召喚できるようにしました。

Android アプリと HoloLensアプリとの連携部分については別の記事で紹介したいと思います。