From 581efd0777ea25a017faac3b39458172144a8425 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: Mon, 30 Apr 2018 10:48:56 +0900 Subject: [PATCH] Add: study - RoundRectButton --- study/RoundRectButton/round_rect_button.html | 28 ++++++ study/RoundRectButton/round_rect_button.js | 86 +++++++++++++++++++ .../RoundRectButton/round_rect_button_main.js | 38 ++++++++ 3 files changed, 152 insertions(+) create mode 100644 study/RoundRectButton/round_rect_button.html create mode 100644 study/RoundRectButton/round_rect_button.js create mode 100644 study/RoundRectButton/round_rect_button_main.js diff --git a/study/RoundRectButton/round_rect_button.html b/study/RoundRectButton/round_rect_button.html new file mode 100644 index 0000000..c08d405 --- /dev/null +++ b/study/RoundRectButton/round_rect_button.html @@ -0,0 +1,28 @@ + + + + + Round rect image button test + + + + + + + + + + + +
+ + \ No newline at end of file diff --git a/study/RoundRectButton/round_rect_button.js b/study/RoundRectButton/round_rect_button.js new file mode 100644 index 0000000..6b5001f --- /dev/null +++ b/study/RoundRectButton/round_rect_button.js @@ -0,0 +1,86 @@ +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); +} diff --git a/study/RoundRectButton/round_rect_button_main.js b/study/RoundRectButton/round_rect_button_main.js new file mode 100644 index 0000000..31c599c --- /dev/null +++ b/study/RoundRectButton/round_rect_button_main.js @@ -0,0 +1,38 @@ +///////////////////////////// +// Main game + +var game = new Phaser.Game(1000, 800, Phaser.CANVAS, "Round rect image button test", + {preload:preload, create:create, update:update, render:render}); + +function preload() { + game.load.image('phaser', './image/phaser.png'); + + // game.load.spritesheet('button', './image/button_basic.png', 200, 100); +} + +function create() { + var i = game.add.image(game.world.centerX, game.world.centerY + 70, 'phaser'); + i.anchor.set(0.5); + game.stage.backgroundColor = '#4d4d4d'; + graphics = game.add.graphics(0, 0); + + + new RoundRectButton(new RectSetting(200, 100)); +} + +function update() { +} + +function render() { + // showDebugMessage(); +} + + +///////////////////////////// +// custom methods + + +function showDebugMessage() { + // game.debug.text( "This is debug text 한글 " + spriteMushroom.x + ", " + spriteMushroom.y + ", highscore : " + highScore, 100, 380 ); +} +