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
    • Web Gaming Platform
    • 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 49 results

  1. I tried out multiple methods and property from the;q= 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.
  3. Hi, I want to use a font that I have installed locally on my computer in the game. Can someone help? Thank you.
  7. 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?
  8. 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
  10. 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!
  11. 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?
  13. trsh

    Scale text question

  14. 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
  15. 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!
  16. 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?
  17. 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.
  18. 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?
  19. GBear

    can i load TTF?

    Hi.. how can use True type Font in pixi.js? can you give me any tips? thx everyone!!
  20. 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!
  21. 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
  22. 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?
  23. 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
  24. does someone know how to change the text color and font? game.debug.text(' text ' , 32, 42);
  25. @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