# Search the Community

Showing results for tags 'text'.

• ### Search By Tags

Type tags separated by commas.

### Forums

• HTML5 Game Coding
• News
• Game Showcase
• Web Gaming Standards
• Coding and Game Design
• Frameworks
• Phaser 3
• Phaser 2
• Pixi.js
• Babylon.js
• Panda 2
• melonJS
• General
• General Talk
• Collaborations (un-paid)
• Jobs (Hiring and Freelance)
• Services Offered

• 0 Replies

• 0 Views

### Interests

Found 194 results

1. ## Texture render resolution

Hello! I'm quite new to pixi.js community. I’m trying to add SVG with foreignObject to Pixi and I guess I have some understanding issue, because my example works well with default 2d canvas but looks way blurry in Pixi’s WebGL. Any tips for this case? https://stackblitz.com/edit/pixijs-text-rendering?file=index.ts
2. ## Unable to change the color of BitmapText

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
3. ## Superscript in Phaser.Text object

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.

5. ## Create Textures from PIXI.Text

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
6. ## How Can I Create Text That Appears One Letter At A Time In Phaser 3

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.
7. ## Update text in PIXI

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.
8. ## Referencing a gameObject inside its own method without variables

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.

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
10. ## How to draw multiline text with proper background?

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
11. ## Underline for text in PIXI

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?
12. ## how to hide overflow text in container

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",
13. ## Dynamic centered text button can only be dragged on the left half.

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
14. ## Dynamic fractions

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
15. ## How to make Text seletable in PIXI v4?

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.
16. ## How to Apply opacity to Phaser Text Stroke

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?
17. ## 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: 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.
18. ## How to align text based on background size?

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.
19. ## 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: https://codepen.io/anon/pen/wxdXKp .
20. ## Some wordwrapped text renders incorrectly in firefox

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.
21. ## 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?
22. ## Text vs BitmapText ( performance ), the conclusion ?

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
23. ## phaser 3 STUCK: setTint on Text GameObject doesn't appear to be working for me

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' });
24. ## 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: 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
25. ## Text getting cropped / cut-off - (updated issue)

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
×