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
    • 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

Found 45 results

  1. 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?
  2. 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
  3. 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?
  4. 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.
  5. 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?
  6. 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
  7. 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!
  8. 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?
  9. 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.
  10. 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?
  11. can i load TTF?

    Hi.. how can use True type Font in pixi.js? can you give me any tips? thx everyone!!
  12. 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?
  13. 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
  14. text font and color

    does someone know how to change the text color and font? game.debug.text(' text ' , 32, 42);
  15. @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
  16. 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!
  17. 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.
  18. ChangeLog - fonts

    Hello, here is the list of changes that are implemented with the February 10th update: show system fonts button - allows to pick local system font - useful to prototype text very fast - remember - if you want to use font everywhere - you still need to upload font to the MightyEditor (to collect installed fonts ME uses flash plugin - so button wont work if you have flash plugin disabled)advanced font uploader - drag and drop font file (*.ttf) and MightyEditor will do all for you:convert file to most used font formatsgenerate font-facefont downloader - enter any font name from in the font name box and MightyEditor will automatically download it for you and prepare downloaded font for usage in your game. Even in the offline mode! font viewer - in source editor section - which shows basic font information. e.g. font-family, copyright etcsign-up fixes - in some cases users were not be able to sign-up with local account please note - to use fonts in all previous projects add <link rel="stylesheet" type="text/css" href="fonts/fonts.css" /> to the head tag in the index.html file index.html should look something like this: <!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>YourGameTitle</title> <link rel="stylesheet" type="text/css" href="fonts/fonts.css" /> <link rel="stylesheet" type="text/css" href="css/main.css" /> <script type="text/javascript" src="js/lib/phaser.min.js"></script> <script type="text/javascript" src="js/lib/mt.helper.js"></script> <script type="text/javascript" src="js/lib/"></script> <script type="text/javascript" src="js/main.js"></script> <script type="text/javascript" src="js/state/boot.js"></script> <script type="text/javascript" src="js/state/load.js"></script> <script type="text/javascript" src="js/state/menu.js"></script> <script type="text/javascript" src="js/state/play.js"></script> <script type="text/javascript" src="js/state/demo.js"></script></head><body></body></html>fonts/fonts.css - is autoamtically generated file - please do not edit it directly At the moment MightyEditor suports only ttf font format as input - feel free to request different formats
  19. 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.
  20. Hi fellow devs! I'd like to share with you an app I've been working on for the past couple months. I present...Glyphite! A fast, clean, and affordable Bitmap font builder. Glyphite runs entirely in your browser so you never have to download an app. Choose from a (soon-to-be) massive selection of Photoshop-quality presets and tweak shadows, strokes, and fills to your heart's desire. When you're done, you can export in the standard BMFont format with more formats coming soon. Glyphite caters to every member of your team, from designers to developers to marketers. We've streamlined the experience so that creating stunning text effects is as easy as clicking a button or tweaking settings in Photoshop. It's now ready to be taken for a you! We've launched in beta right now, but all of the core font-producing functionality is present. The app performs best in Chrome and Safari, but full support for Firefox is next in the pipeline. Take a look (free to try!) and let us know what you think. We're building this tool for you and we would love to know how you use it and what you'd like to see in the future.
  21. 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
  22. Bitmap fonts not loading

    Hi, Just started using phaser for a little game I am making. I am most of the way through production but I can't seem to get a different font to load. I have two files - a png containing the actual images, and an xml file with their locations. I used the littera tool online to convert a .ttf file I found into these two files, but I'm not too attached to that specific font - something like this is what I am aiming for: Anyway, here's a little demo I threw together to showcase this, so here is the code: var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { create: create , preload: preload});function preload() { // Load the font from 'assets' folder. game.load.bitmapFont('Pixel','assets/pixel.png', 'assets/pixel.xml');}function create() { // So that the font can load properly., doSomething, this);}function doSomething() { // Create the text var text = "- phaser -\n with a sprinkle of \n pixi dust."; var style = { font: "65px Pixel", fill: "#ff0044", align: "center" }; var t = game.add.text(, 0, text, style);}I'd appreciate any help you can give, I'm sure I'm not doing something properly. Thanks, Matthew
  23. Hi everyone I want to know if there is a command to transform the font of my game to another from a spritesheet. Like this spritesheet here, for example : So the font will looks like what is in the photo. Or i have to make my own. And thank you all
  24. 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: 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.bitmapFont('Pixel','assets/pixel.png', 'assets/pixel.xml');}function create() { // Add a one second delay so that the font can load properly, doSomething, this);}function doSomething() { // Render the text var text = "- phaser -\n with a sprinkle of \n pixi dust."; var style = { font: "65px Pixel", fill: "#ff0044", align: "center" }; var t = game.add.text(, 0, text, style);}Any help appreciated, I'm sure I'm being really stupid but it's quite important to have the right font. I have attached the font files so that you can test the font with your solution if you want. Thanks, Matthew pixel.xml
  25. Using .tiff Font

    Hello, Is there any way I can use .tiff as Font? I have read in docs, and I can't find it. BitmapFont can only use font from png, or using google webfont. Is there any way I can use .tiff file for font in my game? Thank you