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

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

【この記事の応用編】

UnityのLineRendererで描いた線にコライダーをつける

カジュアルゲームなどの開発で使えそうなLineRendererにコライダーをつける方法です。

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

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

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

まともな開発者になりたい

【Unity】LineRendererを使ってお絵かきソフトにある機能を実装する

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

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

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

人気のUnity講座はこちら

お絵かきの下地を作る

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

描く線の太さと色を設定

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

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

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

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

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

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

コードの説明

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

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

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

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

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

Unity公式

Input.GetMouseButton

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

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

Unity公式

LineRenderer

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