Search the Community
Showing results for tags 'Text'.
-
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!
-
I am trying to create text that can be seen by screen readers in Pixi.js. My code looks like the following. And, when I press tab, an element is created on top of the canvas. But the problem is that the element is a button element. I would like for it to create a paragraph or heading element. If I'm doing something wrong please let me know. var pixiText = new PIXI.Text('This is from PIXI.Text', { font: '50px Arial', fill: 'red' }); pixiText.accessible = true; pixiText.interactive = true;
-
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?
-
I've been looking through the examples, but there's nothing that does what I'm looking for. I have circular matter bodies with the texture of a ball. How do I put text on top of these balls while keeping the body round? I've looked into containers, but it only seems possible to have them in rectangular shape. I'm thinking whether generating my own sprites with the text already embedded there would be the best option. It's not that straightforward as the text/numbers/symbols I'll be presenting there will be fed by an API, so I can't generate the sprites beforehand.
-
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
-
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, 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.
-
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 the position and size of a graphic which is used for masking the text below it. As a graphic, the mask(white rectangle) appears small. However when applied to the text behind, it appears bigger and position also changes.
-
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 anything. (using pixi 4.0.3) Anyone with the same problem?
-
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. -
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.
-
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 necessary to create an XML file. After converting my .ttf to XML .fnt using Littera I added it to my project and called the loader. I don't know why it's not working, but `console.log(resources.font)` returns, what looks to me, a font object. How is it still not working? constructor($el, app) { this.app = app; this.title = $el; const loader = new PIXI.Loader(); loader.add("font", "/assets/fonts/font.fnt").load((loader, resources) => { this.text = new PIXI.Text(this.title.innerHTML, { fontFamily: "font", fontSize: 120, fill: "transparent", stroke: "white", strokeThickness: 1 }); this.getPosition(); this.app.addChild(this.text); }); } Using `fontFamily: resources.font` instead returns the following error: FYI: I added the .fnt file to the appendix. font.fnt RL Unno.woff2
-
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; What do I mean a 'tight' background? See the pic below: (the pic comes from https://css-tricks.com/multi-line-padded-text/ and if u read the article u can learn some tricks to make these special background in css) Well, come back to PIXI.js. I know that the text sprite is certainly a Rectangle by default, so when I add a 'background sprite' it's also a Rectangle:) And I find some useful filters like OutlineFilter but it can't use to outline a text , and I'm not an expert in writing gl shaders. Has anyone met the situation before(render multiline text with background) or can give me some advice? Thanks very much.
-
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?
-
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", //TODO fontStyle: fontStyle == "italic" ? fontStyle : "normal", //TODO align: "center", wordWrap: true, cacheAsBitmap: true, // for better performance wordWrapWidth: this.textWidth != null ? parseInt(this.textWidth) : "" }; let textPIXI = new PIXI.Text(textName, style); this.setTextPosition(textPIXI, textBackgroundColor, textDimensions); } setTextPosition(textPIXI, textBackgroundColor, textDimensions) { if (Object.keys(textDimensions).length > 0) { const textBackgroundGraphics = new PIXI.Graphics(); // Rectangle textBackgroundGraphics.beginFill( PIXI.utils.string2hex(textBackgroundColor) ); textPIXI.x = this.textPosX + (this.textWidth/2 - textPIXI.width/2); textPIXI.y = this.textPosY + (this.textHeight/2 - textPIXI.height/2);; textBackgroundGraphics.drawRect( this.textPosX, this.textPosY, this.textWidth, this.textHeight ); textBackgroundGraphics.endFill(); //Add text and backgroundcolor to the container this.addChild(textBackgroundGraphics, textPIXI); } } I want to hide which is outside of the box.
-
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 using setOrigin, or Phaser.Display.Align. But that wasn't so simple, it didn't work or I did not understand it enough. So I manually calculated those now. I was hoping someone could explain why the other attempts didn't work. But the remaining problem is now that only the left side of the button is draggable. Is this a phaser bug, or have I implemented this wrong. I made a fiddle with all my attempts. I commented the failed attempts. https://jsfiddle.net/mrklein/5verkbfg/52/ I hope the rest of the game will take less time, hopefully can someone point me what I did wrong so I can learn from this. kind regards.
-
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
-
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.
-
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?
-
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.
-
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.
-
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 .
-
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.game.add.text(90, this.game.height - 110, dialog.text, { font: '18px Russo One', fill: '#222222', wordWrap: true, wordWrapWidth: 820 }); Code for the well rendered sprite: const nextMenuItem = this.game.add.text(682, nextY, item.text, { font: '16px Russo One', fill: '#222222', wordWrap: true, wordWrapWidth: 280 });
-
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?
