jisangs/chocomae
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add: RoundRectButton

Browse Source
This commit is contained in:
Jisang Park
2018-05-01 19:14:06 +09:00
parent 581efd0777
commit eb4eafd7b5
9 changed files with 202 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
study/RoundRectButton/phaser3-logo.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

study/RoundRectButton/phaser_sample.html
+19
View File
@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- <script src="https://labs.phaser.io/build/phaser-arcade-physics.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/phaser@3.6.0/dist/phaser.min.js"></script>
</head>
<body>
<div id="PhaserSample" style="text-align:center;" />
<script>
$(document).ready(function(){
$.getScript( "phaser_sample_main.js", function() {});
});
</script>
<!-- <script src="./phaser_sample.js"></script> -->
</body>
</html>
study/RoundRectButton/phaser_sample_main.js
+47
View File
@@ -0,0 +1,47 @@
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
physics: {
default: 'arcade',
arcade: {
gravity: { y: 200 }
}
},
scene: {
preload: preload,
create: create
}
};
var game = new Phaser.Game(config);
function preload ()
{
this.load.setBaseURL('http://labs.phaser.io');
this.load.image('sky', 'assets/skies/space3.png');
this.load.image('logo', 'assets/sprites/phaser3-logo.png');
this.load.image('red', 'assets/particles/red.png');
}
function create ()
{
this.add.image(400, 300, 'sky');
var particles = this.add.particles('red');
var emitter = particles.createEmitter({
speed: 100,
scale: { start: 1, end: 0 },
blendMode: 'ADD'
});
var logo = this.physics.add.image(400, 100, 'logo');
logo.setVelocity(100, 200);
logo.setBounce(1, 1);
logo.setCollideWorldBounds(true);
emitter.startFollow(logo);
}
study/RoundRectButton/red.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

study/RoundRectButton/round_rect_button.html
+14 -7
View File
@@ -4,12 +4,6 @@
<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;
@@ -20,9 +14,22 @@
margin: 0 auto;
}
</style>
<!--
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.2/phaser.js"></script>
<!-- <script src="../../resources/js/phaser.min.js"></script> -->
<script src="./round_rect_button.js"></script>
<script src="./round_rect_button_main.js"></script>
</head>
<body>
<div id="Round rect image button test" style="text-align:center;" />
<div id="RoundRectButton" style="text-align:center;" />
</body>
</html>
study/RoundRectButton/round_rect_button.js
+80 -13
View File
@@ -1,3 +1,71 @@
class RectSetting {
constructor(width, height, buttonColors) {
this.width = width;
this.height = height;
this.DEFAULT_BUTTON_COLORS = {
over: "#fff", // over
out: "#aaf", // out
down: "#faa", // down
disabled: "#333" // disabled
};
this.DEFAULT_TEXT_COLORS = {
over: "#000", // over
out: "#000", // out
down: "#000", // down
disabled: "#999" // disabled
};
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
};
RectSetting.DEFAULT_TEXT_COLORS = {
over: "#000", // over
out: "#000", // out
down: "#000", // down
disabled: "#999" // disabled
};
class RoundRectButton {
constructor(roundRectSetting) {
var outSprite = this.makeSprite(
roundRectSetting.width, roundRectSetting.height,
roundRectSetting.buttonColors.out
);
outSprite.x = 100;
outSprite.y = 100;
}
makeSprite(width, height, color) {
// 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 = RectSetting.DEFAULT_BUTTON_COLORS.out;
bmd.ctx.fill();
return game.add.sprite(-1000, -1000, bmd);
}
}
/*
var DEFAULT_BUTTON_COLORS = [
"#fff", // over
"#aaf", // out
@@ -38,21 +106,19 @@ function RoundRectButton(roundRectSetting) {
// use the bitmap data as the texture for the sprite
/*
var newTextStyle = $.extend( {}, textStyleBasic);
newTextStyle.font = "bold 28px Arial";
// 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.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);
*/
// 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]);
@@ -84,3 +150,4 @@ RoundRectButton.prototype.makeSprite = function(width, height, color) {
return game.add.sprite(300, 300, bmd);
}
*/
study/RoundRectButton/round_rect_button_main.js
+38 -17
View File
@@ -1,38 +1,59 @@
/////////////////////////////
// Main game
var game = new Phaser.Game(1000, 800, Phaser.CANVAS, "Round rect image button test",
/**** Phaser3 *****
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
physics: {
default: 'arcade',
arcade: {
gravity: { y: 200 }
}
},
scene: {
preload: preload,
create: create
}
};
var game = new Phaser.Game(config);
function preload() {
}
function create() {
console.log(game);
this.cameras.main.setBackgroundColor('#4d4d4d');
// game.stage.backgroundColor = '#4d4d4d';
// graphics = game.add.graphics(0, 0);
}
*/
var game = new Phaser.Game(1000, 800, Phaser.CANVAS, "RoundRectButton",
{preload:preload, create:create, update:update, render:render});
function preload() {
game.load.image('phaser', './image/phaser.png');
// game.load.image('phaser', '../../resources/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);
// 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));
let button = new RoundRectButton(new RectSetting(200, 100));
console.log(button);
}
function update() {
}
function render() {
// showDebugMessage();
}
/////////////////////////////
// custom methods
function showDebugMessage() {
// game.debug.text( "This is debug text 한글 " + spriteMushroom.x + ", " + spriteMushroom.y + ", highscore : " + highScore, 100, 380 );
}
study/RoundRectButton/space3.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.7 KiB