UnityのLineRendererを使って線を描く お絵かき

私がUnityで作っているひらがな練習アプリの基礎となっているマウスをクリックしながら線を引く方法を紹介します。
UnityのLineRendererという機能を使えば実装できます。

【この記事の応用編】

ちなみにまだ未完成ですが動画のようなアプリで使っています。

この記事の内容を応用すれば上記のようなアプリも作れると思います。

このアプリや記事はこちらの記事を参考にさせて頂き作成しました。

それでは実際にUnityを起動し作業に取り掛かりましょう。
新規2Dプロジェクトを作成します。
今回の画面サイズは960*640です。

Unityスキルアップ、
始めるなら今

パズル、脱出、RPG...目標のゲームを完成させよう!

人気のUnity講座はこちら

Udemy講座

お絵かきの下地を作る

まずはお絵かきをするための紙を用意しましょう。
Imageを用意します。
サイズは画面いっぱいにしましょう。
今回名前はStrokeAreaとしました。
そしてStrokeAreaにアタッチするC#スクリプトを新規作成します。Strokeとします。
以下のようなHierarchyとInspectorになります。
インスペクターとヒエラルキー

描く線の太さと色を設定

では続いて実際に描く線の色と太さを設定出来るようにしましょう。
Strokeの中身を下記のようにします。

修正するとUnityエディタのInspectorからそれぞれ設定出来るようになります。
lineMaterialはSprites-Default、lineColorは黒、lineWidthは0.1としました。
線の基本設定

線を保持しておくリスト作成

続いて実際に描かれる線を保持しておくためのリストを用意します。
Strokeを下記のようにします。

クリックされたときの処理

続いてUpdate関数内にクリックをしたタイミングで呼び出される処理を記述します。
Input.GetMouseButtonDown()関数を使います。
具体的には下記のような内容になります。

コードの説明

一気にコードが増えましたがやってることはシンプルです。

  1. クリックされた
  2. _addLineObject関数でGameObject作る
  3. 作られたオブジェクトにLineRendererコンポーネントを追加
  4. 先に作ったListに生成したオブジェクトのLineRdenererを追加
  5. オブジェクトを紙(StrokeArea)の子要素に設定
  6. 線自体の初期化(_initRenderers関数)

私は_initRenderers関数に分けて材質、太さ、色を設定していますがまとめて_addLineObject関数で行っても問題ないと思います。
これでクリックされた瞬間に線のオブジェクトが生成されました。

ドラッグされている時に線を描く

あとはマウスがクリックされ続けている時(ドラッグ中)に線を描ければ完成です。
Update関数内で処理を追加します。
Input.GetMouseButton()関数を使いましょう。
先程のInput.GetMouseButtonDown()関数と名前は似ていますが、GetMouseButtonDown()は押された瞬間に、GetMouseButton()は押されているかどうかを判定してくれます。
引数の0は左クリックです。
下にUnityの公式リンクを貼っておきます。

Strokeのソースコードは下記のように修正します。

Update内でクリックされている最中は_addPositionDataToLineRendererList()という関数が呼ばれるようになりました。
_addPositionDataToLineRendererList()で行っている処理はコメントの通りですが、それぞれDebug.Logで実際の値を確認するとわかりやすいかなと思います。
またLineRendererの変数や関数についてはUnity公式のリンクを貼っておきます。

それではちゃんと動くか確認してみましょう。

無事に線が描かれています。
色や太さはStrokeAreaのインスペクターで一筆毎に変えています。

Hierarchyで確認するとStrokeAreaの配下に一筆毎Strokeオブジェクトが生成されています。
実行時のヒエラルキー
StrokeのInspectorはこのようになっています。
Positionsに座標が追加され線が引かれています。
ストロークのインスペクター

関連記事

最後までご覧頂いてありがとうございました。

セール中!
ノンフィールドRPG

基礎からリリースまで!

オリジナルRPGを作ってストアに公開しよう!