みかんばこ

プログラミングとかその他有益だと思ったことをメモ.主にUnity

Unityでドット絵を描く(3)

今回はドット絵を塗るキャンパスの拡大-縮小とキャンパスの移動を実装

まずは、キャンパスの移動と拡大縮小に関するUIを作ります.
f:id:mikanbox55:20170819022818p:plain

8方向に移動するため、キャンパス周りに8つのボタンを設置。
そして、その下に拡大縮小を制御するSliderを設置します。
矢印アイコンはAspect Ratio filterで縦横比を1:1に固定しています。
f:id:mikanbox55:20170819023033p:plain
ワイヤフレームで表示するとこんな感じです。
f:id:mikanbox55:20170819022917p:plain

ボタン押しっぱなしで操作させたいので、各ボタンにEvent Triggerを加えて、Pointer UpとPointer Downを加え関数を登録します。

拡大縮小に関する部分は以下の通り。前々回作成したクラスに以下の部分を付け加えます。

    public void Scalingcanvas(float value){
        Vector3 baseSize = new Vector3(0.4f,0.4f,0.4f *   (float)height / (float)width);
        GetComponent<Transform>().localScale = (value+0.1f) * 4 * baseSize;
        Nowscale = (value+0.1f)*4;
    }

この関数をSliderのOnValueChangeに登録することでスライダーを操作したときに呼び出され、valueにはSliderオブジェクトの値がはいります。
関数内では最初にベースとなる基本サイズを設定し、描画するキャンバスのサイズを受け取ったvalueと基本サイズの積によって計算し、設定します。



次に、移動は以下の通り。

    void Update () 
    {
.....
        if (buttonOn == true){
            Movecanvas(movenum);
        }
    }

    public void startMove(int num){
        movenum = num;
        buttonOn = true;
    }

    public void endMove(int num){
        buttonOn = false;
    }

    public void Movecanvas(int num){
        int ysign = 1 - 2*(num/8);
        int xsign = 1 - 2*((num/4)%2 );
        int x = num%2;
        int y =(num/2)%2;
        Nowposition = GetComponent<Transform>().localPosition;
        Nowposition = Nowposition + new Vector3((float)x * xsign,(float)y * ysign,0) * Nowscale/4;
        GetComponent<Transform>().localPosition = Nowposition;

        if (num==-1){
            Nowposition = new Vector3(0,0.2f,0);
            GetComponent<Transform>().localPosition = Nowposition;
        }
    }

StartMoveと endMoveをそれぞれボタンのEventtriggerのPointer Up とPointer Downに登録します。実際に移動を実現しているのはMovecanvas関数で、マウスが押されている間、実行されます。
Movecanvasは最初int型2つを引数とする関数として作成しようと思ったのですが、Unityのインスペクタは引数1つまでしか対応していないため、引数の値によって場合分けするような処理になってしまいました。まあここでしか使わないのでわざわざインスペクタの拡張するのもめんどくさいし。
各ボタンを押すことで、任意の方向に移動可能、移動量は現在の拡大倍率によって左右されます。

これでキャンバスの塗り、移動、拡大縮小などの機能は一通りできたので、次から塗り、着色の部分を実装していきます。
次はおそらくカラーピックの実装になると思います。