Add: Phaser text test

2018-08-09 14:38:42 +09:00
parent 18b41440a3
commit f263813fb1
2 changed files with 120 additions and 0 deletions
@@ -0,0 +1,32 @@
 <!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="UTF-8">
 		<title>Phaser text test</title>
 		<style>
 			body{
 				padding: 0;
 				margin: 0;
 			}
 			canvas{
 				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="./text.js"></script>
 	</head>
 	<body>
 		<div id="RoundRectButton" style="text-align:center;" />
 	</body>
 </html>
@@ -0,0 +1,88 @@
 /////////////////////////////
 // Main game
 var game = new Phaser.Game(1000, 800, Phaser.CANVAS, "RoundRectButton",
 	{preload:preload, create:create, update:update, render:render}
 );
 var textAlign, textAlign2;
 function preload() {
 	// 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);
 	game.stage.backgroundColor = '#4d4d4d';
 	graphics = game.add.graphics(0, 0);
 	printHowToPlay(
 		"가나다라마바사 아자차카타파하 \n \
 		가나다라마바사 아자차카타파하"
 	);
    game.input.onDown.add(changeAlign, this);
 }
 function changeAlign() {
 	console.log("print dummy");
    textAlign.text = "가나다라마바사 아자차카타파하 \n \
 		가나다라마바사 아자차카타파하";
  //   textAlign2.text = "가나다라마바사 아자차카타파하 \n \
 		// 가나다라마바사 아자차카타파하";
 }
 function printHowToPlay(text) {
 	const style_origin = { font: "32px Arial", fill: "#fff", align: "left", boundsAlignH: "center", boundsAlignV: "middle" };
 	let howToPlayText = game.add.text(0, 0, text, style_origin);
 	howToPlayText.setTextBounds(100, 100, game.world.width - 200, 200);
 	howToPlayText.stroke = "#333";
 	howToPlayText.strokeThickness = 5;
 	var ipsum = "Click to change alignment\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Quid ergo aliud intellegetur nisi uti ne quae pars naturae neglegatur?\n\nSi longus, levis; Ita relinquet duas, de quibus etiam atque etiam consideret. Optime, inquam. Sed quanta sit alias, nunc tantum possitne esse tanta.\n\nQuid, si etiam iucunda memoria est praeteritorum malorum?";
 	var style = { font: "16px Arial", fill: "#fff",
        align: "right", // the alignment of the text is independent of the bounds, try changing to 'center' or 'right'
        boundsAlignH: "right", 
        boundsAlignV: "top", 
        wordWrap: true, wordWrapWidth: 300 };
    textAlign = game.add.text(600, 100,ipsum, style);
    // textAlign.setTextBounds(16, 16, 768, 568);
 	textAlign.stroke = "#333333";
 	textAlign.strokeThickness = 5;
 /*
    textAlign2 = game.add.text(200, 300, ipsum, style);
    //	Center align
    // textAlign2.anchor.set(0.5);
    // textAlign2.align = 'right';
    // textAlign2.setTextBounds(16, 216, 368, 768);
    //	Font style
    // textAlign2.font = 'Arial Black';
    // textAlign2.fontSize = 50;
    // textAlign2.fontWeight = 'bold';
    //	Stroke color and thickness
    textAlign2.stroke = '#000000';
    textAlign2.strokeThickness = 5;
    // textAlign2.fill = '#43d637';
    */
 }
 function update() {
 }
 function render() {
 }