Unityでお絵描きしてみる
Tweet
みなさんこんにちはー
GMOメディアサービス開発部＆Unity部の井田です。
今回のUnity部ブログは今までのチュートリアル的な内容とは一転したコラム的な内容をお送りします。
現在Unity部に所属している私ですが、学生時代にはJavaApplet、Flashをやったり、その後HTML5をかじってみたりとフロント系の技術をいくつか経験してきました。そして、どの技術でもまずはとりあえずやってきたのが「お絵描きツール」です。
基本ですよね。
なのでUnityでもお絵描きしてみます。誰得とか言われてもやってみます。
まず描画対象ですが、マウスの位置と描画位置を一致させるためにGUITextuteを使います。
空のGameObejctを作成し、メニューのComponent > Rendering > GUITextureから設置できます。
そして、以下のスクリプトを作成、設置します。
※カメラはProjectionをOrthographicに、対象のGameObjectのTransformをすべて0にしてください
この状態になればOKです。実行してみると白いエリアが出現し、マウスで描画が可能となります。
線の途切れなく描画ができているかと思います。
解説
メソッドごとに処理を解説します。
Startはテクスチャの初期化処理を実行しています。サイズを指定してインスタンス化し、GUITextureに設定しています。もし、ビルド後にテクスチャが表示されない場合は、SetPixelsを使ってテクスチャ全体の色を初期化しましょう。
Updateでは、マウス座標の取得、その位置への線の描画呼び出し、現在の位置を前の座標として格納、テクスチャ描画の適用（texture.Apply）を実行しています。この、texture.Applyが重要で、これを実行しないといくらマウスを動かしても描画は実行されません。
onMouseUp/Downは、クリックによる描画開始・終了をハンドリングし変数として設定しています。
最後に、このプログラムの肝であるlineToです。まず、X軸方向の変化とY軸方向の変化を比較します。そしてX/Yそれぞれどちらを１ずつ変化させて実行するかを分岐させます。こうせずにXを元に描画点を移動させてしまうと、Y方向の変化量が１を超え歯抜けで描画してしまう事態が発生します。変化軸を決定したらあとはひたすらゴール座標までループし、SetPixelsで描画していきます。第３、第４引数の値をかえれば線の太さをかえることが可能ですが、その際は第５引数にそのピクセル数に応じた長さのColorクラスの配列を渡しましょう。
使い道は？
テクスチャへの描画ですのでこんなかんじでほかのGameObjectにテクスチャとして貼ることも可能です。
※絵がへたくそなのは目をつぶってください
また、以下のスクリプトを活用するとローカルにファイルとして保存することも可能です。
public IEnumerator saveImage()
{
showGUI = false; // disable main GUI
yield return new WaitForEndOfFrame();
string s_name = filename+"_paint_" + System.DateTime.Now.ToString("yyyyMMddHHmmss")+".png";
byte[] bytes = texture.EncodeToPNG();
File.WriteAllBytes(s_name,bytes);
showGUI=true;
}
ということは、どうぶつの森のようにプレイヤのオリジナルのコンテンツを作成したり、さらに複雑な処理を加えてラクガキ王国のようなゲームへと発展させることも可能です！
夢がひろがりんぐです！
このスクリプトを元にすれば、さらに発展させて図形の描画や曲線の描画も可能となります。ぜひご活用ください。
それではまた～ (・ω・)ノシ
