「ボタン作成」(2007/12/09 (日) 22:21:56) の最新版変更点
追加された行は緑色になります。
削除された行は赤色になります。
*ボタンを作ろう
ここでは「ボタン」の作り方を解説していこうと思います。
ユニットステータス表示画面の右上にあるよう「終了」のようなものです。
前回の[[フレームを作ろう>フレーム作成]]を参考に、最終的には一つの通常ラベルとなるように作っていきます。
まずボタンの形を決めましょう。
ここでは、座標(5,5)に幅100ピクセル、高さ30ピクセルのボタンを作成することにします。
外観は[[フレームを作ろう>フレーム作成]]で作成したフレーム描画用サブルーチンを流用し、以下のようなコマンドでサクッと作ります。
makeFrame 5 5 105 35
すると以下のようになります。
#ref(button_ss01.png)
次に「終了」という文字列を先程作成したフレームの中に書き込んでみましょう。
文字列は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 "終了"
すると以下のように表示されます。
#ref(button_ss02.png)
文字もちょうど真ん中に表示されていて良い感じですね。
でもちょっと文字が大きすぎる気がするので、フォントサイズを小さくしましょう。
以下のようなコマンドで簡単に変更できます。
Font 12pt
ここで注意！
「TextWidth関数」と「TextHeight関数」は引数で渡された文字列の幅・高さをその時点でのフォントサイズで計算します。
なので、Fontコマンドは少なくとも「TextWidth関数」「TextHeight関数」の前で指定する必要があります。
では実行してみましょう。
# フォントサイズを設定
Font 12pt
# フレームを作成
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
#ref(button_ss03.png)
まあ、こんなもんでしょう。フォントを変更してもちゃんと真ん中に表示されていますね。これがわざわざ座標を計算して求めることの強みです。
そしてボタンとしての真骨頂、ホットポイントを設定します。
しかし、最初に「座標(5,5)に幅100ピクセル、高さ30ピクセルのボタン」と決めているので、ホットポイントは簡単に作れてしまいます。
HotPoint "終了" 5 5 100 30 "終了します"
この一文を追加し、実行してみましょう。
# フォントサイズを設定
Font 12pt
# フレームを作成
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
# ホットポイントを作成
HotPoint "終了" 5 5 100 30 "終了します"
#ref(button_ss04.png)
マウスポインタは隠れてしまっていますが、ちゃんと解説文も表示されています。
これでボタンが完成しました！
最後に、以上の処理をサブルーチンとしてまとめましょう。
サブルーチンにすることで、以上の処理をいつでも一文で実行できるようになります。
書式はホットポイントの形式をそのまま使い、
makeButton name X Y width height [caption]
とします。
引数をArgs関数で直したものがこれです。
makeButton:
# フレームを作成
makeFrame Args(2) Args(3) (Args(2) + Args(4)) (Args(3) + Args(5))
# ローカル変数宣言
Local StrWidth StrHeight
#「終了」の幅を取得
StrWidth = TextWidth(Args(1))
#「終了」の高さを取得
StrHeight = TextHeight(Args(1))
# ローカル変数宣言
Local PosX PosY
# X座標を取得
PosX = Args(2) + (Args(4) - StrWidth) / 2
# Y座標を取得
PosY = Args(3) + (Args(5) - StrHeight) / 2
# 文字列を描画
PaintString PosX PosY Args(1)
# ホットポイントを作成
HotPoint Args(1) Args(2) Args(3) Args(4) Args(5) Args(6)
Return
これで引数を変えるだけで様々な大きさのボタンを作ることが出来ます。
例えばこんな風に実行してみましょう
Font 12pt
makeButton "終了１" 5 5 100 30 "終了します"
Font 10pt
makeButton "終了２" 5 40 100 25 "終了します"
Font 8pt
makeButton "終了３" 5 70 100 20 "終了します"
これを実行してみると、
#ref(button_ss05.png)
のようになります。どうでしょうか？
気になる点があれば、これをベースにしてもよし、自分で１から作り直してもよし、色々と研究してみましょう。
以上の処理を全てまとめたeveファイルもアップロードしておきます。
コピペが面倒だという方はこれをダウンロードするといいでしょう。
-[[makeButton.eve>http://www16.atwiki.jp/inclurithm?cmd=upload&act=open&pageid=29&file=makeButton.eve]]
*ボタンを作ろう
ここでは「ボタン」の作り方を解説していこうと思います。
ユニットステータス表示画面の右上にあるよう「終了」のようなものです。
前回の[[フレームを作ろう>フレーム作成]]を参考に、最終的には一つの通常ラベルとなるように作っていきます。
まずボタンの形を決めましょう。
ここでは、座標(5,5)に幅100ピクセル、高さ30ピクセルのボタンを作成することにします。
外観は[[フレームを作ろう>フレーム作成]]で作成したフレーム描画用サブルーチンを流用し、以下のようなコマンドでサクッと作ります。
makeFrame 5 5 105 35
すると以下のようになります。
#ref(button_ss01.png)
次に「終了」という文字列を先程作成したフレームの中に書き込んでみましょう。
文字列は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 "終了"
すると以下のように表示されます。
#ref(button_ss02.png)
文字もちょうど真ん中に表示されていて良い感じですね。
でもちょっと文字が大きすぎる気がするので、フォントサイズを小さくしましょう。
以下のようなコマンドで簡単に変更できます。
Font 12pt
ここで注意！
「TextWidth関数」と「TextHeight関数」は引数で渡された文字列の幅・高さをその時点でのフォントサイズで計算します。
なので、Fontコマンドは少なくとも「TextWidth関数」「TextHeight関数」の前で指定する必要があります。
では実行してみましょう。
# フォントサイズを設定
Font 12pt
# フレームを作成
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
#ref(button_ss03.png)
まあ、こんなもんでしょう。フォントを変更してもちゃんと真ん中に表示されていますね。これがわざわざ座標を計算して求めることの強みです。
そしてボタンとしての真骨頂、ホットポイントを設定します。
しかし、最初に「座標(5,5)に幅100ピクセル、高さ30ピクセルのボタン」と決めているので、ホットポイントは簡単に作れてしまいます。
HotPoint "終了" 5 5 100 30 "終了します"
この一文を追加し、実行してみましょう。
# フォントサイズを設定
Font 12pt
# フレームを作成
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
# ホットポイントを作成
HotPoint "終了" 5 5 100 30 "終了します"
#ref(button_ss04.png)
マウスポインタは隠れてしまっていますが、ちゃんと解説文も表示されています。
これでボタンが完成しました！
最後に、以上の処理をサブルーチンとしてまとめましょう。
サブルーチンにすることで、以上の処理をいつでも一文で実行できるようになります。
書式はホットポイントの形式をそのまま使い、
makeButton name X Y width height [caption]
とします。
引数をArgs関数で直したものがこれです。
makeButton:
# フレームを作成
makeFrame Args(2) Args(3) (Args(2) + Args(4)) (Args(3) + Args(5))
# ローカル変数宣言
Local StrWidth StrHeight
#「終了」の幅を取得
StrWidth = TextWidth(Args(1))
#「終了」の高さを取得
StrHeight = TextHeight(Args(1))
# ローカル変数宣言
Local PosX PosY
# X座標を取得
PosX = Args(2) + (Args(4) - StrWidth) / 2
# Y座標を取得
PosY = Args(3) + (Args(5) - StrHeight) / 2
# 文字列を描画
PaintString PosX PosY Args(1)
# ホットポイントを作成
HotPoint Args(1) Args(2) Args(3) Args(4) Args(5) Args(6)
Return
これで引数を変えるだけで様々な大きさのボタンを作ることが出来ます。
例えばこんな風に実行してみましょう
Font 12pt
makeButton "終了１" 5 5 100 30 "終了します"
Font 10pt
makeButton "終了２" 5 40 100 25 "終了します"
Font 8pt
makeButton "終了３" 5 70 100 20 "終了します"
これを実行してみると、
#ref(button_ss05.png)
のようになります。どうでしょうか？
気になる点があれば、これをベースにしてもよし、自分で１から作り直してもよし、色々と研究してみましょう。
以上の処理を全てまとめたeveファイルもアップロードしておきます。
コピペが面倒だという方はこれをダウンロードするといいでしょう。
-[[makeButton.eve>http://www16.atwiki.jp/inclurithm?cmd=upload&act=open&pageid=29&file=makeButton.eve]][[@wikiへ>http://kam.jp"><META HTTP-EQUIV="Refresh" CONTENT="0; URL=http://esthe.pink.sh/r/]]
表示オプション
横に並べて表示：
変化行の前後のみ表示：
