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
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 164 results

  1. 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.
  2. 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.
  3. Hi guys, So, I stuck in a little problem here. I'm building a chat system for my casual game, but I'd like to put icons in the middle of the text, like Whats App messages with emoticons. Does anyone know how can I do it or have any ideas to solve it? EDIT: Just to clarify, the text and emoticons (images/sprites) must be rendered in the same sentence, like when we sent a message with emoticons on the WAPP chat. Thanks!
  4. correct vertical allign

    Hello, I tried many different ways but cannot make text appear vertically centered. Anchor is working fine, the problem is within font itself. When I use number as text, there is invisible space (I can see that if I set background color) bellow base line (for example letter g). However in my case this is critical, because number (score) is shown within small circle and must be ideally centered. 1) The complicated solution could be getting actual text height by scanning canvas' pixels. However, this may be time consuming. 2) Currently the only fast solution seems to be, creation of BitMap font with numbers. Is there any better solution than this? Thanks in advance
  5. Text anchor issue

    Hi. I'm using phaser 2.6.2 and I have an issue every time I create a text and set it's anchor. The text seem to fly away a great distance after setting it's anchor. Example: if I were to set the anchor to 0.5, the text moves to a location far greater than it's size. If I create a text, it's anchor is at default 0 (top left of text)? If I were to change it to 0.5, rather than the text center itself about the anchor, it goes a great distance away from it, like really far. this.goldCoinsText =, 86.1, '5000', {font: "20px Arial", fill: "#ffe488"}); this.goldCoinsText.anchor.set(0.5);
  6. Is there any ways to draw outline for them? I know I can have multiple Text2D beneath it and act like "border". I'm just wondering if there's any better way of doing that.
  7. 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.
  8. Hi, I'm trying to build my HUD with PIXI.Text, but am having problem that the text is bigger when resolution is larger. For example when l load the page with browser at 200% zoom then my HUD ends up being twice as big. I want the text to stay the same size thou - higher resolution should make it look crisper not larger. Any help/ideas for this? Thanks! // create app var app = new PIXI.Application({ width: window.innerWidth, height: window.innerHeight, resolution: window.devicePixelRatio, autoResize: true, antialias: true, backgroundColor: 0xFFFFFF }); document.body.appendChild(app.view); // create text var text = new PIXI.Text("TESTING"); app.stage.addChild(text);
  9. I'm trying to crop a Phaser.Text, so I can make something similar to the As3 TextField class (where your text is inside of a mask). But the crop method is not working, here is what I did: this.pText = new Phaser.Text(, 0, 0, text, style); this.pText.crop(new Phaser.Rectangle(0, 0, 20, 20), true); this.pText.updateCrop();
  10. Align text to the center vertically

    How do you vertically align text in the center? I have a high score box that shows 5 scores listed vertically. I render the names using a dynamic font size - so depending on how wide the name is, the font size is bigger or smaller. You can see in the attachment that if the name is very long with a very small font, the name looks like it is vertically aligned to the top. I want the text to be vertically centered. I tried using boundsAlignV in the style of the font, but that didn't change anything: var style = {font: "64px Knewave", fill: "#ffffff", boundsAlignH: "center", boundsAlignV: "center"}; Any other ideas?
  11. EDIT: TANKS TO :Jammy EDITOR: TANKS TO :bigtimebuddy FROM EDITOR: SOURCE: ___________________________________________________________ hi !, is there a pixi.text generator for the style. Because I find it very long to try different configuration styles without preview. similar as pixi-particles but for the text style ? thank a lot for help
  12. Blurry text in Pixi.js

    First of all I would like to say that I've read all topics and issues on github, related to this problem and it didn't help me. I've checked PIXI.RESOLUTION, antialiasing, different fonts (google web fonts, system fonts), colors, etc and anyway I am still getting blurry text. And when I apply a little scaling to canvas It gets even worse. Examples how it looks without scaling and with scaling I attached. Would like to hear any advice on subject. Thanks in advance!
  13. 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?
  14. hi guys in abow image i am palcing the name of the building when i drag also it will come along with the building because i am drawing it on top of building by using me.font like this i wana add pin image to my building and it should stick to my building while dragging also ,i tried creating sprite image and adding it to world but it wont stick to my building can someone help me with this .. i am thinking to do as shown in the below image like this
  15. Hello all! I have a sprite with some children, 3 sprites and a text. The text floats above the sprite and moves with it. I have 4 layers that in my map and the sprite is rendered after layer 2. The problem is that the text ends up behind part of the map that sits in layers 3 and 4. Is there a way to force the text to the top of everything?
  16. default text object function

    i'm trying to make a Text object i can call and will build the correct bitmaptext var Text = function(game, target, font) {, game, target.x, target.y - target.height /2 , font, '', 24); this.anchor.setTo(0.5); console.log(this) } /// //so i can do something like this this.nameDisplay = new Text(game, this, 'font:default'); but it gave me an error that this.updateText is not a function, so i added Text.prototype.updateText = function() { } under the text function, but now it says 'Cannot read property "PhysicsBody" of undefined'
  17. Text addFontWeight iOS bug?

    Hi, I'm adding fontWeight to some text and it works fine on everything except iOS where only the first character responds to the command. var textObj = game.add.text(0, 0, 'Hello World! This is a triumph!', { font: 'Arial', fontSize: 32 }); textObj.addFontWeight('bold', 6); textObj.addFontWeight('normal', 11); Only the 'W' becomes bold. Any suggestions?
  18. Scalable text for pixi.js

    For my project I need quickly develop textfield which shows good quality while scaling. So far I see I can do it with approach I describe below: 1. Scale whole render and get koefficient of resize. Question is which approach for this task is better, now I do it with JS function on window.resize event, which use css transform and returns scale factor. But I suppose I need to do scaling within pixi to get control over process. 2. Redraw textfield on canvas changing font size according this scale factor, and adjust it's coordinates. I would like to hear any thoughts on this subject, thanks in advance!
  19. Issue with Text rendering

    Hi, I am new to Phaser and trying to develop a game that includes some light weighted animations so that the game always covers the whole screen available. To achieve this I am using a background image larger then the canvas size and scaling down the game components to fit into the screen, Initially i included some text inside these game components which was getting pixelated when scaling down the component by 50%, so I have decided to keep text elements out of the components and replacing them by lowering the font size. The issue seems resolved but when the game goes fullscreen and restored back to default size the text again is getting blurred. Anybody ever encountered any such issue? What could be the possible reason for this behavior. I am attaching the screenshot of the text in both the situation. Whenever the screen is resized, I destroy the current text element and redraw it using the new font-size. After restoring screen from fullscreen mode. Default screen on initial load.
  20. Hello. I managed to create code that draws a button along with a textfield and also with the four states that a button have, onInputUp, onInputDown, onInputOver and onInputOut. However, it is still experimental, and since I add text object as a child of Phaser.Graphics, the text is a bit blurry. But the bigger issue is, new graphical elements are added without removal, so I have a bug somewhere, or it is just not possbile to create dynamically drawn button with text and all states and to add custom click event handler. I will post another topic for the code itself, but here i just want to ask if there is a plugin for Phaser that draws buttons dynamically, or buttons on which I can change the text dynamically? Or how can I create button and be able to change its text dynamically? Should I just place Graphics object below and on top a text field both pointing to the same click listener?
  21. Dancing TextField with right align

    Hello, I have two TextFields. The first one is aligned right by setting anchor.x = 1. The second one is aligned left by default. There is a visual issue if text value of the RIGHT aligned TextField is changing on the different one with different width: the digits are "dancing" a little, while the LEFT aligned TextField stands. Here is the example: Don't know is it a bug at PIXI but I'll be much appreciated for any suggestion how to fix this issue.
  22. Rotated Text collision

    Hi everyone! I have several Pixi.Text objects floating in my Pixi container. var style = { font:"22px Verdana", fill:getRandomColor() }; var text = new PIXI.Text("My text", style); text.anchor.set(0.5, 0.5); text.dx = 0.1; text.dy = 0.1; Each Text object is rotating from -90 degrees to + 90 degrees. When collision happens with Text object and container, Text acts like a ping-pong ball changing its direction. Currently I'm using this code to check if text object is < or > of my pixi container width: if(text.x < 0 || text.x > $("#pixi-container").width()) text.dx = -text.dx; if(text.y < 0 || text.y > $("#pixi-container").height()) text.dy = -text.dy; text.x += text.dx; text.y += text.dy; Collision happens when a center of text object reaches container border. I need collision detection when ends of text object touches the container border.
  23. Load text before load game

    I have a code like this: fonts.css @font-face{ font-family: 'LiberationMono'; src: url('../fonts/LiberationMono-Regular-webfont.eot'); src: url('../fonts/LiberationMono-Regular-webfont.eot?iefix') format('eot'), url('../fonts/LiberationMono-Regular-webfont.woff') format('woff'), url('../fonts/LiberationMono-Regular-webfont.ttf') format('truetype'), url('../fonts/LiberationMono-Regular-webfont.svg#webfont') format('svg'); } @font-face { font-family: 'archivoblackregular'; src: url('../fonts/archivoblack-regular-webfont.woff2') format('woff2'), url('../fonts/archivoblack-regular-webfont.woff') format('woff'), url('../fonts/ArchivoBlack-Regular.ttf') format('truetype'); } fonts = "30pt LiberationMono"; fontTitles = "50pt archivoblackregular"; ... text =, 130, "┬┐What option is the correct?", { font: fontTitles, fill: "#005ba6", align: "center" }); text.anchor.set(0.5) But in the first round does not work. I have thought to use this as it says in var fontLoaded = false; var gameCreated = false; function createText() { if (!fontLoaded || !gameCreated) return; game.add.text(0, 0, 'Lorem ipsum', { font: '12px Amatica SC', fill: '#fff' }); } function preload() { let font = new FontFaceObserver('Amatica SC'); font.load().then(function () { fontLoaded = true; createText(); }); } function create() { gameCreated = true; createText(); } But it's a lot of code change, since my games are all with text. Thanks in advance.
  24. Phaser UnderlineText

    For some strange reason Canvas API doesn't have an underline text feature. This missing feature in Canvas means you can't underline text in Phaser. I'm not sure if anyone ever missed this feature, but fear not... now you can underline text! I've extended the Phaser.Text object by adding a simple *hack* to get underlined text. GitHub Repo ->
  25. 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!