Add: Google webfonts

src/game/main_menu/main.js

@@ -3,10 +3,31 @@
 
 var CONTENT_ID = "MainMenu";
 
+
 var game = new Phaser.Game(
 	GAME_SCREEN_SIZE.x, GAME_SCREEN_SIZE.y,
 	Phaser.CANVAS, CONTENT_ID
 );
 
-game.state.add('MainMenu', MainMenu);
+WebFontConfig = {
+	//  'active' means all requested fonts have finished loading
+	//  We set a 1 second delay before calling 'createText'.
+	//  For some reason if we don't the browser cannot render the text the first time it's created.
+	active: function() { game.time.events.add(Phaser.Timer.SECOND * 0, fontLoaded, this); },
+
+	//  The Google Fonts we want to load (specify as many as you like in the array)
+	google: {
+		families: ['Nanum Gothic', 'Nanum Gothic Coding', 'Nanum Brush Script']
+		// families: ['Nanum Brush Script']
+	}
+};
+
+var mainMenu = new MainMenu();
+game.state.add('MainMenu', mainMenu);
 game.state.start('MainMenu');
+
+function fontLoaded() {
+	console.log("fontLoaded #1");
+	mainMenu.fontLoaded();
+}
+

src/game/main_menu/main_menu.js

@@ -1,13 +1,52 @@
-var MainMenu = {
+MainMenu.prototype = Object.create(Phaser.State.prototype);
+MainMenu.constructor = MainMenu;
 
-	preload: function() {
-		game.load.image('tile_choco',	'../../../resources/image/background/tile_choco.png');
-		game.load.image('icon_fullscreen', '../../../resources/image/icon/fullscreen_white.png');
-	},
+function MainMenu() {
+}
+
+MainMenu.prototype.preload = function() {
+	// game.load.image('tile_choco',	'../../../resources/image/background/tile_choco.png');
+	game.load.script('webfont', '//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js');
+}
+
+// fontLoaded, create method for Google WebFonts test
+/*
+MainMenu.prototype.fontLoaded = function() {
+	console.log("fontLoaded");
+
+	// this.loadingImage.alpha = 0;
+
+	// this.text.font = 'Nanum Gothic';
+	// text2.font = 'Nanum Brush Script';
+	// this.text3.font = 'Nanum Brush Script';
+}
+
+MainMenu.prototype.create = function() {
+	console.log("create");
 
-	create: function() {
 	game.stage.backgroundColor = '#4d4d4d';
 
+	this.loadingImage = game.add.sprite(GAME_SCREEN_SIZE.x / 2, GAME_SCREEN_SIZE.y / 2, "tile_choco");
+	this.text = game.add.text(game.world.centerX, game.world.centerY - 150, "- phaser -\n나눔 고딕 웹 폰트\ngoogle web fonts");
+	this.text.anchor.setTo(0.5);
+	this.text.fontSize = 60;
+
+	this.text2 = game.add.text(game.world.centerX, game.world.centerY, "기본 default 글꼴");
+	this.text2.anchor.setTo(0.5);
+	this.text2.fontSize = 60;
+
+	this.text3 = game.add.text(game.world.centerX, game.world.centerY + 150, "- phaser -\n나눔 브러시 스크립트 웹 폰트\ngoogle web fonts");
+	this.text3.anchor.setTo(0.5);
+	this.text3.fontSize = 60;
+}
+*/
+
+MainMenu.prototype.create = function() {
+	game.stage.backgroundColor = '#4d4d4d';
+}
+
+MainMenu.prototype.fontLoaded = function() {
+
 	// keyboard shortcut
 	this.keyboardShortcut = new KeyboardShortcut();
 	this.keyboardShortcut.addCallback(
@@ -47,14 +86,14 @@ var MainMenu = {
 
 
 	this.loadAppData();
-	},
+}
 
-	back: function() {
+MainMenu.prototype.back = function() {
 	sessionStorageManager.clear();
 	location.href = '../../web/client/login.html';
-	},
+}
 
-	loadAllowEditEnterCode: function(screenTopUI) {
+MainMenu.prototype.loadAllowEditEnterCode = function(screenTopUI) {
 	var dbConnectManager = new DBConnectManager();
 	dbConnectManager.requestAllowEditEnterCode(
 		sessionStorageManager.getMaestroID(),
@@ -72,9 +111,9 @@ var MainMenu = {
 			this.loadFailed(replyJSON);
 		}).bind(this)
 	);
-	},
+}
 
-	loadAppData: function() {
+MainMenu.prototype.loadAppData = function() {
 	var dbConnectManager = new DBConnectManager();
 	dbConnectManager.requestMenuAppList(
 		sessionStorageManager.getMaestroID(),
@@ -85,9 +124,9 @@ var MainMenu = {
 			this.loadFailed(replyJSON);
 		}).bind(this)
 	);
-	},
+}
 
-	loadSucceeded: function(replyJSON) {
+MainMenu.prototype.loadSucceeded = function(replyJSON) {
 	// console.log(replyJSON);
 
 	this.makeMouseAppButtons(
@@ -100,18 +139,18 @@ var MainMenu = {
 		replyJSON.TypingAppList,
 		replyJSON.TypingActiveAppList
 	);
-	},
+}
 
-	hasApp: function(appID, appList) {
+MainMenu.prototype.hasApp = function(appID, appList) {
 	for(var i = 0; i < appList.length; i++) {
 		if(appList[i].AppID === appID)
 			return true;
 	}
 
 	return false;
-	},
+}
 
-	makeMouseAppButtons: function(appList, activeAppList) {
+MainMenu.prototype.makeMouseAppButtons = function(appList, activeAppList) {
 	// console.log(appList);
 
 	var mouseAppCount = Object.keys(appList).length;
@@ -131,13 +170,14 @@ var MainMenu = {
 				KoreanName: app.KoreanName
 			}
 		);
+		gameAppButton.text.font = "Nanum Brush Script";
 
 		if(!this.hasApp(app.AppID, activeAppList))
 			gameAppButton.setInputEnabled(false);
 	}
-	},
+}
 
-	makeTypingButtons: function(typingPracticeAppCount, typingTestAppCount, appList, activeAppList) {
+MainMenu.prototype.makeTypingButtons = function(typingPracticeAppCount, typingTestAppCount, appList, activeAppList) {
 	// console.log(typingPracticeAppCount);
 	// console.log(typingTestAppCount);
 	// console.log(appList);
@@ -201,9 +241,9 @@ var MainMenu = {
 
 		typingAppIndex++;
 	}
-	},
+}
 
-	getButtonPosX: function(index, buttonCount) {
+MainMenu.prototype.getButtonPosX = function(index, buttonCount) {
 	var gap = GameAppButton.BUTTON_WIDTH + GameAppButton.BUTTON_GAP;
 	var maxColumnNum = Math.floor( (game.world.width - GameAppButton.MARGIN_VERTICAL) / gap );
 	// console.log("maxColumnNum : " + maxColumnNum);
@@ -224,9 +264,9 @@ var MainMenu = {
 
 	var startX = game.world.width / 2 - ( (gap / 2) * (columnCountForThisRow - 1) );
 	return startX + gap * columnIndex;
-	},
+}
 
-	getButtonPosY: function(index, buttonCount, startPosY) {
+MainMenu.prototype.getButtonPosY = function(index, buttonCount, startPosY) {
 	var gap = GameAppButton.BUTTON_HEIGHT + GameAppButton.BUTTON_GAP;
 	var maxColumnNum = Math.floor( (game.world.width - GameAppButton.MARGIN_VERTICAL) / gap );
 	// console.log("maxColumnNum : " + maxColumnNum);
@@ -238,9 +278,8 @@ var MainMenu = {
 
 	var startY = startPosY - ( (gap / 2) * (rowCount - 1) );
 	return startY + gap * rowIndex;
-	},
-
-	loadFailed: function(replyJSON) {
-		// console.log('login failed, jsonData : ' + JSON.stringify(replyJSON));
-	}
+}
+
+MainMenu.prototype.loadFailed = function(replyJSON) {
+	// console.log('login failed, jsonData : ' + JSON.stringify(replyJSON));
 }

study/PhaserText/google_webfonts.html

@@ -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="./google_webfonts.js"></script>
+	</head>
+
+	<body>
+		<div id="google_webfonts" style="text-align:center;" />
+	</body>
+</html>

study/PhaserText/google_webfonts.js

@@ -0,0 +1,87 @@
+
+var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'google_webfonts', { preload: preload, create: create });
+
+//  The Google WebFont Loader will look for this object, so create it before loading the script.
+WebFontConfig = {
+
+    //  'active' means all requested fonts have finished loading
+    //  We set a 1 second delay before calling 'createText'.
+    //  For some reason if we don't the browser cannot render the text the first time it's created.
+    active: function() { game.time.events.add(Phaser.Timer.SECOND, createText, this); },
+
+    //  The Google Fonts we want to load (specify as many as you like in the array)
+    // nanumGothic: {
+    //   families: ['Nanum Gothic']    // ['Revalia']
+    // },
+    google: {
+      families: ['Nanum Gothic', 'Nanum Brush Script']    // ['Revalia']
+    }
+
+};
+
+function preload() {
+
+    //  Load the Google WebFont Loader script
+    game.load.script('webfont', '//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js');
+
+}
+
+var text = null;
+var grd;
+
+function create() {
+
+    game.stage.setBackgroundColor(0x2d2d2d);
+
+}
+
+function createText() {
+
+    text = game.add.text(game.world.centerX, game.world.centerY - 150, "- phaser -\n나눔 고딕 웹 폰트\ngoogle web fonts");
+    text.anchor.setTo(0.5);
+
+    // text.font = 'Nanum Gothic';
+    text.fontSize = 60;
+
+    text2 = game.add.text(game.world.centerX, game.world.centerY, "기본 default 글꼴");
+    text2.anchor.setTo(0.5);
+
+    // text2.font = 'Nanum Brush Script';
+    text2.fontSize = 60;
+
+    text3 = game.add.text(game.world.centerX, game.world.centerY + 150, "- phaser -\n나눔 고딕 웹 폰트\ngoogle web fonts");
+    text3.anchor.setTo(0.5);
+
+    text3.font = 'Nanum Brush Script';
+    text3.fontSize = 60;
+
+    //  x0, y0 - x1, y1
+    grd = text.context.createLinearGradient(0, 0, 0, text.canvas.height);
+    grd.addColorStop(0, '#8ED6FF');   
+    grd.addColorStop(1, '#004CB3');
+    text.fill = grd;
+
+    text.align = 'center';
+    text.stroke = '#000000';
+    text.strokeThickness = 2;
+    text.setShadow(5, 5, 'rgba(0,0,0,0.5)', 5);
+
+    text.inputEnabled = true;
+    text.input.enableDrag();
+
+    text.events.onInputOver.add(over, this);
+    text.events.onInputOut.add(out, this);
+
+}
+
+function out() {
+
+    text.fill = grd;
+
+}
+
+function over() {
+
+    text.fill = '#ff00ff';
+
+}