無料ドローイングアセットでお絵かき機能を作る -Unity アセット真夏のアドベントカレンダー 2020 Summer
こちらはUnity アセット真夏のアドベントカレンダー 2020 Summer! 17日目の記事になります。
unityroomやAppStoreにて色々公開しているsmm(すみ)と申します。
よろしくお願いします!
- Sprite/2DTextureに絵を描けるようになるアセット(FREE)
- 用意されているサンプルシーンを開いて試してみる
- お絵かきキャンバスのコンポーネントを見てみる
- ペンの色を変えてみる
- ペンをもっとカスタムする
- 描いた絵をEasySaveで保存する
- おまけ クレヨン(パレット)の画像を自動で設定する
- おまけ2 iPadにビルドしてみる
- 参考
Sprite/2DTextureに絵を描けるようになるアセット(FREE)
Sprite/2DTextureに絵を描けるようになるアセット(FREE)です。
今回はお絵かきした後の
テクスチャを保存するためにEasySave3 (49.99$)も使用しました。
用意されているサンプルシーンを開いて試してみる
用意されているサンプルシーンを開くと、早速お絵かき機能が試せるようになっています。
サンプルシーンでは右下のペンを選択で色を変更、
Transparencyのスライダーで透明度
Pen Widthのスライダーでペンの太さを変更できます。
お絵かきキャンバスのコンポーネントを見てみる
お絵かきキャンバスにあたるReadWriteEnabledImageToDrawOnオブジェクトには
Drawable.csとコライダーのコンポーネントがついています。
マニュアルにはユニークなレイヤーを作って、Drawing_Layersに設定するとあるので
設定(今回はDrawingというLayerを作成)します。
また、描画されるPNGイメージ(ReadWriteEnabledImageToDrawOnオブジェクトのSprite Rendererに指定してあるSprite)には、
Read/Write Enabledにチェックが入っている必要があります。
新たにシーンを作る場合は注意してください。
(サンプルシーンの画像には既にチェックが入っている状態です)
また、FormatがRGBA32bitである必要があります。
ペンの色を変えてみる
サンプルシーンからの一つ目の変更として、ペンの色を変えてみます。
DrawingSettings.csに新しい色のメソッドを付け足すか、既存のメソッドを書き換えるかなどして好きな色を作ることにします。
今回はブルーナカラー(ミッフィーなどで知られるオランダの作家ディック・ブルーナが使う原則6色)の内、紺色とオレンジと黄色の3色を使用することにしました。
iPadで三色のパレット画像を作り、デフォルトの赤黄緑青ペンの画像と差し替えます。
次に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()に設定します。
これで青いパレットをクリックすることでブルーナブルーを選択し、線を描けるようになりました。
同じ手順でオレンジとイエローのメソッドも追加し、インスペクタから設定します。
オリジナルの色でお絵かきができるようになりました。
ペンをもっとカスタムする
ここからさらに、マジックのような太いペンにしたいと思います。
WidthSliderオブジェクトのインスペクタからMin ValueとMax Valueを変更します。
デフォルトで1-10だったところを、5-20に設定します。
これは描画する点のRadiusを変更しています。
これでスライダーで選択できる太さを調整することができました。
最小値を1から5に、最大値を10増やしたので全体的に太い線を引くことができるようになりました。
※今回ペンの色や太さを変更しましたが、
ペンの初期値(赤色でサイズは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()メソッドをインスペクタから割り当てます。
これで描いたものを保存、読み込みすることができるようになりました。
EasySaveについては他の記事も書いていますので興味のある方は是非。
おまけ クレヨン(パレット)の画像を自動で設定する
色の分だけクレヨンの画像を用意するのは大変ですし、
色を調整するたびに画像の色も変更しなければいけなくなります。
なので白いImageを用意してImageコンポーネントのColorをスクリプトから指定すると
自動で画像が作成されて便利です。
白いクレヨンや雫の画像を用意したので自由にお使いください。
Sprite Editorで分割した図
(一番左下はクレヨンに重ねて使う紙の部分です)
例
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;
}
クレヨンの紙の部分にはMobile/Particles/AdditiveのShaderを設定すると透き通って綺麗に見えます。
おまけ2 iPadにビルドしてみる
UnityのBuild SettingsからiOSに切り替えて、Xcodeを経由してビルドしました。
指でなぞると線が引けるアプリが完成しました。
最後に
ここまで読んでいただきありがとうございました!
わかりづらいところやご指摘があれば、お手柔らかに教えていただければ幸いです。
現在unity1weekお題「ふやす」に参加しています。
3分で終わってランキングもありますので、是非遊んで見てください。
http://クーニャンのおうち - smm https://unityroom.com/games/walledcity
参考
FreeDrawの公式チュートリアルYoutube