Search the Community
Showing results for tags 'font'.
-
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 this.font.fillStyle = "#000000" (and "#000", and "black") // 4 this.font.fillStyle = me.Color(0, 0, 0); What am I doing wrong?
-
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!
-
Do you guys have any plans on text formatting functionality? Being able to have different text styles in one Pixi text object. For example: This is a bold string and an italic string as well as the strikethrough within a single Pixi text object. Also, do you guys plan on adding different orientation support (like vertically oriented text for oriental characters)? Thanks for the great work you guys are doing.
-
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.bitmapFont('Pixel','assets/pixel.png', 'assets/pixel.xml');}function create() { // Add a one second delay so that the font can load properly game.time.events.add(Phaser.Timer.SECOND, 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(game.world.centerX-300, 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
-
I tried out multiple methods and property from the https://labs.phaser.io/index.html?dir=&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.
-
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.
-
Hi, I want to use a font that I have installed locally on my computer in the game. Can someone help? Thank you.
-
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' }); 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(); }); -
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
-
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.
-
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?
-
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('pixel', './font/pixelBITM.png', './font/pixelBITM.fnt'); this.game.load.bitmapFont('pixel_o', './font/pixelBITM_o.png', './font/pixelBITM_o.fnt'); this.game.load.onLoadComplete.add(this.start, 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
-
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 fonts I can choose from? And will these fonts work the on every machine?
-
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 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!
-
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?
-
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.
-
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?
-
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
-
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!
-
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?
-
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.
-
Font Size and Rendering: Dynamic Texture vs. Canvas 2D
rekomat posted a topic in Questions & Answers
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? -
Hi.. how can use True type Font in pixi.js? can you give me any tips? thx everyone!!
-
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!
-
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'> Create Function: scoreText = this.game.add.text(290, 210, "SCORE: " + score, { font: "30px Chango", fill: "#ecf0f1" }); highScoreText = this.game.add.text(290, 240, "HIGHSCORE: " + highscore, { font: "30px Chango", fill: "#ecf0f1" }); intensityText = this.game.add.text(290, 270, "INTENSITY: " + counter, { font: "30px Chango", fill: "#ecf0f1" });Robo Dash Game
