Add: Google webfonts
This commit is contained in:
@@ -3,10 +3,31 @@
|
|||||||
|
|
||||||
var CONTENT_ID = "MainMenu";
|
var CONTENT_ID = "MainMenu";
|
||||||
|
|
||||||
|
|
||||||
var game = new Phaser.Game(
|
var game = new Phaser.Game(
|
||||||
GAME_SCREEN_SIZE.x, GAME_SCREEN_SIZE.y,
|
GAME_SCREEN_SIZE.x, GAME_SCREEN_SIZE.y,
|
||||||
Phaser.CANVAS, CONTENT_ID
|
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');
|
game.state.start('MainMenu');
|
||||||
|
|
||||||
|
function fontLoaded() {
|
||||||
|
console.log("fontLoaded #1");
|
||||||
|
mainMenu.fontLoaded();
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
+268
-229
@@ -1,246 +1,285 @@
|
|||||||
var MainMenu = {
|
MainMenu.prototype = Object.create(Phaser.State.prototype);
|
||||||
|
MainMenu.constructor = MainMenu;
|
||||||
|
|
||||||
preload: function() {
|
function MainMenu() {
|
||||||
game.load.image('tile_choco', '../../../resources/image/background/tile_choco.png');
|
}
|
||||||
game.load.image('icon_fullscreen', '../../../resources/image/icon/fullscreen_white.png');
|
|
||||||
},
|
|
||||||
|
|
||||||
create: function() {
|
MainMenu.prototype.preload = function() {
|
||||||
game.stage.backgroundColor = '#4d4d4d';
|
// 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');
|
||||||
|
}
|
||||||
|
|
||||||
// keyboard shortcut
|
// fontLoaded, create method for Google WebFonts test
|
||||||
this.keyboardShortcut = new KeyboardShortcut();
|
/*
|
||||||
this.keyboardShortcut.addCallback(
|
MainMenu.prototype.fontLoaded = function() {
|
||||||
Phaser.KeyCode.ESC, // keyCode
|
console.log("fontLoaded");
|
||||||
null, // keyDownHandler
|
|
||||||
(function() { this.back(); }).bind(this), // keyUpHandler
|
// this.loadingImage.alpha = 0;
|
||||||
"menu_app" // callerClassName
|
|
||||||
|
// this.text.font = 'Nanum Gothic';
|
||||||
|
// text2.font = 'Nanum Brush Script';
|
||||||
|
// this.text3.font = 'Nanum Brush Script';
|
||||||
|
}
|
||||||
|
|
||||||
|
MainMenu.prototype.create = function() {
|
||||||
|
console.log("create");
|
||||||
|
|
||||||
|
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(
|
||||||
|
Phaser.KeyCode.ESC, // keyCode
|
||||||
|
null, // keyDownHandler
|
||||||
|
(function() { this.back(); }).bind(this), // keyUpHandler
|
||||||
|
"menu_app" // callerClassName
|
||||||
|
);
|
||||||
|
|
||||||
|
// bg
|
||||||
|
game.add.graphics()
|
||||||
|
.beginFill(MainColor.LIGHT_CHOCO_HEX, 1)
|
||||||
|
.drawRect(0, 0,GAME_SCREEN_SIZE.x, GAME_SCREEN_SIZE.y);
|
||||||
|
|
||||||
|
// top ui
|
||||||
|
// var screenTopUI = new ScreenTopUI();
|
||||||
|
// screenTopUI.makeBackButton( (function() { this.back(); }).bind(this) );
|
||||||
|
// screenTopUI.makeFullScreenButton();
|
||||||
|
// this.loadAllowEditEnterCode(screenTopUI);
|
||||||
|
|
||||||
|
|
||||||
|
// bottom ui
|
||||||
|
var screenBottomUI = new ScreenBottomUI();
|
||||||
|
// ScreenBottomUI.printLeftText("게임 진행 정보");
|
||||||
|
// var playingAppName = appInfoManager.getAppNameKorean(sessionStorageManager.playingAppName);
|
||||||
|
// ScreenBottomUI.printCenterText(playingAppName);
|
||||||
|
screenBottomUI.printCenterText("메뉴");
|
||||||
|
screenBottomUI.printRightText(sessionStorageManager.getPlayerName());
|
||||||
|
|
||||||
|
new WelcomePlayerText(sessionStorageManager.getPlayerName());
|
||||||
|
if(isExperiencePlayerAccount()) {
|
||||||
|
game.time.events.add(Phaser.Timer.SECOND * 2.5,
|
||||||
|
(function() { new NoticeExperiencePlayerText(); } ),
|
||||||
|
this
|
||||||
);
|
);
|
||||||
|
}
|
||||||
// bg
|
|
||||||
game.add.graphics()
|
|
||||||
.beginFill(MainColor.LIGHT_CHOCO_HEX, 1)
|
|
||||||
.drawRect(0, 0,GAME_SCREEN_SIZE.x, GAME_SCREEN_SIZE.y);
|
|
||||||
|
|
||||||
// top ui
|
|
||||||
// var screenTopUI = new ScreenTopUI();
|
|
||||||
// screenTopUI.makeBackButton( (function() { this.back(); }).bind(this) );
|
|
||||||
// screenTopUI.makeFullScreenButton();
|
|
||||||
// this.loadAllowEditEnterCode(screenTopUI);
|
|
||||||
|
|
||||||
|
|
||||||
// bottom ui
|
this.loadAppData();
|
||||||
var screenBottomUI = new ScreenBottomUI();
|
}
|
||||||
// ScreenBottomUI.printLeftText("게임 진행 정보");
|
|
||||||
// var playingAppName = appInfoManager.getAppNameKorean(sessionStorageManager.playingAppName);
|
|
||||||
// ScreenBottomUI.printCenterText(playingAppName);
|
|
||||||
screenBottomUI.printCenterText("메뉴");
|
|
||||||
screenBottomUI.printRightText(sessionStorageManager.getPlayerName());
|
|
||||||
|
|
||||||
new WelcomePlayerText(sessionStorageManager.getPlayerName());
|
MainMenu.prototype.back = function() {
|
||||||
if(isExperiencePlayerAccount()) {
|
sessionStorageManager.clear();
|
||||||
game.time.events.add(Phaser.Timer.SECOND * 2.5,
|
location.href = '../../web/client/login.html';
|
||||||
(function() { new NoticeExperiencePlayerText(); } ),
|
}
|
||||||
this
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
MainMenu.prototype.loadAllowEditEnterCode = function(screenTopUI) {
|
||||||
|
var dbConnectManager = new DBConnectManager();
|
||||||
|
dbConnectManager.requestAllowEditEnterCode(
|
||||||
|
sessionStorageManager.getMaestroID(),
|
||||||
|
|
||||||
this.loadAppData();
|
(function(replyJSON) {
|
||||||
},
|
if(replyJSON["AllowEditEnterCode"] == "1") {
|
||||||
|
screenTopUI.makeSetupButton( (function() {
|
||||||
|
console.log("setup");
|
||||||
|
location.href = '../../web/client/setup.html';
|
||||||
|
}).bind(this) );
|
||||||
|
}
|
||||||
|
}).bind(this),
|
||||||
|
|
||||||
back: function() {
|
(function(replyJSON) {
|
||||||
sessionStorageManager.clear();
|
this.loadFailed(replyJSON);
|
||||||
location.href = '../../web/client/login.html';
|
}).bind(this)
|
||||||
},
|
);
|
||||||
|
}
|
||||||
|
|
||||||
loadAllowEditEnterCode: function(screenTopUI) {
|
MainMenu.prototype.loadAppData = function() {
|
||||||
var dbConnectManager = new DBConnectManager();
|
var dbConnectManager = new DBConnectManager();
|
||||||
dbConnectManager.requestAllowEditEnterCode(
|
dbConnectManager.requestMenuAppList(
|
||||||
sessionStorageManager.getMaestroID(),
|
sessionStorageManager.getMaestroID(),
|
||||||
|
(function(replyJSON) {
|
||||||
|
this.loadSucceeded(replyJSON);
|
||||||
|
}).bind(this),
|
||||||
|
(function(replyJSON) {
|
||||||
|
this.loadFailed(replyJSON);
|
||||||
|
}).bind(this)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
(function(replyJSON) {
|
MainMenu.prototype.loadSucceeded = function(replyJSON) {
|
||||||
if(replyJSON["AllowEditEnterCode"] == "1") {
|
// console.log(replyJSON);
|
||||||
screenTopUI.makeSetupButton( (function() {
|
|
||||||
console.log("setup");
|
|
||||||
location.href = '../../web/client/setup.html';
|
|
||||||
}).bind(this) );
|
|
||||||
}
|
|
||||||
}).bind(this),
|
|
||||||
|
|
||||||
(function(replyJSON) {
|
this.makeMouseAppButtons(
|
||||||
this.loadFailed(replyJSON);
|
replyJSON.MouseAppList,
|
||||||
}).bind(this)
|
replyJSON.MouseActiveAppList
|
||||||
|
);
|
||||||
|
this.makeTypingButtons(
|
||||||
|
replyJSON.TypingPracticeAppCount,
|
||||||
|
replyJSON.TypingTestAppCount,
|
||||||
|
replyJSON.TypingAppList,
|
||||||
|
replyJSON.TypingActiveAppList
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
MainMenu.prototype.hasApp = function(appID, appList) {
|
||||||
|
for(var i = 0; i < appList.length; i++) {
|
||||||
|
if(appList[i].AppID === appID)
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
MainMenu.prototype.makeMouseAppButtons = function(appList, activeAppList) {
|
||||||
|
// console.log(appList);
|
||||||
|
|
||||||
|
var mouseAppCount = Object.keys(appList).length;
|
||||||
|
|
||||||
|
for(var i = 0; i < mouseAppCount; i++) {
|
||||||
|
var posX = this.getButtonPosX(i, mouseAppCount);
|
||||||
|
var posY = this.getButtonPosY(i, mouseAppCount, GameAppButton.BUTTON_UPPER_POS_Y);
|
||||||
|
|
||||||
|
var app = appList[i];
|
||||||
|
var gameAppButton = new GameAppButton(
|
||||||
|
posX, posY,
|
||||||
|
GameAppButton.TYPE_MOUSE_APP,
|
||||||
|
RoundRectButton.NONE_ICON, app.KoreanName,
|
||||||
|
{
|
||||||
|
AppID: app.AppID,
|
||||||
|
AppName: app.AppName,
|
||||||
|
KoreanName: app.KoreanName
|
||||||
|
}
|
||||||
);
|
);
|
||||||
},
|
gameAppButton.text.font = "Nanum Brush Script";
|
||||||
|
|
||||||
loadAppData: function() {
|
if(!this.hasApp(app.AppID, activeAppList))
|
||||||
var dbConnectManager = new DBConnectManager();
|
gameAppButton.setInputEnabled(false);
|
||||||
dbConnectManager.requestMenuAppList(
|
|
||||||
sessionStorageManager.getMaestroID(),
|
|
||||||
(function(replyJSON) {
|
|
||||||
this.loadSucceeded(replyJSON);
|
|
||||||
}).bind(this),
|
|
||||||
(function(replyJSON) {
|
|
||||||
this.loadFailed(replyJSON);
|
|
||||||
}).bind(this)
|
|
||||||
);
|
|
||||||
},
|
|
||||||
|
|
||||||
loadSucceeded: function(replyJSON) {
|
|
||||||
// console.log(replyJSON);
|
|
||||||
|
|
||||||
this.makeMouseAppButtons(
|
|
||||||
replyJSON.MouseAppList,
|
|
||||||
replyJSON.MouseActiveAppList
|
|
||||||
);
|
|
||||||
this.makeTypingButtons(
|
|
||||||
replyJSON.TypingPracticeAppCount,
|
|
||||||
replyJSON.TypingTestAppCount,
|
|
||||||
replyJSON.TypingAppList,
|
|
||||||
replyJSON.TypingActiveAppList
|
|
||||||
);
|
|
||||||
},
|
|
||||||
|
|
||||||
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) {
|
|
||||||
// console.log(appList);
|
|
||||||
|
|
||||||
var mouseAppCount = Object.keys(appList).length;
|
|
||||||
|
|
||||||
for(var i = 0; i < mouseAppCount; i++) {
|
|
||||||
var posX = this.getButtonPosX(i, mouseAppCount);
|
|
||||||
var posY = this.getButtonPosY(i, mouseAppCount, GameAppButton.BUTTON_UPPER_POS_Y);
|
|
||||||
|
|
||||||
var app = appList[i];
|
|
||||||
var gameAppButton = new GameAppButton(
|
|
||||||
posX, posY,
|
|
||||||
GameAppButton.TYPE_MOUSE_APP,
|
|
||||||
RoundRectButton.NONE_ICON, app.KoreanName,
|
|
||||||
{
|
|
||||||
AppID: app.AppID,
|
|
||||||
AppName: app.AppName,
|
|
||||||
KoreanName: app.KoreanName
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
if(!this.hasApp(app.AppID, activeAppList))
|
|
||||||
gameAppButton.setInputEnabled(false);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
makeTypingButtons: function(typingPracticeAppCount, typingTestAppCount, appList, activeAppList) {
|
|
||||||
// console.log(typingPracticeAppCount);
|
|
||||||
// console.log(typingTestAppCount);
|
|
||||||
// console.log(appList);
|
|
||||||
|
|
||||||
var isTypingPracticeAppExist = typingPracticeAppCount > 0 ? true : false;
|
|
||||||
var isTypingTestAppExist = typingTestAppCount > 0 ? true : false;
|
|
||||||
|
|
||||||
var typingAppTotalCount = Object.keys(appList).length;
|
|
||||||
var typingAppIndex = 0;
|
|
||||||
|
|
||||||
|
|
||||||
// typing tab buttons
|
|
||||||
var typingPracticeTabButton = new TypingTabButton(
|
|
||||||
TypingTabButton.PRACTICE_BUTTON_POS_X, TypingTabButton.BUTTON_POS_Y,
|
|
||||||
"", "타자 연습",
|
|
||||||
(function() {
|
|
||||||
location.href = '../../web/client/menu_typing_practice.html';
|
|
||||||
})
|
|
||||||
);
|
|
||||||
if(typingPracticeAppCount === 0)
|
|
||||||
typingPracticeTabButton.setInputEnabled(false);
|
|
||||||
|
|
||||||
var typingTestTabButton = new TypingTabButton(
|
|
||||||
TypingTabButton.TEST_BUTTON_POS_X, TypingTabButton.BUTTON_POS_Y,
|
|
||||||
"", "타자 시험",
|
|
||||||
(function() {
|
|
||||||
location.href = '../../web/client/menu_typing_test.html';
|
|
||||||
})
|
|
||||||
);
|
|
||||||
if(typingTestAppCount === 0)
|
|
||||||
typingTestTabButton.setInputEnabled(false);
|
|
||||||
|
|
||||||
|
|
||||||
// typing app buttons
|
|
||||||
for(var typingButtonIndex = 0; typingButtonIndex < typingAppTotalCount; typingButtonIndex++) {
|
|
||||||
|
|
||||||
var posX = this.getButtonPosX(
|
|
||||||
typingButtonIndex, typingAppTotalCount
|
|
||||||
);
|
|
||||||
var posY = this.getButtonPosY(
|
|
||||||
typingButtonIndex, typingAppTotalCount, GameAppButton.BUTTON_LOWER_POS_Y
|
|
||||||
);
|
|
||||||
|
|
||||||
var app = appList[typingAppIndex];
|
|
||||||
var isKoreanTypingApp = app.AppID < 32 ? true : false;
|
|
||||||
|
|
||||||
var gameAppButton = new GameAppButton(
|
|
||||||
posX, posY, GameAppButton.TYPE_TYPING_APP,
|
|
||||||
RoundRectButton.NONE_ICON, // "icon_fullscreen",
|
|
||||||
// (isKoreanTypingApp ? "(한글)" : "(영문)") + "\n" + app.KoreanName,
|
|
||||||
app.KoreanName,
|
|
||||||
{
|
|
||||||
AppID: app.AppID,
|
|
||||||
AppName: app.AppName,
|
|
||||||
KoreanName: app.KoreanName
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
if(!this.hasApp(app.AppID, activeAppList))
|
|
||||||
gameAppButton.setInputEnabled(false);
|
|
||||||
|
|
||||||
typingAppIndex++;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
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);
|
|
||||||
var rowCount = Math.ceil(buttonCount / maxColumnNum);
|
|
||||||
// console.log("rowCount : " + rowCount);
|
|
||||||
|
|
||||||
var columnIndex = index % maxColumnNum;
|
|
||||||
// console.log("columnIndex : " + columnIndex);
|
|
||||||
var rowIndex = Math.floor(index / maxColumnNum);
|
|
||||||
// console.log("rowIndex : " + rowIndex);
|
|
||||||
|
|
||||||
var columnCountForThisRow = 0;
|
|
||||||
if(rowIndex < rowCount - 1)
|
|
||||||
columnCountForThisRow = maxColumnNum;
|
|
||||||
else
|
|
||||||
columnCountForThisRow = buttonCount - (maxColumnNum * rowIndex);
|
|
||||||
// console.log("columnCountForThisRow : " + columnCountForThisRow);
|
|
||||||
|
|
||||||
var startX = game.world.width / 2 - ( (gap / 2) * (columnCountForThisRow - 1) );
|
|
||||||
return startX + gap * columnIndex;
|
|
||||||
},
|
|
||||||
|
|
||||||
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);
|
|
||||||
var rowCount = Math.ceil(buttonCount / maxColumnNum);
|
|
||||||
// console.log("rowCount : " + rowCount);
|
|
||||||
|
|
||||||
var rowIndex = Math.floor(index / maxColumnNum);
|
|
||||||
// console.log("rowIndex : " + rowIndex);
|
|
||||||
|
|
||||||
var startY = startPosY - ( (gap / 2) * (rowCount - 1) );
|
|
||||||
return startY + gap * rowIndex;
|
|
||||||
},
|
|
||||||
|
|
||||||
loadFailed: function(replyJSON) {
|
|
||||||
// console.log('login failed, jsonData : ' + JSON.stringify(replyJSON));
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
MainMenu.prototype.makeTypingButtons = function(typingPracticeAppCount, typingTestAppCount, appList, activeAppList) {
|
||||||
|
// console.log(typingPracticeAppCount);
|
||||||
|
// console.log(typingTestAppCount);
|
||||||
|
// console.log(appList);
|
||||||
|
|
||||||
|
var isTypingPracticeAppExist = typingPracticeAppCount > 0 ? true : false;
|
||||||
|
var isTypingTestAppExist = typingTestAppCount > 0 ? true : false;
|
||||||
|
|
||||||
|
var typingAppTotalCount = Object.keys(appList).length;
|
||||||
|
var typingAppIndex = 0;
|
||||||
|
|
||||||
|
|
||||||
|
// typing tab buttons
|
||||||
|
var typingPracticeTabButton = new TypingTabButton(
|
||||||
|
TypingTabButton.PRACTICE_BUTTON_POS_X, TypingTabButton.BUTTON_POS_Y,
|
||||||
|
"", "타자 연습",
|
||||||
|
(function() {
|
||||||
|
location.href = '../../web/client/menu_typing_practice.html';
|
||||||
|
})
|
||||||
|
);
|
||||||
|
if(typingPracticeAppCount === 0)
|
||||||
|
typingPracticeTabButton.setInputEnabled(false);
|
||||||
|
|
||||||
|
var typingTestTabButton = new TypingTabButton(
|
||||||
|
TypingTabButton.TEST_BUTTON_POS_X, TypingTabButton.BUTTON_POS_Y,
|
||||||
|
"", "타자 시험",
|
||||||
|
(function() {
|
||||||
|
location.href = '../../web/client/menu_typing_test.html';
|
||||||
|
})
|
||||||
|
);
|
||||||
|
if(typingTestAppCount === 0)
|
||||||
|
typingTestTabButton.setInputEnabled(false);
|
||||||
|
|
||||||
|
|
||||||
|
// typing app buttons
|
||||||
|
for(var typingButtonIndex = 0; typingButtonIndex < typingAppTotalCount; typingButtonIndex++) {
|
||||||
|
|
||||||
|
var posX = this.getButtonPosX(
|
||||||
|
typingButtonIndex, typingAppTotalCount
|
||||||
|
);
|
||||||
|
var posY = this.getButtonPosY(
|
||||||
|
typingButtonIndex, typingAppTotalCount, GameAppButton.BUTTON_LOWER_POS_Y
|
||||||
|
);
|
||||||
|
|
||||||
|
var app = appList[typingAppIndex];
|
||||||
|
var isKoreanTypingApp = app.AppID < 32 ? true : false;
|
||||||
|
|
||||||
|
var gameAppButton = new GameAppButton(
|
||||||
|
posX, posY, GameAppButton.TYPE_TYPING_APP,
|
||||||
|
RoundRectButton.NONE_ICON, // "icon_fullscreen",
|
||||||
|
// (isKoreanTypingApp ? "(한글)" : "(영문)") + "\n" + app.KoreanName,
|
||||||
|
app.KoreanName,
|
||||||
|
{
|
||||||
|
AppID: app.AppID,
|
||||||
|
AppName: app.AppName,
|
||||||
|
KoreanName: app.KoreanName
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
if(!this.hasApp(app.AppID, activeAppList))
|
||||||
|
gameAppButton.setInputEnabled(false);
|
||||||
|
|
||||||
|
typingAppIndex++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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);
|
||||||
|
var rowCount = Math.ceil(buttonCount / maxColumnNum);
|
||||||
|
// console.log("rowCount : " + rowCount);
|
||||||
|
|
||||||
|
var columnIndex = index % maxColumnNum;
|
||||||
|
// console.log("columnIndex : " + columnIndex);
|
||||||
|
var rowIndex = Math.floor(index / maxColumnNum);
|
||||||
|
// console.log("rowIndex : " + rowIndex);
|
||||||
|
|
||||||
|
var columnCountForThisRow = 0;
|
||||||
|
if(rowIndex < rowCount - 1)
|
||||||
|
columnCountForThisRow = maxColumnNum;
|
||||||
|
else
|
||||||
|
columnCountForThisRow = buttonCount - (maxColumnNum * rowIndex);
|
||||||
|
// console.log("columnCountForThisRow : " + columnCountForThisRow);
|
||||||
|
|
||||||
|
var startX = game.world.width / 2 - ( (gap / 2) * (columnCountForThisRow - 1) );
|
||||||
|
return startX + gap * columnIndex;
|
||||||
|
}
|
||||||
|
|
||||||
|
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);
|
||||||
|
var rowCount = Math.ceil(buttonCount / maxColumnNum);
|
||||||
|
// console.log("rowCount : " + rowCount);
|
||||||
|
|
||||||
|
var rowIndex = Math.floor(index / maxColumnNum);
|
||||||
|
// console.log("rowIndex : " + rowIndex);
|
||||||
|
|
||||||
|
var startY = startPosY - ( (gap / 2) * (rowCount - 1) );
|
||||||
|
return startY + gap * rowIndex;
|
||||||
|
}
|
||||||
|
|
||||||
|
MainMenu.prototype.loadFailed = function(replyJSON) {
|
||||||
|
// console.log('login failed, jsonData : ' + JSON.stringify(replyJSON));
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
Executable
+87
@@ -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';
|
||||||
|
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user