- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
import BitmapText from "../text/bitmaptext.js";
import RoundRect from "../../geometries/roundrect.js";
import UIBaseElement from "./uibaseelement.js";
/**
* @classdesc
* This is a basic base text button which you can use in your Game UI.
* @augments UIBaseElement
*/
export default class UITextButton extends UIBaseElement {
/**
* A Bitmap Text Button with an outlined background border, filled with background color.
* It uses a RoundRect as background and changes the background color on hovering over.
* The background will be drawn with 0.5 opacity, so that the background of the button is
* slightly shining through.
* @param {number} x - x pos of the button
* @param {number} y - y pos of the button
* @param {string} [settings.font] - The name of the BitmapText font to use
* @param {number} [settings.size=1] - The scale factor of the BitmapText
* @param {string} [settings.text] - The text to display
* @param {string} [settings.bindKey] - The key to bind the action to (default: none)
* @param {string} [settings.hoverOffColor="#00aa0080"] - The css value of a color to be used if the pointer is not hovering over the button
* @param {string} [settings.hoverOnColor="#00ff00ff"] - The css value of a color to be used if the pointer hovers over the button
* @param {string} [settings.borderStrokeColor="#000000"] - The css value of a color to be used to draw the border
* @param {string} [settings.fillStyle] - The css value of a tint color to be used to tint the BitmapText
* @param {string} [settings.textAlign="center"] - horizontal text alignment
* @param {string} [settings.textBaseline="middle"] - the text baseline
* @param {number} [settings.borderWidth] - Width of the button
* @param {number} [settings.borderHeight] - Height of the button
* @example
* // Create a new Button
* class PlayButton extends UITextButton {
* constructor(x,y) {
* super(x,y, {
* font: 'my-font',
* text: 'Play',
* // if you omit the next two, size is calculated by the size of the text
* borderWidth: 200,
* borderHeight: 20,
* backgroundColor: '#00aa0080',
* hoverColor: '#00ff00ff'
* });
* }
*
* onClick(){
* state.change(state.PLAY);
* }
* }
*
* world.addChild(new PlayButton(15,200));
*/
constructor(x, y, settings) {
super(x, y);
/**
* The key to bind the action to
* @type {string}
*/
this.bindKey = settings.bindKey || -1;
/**
* The css value of a color to be used if the pointer is nothovering over the button
* @type {string}
*/
// keep settings.backgroundColor for backward compatibility
this.hoverOffColor = settings.hoverOffColor || settings.backgroundColor || "#00aa0080";
/**
* The css value of a color to be used if the pointer hovers over the button
* @type {string}
*/
// keep settings.hoverColor for backward compatibility
this.hoverOnColor = settings.hoverOnColor || settings.hoverColor || "#00ff00ff";
/**
* The css value of a color to be used to draw the border
* @type {string}
*/
this.borderStrokeColor = settings.borderStrokeColor || "#000000";
/**
* Set the default text alignment (or justification),<br>
* possible values are "left", "right", and "center".
* @public
* @type {string}
* @default "center"
*/
this.textAlign = settings.textAlign = settings.textAlign || "center";
/**
* Set the text baseline (e.g. the Y-coordinate for the draw operation), <br>
* possible values are "top", "hanging, "middle, "alphabetic, "ideographic, "bottom"<br>
* @public
* @type {string}
* @default "middle"
*/
this.textBaseline = settings.textBaseline = settings.textBaseline || "middle";
/**
* the bitmapText used by the UITextButton class
* @type {BitmapText}
*/
this.bitmapText = new BitmapText(0, 0, settings);
// "detect" the button size
this.dimensions = this.bitmapText.measureText();
settings.borderWidth = settings.borderWidth || this.dimensions.width + 16;
settings.borderHeight = settings.borderHeight || this.dimensions.height + 16;
// create the round rect button
this.border = new RoundRect(x, y, settings.borderWidth, settings.borderHeight);
// resize the container accordingly
this.resize(
this.border.getBounds().width,
this.border.getBounds().height
);
// adjust size position
this.bitmapText.pos.set(this.width / 2, this.height / 2);
// add bitmapText to the UI container
this.addChild(this.bitmapText);
}
draw(renderer) {
if (this.hover === true) {
renderer.setColor(this.hoverOnColor);
} else {
renderer.setColor(this.hoverOffColor);
}
renderer.fill(this.border);
renderer.setColor(this.borderStrokeColor);
renderer.stroke(this.border);
super.draw(renderer);
}
}