Fix: load font in Login

src/game/login/login.js

@@ -1,11 +1,15 @@
-var Login = {
+Login.prototype = Object.create(Phaser.State.prototype);
+Login.constructor = Login;
 
-	preload: function() {
+function Login() {
+}
+
+Login.prototype.preload = function() {
 	game.load.image('icon_fullscreen', '../../../resources/image/icon/fullscreen_white.png');
 	game.load.image('icon_home', '../../../resources/image/icon/home.png');
-	},
+}
 
-	create: function() {
+Login.prototype.create = function() {
 	// sessionStorageManager.clear();	// receive maestro_name from player_login_with_maestro.php
 
 	this.game.stage.backgroundColor = '#4d4d4d';
@@ -55,39 +59,39 @@ var Login = {
 	this.makeStartButton(game.world.centerX, game.world.centerY + 100);
 
 	this.makeInfoText();
-	},
+}
 
-	back: function() {
+Login.prototype.back = function() {
 	sessionStorageManager.clear();
 	location.href = '../../web/main/index.html';
-	},
+}
 
-	makeMaestroNameText: function(x, y) {
+Login.prototype.makeMaestroNameText = function(x, y) {
 	this.makeTextField(x, y, "마에스트로 계정 :");
 	this.inputTextMaestroName = this.makeInputTypeText(x, y, "");
 	this.inputTextMaestroName.canvasInput.placeHolder("입력 후 [ Tab ]키를 누르세요");
-	},
+}
 
-	makeNameText: function(x, y) {
+Login.prototype.makeNameText = function(x, y) {
 	this.makeTextField(x, y, "이름 :");
 	this.inputTextName = this.makeInputTypeText(x, y, "");
 	this.inputTextName.canvasInput.placeHolder("입력 후 [ Tab ]키를 누르세요");
-	},
+}
 
-	makeEnterCodeText: function(x, y) {
+Login.prototype.makeEnterCodeText = function(x, y) {
 	this.makeTextField(x, y, "입장번호 :");
 	this.inputTextEnterCode = this.makeInputTypeText(x, y, "");
 	this.inputTextEnterCode.canvasInput.placeHolder("입력 후 [ Tab ]키를 누르세요");
-	},
+}
 
-	makeTextField: function(x, y, text) {
+Login.prototype.makeTextField = function(x, y, text) {
 	return game.add.text(x, y, text, this.textStyle)
 	.setTextBounds(0, 0, 200, 0)
 	.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2)
 	.boundsAlignH = 'right';
-	},
+}
 
-	makeInputTypeText: function(x, y, text) {
+Login.prototype.makeInputTypeText = function(x, y, text) {
 	var inputText = new InputTypeText(x + 420, y);
 	inputText.anchor.set(0.5);
 	inputText.canvasInput.value('');
@@ -101,9 +105,9 @@ var Login = {
 	}).bind(this);
 
 	return inputText;
-	},
+}
 
-	makeStartButton: function(x, y) {
+Login.prototype.makeStartButton = function(x, y) {
 	var setting = new RoundRectButtonSetting(x, y, 200, 100);
 	setting.fontStyle.fontWeight = "bold";
 
@@ -113,18 +117,18 @@ var Login = {
 		(function() { this.startMenu(); }).bind(this)
 	);
 	startButton.addShortcutText("Enter");
-	},
+}
 
-	makeInfoText: function(x, y) {
+Login.prototype.makeInfoText = function(x, y) {
 	var textStyle = { font: "30px Arial", fill: "#faa" };
 	this.infoText = game.add.text(game.world.centerX, 640, "", textStyle);
 	this.infoText.anchor.set(0.5);
 	this.infoText.stroke = "#333";
 	this.infoText.strokeThickness = 3;
-	},
+}
 
 
-	startMenu: function() {
+Login.prototype.startMenu = function() {
 	var maestroName = this.inputTextMaestroName.canvasInput._value;
 	sessionStorageManager.setPlayerName(this.inputTextName.canvasInput._value);
 	var enterCode = this.inputTextEnterCode.canvasInput._value;
@@ -155,9 +159,9 @@ var Login = {
 			this.loginFailed(jsonData);
 		}).bind(this)
 	);
-	},
+}
 
-	loginSucceeded: function(jsonData) {
+Login.prototype.loginSucceeded = function(jsonData) {
 	sessionStorageManager.setMaestroID(jsonData['MaestroID']);
 	sessionStorageManager.setMaestroAccountType(jsonData['MaestroAccountType']);
 	sessionStorageManager.setPlayerID(jsonData['PlayerID']);
@@ -170,9 +174,9 @@ var Login = {
 
 	// console.log("===== after login =====");
 	// console.log(sessionStorageManager.playerID);
-	},
+}
 
-	loginFailed: function(jsonData) {
+Login.prototype.loginFailed = function(jsonData) {
 	sessionStorageManager.clear();
 
 	// show retry message
@@ -182,5 +186,3 @@ var Login = {
 		this.infoText.text = jsonData["error"];
 	}
 }
-
-}

src/game/login/main.js

@@ -3,10 +3,34 @@
 
 var CONTENT_ID = "Login";
 
+
 var game = new Phaser.Game(
 	GAME_SCREEN_SIZE.x, GAME_SCREEN_SIZE.y,
 	Phaser.CANVAS, CONTENT_ID
 );
 
+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.1, fontLoaded, this); },
+
+	//  The Google Fonts we want to load (specify as many as you like in the array)
+	google: {
+		families: [
+			'Nanum Gothic:400, 700, 800',
+			'Nanum Gothic Coding:400,700',
+			// 'Nanum Brush Script',
+			// 'Nanum Pen Script'
+		]
+		// families: ['Nanum Brush Script']
+	}
+};
+
+var login = new Login();
 game.state.add('Login', Login);
 game.state.start('Login');
+
+function fontLoaded() {
+	login.fontLoaded();
+}

src/game/main_menu/main.js

@@ -34,4 +34,3 @@ game.state.start('MainMenu');
 function fontLoaded() {
 	mainMenu.fontLoaded();
 }
-