Search the Community

Showing results for tags 'text'.

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 182 results

  1. Ize

    Scrolling text

    Hey, for my project i need a scrolling text view. I've managed to get a clunky version working but it's not optimal since you have to play around with the values every time the text changes: Is there a better way (there must be, i just suck at js :D) to do this? Thanks in advance.
  2. I need align the text align horizontal and vertical center based on the background. The background is a graphics object. My code is not work properly. text = this.add.text(0, 0, ['2asdfasdf', '/nasdfn/', 'ndfdf'], { fontFamily: 'sans-serif', color: '#776e65', align: 'center', fontSize: 55, fontStyle: 'bold', padding: 0, }); It result is the picture, it just align based on the most longest text not the background.
  3. NoobTW

    Scaling canvas makes text ugly

    Hi, I'm totally new in HTML 5 Games. If I resize my canvas (by calling resize function in preload), those text will become blurry, ugly. Any idea to handle this? Here's the example: .
  4. I have encountered very strange firefox way of multi-line text rendering. Some of the text appears like it has minimal line-height, while other text sprites render normally (see attachment) And if user reloads page - everything start working just fine, but still works wrong if user restarts firefox and then loads page. I can't see any significant difference between right and wrong rendered texts in the way I create text sprites. Had anyone experienced something like this? Any ideas how to fix it? Code for the badly rendered sprite: this.dialogPhrase =, - 110, dialog.text, { font: '18px Russo One', fill: '#222222', wordWrap: true, wordWrapWidth: 820 }); Code for the well rendered sprite: const nextMenuItem =, nextY, item.text, { font: '16px Russo One', fill: '#222222', wordWrap: true, wordWrapWidth: 280 });
  5. Hi, Which is the most efficient way when you need to deal with many text to display (mobile/pc) ? Because i spent times on forum and didnt find a clear answer (sometimes Phaser.Text, but often BitmapText) : Thanks
  6. 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(); });
  7. 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
  8. 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.
  9. AdamRyanGameDev

    How to use font files, eg .ttf

    I have had a look for any references about loading fonts but haven't come across any. I imagine it's pretty easy/obvious but no luck so far... any help?
  10. Is there any way to use opacity of stroke in Phaser? Like we can apply these features on Phaser.Text let style = { font: "Arial", fill: "white", stroke: "#000000", strokeThickness: "16", fontSize: "24px" }; But how to add opacity to stroke, something like strokeOpacity?
  11. Hi this is a newbie question about displaying text. I want to display some text at a certain position - which is easy enough. The hard part is that after displaying, I want the text to travel 'up' the screen slowly and 'fade out'. I want this 'move up and fade out' to occur over a timespan of 2 seconds. The reason is that I want a 'score' to display when the player picks up some treasure, at the position of the treasure. Then I want the score text to rise up, fade and disappear. If I were doing this my old way (with hand-cranked css and html) then I would use css transitions & transforms but I'm a bit clueless when it comes to doing this with Phaser. For a start how do I specify a time period (2 seconds) between one state and another. Then how do I specify what change is to take place (fade out, travel upwards). It's also important that I can have many of these things on screen at once. (For when player picks up multiple treasures). Easy, right? Well I'm pretty sure this is extremely easy but I can't find any examples. I suspect it's to do with 'tweens' yes? Thanks Owen
  12. alexandernst

    Dynamically creating text with physics

    Is there a way to create a text object with physics on it, the same way I'm able to create an image object, like this:, scene, 0, 0, "my_image"); If there isn't a direct way of creating such thing, what would be a good alternative of having a dynamically generated text that acts like a game object with physics?
  13. Hi guys! See my example of input text in Canvas using Phaser with CanvasInput! Codepen: Regards, Nicholls
  14. Ericky14

    GUI Text Improvements

    Hello, I am making this post to discuss possible improvements to the GUI text system. Right now, when generating new text, it can be very slow if you have a lot of it in the screen. One clear improvement would be to pre-generate (or cache) each letter as an object and just generate instances of that object, which turns out to be very very very fast. However, that is not very easy to do as letter spacing can be a hard thing to manage when positioning each letter next to each other. Is there any easy way this could be improved in the babylonjs side to increase GUI text creation speed? Or is there any other solutions for this problem?
  15. judyzhu

    WebGL Render Text Speed

    As we know ,webGL is faster and it has more capabilities. But,when I use Pixi.js render a large number of text,the speed is slower canvas.I don't know what the reason is? this is my demo address
  16. Hillardo

    Putting text on a box

    Hello, I am searching a way to display text on every side of a box, that is laid over a texture. The user should be able to edit the text. This is what I got by now: The flipped over text can be corrected with the faceUV, but I don't find a way to change the text which is turned by 90 degrees. Is there a way, to assign an individual ambientTexture to every face of the mesh? Or is my idea not suitable from the beginning? Other ideas: - I am using a second box that is a little bit bigger then the first and put the text on this box. I want to find another way to improve the performance. - Putting a plane on every side and displaying the text on them. I haven't tried this on jet, but I am a little bit concerned about the performance. If you have some information on the performance impact of this way, please let me know. -Using a box with shaders. I found this box in the forum, but couldn’t put a diffuseTexture and an ambientTexture on it. The solution that came across my mind was to draw the texture on the canvas, then put the text on it, then turn it back into a picture and put it onto the box. But I don't get the image on the canvas. -Using decals. I also thought about using decals for the text, but I don't know, if this is practical. How do I remove a decal, when the text is updated? How does it affect the performance? How hard is it to place them? I hope, I have provided all the information you need and hopefully you can help me to solve my problem.
  17. 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?
  18. Vizcur

    Center text in container

    Hi, My query is this: I use the Cocos creator tool to position a text. When you export the position of this element and then integrate it into my phaser game, it happens that the selected position is slightly different from what is previewed in the Cocos tool. I suspect it is due to how both tools draw the font in their respective container. As you can see in the attached images, in the tool the text is centered in its container, however, in Phaser, when debugging the edges of the text, you can see that the font is positioned upwards. In short, both containers are in the same position but the texts are drawn in different positions. Is there any way to modify how Phaser draws the text in his container? As additional information, both texts are centered and added to a sprite as a child. The way the text is positioned varies according to the font used. Cocos tool Phaser:
  19. Hi, I have a button in my game which has two child elements(a text aligned top center in and another text aligned bottom center). The issue is the child texts are also taking click of the button which should not happen. Here is the code for this: Fiddle : var game = new Phaser.Game(480,320,Phaser.AUTO,''); var gameStates = {}; gameStates.Main = function(game){}; gameStates.Main.prototype = { preload: function() { this.load.crossOrigin = "Anonymous"; this.load.image('shop',''); }, create:function(){ var btnText = this.add.text(0,0,"Game Loaded",{fill:"#ffffff"}); var infoText = this.add.text(0,0,"This is a description of the game. It is only an informative text and it should not take click of its parent button. Try clicking this text",{fill:"#ffffff", wordWrap:true,wordWrapWidth:450}); var shopBtn = this.add.button(0,0,'shop', function(){ btnText.text = "Shop Clicked";}, this); shopBtn.anchor.setTo(0.5, 0); shopBtn.addChild(infoText); shopBtn.addChild(btnText); btnText.alignTo(shopBtn, Phaser.TOP_CENTER); infoText.alignTo(shopBtn, Phaser.BOTTOM_CENTER,0,20); shopBtn.x =; shopBtn.y =*0.2; } } game.state.add('main',gameStates.Main); game.state.start('main'); Please help me so that only the button takes click and text should not take the click Thanks
  20. I am using this code to create my text field on screen: screenTypingTextField = gameObject.add.text(200, 520, "", si.Utility.getTextStyleScreenTypingTextGreen()); screenTypingTextField.alpha = 0.5; screenTypingTextField.anchor.setTo(0.5, 0.5); //screenTypingTextField.width = 480; //screenTypingTextField.height = 240; thisObject.menuObjects.add(screenTypingTextField); textStyleScreenTypingTextGreen = { font :'70pt Arial', align : 'center', fill: 'Green' }, As you can see I have commented the width and height rows. Its because when i run this code again by entering the same scene that uses this code, it then starts to spread the text over all screen, even bigger. Is this the right way to create text and then set its width and height? Or I should just use the font to set text field size? here is a picture of my typing text field in green spread all over the screen
  21. PhaserEditor2D

    Phaser Editor v1.4.3 released

    Phaser Editor v1.4.3 released Hello, A new version of Phaser Editor is available. In this delivery we include: New Text object. Different type of prefabs: Sprite, TileSprite, Button, Text. Improved preview of Atlas (tile, list and texture view modes), Image, and Spritesheet. Brush-like selection of sprite-sheet frames. Local website with examples and code. Internal web browser for a quick game run (experimental). Better HiDPI icons support. Read the release notes. Best Regards Arian
  22. Hey there, I'm really new to Pixijs. I'm planning to develop something which will require text captions displaying over time (think banjo kazooie, spyro, pokemon, etc etc). Does pixi already provide some way of doing this? I wouldn't mind doing it but I don't wanna reinvent the wheel. Thx in advance for the help guys
  23. Hi, I have created a tabbed text using tabs property of text. This works fine until I try to add color to text using addColor function of text. This removes the tabbing done on the text. Example here: //Phaser game initialization var game = new Phaser.Game(480, 320, Phaser.AUTO, 'game_div'); var gameStates = {}; gameStates.Main = function(game) {}; gameStates.Main.prototype = { create: function() { var textHeadings = this.add.text(20, 20, '', { fill: "#ffffff", tabs: [80, 140] }); var headingsArray = [ ['id', 'score', 'country'], ['1', '2300', 'US'], ['2', '1890', 'AUS'], ['3', '1000', 'US'] ]; textHeadings.parseList(headingsArray); //uncomment this line to see the issue //textHeadings.addColor("#00ff00",2); } } game.state.add('Main', gameStates.Main); game.state.start('Main');
  24. Hi all I was wondering if Pixi has a method for creating the appropriate sized text when within a scaled container. In my case, I scale the main container so that its height is 1080. In this container, I would create a Pixi.Text object with height 20px. From what I understand, this creates a 20px text object, which is then scaled down when placed in the container. This results in text which is slightly blurry. I'm planning on creating a method which would calculate the true pixel height required, which would then be scaled to the size needed. Is this something which Pixi itself supports, or would I need to build this myself?
  25. So Ive searched and the topics discussing this in the forum didnt help. I added 3 groups: backLayer, middleLayer, frontLayer declared in that order. Added a sprite to back and middle, and a text to front, however the text is still below the sprites. I tried using on the text itself and the frontLayer group and it didnt work.