個人iOSDeveloper,Unityユーザーです。
作ったもの、試したことなど。

無料ドローイングアセットでお絵かき機能を作る -Unity アセット真夏のアドベントカレンダー 2020 Summer

こちらはUnity アセット真夏のアドベントカレンダー 2020 Summer! 17日目の記事になります。

unityroomやAppStoreにて色々公開しているsmm(すみ)と申します。

よろしくお願いします!

 

Sprite/2DTextureに絵を描けるようになるアセット(FREE)

f:id:osushioisi:20200716125627p:plain

メインとなるのはこちらの

Free Draw - Simple Drawing on Sprites/2D Texturesです。

Sprite/2DTextureに絵を描けるようになるアセット(FREE)です。

 

今回はお絵かきした後の

テクスチャを保存するためにEasySave3 (49.99$)も使用しました。

 

用意されているサンプルシーンを開いて試してみる 

f:id:osushioisi:20200716111624p:plain

用意されているサンプルシーンを開くと、早速お絵かき機能が試せるようになっています。

 

サンプルシーンでは右下のペンを選択で色を変更、

Transparencyのスライダーで透明度

Pen Widthのスライダーでペンの太さを変更できます。

f:id:osushioisi:20200716112856p:plain

 

お絵かきキャンバスのコンポーネントを見てみる

お絵かきキャンバスにあたるReadWriteEnabledImageToDrawOnオブジェクトには

Drawable.csとコライダーのコンポーネントがついています。

 

マニュアルにはユニークなレイヤーを作って、Drawing_Layersに設定するとあるので

設定(今回はDrawingというLayerを作成)します。

f:id:osushioisi:20200716114102p:plain

また、描画されるPNGイメージ(ReadWriteEnabledImageToDrawOnオブジェクトのSprite Rendererに指定してあるSprite)には、

Read/Write Enabledにチェックが入っている必要があります

新たにシーンを作る場合は注意してください。

(サンプルシーンの画像には既にチェックが入っている状態です) 

 また、FormatがRGBA32bitである必要があります。

f:id:osushioisi:20200716125859p:plain

 

ペンの色を変えてみる

サンプルシーンからの一つ目の変更として、ペンの色を変えてみます。

DrawingSettings.csに新しい色のメソッドを付け足すか、既存のメソッドを書き換えるかなどして好きな色を作ることにします。

 

今回はブルーナカラー(ミッフィーなどで知られるオランダの作家ディック・ブルーナが使う原則6色)の内、紺色とオレンジと黄色の3色を使用することにしました。

iPadで三色のパレット画像を作り、デフォルトの赤黄緑青ペンの画像と差し替えます。

f:id:osushioisi:20200716121745p:plain

次にDrawingSettings.csに

ペンの色をブルーナブルーにするメソッドSetMarkerBBlue()を追加します。

DrawingSettings.cs

public void SetMarkerBBlue()
        {
            Debug.Log("ブルーナブルー");
            Color c = new Color32(29,80,142,255);
            c.a = Transparency;
            SetMarkerColour(c);
            Drawable.drawable.SetPenBrush();
        }

SetMarkerBBlue()メソッドを青のパレットオブジェクトにあるButtonコンポーネントのOnClick()に設定します。

f:id:osushioisi:20200722232144p:plain

これで青いパレットをクリックすることでブルーナブルーを選択し、線を描けるようになりました。

同じ手順でオレンジとイエローのメソッドも追加し、インスペクタから設定します。

 

オリジナルの色でお絵かきができるようになりました。

f:id:osushioisi:20200716122219p:plain

ペンをもっとカスタムする

ここからさらに、マジックのような太いペンにしたいと思います。

WidthSliderオブジェクトのインスペクタからMin ValueとMax Valueを変更します。

 

デフォルトで1-10だったところを、5-20に設定します。

これは描画する点のRadiusを変更しています。

これでスライダーで選択できる太さを調整することができました。

f:id:osushioisi:20200716122632p:plain

 

最小値を1から5に、最大値を10増やしたので全体的に太い線を引くことができるようになりました。

f:id:osushioisi:20200716122921p:plain

 

※今回ペンの色や太さを変更しましたが、

ペンの初期値(赤色でサイズは3)はDrawable.csのAwake()で決定されています。

選択した色をセーブしていない、ペンの色を全部変えた(赤色を使わないので初期値で赤が出ると違和感がある)初期値は黒がいい、などの場合はDrawable.csのAwake()を書き換えてください。

 

描いた絵をEasySaveで保存する

EasySave3というアセットの機能を使って描いた絵

(ReadWriteEnabledImageのテクスチャ)を保存します。

保存機能を使わない場合、ここの項目は飛ばしてください。

 

 

EasySave3公式マニュアル

Supported Types - Easy Save for Unity

 

Project>Create>C# Scriptから新しいC# Scriptを作成してSaveImageクラスを作ります。

任意のオブジェクトにアタッチして、PaperのところにはサンプルシーンでいうところのReadWriteEnabledImageを紐づけます。

using UnityEngine;

public class SaveImage : MonoBehaviour
{
//ReadWriteEnabledImageToDrawOnをインスペクタから設定する [SerializeField] Texture2D Paper;
string SaveData = "SaveData";
  //画像をセーブする public void Saving_Image() { ES3.Save<Texture2D>(SaveData,Paper); }
  //画像をロードする public void Loading_Image() { if (ES3.KeyExists(SaveData)) { Paper = ES3.Load<Texture2D>(SaveData); } } }

 

次にHierarchy>Create>UI>ButtonからButtonを2つ作り、

それぞれにSaving_Image()メソッドとLoading_Image()メソッドをインスペクタから割り当てます。

 

f:id:osushioisi:20200716124259p:plain

これで描いたものを保存、読み込みすることができるようになりました。

 

 EasySaveについては他の記事も書いていますので興味のある方は是非。

osushioisi.hatenablog.com

おまけ クレヨン(パレット)の画像を自動で設定する

色の分だけクレヨンの画像を用意するのは大変ですし、

色を調整するたびに画像の色も変更しなければいけなくなります。

なので白いImageを用意してImageコンポーネントのColorをスクリプトから指定すると

自動で画像が作成されて便利です。

 

白いクレヨンや雫の画像を用意したので自由にお使いください。

 

f:id:osushioisi:20200722230700p:plain

Sprite Editorで分割した図

(一番左下はクレヨンに重ねて使う紙の部分です)

 f:id:osushioisi:20200722162454p:plain

DrawingSettings.cs

Color Orange = new Color32(245,85,17,255);

[SerializeField] Image Pen;
[SerializeField] Image Line;

private void Start()
{
Pen.color = Orange;
Line.color = Orange;
}

 

f:id:osushioisi:20200722230918p:plain
クレヨンの紙の部分にはMobile/Particles/AdditiveのShaderを設定すると透き通って綺麗に見えます。

 

おまけ2 iPadにビルドしてみる

f:id:osushioisi:20200717102646p:plain

UnityのBuild SettingsからiOSに切り替えて、Xcodeを経由してビルドしました。


指でなぞると線が引けるアプリが完成しました。

 

最後に

ここまで読んでいただきありがとうございました!

わかりづらいところやご指摘があれば、お手柔らかに教えていただければ幸いです。

 

現在unity1weekお題「ふやす」に参加しています。

3分で終わってランキングもありますので、是非遊んで見てください。

http://クーニャンのおうち - smm https://unityroom.com/games/walledcity

参考

FreeDrawの公式チュートリアルYoutube

www.youtube.com