• 本文
• トップ
• 編集
• 差分
• 添付
• 名前変更

FlxButton

API Reference > flixel.ui > FlxButton

FlxButton

マウスのクリックを判定できるシンプルなボタンです

スーパークラス

FlxTypedButton<FlxText>

定数

ボタンの状態。FlxTypedButton.stateに格納される値です

フィールド

text:String : ボタンのラベル名

label:FlxText : ボタンテキスト

サイズを変更した後は resetHelpers() を呼び出してサイズを再設定する必要があります

メソッド

new() : ボタンの生成

• 引数
  • x:Float = 0 : 座標(X)
  • y:Float = 0 : 座標(Y)
  • ?Text:String : ボタンのラベル名
  • ?OnClick?:Void->Void : ボタンを押した時のコールバック関数

FlxButtonを拡張する方法

ボタンサイズをカスタマイズする

フィールドのwidthとheightを設定し、それに対応する画像を登録するとボタンサイズを変えることが可能です。 そして set_status をオーバーライドして、ボタンを非選択(NORMAL)・マウスが上にある状態(HIGHLIGHT)・押した状態(PRESSED)の3つの状態を実装します

/**
 * 独自のボタン
 */
class CustomButton extends FlxButton {

  // ボタンをリサイズする
  public resize(Width:Int, Height:Int):Void {
    width = Width;
    height = Height;

    // 状態を更新
    set_status(status);

    // 背景画像生成
    makeGraphic(Std.int(width), Std.int(height), 0); // 黒いボタンにする
  }

  // ボタンの状態変化
  override private function set_status(Value:Int):Int {
    if(label != null) {

      if(Value == FlxButton.HIGHLIGHT) {

        // マウスが上に乗ったら、テキスト色を判定させて縁取りを背景の黒と同化する
        #if !mobile // モバイルではHIGHLIGHT状態になることはない
        label.color = FlxColor.WHITE; // テキストは白
        label.borderStyle = FlxText.BORDER_OUTLINE_FAST; // テキストの縁取りをつける
        label.borderColor = FlxColor.BLACK; // 縁取りは黒
        #end
      }
      else {

        // 非選択状態・押した状態で縁取りを有効にする
        label.color = FlxColor.BLACK; // テキストを黒
        label.borderStyle = FlxText.BORDER_OUTLINE_FAST; // テキストの縁取りをつける
        label.borderColor = FlxColor.WHITE; // 縁取りは白
      }
    }

    return status = Value;
  }
}

ボタンサイズをスケーリングする

独自のボタンを使わずにボタンサイズをスケーリングする方法です。

  // ボタン生成
  var btn = new FlxButton(FlxG.width/2, FlxG.height/2, "TestButton");

  // コリジョンを変更
  btn.width = btn.width * 0.5; // 横幅を半分にする

  // 画像サイズを変更する
  btn.setGraphicSize(Std.int(btn.width), Std.int(btn.height));

  // サイズ変更に合わせてオフセット座標を変更する
  btn.centerOffsets();

  // ラベルのオフセット座標を調整
  for(ofs in btn.labelOffsets) {

    // 小さくぶんだけ調整
    ofs.x -= btn.width/2; // ラベルは"center"で描画するのでさらに半分にする
  }