# Search the Community

Showing results for tags 'font'.

• ### Search By Tags

Type tags separated by commas.

### Forums

• HTML5 Game Coding
• News
• Game Showcase
• Web Gaming Standards
• Coding and Game Design
• Frameworks
• Phaser 3
• Phaser 2
• Pixi.js
• Babylon.js
• Panda 2
• melonJS
• General
• General Talk
• Collaborations (un-paid)
• Jobs (Hiring and Freelance)
• Services Offered

• 0 Replies

• 0 Views

Found 51 results

1. ## How can I convert a Microsoft OpenType font to bitmap?

Hey, all! I am new to game development and need some fonts in bitmap form. Can anyone take me to a site or program that takes OpenType fonts and converts them to bitmap? Thanks in advance!
2. ## Unable to change the color of BitmapText

I'm following the melonJS guides on space invaders and platformer. Tried to add a HUD component with score on it. Obtained the font files from their github: https://github.com/melonjs/tutorial-platformer/tree/28425a946836e21e58e8fbc443f380b990e7f527/tutorial_step6/data/fnt The text does show up, but it appears white, and I can't change the color on it. This is what I've tried: // 1 this.font = new me.BitmapText(0, 0, { font: "PressStart2P", fillStyle: "#000000", textAlign: "right", textBaseline: "bottom", }); // 2 this.font.tint.setColor(255, 128, 128); // 3
3. ## Fonts not working properly

Hi guys, Started using phaser recently for a game I am making. The only thing is, I'm trying to use a different (custom) font, something like this: https://www.google.com/fonts/specimen/Press+Start+2P Unfortunately I cannot get the font to work. I have two font files - a .png file and a .xml file (xml with config) generated by the 'littera' font generator from a .ttf file. Here is a demo I threw together to demonstrate my issue. var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { create: create , preload: preload});function preload() { // Load the font game.load
4. ## I need to crop text or wordwrap using bitmaptext

I tried out multiple methods and property from the https://labs.phaser.io/index.html?dir=&amp;q= https://photonstorm.github.io/phaser3-docs this both link for the phaser3 but not able to set the width of the perticular text i also try to apply font using css but it also not working for me. Thanks in advance.
5. ## Custom Bitmap Font from Images Tool

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.
6. ## Custom Font

Hi, I want to use a font that I have installed locally on my computer in the game. Can someone help? Thank you.
7. ## phaser 3 STUCK: setTint on Text GameObject doesn't appear to be working for me

Hey guys, I am using Phaser 3.8.0 I was looking at this as an example https://labs.phaser.io/view.html?src=src\input\mouse\text input test.js and it appears to be working on Phaser 3.8.0 on the sample but when I use the code below in my scene's "create" method, I can see the event in my console logs and if I change the code to "setColor('red')" the text properly turns red... just curious what I am doing wrong here or missing with setting the tint of the font? encounterSceneContext.menuAttack = this.add.text(55, 210, "Attack", { fontSize: '10px', fill: '#ffffff' });
8. ## Text cut out with webfont

Hello, I'm having trouble with a webfont, it appears to be cropped on the bottom mostly the "p"s. Also the Phaser example seems to have that problem: http://examples.phaser.io/_site/view_full.html?d=text&f=google+webfonts.js&t=google%20webfonts Is there a work around that? here's my code game.add.text(0, 0, "test text with power", { font: '38px FontdinerSwanky', fill: '#f1f1f1', fontWeight: 'bold', align: 'center', stroke: '#1e1e1e', strokeThickness: 3 });Thanks for your help! Here is a screenshot
9. ## Text getting cropped / cut-off - (updated issue)

The Issue Text object is getting cut-off / cropped at the top and sometimes on the bottom, when using a custom font with a narrow width. (screenshot attached) The fonts in question work correctly in every other environment, and even work with HTML canvas and the regular getContext method of adding text. So i'm fairly positive the issue is isolated to Phaser using HTML canvas. Possible Cause I think issue is most likely happening due to the way Phaser/PIXI calculates the height of text from the width of letters. Possibly using the width of the widest letter and assuming the height? I tried
10. ## GUI Font Color White

Hello, I believe I asked about this before on this forum, but I can't find the post anymore and I remember I remember people told me it wasn't a bug. But, I just want to make sure because this behavior is weird. When using the font color white for the TextBlock, I get a greyish color on small texts, is there a grey border around the text or something like that? Is there a way to remove it?
11. ## Error BitmapFont on refresh

Hi, i need help, i get this when i refresh my game 1/2: and ofc (game.js 50) console: and in game.js line 50: this.rep_un_txt = this.game.add.bitmapText(this.raw_gauche_center, 0, 'pixel', this.rep_un, 100); i load 2 bitmap font in my load.js: gameState.loadState = function(game) { }; gameState.loadState.prototype ={ preload: function(){ //assets this.game.load.image('barRep','./assets/bar_rep.png'); this.game.load.image('selecteur','./assets/selecteur.png') //fonts this.game.load.bitmapFont('pi

Hi! I'm doing a thing in pixi (actually, in it's dart port (https://github.com/FedeOmoto/pixi) but that should be the same for the purpose of this question) and I'm using its text features (http://www.goodboydigital.com/text-updates/). I understand that before rendering a text, you set the style in which to render it, and that the style includes many different things like color, align and font... What I don't get is: where do the fonts come from? In the provided example, they used 'Arial' font and I know for sure that you can use 'Snippet' font as well. Is there any list of all available font
13. ## Custom Font with Typescript

Hey Crew, I'm trying to implement a custom font, I'm using Phaser through typescript, but I can't seem to get it to function correctly. I've checked the phaser examples, unfortunately, as I'm both new to web dev and Typescript, I'm not sure how to convert that info into my game. I've tried googling around and there aren't any examples that I've found that deal specficially with typescript, phaser and fonts. I tried adding this: <link href='http://fonts.googleapis.com/css?family=Holtwood+One+SC' rel='stylesheet' type='text/css'>into my html, and referring to it with this: var sty
14. ## Web font not shown correctly

I added text into a sprite as child. My text could not show font correctly. Anybody could help me? My code is as follows: this.style = { font: "30px Arial", fill: "#000", boundsAlignH: "center", boundsAlignV: "top" }; ... this.textContent = this.add.text( -30, -60, "test content", this.style); ... However, what I got on test webpage was not Arial font, but as shown in attached image. Why is that?
15. ## Is this a rendering issue or...

My issue here is I'm trying to create a countdown timer using fonts and styling of my choice but I don't know how to update the text variable. I want to call the addChild method once and have the value of that string updated in a function. The only way I can see the updated countdown is with the addChild method but at the moment that leaves duplicate copies of the object on the screen. The render does not clear the canvas even though I read in the documentation it's set to do that by default. I tried two methods to get the desired results: var countdown = new PIXI.Text( days+" days "+hour
16. ## Scale text question

So, I have a text in size 200x50, and wan't to scale it down precisely 2 times (100x25) option 1) Scale 0,5. This sucks, as the quality is crewed (more on up-scale, less downscale, but anyways it is..) and I can't afford that in my project. option 2) FontSize/2. This sucks as well in my case, because it wont be precisely 100x25. So are there any alternative options, so I get the precise size and quality as well? Some kind of scale + re-render, duno?
17. ## Several BitmapFontTexture

Hi all, I tried to use several BitmapFontTexture, but I see all text have first font and second font haves some deformations var f1 = new BABYLON.BitmapFontTexture(scene, "fonts/bulletsNumbers32.fnt", "fonts/bulletsNumbers32_0.png", undefined, false, undefined, function() { new BABYLON.Text2D("123", { parent: canvas, id: "text1", bitmapFontTexture: f1, x:100, y: 100}); }); var f2 = new BABYLON.BitmapFontTexture(scene, "fonts/message.fnt", "fonts/message_0.png", undefined, false, undefined, function() { new BABYLON.Text2D("123",
18. ## Text Underline [SOLVED]

Is there a way to underline text? This seems like such a simple question, but I can't find a solution on the internets. I'd image adding a simple "underline" to the font attribute would work, but no luck. this.game.add.text(0, 0, 'test', { font: '18px Verdana', fill: '#000000', wordWrap: true, wordWrapWidth: 230 }, this); Thanks for any insight!
19. ## How to use TTF Font?

There are many ways to use fonts like bitmap fonts and web fonts. But these ways are not suitable for those languages with lots of glyphs like Chinese, Japanese. A local font file(always *.ttf file) should be better for such situation. I googled, but no tutorials mentioned how to do that. Any suggestions?
20. ## Add images inside text? (Solved)

Hello everyone, I'm currently creating my first Phaser game, so I'm relatively new to all of this. Basically what I'm trying to achieve is to create text with images inside. I'm thinking of building Strings like "This is a {{test}} String", which gets parsed in a way that the "{{test}}" part will be replaced by an image that has previously been loaded into the cache, using the identifier 'test'. I've been searching through the web in the past few days but didn't find anything that really helps me. For experimental purposes, the images I want to use in my Text ar
21. ## Font Size and Rendering: Dynamic Texture vs. Canvas 2D

Hi everyone I'm wondering why font size and font rendering is so different when comparing DynamicTexture and Canvas2D side by side. http://www.babylonjs-playground.com/#TFFCW Note: The huge but blurred text is 8px while the small and crisp text is 32px Dynamic texture returns the expected result while text rendered in canvas 2d seems to be way too big and blurry. Of course I could use a bigger font size (ie. 8 times the size needed) and then scale it down (scale: 0.125). But I'd like to understand what's going on… Any hint much appreciated! Anyone?
22. ## can i load TTF?

Hi.. how can use True type Font in pixi.js? can you give me any tips? thx everyone!!
23. ## Change text colour dynamically

Hi all, Is this possible? e.g. // Create textvar t = this.game.add.text(10, 10, "Hello World", { font: "16pt Arial", fill: "#FFFFFF", align: "center" });// Ideally not this because it uses internal values, and actually doesn't update the text displayed. t._style['fill'] = "#FF0000";// Perhaps something like this...!t.updateCSS({ font: "16pt Arial", fill: "#FF0000", align: "center" });Thanks!
24. ## Font Problems

I recently launched a game called Robo Dash, and I few people have sent me some comments saying that the game has font issues where when the player loses the match and replay the font gets bolder and bolder. It doesn't seem to register the font I placed in the code. I decided to go with a bold font I found on Google fonts named 'Chango', but when the game starts it's very thin, and then becomes bold once the game restarts. Can someone help me with this issue. Code is down below: HTML Header: <link href='http://fonts.googleapis.com/css?family=Chango' rel='stylesheet' type='text/css'> C
25. ## Multiple font options

Hi, Is there a way to give multiple choices for the font in the style of PIXI.Text, similar to how it's done in CSS? I'm looking for a semantically similar solution to this: var text = new PIXI.Text('This is a pixi text',{font : '24px Arial, 30px Impact, ...'}); In case user doesn't have the first font, the second font could be used and so on. How can this be achieved?
×