class KeyButton { constructor(x, y, width, height, normalText, shiftText, handSide, fingerType, alignType) { this.normalText = normalText; this.shiftText = shiftText; this.handSide = handSide; this.fingerType = fingerType; this.alignType = alignType; this.setting = new RoundRectButtonSetting(x, y, width, height, KeyButton.DEFALUT_ROUND_AMOUNT_PX); this.setting.strokeWidthPx = 2; this.buttonSolid = this.makeButtonSolidSprite(this.setting); this.setNormalColor(); this.buttonStroke = this.makeButtonStrokeSprite(this.setting); this.baselineStroke = null; if(fingerType == KeyButton.INDEX_FINGER_BASELINE) { this.baselineStroke = this.makeBaselineStrokeSprite(this.setting, width, height); this.buttonStroke.addChild(this.baselineStroke); } this.buttonText = this.makeText(this.setting, this.normalText); if(this.normalText.length > 0) { this.buttonStroke.addChild(this.buttonText); } } makeButtonSolidSprite(setting) { let btnTexture = new Phaser.Graphics() .beginFill(0xffffff, 0.5) // .lineStyle(setting.strokeWidthPx, 0xFFffff, 1) .drawRoundedRect(0, 0, setting.width, setting.height, setting.roundAmount) .endFill() .generateTexture(); return game.add.sprite( setting.x, // - setting.width / 2, setting.y, // - setting.height / 2, btnTexture ); } makeButtonStrokeSprite(setting) { let btnTexture = new Phaser.Graphics() .lineStyle(setting.strokeWidthPx, 0xFFffff, 1) .drawRoundedRect(0, 0, setting.width, setting.height, setting.roundAmount) .generateTexture(); return game.add.sprite( setting.x, // - setting.width / 2, setting.y, // - setting.height / 2, btnTexture ); } makeBaselineStrokeSprite(setting, width, height) { let strokePx = setting.strokeWidthPx; let baselineTexture = new Phaser.Graphics() .lineStyle(2, 0x888888) .moveTo(1, 1) .lineTo(16, 1) .lineStyle(2, 0xffffff) .moveTo(0, 0) .lineTo(15, 0) .generateTexture(); let baselineSprite = game.add.sprite( strokePx + setting.width / 2, strokePx + setting.height - 6, baselineTexture ); baselineSprite.anchor.set(0.5); return baselineSprite; } makeText(setting, textContent) { let offsetX_px = 4; let offsetY_px = 5; let width = setting.width - setting.strokeWidthPx * 2 - offsetX_px; let height = setting.height - setting.strokeWidthPx * 2; if(this.alignType === KeyButton.NORMAL_KEY) setting.fontStyle.font = "20px Courier New"; else setting.fontStyle.font = "11px Courier New"; let btnText = game.add.text(offsetX_px, offsetY_px, textContent, setting.fontStyle) .setTextBounds(setting.strokeWidthPx, setting.strokeWidthPx, width, height); if(this.alignType === KeyButton.NORMAL_KEY) { btnText.boundsAlignH = "center"; btnText.boundsAlignV = "middle"; } else if(this.alignType === KeyButton.LEFT_FUNCTION_KEY) { btnText.boundsAlignH = "left"; btnText.boundsAlignV = "bottom"; } else if(this.alignType === KeyButton.CENTER_FUNCTION_KEY) { btnText.boundsAlignH = "center"; btnText.boundsAlignV = "bottom"; } else if(this.alignType === KeyButton.RIGHT_FUNCTION_KEY) { btnText.boundsAlignH = "right"; btnText.boundsAlignV = "bottom"; } // btnText.lineSpacing = RoundRectButtonSetting.DEFAULT_TEXT_LINE_SPACING_PX; btnText.text = textContent; return btnText; } setNormalColor() { switch(this.fingerType) { case KeyButton.THUMB: this.buttonSolid.tint = 0x604d4d; break; case KeyButton.INDEX_FINGER: case KeyButton.INDEX_FINGER_BASELINE: this.buttonSolid.tint = 0x4d604d; break; case KeyButton.MIDDLE_FINGER: this.buttonSolid.tint = 0x4d4d60; break; case KeyButton.RING_FINGER: this.buttonSolid.tint = 0x60604d; break; case KeyButton.LITTLE_FINGER: this.buttonSolid.tint = 0x4d6060; break; default: this.buttonSolid.tint = 0x4d4d4d; // this.buttonSolid.alpha = 0; } } setTargetColor() { switch(this.fingerType) { case KeyButton.THUMB: this.buttonSolid.tint = 0xff8080; break; case KeyButton.INDEX_FINGER: case KeyButton.INDEX_FINGER_BASELINE: this.buttonSolid.tint = 0x80ff80; break; case KeyButton.MIDDLE_FINGER: this.buttonSolid.tint = 0x8080ff; break; case KeyButton.RING_FINGER: this.buttonSolid.tint = 0xffff80; break; case KeyButton.LITTLE_FINGER: this.buttonSolid.tint = 0x80ffff; break; default: this.buttonSolid.tint = 0x202020; // this.buttonSolid.alpha = 0; } } setGoodPressColor() { this.buttonSolid.tint = 0x0000ff; } setBadPressColor() { this.buttonSolid.tint = 0xff0000; } onShiftPressed() { this.buttonText.text = this.shiftText; } onShiftUnpressed() { this.buttonText.text = this.normalText; } /* mouseOut() { this.text.fill = this.setting.textColors.out; this.buttonStroke.tint = this.setting.strokeColors.out; this.button.tint = this.setting.buttonColors.out; if(typeof this.buttonIcon !== "undefined") { this.buttonIcon.tint = this.setting.strokeColors.out; } } mouseOver() { this.text.fill = this.setting.textColors.over; this.buttonStroke.tint = this.setting.strokeColors.over; this.button.tint = this.setting.buttonColors.over; if(typeof this.buttonIcon !== "undefined") { this.buttonIcon.tint = this.setting.strokeColors.over; } } mouseDown() { this.text.fill = this.setting.textColors.down; this.buttonStroke.tint = this.setting.strokeColors.down; this.button.tint = this.setting.buttonColors.down; if(typeof this.buttonIcon !== "undefined") { this.buttonIcon.tint = this.setting.strokeColors.down; } } buttonDisabled() { this.text.fill = this.setting.textColors.disabled; this.buttonStroke.tint = this.setting.strokeColors.disabled; this.button.tint = this.setting.buttonColors.disabled; if(typeof this.buttonIcon !== "undefined") { this.buttonIcon.tint = this.setting.strokeColors.disabled; } } */ } KeyButton.NONE_ICON = ""; KeyButton.NONE_BUTTON_TEXT = ""; KeyButton.DEFALUT_ROUND_AMOUNT_PX = 10; KeyButton.NORMAL_KEY = "normal_key"; KeyButton.NORMAL_FUNCTION_KEY = "normal_function_key"; KeyButton.LEFT_FUNCTION_KEY = "left_function_key"; KeyButton.CENTER_FUNCTION_KEY = "center_function_key"; KeyButton.RIGHT_FUNCTION_KEY = "right_function_key"; KeyButton.NONE_HAND = 0; KeyButton.LEFT_HAND = 1; KeyButton.RIGHT_HAND = 2; KeyButton.BOTH_HAND = 3; KeyButton.NONE_FINGER = 0; KeyButton.THUMB = 1; KeyButton.INDEX_FINGER = 2; KeyButton.INDEX_FINGER_BASELINE = 3; KeyButton.MIDDLE_FINGER = 4; KeyButton.RING_FINGER = 5; KeyButton.LITTLE_FINGER = 5;