Search the Community

Hello. I have never used external fonts in phaser. I have no idea on how to use fonts I find over the internet. I would like to write with this font. I just don't get it how to do it. The file you download is a png.? Can someone help me? I searched but didn't understand what to do...

I've noticed a small visual bug with the menu I have. When I startup the game for the first time in the browser (in a private window with no cookies), the "label" objects have their fonts properly display but the "button" objects do not. The buttons appear to display the default font instead. However, once I have refreshed the page at least once, all fonts display properly for every subsequent refresh. So this has me thinking that the font is not loading into the button object fast enough before it's drawn the first time and I'm wondering how I can fix that. Here's some relevant code: This function is responsible for creating the PIXI.Text for my custom label class. Renderer.prototype.setLabelGraphic = function(label){ let message = label.text; let style = this.textStyles[label.textStyle]; let text = new PIXI.Text(message, style); label.graphic = text; }; This function is responsible for creating the PIXI.Text and Rectangle for my custom button class. Renderer.prototype.setButtonGraphic = function(button){ let minimumWidth = 150; let minimumHeight = 50; let container = new PIXI.Container(); // Create label component. let message = button.text; let textStyle = this.textStyles[button.textStyle]; let text = new PIXI.Text(message, textStyle); // Create button component. let rectangle = this.configureButtonRect(button.style); let rectangleWidth = (text.width < minimumWidth) ? minimumWidth : text.width; let rectangleHeight = (text.height < minimumHeight) ? minimumHeight: text.height; rectangle.drawRect(0, 0, rectangleWidth, rectangleHeight); rectangle.endFill(); // Center text within containing rectangle. let center = [(rectangleWidth / 2) - (text.width / 2), (rectangleHeight / 2) - (text.height / 2)] text.position.set(center[0], center[1]); // Combine them into the container. container.addChild(rectangle); container.addChild(text); button.graphic = container; }; The configureButtonRect in the previous: Renderer.prototype.configureButtonRect = function(buttonStyle){ let rectangle = new PIXI.Graphics(); let colour; if(buttonStyle === "default"){ colour = 0xFFBF75; rectangle.lineStyle(2, 0xCA826C, 1); } else console.error(`Error configuring button rectangle: {buttonStyle} is not a valid button style.`); rectangle.beginFill(colour); return rectangle; }; Drawing of either object is simply add their respective graphic attribute to the stage. I feel that the solution is to simply just have the game wait for the fonts load before adding to the container via promises or callbacks, but I'm not exactly sure which part of the code would be responsible for the delay.

Hello! I have a custom font that I create and I want to test it before being downloaded as an archive. At the moment of the test, I do not have a font file to load it using the BitmapText(text, OPTIONS) functionality. I was wondering if I can load it directly from an xml data string or blob or data url. I checked the official documentation (BitmapFont, BitmapFontLoader), but it is unclear to me if that will work. I would greatly appreciate an example, handling custom fonts is scarce on the internet. Thank you!

Hello everyone! My current game supports multi language. You can change your language on the fly(dynamically) .Until now, i got only English,Russian,Turkey and i have no problem with them, when user selects some of them, all of the texts are updated for the certain language.But now, i add Japanese, and when user selects Japanese, game freezes for 5 seconds. The font i am using is Oswald. I am using Phaser.Text , instead bitmapText. I know that for dynamically changing texts is better to use bitmapText, but bitmapFonts are huge in size (especially Japanese). Can someone help me finding the answer why Japanese is causing such problem ? Thank you !

Hi everyone. I wanted to see if there was a good tool for creating bitmap fonts for games. One that can get an image created in Photoshop or Illustrator of a custom stylized font character set and create a sprite based bitmap font. I've used Shoebox for a long time, but it hasn't been updated for a few years and it's made in Adobe Air. Is there a more modern and better alternative that doesn't rely on Adobe Air? I've seen other tools that takes windows fonts and let's you create limited styling on them, but that's not what I'm looking for. Any help would be appreciated.

I have had a look for any references about loading fonts but haven't come across any. I imagine it's pretty easy/obvious but no luck so far... any help?

Hey everyone! My name is Rita. I am a freelance animator and illustrator. I have focussed on Animation over the last four years, coming from Illustration and Fine Arts background. I am a professional artist of academic training and more than 10 years of freelance experience, working in versatile media. I work with both traditional and digital tools, in particular seeking to achieve collaboration between the two. I am a big fan of aesthetics with passion for detail and high-quality craft. In the process of animation, my favourite stages are character and background design. To help you get a better sense of my skills and fit, my selected work can be found here: · My website: http://www.smallinkart.com. · My showreel: https://vimeo.com/224053115. Extracts from my creative portfolio: https://www.behance.net/Small_ink. Services I provide: - Concept design - Animation - Photography - Illustration - Character Design - Background Design - Gaming Props / Assets - Hand Painted Texture - Motion Design - Logo Design - Hand Painted Fonts Contact Details: web: http://www.smallinkart.com email: [email protected]

I have looked at the examples and have looked at the forum link: http://www.html5gamedevs.com/topic/2214-how-to-use-a-tffotf-font-with-phaser/ ... but I still do not know how, exactly, to specify an arbitrary font/webfont in phaser. Let's say, for example that I wanted to use a font found on google? What function calls do I need to make? What assets do I need to have? What does my HTML have to look like? What has to be exactly in the JAVASCRIPT file? The examples for Phaser are not helping me I must be a dummy!

Hi, I have read quite a few posts on the subject, so I know this has been mentioned a lot, but I didn't find a good solution for this. I'm loading Google webfont from within the game using WebFontConfig: WebFontConfig = { google: { families: ['Roboto'] } }; and: game.load.script('webfont', '//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js'); I can set a text to use the google font (Roboto, for example) without a problem, but I can't set its weight. I believe it defaults to 400. I know that using .fontWeight won't work, so I tried as someone offered in another post: {font: '100 20px Roboto'} but it won't work either (it actually resets the text font to the default browser font). I also tried loading specifically Roboto:100,400 in the WebFontConfig but that doesn't work either. Any suggestions?

First of all I would like to say that I've read all topics and issues on github, related to this problem and it didn't help me. I've checked PIXI.RESOLUTION, antialiasing, different fonts (google web fonts, system fonts), colors, etc and anyway I am still getting blurry text. And when I apply a little scaling to canvas It gets even worse. Examples how it looks without scaling and with scaling I attached. Would like to hear any advice on subject. Thanks in advance!

I'm trying to build a native app with cocoon and canvas+ and have some trouble with the fonts. Everything works fine when running the game in a normal browser or in cocoon webview+. But in canvas+ mode, all text renders really small and pixelated. The code for the text: this.scoreText = this.game.add.text(pos.x, pos.y, "0", { font: "18px Arial", fontWeight: 'bold', fill: "#FFFFFF" }); this.scoreText.anchor.setTo(0.5, 0); I don't reference a .ttf or anything. Do I explicitly need to include an Arial font for it to work in canvas+ mode?

hi everyone, do you know a way to create or add cool fonts to my games? for free i mean. i want them to work on every browser and as a native app to android. i hear about squirrelfont.com but dont know how to use it. any help will be appreciated

Is there a way for the Text2D primitive in Canvas2D to load Google Web Fonts? Or any custom font for that matter. It seems to use it only when the font is loaded on your local system. It doesn't use the font that the page loads from Google. Thanks!

Hi all, I was experimenting with techniques for Web Font preloading and ended up writing an article ("Web Font preloading for HTML5 games") with my findings, along with some demos working in Phaser. There are several ways to detect whether a font has been loaded or not (like rendering a text in a DOM element and check for size/scrolls events, etc.), as well as a proper, standard JavaScript API that as of today, only a few browsers have implemented (Firefox, Chrome and Opera). There are several third-party libraries out there (like TypeKit's Loader, FontFace Observer, etc.) which use this JavaScript Font Loading API and do a fallback to workarounds if browsers don't support it. The problem is that Phaser's loader does not integrate anything like this, so right now you need to bypass the loader entirely and keep the font loading separate from other assets loading. This might cause some problems because once your game state hits create the font might not be loaded yet. This demo shows this technique by introducing some flags that delay text rendering until both the preload phase and the font load have been completed. If you'd like to integrate the font loading inside Phaser's preload phase, you'd need to write your custom loader extending Phaser.Loader. My own version of this custom loader involves modifying one internal Phaser.Loader method, which is not ideal and might break in future Phaser's releases. In the article I describe with more detail all of this, so if you are interested check it out. Now, looking into the future… Since WebFonts is the only way we have to render text with our own TTF files, I'd love for Phaser to acknowledge this and offer a way to load these TTF (or woff2, or whatever) files like the other assets. Since the JS API is not implemented in some major browsers yet (like Edge, or Safari), if we were to include this now, we'd need to use a third-party library, which would bump Phaser's build file –which is already big. A lightweight library would be FontFace Observer, which is ~5KB (1.5KB less without the Promise polyfill). I can see @photonstorm not wanting to make Phaser bigger, so my proposals would be: Include one of these libraries in a custom Phaser build. If a users selects that build, a method to load webfonts would be added to Phaser.Loader. Make Phaser.Loader a bit more flexible, so people can implement their own custom loading, without the need to overwrite an internal method. A way to queue an asset and tell the loader when it has been finished or not (via events) would be really helpful. (NOTE: if this is already possible please someone tell me how). Ignore this feature for Phaser and pray that the Font Loading API is implemented by all major browsers when Lazer is out. Make the Phaser.Loader use this API in a method that can load webfonts. I'm happy to contribute code and make a PR if Richard thinks any of these approaches is OK. Does anybody have other suggestion to make webfont loading happening in Phaser? Also, the this Google Fonts example in Phaser is kind of broken because it introduces an arbitrary delay of one second to render the text. By using two flags (one for when the create phase has started, and one for when the font has been loaded) we don't need this delay. Would it be OK to submit a PR to fix this example? Thanks!

I am struggling to make Phaser text field show special characters like these: [ {"str":"ā","codeValue":257,"analog":"-a", "analogCodes": [45, 97]}, {"str":"ī","codeValue":299,"analog":"-i", "analogCodes": [45, 105]}, {"str":"ū","codeValue":363,"analog":"-u", "analogCodes": [45, 117]}, {"str":"ṛ","codeValue":7771,"analog":"r.", "analogCodes": [114, 46]}, {"str":"ṝ","codeValue":7773,"analog":"-r.", "analogCodes": [45, 114, 46]}, {"str":"ḷ","codeValue":7735,"analog":"l.", "analogCodes": [108, 46]}, {"str":"ḹ","codeValue":7737,"analog":"-l.", "analogCodes": [45, 108, 46]}, {"str":"ṁ","codeValue":7745,"analog":".m", "analogCodes": [46, 109]}, {"str":"ṃ","codeValue":7747,"analog":"m.", "analogCodes": [109, 46]}, {"str":"ḥ","codeValue":7717,"analog":"h.", "analogCodes": [104, 46]}, {"str":"ñ","codeValue":241,"analog":"~n", "analogCodes": [126, 110]}, {"str":"ṅ","codeValue":7749,"analog":".n", "analogCodes": [46, 110]}, {"str":"ṭ","codeValue":7789,"analog":"t.", "analogCodes": [116, 46]}, {"str":"ḍ","codeValue":7693,"analog":"d.", "analogCodes": [100, 46]}, {"str":"ṇ","codeValue":7751,"analog":"n.", "analogCodes": [110, 46]}, {"str":"ś","codeValue":347,"analog":"'s", "analogCodes": [39, 115]}, {"str":"ṣ","codeValue":7779,"analog":"s.", "analogCodes": [115, 46]} ] People call them Sanskrit:IAST letters, romanic version for letters from Devanagari alphabet. Some of them are not show at all, apart from those that are near code 256. Ones that are bigger like 7773 or such are not shown. Which font should I use or are there some style settings I could use?

Hello, I did some searching, tried many solutions but none seems to work for me... I'm using Phaser 2.2.2. Here is my index.html: <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Tangerine"> <style type="text/css"> body{ font-family: 'Tangerine'; font-size: 32px; background: #ffffff; padding:0px; margin:0px; } </style> <script src="phaser.min.js"></script> <script src = "js/preload.js"></script> <script src = "js/intro.js"></script> <script src = "js/office.js"></script> </head> <body> <script type="text/javascript"> var game = new Phaser.Game(960, 540, 'PHASER.WEBGL'); game.state.add('Preload', MyGame.preload) game.state.add('Intro', MyGame.intro); game.state.add('Office', MyGame.office); game.state.start('Preload'); </script> </body> </html> Then I'm trying to use it in my Office state in init function like that: this.sheetText = game.add.text(380, 160, 'some text to display', {font: "14px Tangerine", fill: "#000000", align: "left"}); And it's not working, it is displaying some normal, default font... can somebody tell me what I'm doing wrong? Thanks for help

Hi, how to make bold BitMapText?

I'm using a custom font for my scene so I have some code like this: scene.textureContent.font = "44pt GillSansMTProExtraBold";The problem is if I'm not referencing that font via HTML then its not loaded and it defaults to Times New Roman. To get around this I created a hidden div with some text in it <div style="position:absolute; top:-200px; left:-200px; font: 22pt GillSansMTProExtraBold">hidden</div>I'm just wondering if there's a better way of doing this. Is there a way I can preload the font with javascript instead?

Im using @fontface to use .ttf fonts in phaser, however the app is hard crashing at startup with Cocoon using Canvas+. Webview+ works, but is really laggy so I want to avoid. In the style tag: @font-face { font-family: 'Munro'; src: url('fonts/Munro.ttf');}and an example of my text: scoreText = game.add.text(36, buttonY,'' + score, { font: '28px Munro', fill: 'white'});Cocoon supports fontface, so I'm unsure what could be causing the problem. Does anyone know how to fix, or has had similar problems? Thanks!

I would put my own fonts in game. How would be the way to go? How I can load fonts from a resource folder of my game?

I am working on a game - and the design requires the font to use "italic light" and also have an outline gradient blue and transparent. http://jsfiddle.net/N476t/10/ I've recreated this example in jsfiddle with arial. I'm adding in a score at the end of this pixijs game. I have the standard parameters here - but the design calls for an outerglow around the letters is there a way to do this?http://www.goodboydigital.com/pixijs/docs/classes/Text.html this.txtRankingOverall = new PIXI.Text("" + GameControl.score, { font: "120px FSJoeyLtIt", fill: "#ffffff", align: "center" }); I'm also having issues trying to match the font - it needs to be italic light this.txtRankingToday = new PIXI.Text("46", { font: "italic 120px FSJoeyLtIt", fill: "#ffffff", align: "center", style: "light" });javascript

I'm wondering how do you guys handle fonts in HTML games. In Android it's just a matter of put the TTF in assets folder and load them. Regards.