Jump to content

Search the Community

Showing results for tags 'text'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Standards
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
  • 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





  1. Hi, I am trying to format a specific part of a Phaser.Text object as a superscript. I am using TypeScript in the project. For example: var question: Phaser.Text = this.add.text(0, 0, "3x2", { font: "24px Arial", fill: "#000", align: "center" });Looks like: 3x2 But I want it to look like: 3x2 Unfortunately String.prototype.sup() is depreciated. How would I get this result? I know I can use the <sup> tag, but am not sure how to use this in a Phaser.Text object. Thank you.
  2. Hi, I've created text in PIXI, and have masked it because I want to allow scrolling. I'm using the latest version of pixi (5.3.0). However when the text loads with the mask, it appears differently on different browsers. I've attached an image for reference. I've tested it using Edge, Firefox and Chrome and all 3 show the text masked differently. Please help me understand why this could happen. Also, when I create a graphic for masking the text, the coordinates and size appear very different to how it functions as a mask. In the image below, the white rectangle is
  3. For my Pixi Project, i need to display 4 short numbers: 15, 30, 45 and 60 over 200 times on my stage. Also, on window resize - the text will get resized not based on linear window dimensions. Because of this, i think it is a good strategy to create textures for those 4 numbers and use them when i create the sprites. var minute = new PIXI.Sprite(minute_30_texture); My Problem: i am not able to create Sprites from PIXI.Text("30").texture; var texture = new PIXI.Text("30").texture; var sprite = new PIXI.Sprite(texture); the rendered sprite will not show
  4. I've looked at a lot of tutorials on how to do this, but all of them seem to be out of date and do not work anymore with the current version of Phaser 3. Does anyone know how to do this? It would be appreciated if you could also tell me how to do this with bitmap text as well.
  5. When updating PIXI.Text do I have to remove it and create again. I've read the docs but couldn't find another way. Am I missing sth? Like we can just use clear() for updating a rectangle.
  6. Is it possible to reference the object I just created inside the arrow function to set the tint? I've tried using this but that just references the Scene.
  7. EDIT: I just realized, that importing the normal font as a .woff2, defining a `@font-face` within css and then use `fontFamily: fontName` kind of works as well. One more problem though, the font is not being used on initialization, but when I f.e. change its color on hover. How so? How can I make it use the font from the very beginning? OLD: I'm currently trying to load a custom font to use is in combination with `PIXI.text()`. I got everything set up, the text is being displayed etc. - the custom font is not working though. To use a font, I read online, that it's
  8. Pixi.js is a great lib and it did help me a lot in building webgl-based apps. But when I try to render text with background, I run into some problem: 1. PIXI.Text has no straight way to fill a text with background ok.I tried to search the forum and find some methods like, I can use PIXI.Grahpics to draw a Rect or RoundedRect , then combine the text and the rounded shape into a container so it looks like the text has a background; In single line text, it appears so good but is this a right way? 2. I can't find a way to build 'tight' background with multi line text
  9. Hello, I have been trying to add underline for text but could not able to get it done. I will also have multi lines of text sometimes. Is there any solution or predefined methods in pixi to achieve this?
  10. I am working on displaying a text with background color in pixi. I could not able to hide overflow text (see attached) . I have added bit of related code below. Please someone help me!! renderer(){ let style = { breakWords: true, wordWrap: true, align: "center", dropShadowAngle: 0, dropShadowDistance: 0, fill: textColor, //Text color stroke: textColor, //Text color, fontSize: textSize + "px", fontFamily: fontFamily != null ? fontFamily : "Arial", //TODO fontWeight: fontStyle == "bold" ? fontStyle : "normal",
  11. Hi, I am starting my first little game with Phaser and it's not going entirely smooth :D. I need to display a button with a word (dynamic text and size) , center it, and make it draggable. What I liked about Phaser is that there were tons of shortcuts and lab examples to do things quickly. So I tried to keep my code so concise as possible. These three problems took most of my time. Center the text in a button ( which is a graphic ) Putting these in a container and centering the container. Dragging the container. I would love to solve the first two simply by usi
  12. I want to able to render fractions (e.g. 1/4, 2/3, 3/8, 3/2) in my game that the player can drag to a line. I'm wanting more fractions than the typical ones, e.g. 5/2, and I'm wanting to be able to generate them from within phaser. Anyone got a good idea of maybe how to do this. Was wondering about using an html file as that would give me super and sub scripts, but that would require a file for each fraction. Thanks, Gordon
  13. Suppose I have a PIXI.Text object and I want to use my mouse to select a few letters inside the text like I do in a text input. How can I achieve this? What events should I listen to? Is it "mousedown" and "mouseup"? And then maybe I need to draw a reversed color rectangle around the selected text? Not sure if this works and I wonder how complicate would that be.
  14. 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?
  15. 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: http://playground.babylonjs.com/#DZ7134 Is there a better way (there must be, i just suck at js :D) to do this? Thanks in advance.
  16. 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.
  17. 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: https://codepen.io/anon/pen/wxdXKp .
  18. 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 = this.
  19. 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?
  20. 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
  21. 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' });
  22. 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
  23. 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
  24. 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 & tra
  25. 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: Phaser.Physics.Arcade.Image.call(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?
  • Create New...