「ボタン作成」の編集履歴（バックアップ）一覧に戻る

ボタン作成 - (2006/09/17 (日) 11:51:08) の編集履歴(バックアップ)

---

ボタンを作ろう

ここでは「ボタン」の作り方を解説していこうと思います。
ユニットステータス表示画面の右上にあるよう「終了」のようなものです。

前回のフレームを作ろうを参考に、最終的には一つの通常ラベルとなるように作っていきます。

まずボタンの形を決めましょう。

ここでは、座標(5,5)に幅100ピクセル、高さ30ピクセルのボタンを作成することにします。

外観はフレームを作ろうで作成したフレーム描画用サブルーチンを流用し、以下のようなコマンドでサクッと作ります。

makeFrame 5 5 105 35

すると以下のようになります。

次に「終了」という文字列を先程作成したフレームの中に書き込んでみましょう。
文字列はPaintStringコマンドと使って書き込みますが、どうせならフレームのちょうど中心に書き込みたいですよね。

そこで「TextWidth関数」と「TextHeight関数」を使います。
この２つの関数は名前どおり、引数で渡した文字列の幅・高さをピクセル単位で返します。
実際に「終了」という文字列の幅と高さをピクセルで取得しましょう。

# ローカル変数宣言
Local StrWidth StrHeight
#「終了」の幅を取得
StrWidth = TextWidth("終了")
#「終了」の高さを取得
StrHeight = TextHeight("終了")

これで「終了」という文字列の幅と高さが取得できたので、次は「終了」という文字列をどこの座標に書き込めばいいかを求めましょう。

ここでは次のような計算式で書き込むべき座標を算出します。

X座標：フレーム描画座標 + (フレームの幅 - 文字列の幅) / 2
Y座標：フレーム描画座標 + (フレームの高さ - 文字列の高さ) / 2

これに実際の値や変数を当てはめてみましょう。

# ローカル変数宣言
Local PosX PosY
# X座標を取得
PosX = 5 + (100 - StrWidth) / 2
# Y座標を取得
PosY = 5 + (30 - StrHeight) / 2

何故このような計算式で座標を求めれるかわからない場合は、ここでわかるまで悩みぬきましょう。
ステータス表示系のインクルードではこれくらいの計算は普通です。
（もちろん、試行錯誤して具体的な数値を定めてしまうのもアリです。）

そしてPaintStringコマンドを使い、今求めた座標に「終了」という文字列を書き出します。

PaintString PosX PosY "終了"

さて、それでは以上のコマンド群をまとめて実行してみましょう。

# フレームを作成
makeFrame 5 5 105 35

# ローカル変数宣言
Local StrWidth StrHeight
#「終了」の幅を取得
StrWidth = TextWidth("終了")
#「終了」の高さを取得
StrHeight = TextHeight("終了")

# ローカル変数宣言
Local PosX PosY
# X座標を取得
PosX = 5 + (100 - StrWidth) / 2
# Y座標を取得
PosY = 5 + (30 - StrHeight) / 2

# 文字列を描画
PaintString PosX PosY "終了"