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() {
+}