Add: study - RoundRectButton

2018-04-30 10:48:56 +09:00
parent fca853fe97
commit 581efd0777
3 changed files with 152 additions and 0 deletions
@@ -0,0 +1,28 @@
 <!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="UTF-8">
 		<title>Round rect image button test</title>
 		<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
 		<script src="https://cdn.jsdelivr.net/npm/phaser@3.6.0/dist/phaser.min.js"></script>
 		<script src="./round_rect_button.js"></script>
 		<script src="./round_rect_button_main.js"></script>
 		<style>
 			body{
 				padding: 0;
 				margin: 0;
 			}
 			canvas{
 				margin: 0 auto;
 			}
 		</style>
 	</head>
 	<body>
 		<div id="Round rect image button test" style="text-align:center;" />
 	</body>
 </html>
@@ -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);
 }
@@ -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 );
 }