前回までの状況はこちら。

最新ソースはこちら。

https://github.com/takishita2nd/Picross

ダイアログ処理を大幅に修正しました。

具体的には、ボタン押下処理をラムダ式で与える、という形にしました。

    class Button : ObjectBase
    {
        private Action _action = null;

        public void SetAction(Action action)
        {
            _action = action;
        }

        public virtual void OnClick()
        {
            if(_action != null)
            {
                _action.Invoke();
            }
        }

        sizeButton.SetAction(() => {
            dialog.Show();
        });

ダイアログも同じように、

    class Dialog
    {
        private Action _action = null;

        public Dialog()
        {
            _isShow = false;
            _button = new Button(436, 450, "確定");
            _button.SetFontOffset(46, 4);
            _button.SetAction(() =>
            {
                if(_action != null)
                {
                    _action.Invoke();
                }
            });

            _texture = new asd.TextureObject2D();
            _texture.Position = new asd.Vector2DF(_x, _y);
        }

        public void SetAction(Action action)
        {
            _action = action;
        }

        public void OnClick(asd.Vector2DF pos)
        {
            if (_button.isClick(pos))
            {
                _button.OnClick();
            }
        }

            Dialog dialog = new Dialog();
            dialog.SetEngine();
            dialog.SetAction(() =>
            {
                dialog.Hide();
            });

特にUI周りは、オブジェクトが持つデータの引き渡しをどうするか、で頭を悩ませてしまいます。

こういうときは、慣れないと見た目複雑に見えてしまいますが、慣れればラムダ式にしてしまった方が、返ってコードがスッキリするんです。

実際、こうすることで、クラスの数を削減できました。

ボタン押下時の処理もラムダ式にすることで、実際の処理は作成元で定義すれば良いので、Buttonクラス一個で済んでしまいます。

UI周り自作するって予想以上に難しいね。

この調子でどんどん作ってきましょう。

前回までの状況はこちら。

最新ソースはこちら。

https://github.com/takishita2nd/Picross

ダイアログを表示するところまで行きたいのですが、

まず、ダイアログを表示するボタンを作成しなくちゃいけないので、

    class Button : ObjectBase
    {
        private string _text;
        private const int fontOffsetX = 9;
        private const int fontOffsetY = 4;
        protected bool enable = true;

        public Button(int x, int y, string text)
        {
            width = 256;
            height = 64;
            _x = x;
            _y = y;
            _text = text;

            _backTexture = new asd.TextureObject2D();
            _backTexture.Position = new asd.Vector2DF(_x, _y);

            _valueText = new asd.TextObject2D();
            _valueText.Text = _text;
            _valueText.Font = Resource.getFont();
            _valueText.Position = new asd.Vector2DF(_x + fontOffsetX, _y + fontOffsetY);
        }

        public void updateTexture(asd.Vector2DF pos)
        {
            if (pos.X > _x && pos.X < _x + width
                && pos.Y > _y && pos.Y < _y + height)
            {
                _backTexture.Texture = Resource.getButtonTexture();
            }
            else
            {
                _backTexture.Texture = null;
            }
        }

        public void setEnable(bool enable)
        {
            this.enable = enable;
        }

        public virtual void onClick()
        {
            throw new NotImplementedException();
        }
    }

Buttonクラスを作成。ほぼほぼ数独解析ツールのコードをコピーしました。

座標とかサイズは微調整していますが。

これを継承してサイズ変更ボタンを作成。

class SizeButton : Button
{
    public SizeButton() : base(10, 10, "サイズ変更")
    {

    }

    public override void onClick()
    {
        Dialog dialog = Controll.GetDialog();
        dialog.Show();
    }
}

class Controll
{
    private static Dialog _dialog = null;

    public static Dialog GetDialog()
    {
        if(_dialog == null)
        {
            _dialog = new Dialog();
            _dialog.SetEngine();
        }
        return _dialog;
    }
}

各種コントロールもシングルトン形式にすれば、アクセスが簡単になるかと思って。

class Dialog
{
    private asd.TextureObject2D _texture;

    public Dialog()
    {
        _texture = new asd.TextureObject2D();
        _texture.Position = new asd.Vector2DF(300, 300);
    }

    public void SetEngine()
    {
        asd.Engine.AddObject2D(_texture);
    }

    public void Show()
    {
        _texture.Texture = Resource.getDialogTexture();
    }

    public void Hide()
    {
        _texture.Texture = null;
    }

class PicrossUI
{
    public void Run()
    {
        asd.Engine.Initialize("ピクロス解析ツール", 1000, 800, new asd.EngineOption());

        List<Button> buttons = new List<Button>();
        var sizeButton = new SizeButton();
        asd.Engine.AddObject2D(sizeButton.getBackTexture());
        asd.Engine.AddObject2D(sizeButton.getTextObject());
        buttons.Add(sizeButton);

        while (asd.Engine.DoEvents())
        {
            asd.Vector2DF pos = asd.Engine.Mouse.Position;
            foreach (Button button in buttons)
            {
                button.updateTexture(pos);
            }

            if (asd.Engine.Mouse.LeftButton.ButtonState == asd.ButtonState.Push)
            {
                foreach (Button button in buttons)
                {
                    if (button.isClick(pos))
                    {
                        button.onClick();
                    }
                }
            }
            asd.Engine.Update();
        }
        asd.Engine.Terminate();
    }
}

ダイアログ表示とか、ボタン押下時の処理とか、本来ウインドウシステムがやっていることを、全て自前でやらなくちゃ行けないので、ちょっと面倒な事になっています。

頭がごっちゃになりそう。

デリゲートとか上手に使うと上手くいきそうな気もするんですが。

もうちょっと考えてみます。

前回までの状況はこちら。

最新ソースはこちら。

https://github.com/takishita2nd/Picross

今回は、前回のソースコードを元に、クラス構成を変えて作り直していきます。

まずはリソースを管理するクラス。

class Resource
{
    private static asd.Texture2D _picrossTexture = null;
    public static asd.Texture2D GetPicrossTexture()
    {
        if (_picrossTexture == null)
        {
            _picrossTexture = asd.Engine.Graphics.CreateTexture2D("square.png");
        }
        return _picrossTexture;
    }
}

数独の時と同じです。

画像などの外部リソースは、読み込んだ一個のオブジェクトをみんなで使い回すような仕組みにしています。

こうすることで、外部リソース読み込み速度が向上し、使用メモリも少なくなります。

シングルトンに近いイメージですね。

絵を構成するオブジェクトのベース部分を作成します。

class ObjectBase
{
    protected int _x;
    protected int _y;
    protected asd.TextureObject2D _backTexture;
    protected asd.TextObject2D _valueText;
    protected int width;
    protected int height;

    public asd.TextureObject2D getBackTexture()
    {
        return _backTexture;
    }

    public asd.TextObject2D getTextObject()
    {
        return _valueText;
    }

    public bool isClick(asd.Vector2DF pos)
    {
        if (pos.X > _x && pos.X < _x + width
            && pos.Y > _y && pos.Y < _y + height)
        {
            return true;
        }
        else
        {
            return false;
        }
    }

これは、数独のObjectBaseクラスと全く同じです。

これをベースにして、絵を書く部分と、数字を入力する部分とで、クラスを派生させて行きます。

絵を書く部分は以下の様に派生させました。

class DrawSquare : ObjectBase
{
    protected int _row;
    protected int _col;
    protected const int setPositionX = 200;
    protected const int setPositionY = 200;

    public DrawSquare(int row, int col)
    {
        width = 32;
        height = 32;
        _row = row;
        _col = col;
        _x = col * width + setPositionX;
        _y = row * height + setPositionY;

        _backTexture = new asd.TextureObject2D();
        _backTexture.Texture = Resource.GetPicrossTexture();
        _backTexture.Position = new asd.Vector2DF(_x, _y);
    }
}

これを使用して実装します。

class PicrossUI
{
    private List<List<DrawSquare>> drawSquares = new List<List<DrawSquare>>();

    public PicrossUI()
    {

    }

    public void Run()
    {
        asd.Engine.Initialize("ピクロス解析ツール", 1000, 800, new asd.EngineOption());

        // 下地
        var background = new asd.GeometryObject2D();
        asd.Engine.AddObject2D(background);
        var bgRect = new asd.RectangleShape();
        bgRect.DrawingArea = new asd.RectF(0, 0, 1000, 800);
        background.Shape = bgRect;

        for(int row = 0; row <10; row++)
        {
            List<DrawSquare> rowList = new List<DrawSquare>();
            for(int col = 0; col <10; col++)
            {
                var square = new DrawSquare(row, col);
                asd.Engine.AddObject2D(square.getBackTexture());
                rowList.Add(square);
            }
            drawSquares.Add(rowList);
        }

        while (asd.Engine.DoEvents())
        {
            asd.Engine.Update();
        }
        asd.Engine.Terminate();
    }
}

今回色を書く部分のマスの数は可変になるので、二次元配列ではなく、Listを使います。

実行結果はこんな感じになりました。

当然、見た目は何も弄っていないので、前回と同じですね。

次回はサイズを変更するダイアログを作成していきます。

最新ソースはこちら。

https://github.com/takishita2nd/Picross

とりあえず画面を作ってみます。

クラス構成とか考えずに、

この画像を作成し、これを10×10に並べてみました。

    class Program
    {
        [STAThread]
        static void Main(string[] args)
        {
            PicrossUI picross = new PicrossUI();
            picross.Run();
        }
    }

    class PicrossUI
    {
        private const int setPositionX = 200;
        private const int setPositionY = 200;

        public PicrossUI()
        {

        }

        public void Run()
        {
            asd.Engine.Initialize("ピクロス解析ツール", 1000, 800, new asd.EngineOption());

            // 下地
            var background = new asd.GeometryObject2D();
            asd.Engine.AddObject2D(background);
            var bgRect = new asd.RectangleShape();
            bgRect.DrawingArea = new asd.RectF(0, 0, 1000, 800);
            background.Shape = bgRect;

            for(int row = 0; row <10; row++)
            {
                for(int col = 0; col <10; col++)
                {
                    var square = new asd.TextureObject2D();
                    square.Texture = asd.Engine.Graphics.CreateTexture2D("square.png");
                    square.Position = new asd.Vector2DF(row * 32 + setPositionX, col * 32 + setPositionY);
                    asd.Engine.AddObject2D(square);
                }
            }

            while (asd.Engine.DoEvents())
            {
                asd.Engine.Update();
            }
            asd.Engine.Terminate();
        }
    }

数独の時は9×9のマスの画像をあらかじめ作成し、表示させていましたが、

これは数独が9×9で固定だからできるためです。

今回はマスの数が可変になるため、1個のマスを並べて使用したいと思います。

中の線が太く見えますが、マスを小さくすればそんなに気にならないかと思います。

ただ、マスのサイズを小さくしすぎると、このマスの中に後々数字を入れることになるので、あまり小さくできません。

今回は32×32ピクセルで作成しましたが、これが妥当なところでしょう。

考慮すべき所は、数字が入るところと色を塗るところが分かるように中の色を変えた方が良いかもしれません。

そこら辺を考慮した上で、クラス構成を考えてみたいと思います。

まずは、マスのサイズを可変に変更できるように作成していきましょう。