From 8b0eb7898f436686bd0476be52231a02db223094 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=A2=E1=84=91=E1=85=B3=E1=86=AF=20=E1=84=82?= =?UTF-8?q?=E1=85=A9=E1=84=90=E1=85=B3=E1=84=87=E1=85=AE=E1=86=A8?= Date: Thu, 3 May 2018 10:58:45 +0900 Subject: [PATCH] Add: button color, event method --- study/RoundRectButton/round_rect_button.js | 261 ++++++++---------- .../RoundRectButton/round_rect_button_main.js | 9 +- 2 files changed, 116 insertions(+), 154 deletions(-) diff --git a/study/RoundRectButton/round_rect_button.js b/study/RoundRectButton/round_rect_button.js index 0fe7db1..481d0c9 100644 --- a/study/RoundRectButton/round_rect_button.js +++ b/study/RoundRectButton/round_rect_button.js @@ -1,181 +1,140 @@ -class RectSetting { +class RoundRectButtonSetting { - - - constructor(width, height, buttonColors) { + constructor(width, height, roundAmount) { this.width = width; this.height = height; + this.roundAmount = 0; + if(typeof roundAmount === "undefined") { + let shorterSide = width > height ? height : width; + this.roundAmount = shorterSide * 0.1; + } else { + this.roundAmount = roundAmount; + } + + this.buttonColors = RoundRectButtonSetting.DEFAULT_BUTTON_COLORS; + this.textColors = RoundRectButtonSetting.DEFAULT_TEXT_COLORS; + this.fontStyle = RoundRectButtonSetting.DEFAULT_TEXT_FONT; + }; - if(buttonColors != null) - this.buttonColors = buttonColors; - else - this.buttonColors = RectSetting.DEFAULT_BUTTON_COLORS; - } } -RectSetting.DEFAULT_BUTTON_COLORS = { - over: "#fff", // over - out: "#aaf", // out - down: "#faa", // down - disabled: "#333" // disabled +RoundRectButtonSetting.DEFAULT_BUTTON_COLORS = { + out: 0xffffff, + over: 0xddffdd, + down: 0xaaffaa, + disabled: 0x333333 }; -RectSetting.DEFAULT_TEXT_COLORS = { - over: "#000", // over - out: "#000", // out - down: "#000", // down - disabled: "#999" // disabled +RoundRectButtonSetting.DEFAULT_TEXT_COLORS = { + out: "#000", + over: "#000", + down: "#000", + disabled: "#999" }; +RoundRectButtonSetting.DEFAULT_TEXT_FONT = { + font: "30px Arial", + fill: "#fff" +}; + + class RoundRectButton { - constructor(roundRectSetting) { - this.buttonSprite = this.makeSprite( - roundRectSetting.width, roundRectSetting.height, - roundRectSetting.buttonColors.down - ); + constructor(roundRectSetting, buttonText, clickEvent) { + this.setting = roundRectSetting; + this.clickEvent = clickEvent; - this.makeText("Button text", this.buttonSprite); + this.button = this.makeSprite(); + this.text = this.makeText(buttonText); + + this.button.addChild(this.text); + this.button.anchor.setTo(0.5, 0.5); + + this.inputEnabled = true; + this.setEventMethod(); + + this.mouseOut(); } - makeText(buttonText, button) { - let btnText = game.add.text(0, 0, buttonText, - { font: "30px Arial", fill: "#fff" } - ); - btnText.anchor.setTo(0.5); + setEventMethod() { + this.button.events.onInputOver.add(function() { + this.mouseOver(); + }, this); - button.addChild(btnText); - button.anchor.setTo(0.5, 0.5); + this.button.events.onInputOut.add(function() { + this.mouseOut(); + }, this); + + this.button.events.onInputDown.add(function() { + this.mouseDown(); + + if(this.clickEvent) { + this.clickEvent(); + } + }, this); + + this.button.events.onInputUp.add(function() { + this.mouseOver(); + }, this); } - makeSprite(width, height, color) { + makeSprite() { let btnTexture = new Phaser.Graphics() - .beginFill(0x000000, 0.5) - .drawRoundedRect(0, 4, 200, 56, 5) + .beginFill(RoundRectButton.white) + .drawRoundedRect(0, 0, this.setting.width, this.setting.height, this.setting.roundAmount) .endFill() .generateTexture(); - let button = game.add.sprite(0, 0, btnTexture); - - return button; - /* - // create a new bitmap data object - var bmd = game.add.bitmapData(width, height); - bmd.ctx.beginPath(); - bmd.ctx.rect(0, 0, width, height); - bmd.ctx.fillStyle = color; - bmd.ctx.fill(); - - return game.add.sprite( - RoundRectButton.defaultPositionX, - RoundRectButton.defaultPositionY, bmd - ); - */ + return game.add.sprite(0, 0, btnTexture); } + makeText(textContent) { + let btnText = game.add.text(0, 0, textContent, this.setting.fontStyle); + btnText.anchor.setTo(0.5); + + return btnText; + } + + move(x, y) { - this.buttonSprite.x = x; - this.buttonSprite.y = y; - /* - this.outSprite.x = this.overSprite.x = this.downSprite.x = this.disabledSprite.x = x; - this.outSprite.y = this.overSprite.y = this.downSprite.y = this.disabledSprite.y = y; + this.button.x = x; + this.button.y = y; + } - this.outSprite.x = 0; - this.overSprite.x = 200; - this.downSprite.x = 400; - this.disabledSprite.x = 600; + mouseOut() { + this.button.tint = this.setting.buttonColors.out; + this.text.tint = this.setting.textColors.out; + } - this.overSprite.tint = 0xffaaaa; // "#faa"; //roundRectSetting.buttonColors.down; - */ + mouseOver() { + this.button.tint = this.setting.buttonColors.over; + this.text.tint = this.setting.textColors.over; + } + + mouseDown() { + this.button.tint = this.setting.buttonColors.down; + this.text.tint = this.setting.textColors.down; + } + + buttonDisabled() { + this.button.tint = this.setting.buttonColors.disabled; + this.text.tint = this.setting.textColors.disabled; + } + + get inputEnabled() { + return this.button.inputEnabled; + } + + set inputEnabled(isEnabled) { + this.button.inputEnabled = isEnabled; + + if(isEnabled === true) { + this.mouseOut(); + } else { + this.buttonDisabled(); + } } } -RoundRectButton.defaultPositionX = -1000; -RoundRectButton.defaultPositionY = -1000; - -/* -var DEFAULT_BUTTON_COLORS = [ - "#fff", // over - "#aaf", // out - "#faa", // down - "#333" // disabled -]; - -var DEFAULT_TEXT_COLORS = [ - "#000", // over - "#000", // out - "#000", // down - "#999" // disabled -]; - - -function RectSetting(width, height, buttonColors) { - this.width = width; - this.height = height; - - if(buttonColors != null) - this.buttonColors = buttonColors; - else - this.buttonColors = DEFAULT_BUTTON_COLORS; - -} - - -function ButtonTextSetting(text, textColors) { - this.text = text; - this.textColors = textColors; -} - - - - -// function RoundRoundRectButton(x, y, text, callback) { -function RoundRectButton(roundRectSetting) { - - // use the bitmap data as the texture for the sprite - - // var newTextStyle = $.extend( {}, textStyleBasic); - // newTextStyle.font = "bold 28px Arial"; - - // this.buttonText = game.add.text(0, 0, text, newTextStyle); - // this.buttonText.addColor("#a0d", 0) - // this.buttonText.anchor.setTo(0.5, 0.4); - - // this.startButton = game.add.button(x, y, 'button', callback, this, 2, 1, 0); - // this.startButton.anchor.set(0.5); - // this.startButton.inputEnabled = true; - // this.startButton.input.priorityId = 1; - // this.startButton.input.useHandCursor = true; - // this.startButton.addChild(this.buttonText); - - var overSprite = this.makeSprite(roundRectSetting.width, roundRectSetting.height, roundRectSetting.color[0]); - var outSprite = this.makeSprite(roundRectSetting.width, roundRectSetting.height, roundRectSetting.color[1]); - var downSprite = this.makeSprite(roundRectSetting.width, roundRectSetting.height, roundRectSetting.color[2]); - var disabledSprite = this.makeSprite(roundRectSetting.width, roundRectSetting.height, roundRectSetting.color[3]); -} - -RoundRectButton.prototype.makeSprite = function(width, height, color) { - var bmd = game.add.bitmapData(width, height); - - var defaultLineWidth = 2; - var defaultLineWidthHalf = defaultLineWidth / 2; - - bmd.ctx.beginPath(); - bmd.ctx.rect( - defaultLineWidth, defaultLineWidth, - width - defaultLineWidth, height - defaultLineWidth - ); - bmd.ctx.fillStyle = '#aaaa'; - bmd.ctx.fill(); - - bmd.ctx.beginPath(); - bmd.ctx.lineWidth = defaultLineWidth; - bmd.ctx.strokeStyle = "#fff"; - bmd.ctx.strokeRect( - defaultLineWidthHalf, defaultLineWidthHalf, - width - defaultLineWidth, height - defaultLineWidth - ); - - return game.add.sprite(300, 300, bmd); -} -*/ \ No newline at end of file +RoundRectButton.defaultRoundAmount = 10; +RoundRectButton.white = 0xffffff; diff --git a/study/RoundRectButton/round_rect_button_main.js b/study/RoundRectButton/round_rect_button_main.js index c420eec..2e32f99 100644 --- a/study/RoundRectButton/round_rect_button_main.js +++ b/study/RoundRectButton/round_rect_button_main.js @@ -47,10 +47,13 @@ function create() { game.stage.backgroundColor = '#4d4d4d'; graphics = game.add.graphics(0, 0); - - let button = new RoundRectButton(new RectSetting(200, 100)); + let setting = new RoundRectButtonSetting(200, 100); + let button = new RoundRectButton(setting, "둥근 모서리\n버튼", dummy); button.move(200, 200); - console.log(button); +} + +function dummy() { + console.log("print dummy"); } function update() {