Add: Google webfonts

2019-07-21 00:08:24 +09:00
parent 841afa6c1c
commit 72a8a39770
4 changed files with 420 additions and 241 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="./google_webfonts.js"></script>
+	</head>
+
+	<body>
+		<div id="google_webfonts" style="text-align:center;" />
+	</body>
+</html>
@@ -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';
+
+}