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オンライン学習
一人でゲーム開発が不安な方はオンラインスクールで学習すると効率が良いと思います。
以下に当てはまる人は検討してみると良いかもしれません。
「入門書をの次に何をしたらいいの?」
「疑問や問題を一人で解決出来ない。。」
「ゲームを完成させる自信がない。。」
「気軽に質問できる環境が欲しい。。」
自分で学習することに限界を感じたら
オンライン学習しましょう!
Udemy
テックアカデミー
テックスタジアム
ゲーム開発に特化したオンラインスクールですので、Unityはもとより、他のゲームエンジンやゲーム業界に興味がある方にはオススメです。
デジハリONLINE
関連記事
Unity2D ドット絵の簡単なアニメーションを作ってみる
Unity2Dで簡単なドット絵のアニメーションを作成します。スプライトを切り替えることでプレイヤーが歩いているように見えるアニメーションを作成してみます。
この方法を応用することでキャラクターに色んな動きや表示を付け加えることができると思います。
ChatGPTの指示通りUnityゲームを作ってみる
最近ではChatGPTを始め様々な大規模言語モデルの対話型AIが公開されていますね。
そこで今回はChatGPTの指示に従ってゲームを作ってみる実験をしてみます。
Unityで9-sliceテクニックを使った効果的なUI作成方法
UI作成時に非常に便利なテクニック9-sliceをやってみます。
とても簡単に使える技です。
Transform.RotateとQuaternion.Eulerでオブジェクト回転
Unity2Dで簡単なゲームオブジェクトの回転を実装してみたいとおもいます。
Transform.RotateとQuaternion.Eulerの二種類の回転方法を実験します。
ルーレットとか、方位をコンパス。またはプレイヤーがやられた時に回転させるなどに使えそうです。
Unity2Dで背景の無限スクロールを実装する
色んなゲームで背景がスクロールする仕組みは使われています。
今回はタイル状の背景を並べて上下左右に無限にスクロールする仕組みを作ってみたいと思います。
無料でレトロゲームっぽい効果音を作ってくれるBfxr
無料でレトロゲームっぽい効果音を作成してくれるBfxrというツールを紹介したいと思います。
DAWの知識がない人でも簡単に効果音を作れるので便利なツールだと思います。
最後までご覧頂いてありがとうございました。