Search the Community

Showing results for tags 'Font'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 47 results

  1. andrei.nicolae

    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.
  2. Hey guys, I am using Phaser 3.8.0 I was looking at this as an example\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' }); encounterSceneContext.menuRun = this.add.text(55, 225, "Escape", { fontSize: '10px', fill: '#ffffff' }); encounterSceneContext.menuAttack.setInteractive( new Phaser.Geom.Rectangle(0, 0, encounterSceneContext.menuAttack.width, encounterSceneContext.menuAttack.height), Phaser.Geom.Rectangle.Contains); encounterSceneContext.menuRun.setInteractive( new Phaser.Geom.Rectangle(0, 0, encounterSceneContext.menuRun.width, encounterSceneContext.menuRun.height), Phaser.Geom.Rectangle.Contains); this.input.on('gameobjectover', function (pointer, gameObject) { console.log("gameobjectover"); gameObject.setTint(0xff0000, 0xff0000, 0xffff00, 0xff00ff); }); this.input.on('gameobjectout', function (pointer, gameObject) { console.log("gameobjectout"); gameObject.clearTint(); });
  3. MichaelD

    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: 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
  4. 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 to work out what the source code is doing. Current Workaround The only workaround i've found is rebuilding the font and adding a wide margin to each letter (so the letter boundaries are more 'square'), then in Phaser splitting a Text object into individual Text objects for letters and calculating their position based on letter width, and manually subtracting a value to change the letter spacing. But even splitting and repositioning doesn't work that well (with any font, not just thin fonts) i have to calculate separate margins for even thinner letters like 'I', 'i', or 'l', or wide letters like 'm' and 'w'. I would rather not use BitmapText as i need to use different font sizes. Solutions Has anybody else encountered this issue? Found a solution or a better work-around? Thanks.
  5. Ericky14

    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?
  6. Papz

    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 =, 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'barRep','./assets/bar_rep.png');'selecteur','./assets/selecteur.png') //fonts'pixel', './font/pixelBITM.png', './font/pixelBITM.fnt');'pixel_o', './font/pixelBITM_o.png', './font/pixelBITM_o.fnt');, this); }, start: function(){ // i use this for fix error (cheap) this.fixtext = this.add.text(-10, -10, {font: "1px pixel", fill: "#ffffff"}); this.state.start('Game'); } }; I can't found a fix or see what i m doing wrong :/ Early Thanks
  7. BasomtiKombucha

    About fonts...

    Hi! I'm doing a thing in pixi (actually, in it's dart port ( but that should be the same for the purpose of this question) and I'm using its text features ( 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 fonts I can choose from? And will these fonts work the on every machine?
  8. Team_Q

    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='' rel='stylesheet' type='text/css'>into my html, and referring to it with this: var style = { font: "30px Holtwood", fill: "#ff0044", align: "center" };But I don't know if I'm missing something? Otherwise my text shows up, it's just default font. Thanks!
  9. allaboutgame

    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: = { font: "30px Arial", fill: "#000", boundsAlignH: "center", boundsAlignV: "top" }; ... this.textContent = this.add.text( -30, -60, "test content",; ... However, what I got on test webpage was not Arial font, but as shown in attached image. Why is that?
  10. ixdHenry

    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 "+hours+" hours " +minutes+" minutes "+seconds+" seconds ",timerStyle); countdown.updateText(); timerContainer.addChild(countdown) //tried a second method and that was use to create a sprite from the text textSprite = new PIXI.Sprite(countdown.texture); timerContainer.addChild(textSprite); I did some extensive google searching and I learned that you need to use the function .updateText(); in order for the text variable to actually update. I thought this would work but it does nothing to change the string value on the screen. I have also tried to declare and add the countdown variable to the stage, outside the function but the text does not update. Any suggestions would be greatly appreciated.
  11. trsh

    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?
  12. 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", { parent: canvas, id: "text2", bitmapFontTexture: f2, x:100, y: 200}); }); If i load just one font separately then first font or second font looks ok. First font Second font
  13. brentstrandy

    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., 0, 'test', { font: '18px Verdana', fill: '#000000', wordWrap: true, wordWrapWidth: 230 }, this); Thanks for any insight!
  14. Majirefy

    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?
  15. 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 are the Playstation input symbols (Cross, Square, Triangle and Circle). So, for example, if I add a text "Press {{cross}} to continue" to the game I want it to show the Cross-Symbol inside the text. Hopefully this explains enough. Does anyone have a good idea for a way of achieving this, or done this before? I will greatly appreciate any help! Kind regards and thanks for reading! Edit: Thanks for the answers! Just like mattstyles suggested, I figured I'd have to generate the text and image parts by parsing the string and then calculate each of the parts positions. For those who are interested in how I did it: First I parsed the string by splitting it at spaces (" "), iterating over the resulting array and depending on the "substring", either add a text or image to a previously defined group. Then I iterated over the groups children and set each of their x and y attributes after calculation the position, based on the all the previous children's widths, heights and a fixed anchor point. My result is a tooltip that follows the mouse pointer when hovering over certain objects. This is a very rough explanation. If anyone wants, I can provide some of my code with more precise information.
  16. Hi everyone I'm wondering why font size and font rendering is so different when comparing `DynamicTexture` and `Canvas2D` side by side. 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?
  17. GBear

    can i load TTF?

    Hi.. how can use True type Font in pixi.js? can you give me any tips? thx everyone!!
  18. gwinnell

    Change text colour dynamically

    Hi all, Is this possible? e.g. // Create textvar t =, 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!
  19. Gamma

    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='' rel='stylesheet' type='text/css'> Create Function: scoreText =, 210, "SCORE: " + score, { font: "30px Chango", fill: "#ecf0f1" }); highScoreText =, 240, "HIGHSCORE: " + highscore, { font: "30px Chango", fill: "#ecf0f1" }); intensityText =, 270, "INTENSITY: " + counter, { font: "30px Chango", fill: "#ecf0f1" });Robo Dash Game
  20. little_endian

    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?
  21. Hi, I'm wondering if it's possible to animate the parameters of a RetroFont and render this back to the image using it. create: font ="yellowredfont",8,7, '!"#$%&\'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`<|>~£@',35,6,7,0,0);font.multiLine=truefont.customSpacingX=8img =, 50, font);font.text = "Hello World!"update: font.customSpacingX = (font.customSpacingX+1) % 20// how to update the image with the updated font? does it all have to be destroyed and recreated?thanks j
  22. TheGeekTechZone

    text font and color

    does someone know how to change the text color and font? game.debug.text(' text ' , 32, 42);
  23. @font-face {font-family:"8bit"; src: url("assets/retro.ttf");}game.add.text gameWidth - 4, 32, '0', {fontSize: '32px', fill: '#fff', stroke: '#222', strokeThickness: 3, font: '8bit'} Why is it so small? I can't change the size. If I remove the font attribute, it goes back to default font, and size works fine If I break the font attribute, by putting in the value 'tfwtwftwftwf' It goes to some stupid looking font, but still fontsize works fine So obviously it's recognizing my custom font. Why is the fontsize broken? I've tried multiple .ttf fonts, they all do this
  24. How best to make 3D font in babylon.js? I saw a discussion on this post But these examples font tied to the texture. I would like to be more like the font on this example.
  25. doyouknowyou

    Text render quality

    Does anyone know a good way to ensure fonts render well? I'm finding that text is quite pixilated and I'm not sure what can be done to fix it. I'm using a custom .ttf, but find it still looks pixilated with default fonts such as Arial. It's still legible but looks pretty bad against higher res pngs. Also I'm using @font-face. Would appreciate it if anyone has any info on this!