脳内補完を現実にすることで物理的制約により準優先が決まる

投稿日: 2013/02/07 作成者: masuda

想像とか机上でなんとなくできているような感じがして、それで満足したり試行錯誤したりするわけですが、現実に当てはめれてみればなんということはない「物理的な制約」が先にあって、実現不可能な選択肢が削られて話が簡単になること、というのはプログラムの話。いや、煮詰めすぎると無理が来るってことか、あるいは時間的な制約ということか。

チープな画面を

少しリッチな画面に

変えていきます。

花札の画像は、Windows ストア アプリのサンプル画像からピックアップ。

■UIのプロジェクトを分ける

チープな画面プロジェクト（Hanahuda）とは別にリッチなUI用の HanahudaUI プロジェクトを作ります。

.NET のライブラリ参照が便利なのは、元の Hanahuda アセンブリのクラスを UI プロジェクトでも簡単に参照できるところですね。簡単すぎて、先行き複雑になったとき（特に複数人数で開発になったとき）には困ることが多いのですが、ロジックと UI を強引に分離させたいときは、こういう風にプロジェクトを分けてしまいます。と云いますか、元のチープな画面はロジックテスト用に残しておいて、リッチな UI チェック用は別に作る、って方法ですね。

■花札のリソースを追加

となると、花札の画像はどちらに置くかというと、UI プロジェクトに置くわけで、このリソースの名前と花札の ID とをどうやって結び付けるのかが問題になるのです。同じプロジェクトに置けば、リソースを参照するのも楽なのですが、ここは UI を別にしておきたいし。そうなると、UI の方に花札のリソースが含まれるのは当然なわけで。そうなると、プロジェクトは HanahuhaUI から Hanhuda を参照する一方向しかできないわけで、さて、ID とリソースの関係はどうするのか？ってのが問題で悩みます。

が、現実的なところ

  • ひとつにはまとめたくない（まとめない）
  • 循環参照はできない。

という制約のなかで、以下のような対比表が書かれることになるわけです。
“A1” というのは花札の ID なので、Hanahuda プロジェクトの ID クラスとダブって書かれることになります。C 言語の場合は、インクルードファイルってことになるのですが、果たして .NET の場合はどうするべきなのか？ってところですね。業務的には、別の ID 定義用のプロジェクトをひとつ作って、enum か static を使って Card.A1 とか、ちまちまと定義することになるのですが…まあ、無駄なプロジェクトを増やすよりは、ダブって書くということで、今回はあきらめ。 

class CardUI
{
	protected static Dictionary<string, Bitmap> _resNames;
	public static Bitmap GetUra()
	{
		return Properties.Resources.FC097_2;
	}
	public static Bitmap GetResName(string id) 
	{
		if (CardUI._resNames == null)
		{
			CardUI._resNames = new Dictionary<string, Bitmap>();
			CardUI._resNames[&quot;A4&quot;] = Properties.Resources.FC001;
			CardUI._resNames[&quot;A3&quot;] = Properties.Resources.FC002;
			CardUI._resNames[&quot;A2&quot;] = Properties.Resources.FC003;
			CardUI._resNames[&quot;A1&quot;] = Properties.Resources.FC004;
			CardUI._resNames[&quot;B4&quot;] = Properties.Resources.FC005;
			CardUI._resNames[&quot;B3&quot;] = Properties.Resources.FC006;
			CardUI._resNames[&quot;B2&quot;] = Properties.Resources.FC007;
			CardUI._resNames[&quot;B1&quot;] = Properties.Resources.FC008;
			CardUI._resNames[&quot;C4&quot;] = Properties.Resources.FC009;
			CardUI._resNames[&quot;C3&quot;] = Properties.Resources.FC010;
			CardUI._resNames[&quot;C2&quot;] = Properties.Resources.FC011;
			CardUI._resNames[&quot;C1&quot;] = Properties.Resources.FC012;
			CardUI._resNames[&quot;D4&quot;] = Properties.Resources.FC013;
			CardUI._resNames[&quot;D3&quot;] = Properties.Resources.FC014;
			CardUI._resNames[&quot;D2&quot;] = Properties.Resources.FC015;
			CardUI._resNames[&quot;D1&quot;] = Properties.Resources.FC016;
			CardUI._resNames[&quot;E4&quot;] = Properties.Resources.FC017;
			CardUI._resNames[&quot;E3&quot;] = Properties.Resources.FC018;
			CardUI._resNames[&quot;E2&quot;] = Properties.Resources.FC019;
			CardUI._resNames[&quot;E1&quot;] = Properties.Resources.FC020;
			CardUI._resNames[&quot;F4&quot;] = Properties.Resources.FC021;
			CardUI._resNames[&quot;F3&quot;] = Properties.Resources.FC022;
			CardUI._resNames[&quot;F2&quot;] = Properties.Resources.FC023;
			CardUI._resNames[&quot;F1&quot;] = Properties.Resources.FC024;
			CardUI._resNames[&quot;G4&quot;] = Properties.Resources.FC025;
			CardUI._resNames[&quot;G3&quot;] = Properties.Resources.FC026;
			CardUI._resNames[&quot;G2&quot;] = Properties.Resources.FC027;
			CardUI._resNames[&quot;G1&quot;] = Properties.Resources.FC028;
			CardUI._resNames[&quot;H4&quot;] = Properties.Resources.FC029;
			CardUI._resNames[&quot;H3&quot;] = Properties.Resources.FC030;
			CardUI._resNames[&quot;H2&quot;] = Properties.Resources.FC031;
			CardUI._resNames[&quot;H1&quot;] = Properties.Resources.FC032;
			CardUI._resNames[&quot;I4&quot;] = Properties.Resources.FC033;
			CardUI._resNames[&quot;I3&quot;] = Properties.Resources.FC034;
			CardUI._resNames[&quot;I2&quot;] = Properties.Resources.FC035;
			CardUI._resNames[&quot;I1&quot;] = Properties.Resources.FC036;
			CardUI._resNames[&quot;J4&quot;] = Properties.Resources.FC037;
			CardUI._resNames[&quot;J3&quot;] = Properties.Resources.FC038;
			CardUI._resNames[&quot;J2&quot;] = Properties.Resources.FC039;
			CardUI._resNames[&quot;J1&quot;] = Properties.Resources.FC040;
			CardUI._resNames[&quot;K4&quot;] = Properties.Resources.FC041;
			CardUI._resNames[&quot;K3&quot;] = Properties.Resources.FC042;
			CardUI._resNames[&quot;K2&quot;] = Properties.Resources.FC043;
			CardUI._resNames[&quot;K1&quot;] = Properties.Resources.FC044;
			CardUI._resNames[&quot;L4&quot;] = Properties.Resources.FC045;
			CardUI._resNames[&quot;L3&quot;] = Properties.Resources.FC046;
			CardUI._resNames[&quot;L2&quot;] = Properties.Resources.FC047;
			CardUI._resNames[&quot;L1&quot;] = Properties.Resources.FC048;
		}
		return _resNames[id];
	}
}

■場と手札を表示するためのユーザーコントロールを作る

チープな画面では、場と手札は ListBox を使っているので、これに対応するようにリストを扱えるようなユーザーコントロールを作ります。

場には最大12枚、手札は最大8枚なので、PictureBox をペタペタと張り付けてリスト化しておきます。可搬性はないのですが、このぐらいのユーザーコントロールならばペタペタ作ったほうがよいかと。
データバインドするために、DataSource プロパティを作っておくのがミソです。 

public partial class BaControl : UserControl
{
	public BaControl()
	{
		InitializeComponent();

		_pics = new List<PictureBox>();
		_pics.Add(this.pictureBox1);
		_pics.Add(this.pictureBox2);
		_pics.Add(this.pictureBox3);
		_pics.Add(this.pictureBox4);
		_pics.Add(this.pictureBox5);
		_pics.Add(this.pictureBox6);
		_pics.Add(this.pictureBox7);
		_pics.Add(this.pictureBox8);
		_pics.Add(this.pictureBox9);
		_pics.Add(this.pictureBox10);
		_pics.Add(this.pictureBox11);
		_pics.Add(this.pictureBox12);
	}
	protected List<PictureBox> _pics;

	protected List<Card> _data;
	public List<Card> DataSource
	{
		get { return _data; }
		set
		{
			_data = value;
			UIUpdate();
		}
	}

	protected void UIUpdate()
	{
		int i = 0;
		if (this.DataSource != null)
		{
			foreach (var c in this.DataSource)
			{
				_pics[i++].Image = CardUI.GetResName(c.ID);
			}
		}
		for (; i < _pics.Count; ++i)
		{
			_pics[i].Image = CardUI.GetUra();
		}
	}
}

手札のほうも似た感じなのですが、PictureBox をクリックしたときのイベントを追加しておきます。 

public partial class TefudaControl : UserControl
{
	public TefudaControl()
	{
		InitializeComponent();

		_pics = new List<PictureBox>();
		_pics.Add(this.pictureBox1);
		_pics.Add(this.pictureBox2);
		_pics.Add(this.pictureBox3);
		_pics.Add(this.pictureBox4);
		_pics.Add(this.pictureBox5);
		_pics.Add(this.pictureBox6);
		_pics.Add(this.pictureBox7);
		_pics.Add(this.pictureBox8);
	}
	protected List<PictureBox> _pics;

	protected List<Card> _data;
	public List<Card> DataSource
	{
		get { return _data; }
		set
		{
			_data = value;
			UIUpdate();
		}
	}

	protected void UIUpdate()
	{
		int i = 0;
		if (this.DataSource != null)
		{
			foreach (var c in this.DataSource)
			{
				_pics[i++].Image = CardUI.GetResName(c.ID);
			}
		}
		for (; i < _pics.Count; ++i)
		{
			_pics[i].Image = CardUI.GetUra();
		}
	}

	private void pict_Click(object sender, EventArgs e)
	{
		int i=0;
		foreach (var p in _pics)
		{
			if (p == sender)
			{
				if (p.Image != CardUI.GetUra())
				{
					if (ClickCard != null)
					{
						ClickCard(_data[i]);
						break;
					}
				}
			}
			i++;
		}
	}
	public event Action<Card> ClickCard;
}

■リッチな画面のコードを追加する

手札でカードをクリックしたときのイベントと、 

/// <summary>
/// player1のカードを場に出す
/// </summary>
/// <param name=&quot;card&quot;></param>
void tefudaControl1_ClickCard(Card c)
{
	_board.Player1.IntoBa(c);
	_board.Ba.PutCard(c);
	_curPlayer = _board.Player1;
	// 画面の更新
	ScrUpdate();
}

画面を更新するところのコードを少しだけ修正します。 

/// <summary>
/// 画面の更新
/// </summary>
void ScrUpdate()
{
	listBox1.Items.Clear();
	listBox2.Items.Clear();
	listBox3.Items.Clear();
	listBox4.Items.Clear();
	listBox5.Items.Clear();
	listBox1.Items.AddRange(_board.Ba.Cards.ToArray());
	listBox2.Items.AddRange(_board.Player1.MyCards.ToArray());
	listBox3.Items.AddRange(_board.Player1.TakenCards.ToArray());
	listBox4.Items.AddRange(_board.Player2.MyCards.ToArray());
	listBox5.Items.AddRange(_board.Player2.TakenCards.ToArray());

	label7.Text = _board.Ba.PlayerCard.ToString();

	// 点を表示
	Yaku yaku1 = _board.Game.CalcYaku(_board.Player1.TakenCards);
	Yaku yaku2 = _board.Game.CalcYaku(_board.Player2.TakenCards);
	int ten1 = _board.Game.CalcTen(yaku1);
	int ten2 = _board.Game.CalcTen(yaku2);
	label10.Text = ten1.ToString();
	label11.Text = ten2.ToString();
	// ここだけ追加
	baControl1.DataSource = _board.Ba.Cards; 
	tefudaControl1.DataSource = _board.Player1.MyCards;
	tefudaControl2.DataSource = _board.Player2.MyCards;
}

こうするだけで、いや「だけ」ってほどではないですが、あまりコードを修正をせずに「ゲームらしい画面」ができがあるということで。

あと、追加するのは、

  • 手札や山から場に１枚だしたときのコントロール（忘れてた）
  • 持ち札のコントロール
  • 役ができたときのコントロール（必要？）

なところです。これを追加すると「静的なデータの表現」が終わるわけで、アニメーションとかありませんが、画面キャプチャ的にはそれなりが画面ができます。そのあとに「動的なデータの表現」ってプロセスが待っていて、ゲームらしい「動き」を追加します。

カテゴリー: C# パーマリンク