UnityのLineRendererを使って線を描く お絵かき
私がUnityで作っているひらがな練習アプリの基礎となっているマウスをクリックしながら線を引く方法を紹介します。
UnityのLineRendererという機能を使えば実装できます。
【この記事の応用編】
ちなみにまだ未完成ですが動画のようなアプリで使っています。
この記事の内容を応用すれば上記のようなアプリも作れると思います。
このアプリや記事はこちらの記事を参考にさせて頂き作成しました。
作業する前に流れを考えてみます。
それでは実際にUnityを起動し作業に取り掛かりましょう。
新規2Dプロジェクトを作成します。
今回の画面サイズは960*640です。
お絵かきの下地を作る
まずはお絵かきをするための紙を用意しましょう。
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の公式リンクを貼っておきます。
Strokeのソースコードは下記のように修正します。
Update内でクリックされている最中は_addPositionDataToLineRendererList()という関数が呼ばれるようになりました。
_addPositionDataToLineRendererList()で行っている処理はコメントの通りですが、それぞれDebug.Logで実際の値を確認するとわかりやすいかなと思います。
またLineRendererの変数や関数についてはUnity公式のリンクを貼っておきます。
それではちゃんと動くか確認してみましょう。
無事に線が描かれています。
色や太さはStrokeAreaのインスペクターで一筆毎に変えています。
Hierarchyで確認するとStrokeAreaの配下に一筆毎Strokeオブジェクトが生成されています。
StrokeのInspectorはこのようになっています。
Positionsに座標が追加され線が引かれています。
Unityの学習方法
Unity初心者の方にオススメの学習方法をいくつか紹介します。
Unity本【kindle unlimited】
私も利用しているAmazonが提供する電子書籍読み放題のサービスです。
月額980円で約200万冊以上が読み放題でとてもお得です。
また30日無料体験もできるのが魅力です。当然Unityに関する書籍もたくさん揃っています。
またC#関連の書籍や、プログラミングのものも多数あります。
プログラミング関連の書籍は値段が結構しますので、それらが無料で読めるのはかなりお得なサービスです。
30日無料体験もありますので気に入らなければその期間に解約すれば料金は発生しません。
通常のUnity本
kindle unlimitedは全部のUnity関連書籍が読めるわけではありません。
通常に購入しなければ読めない本もありますので、その中から私が参考になった書籍を紹介します。
Udemy
Udemyの動画講座にもUnity関連のオススメの動画がたくさんあります。
その中でも私が特に気に入っている動画を紹介します。
どの動画も初心者でも完成することが出来るように丁寧に解説しています。
オンラインで学習
質問が出来るおすすめのUnity学習方法ページです。
・Unityでゲーム作りたいけど何から初めたら良いかわからない。
・独学でゲームを完成させられるか不安。
・ゲーム開発でわからないことを一人で解消できない。
・入門書を一通りやってみたが次に何していいかわからない。
こんな人におすすめしたい内容になっています。
最後までご覧頂いてありがとうございました。
感想・コメントをどうぞ
- タグ：
- LineRenderer
- お絵かき