Search the Community

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'm all new to WebGL and Pixi.js - I started digging into this, because of this exact effect I'm trying to achieve: Demo As of now I got a scroll with multiple text object created using PIXI.Text() - this works fine, it's scrollable etc. But unfortunately I'm stuck implementing that kind of old tube tv screen bend effect on the text - don't even know where to start. Can I achieve this using pixi.js? I'm thankful for every hint! Do I need a different approach? That's how I init each text of mine: constructor($el, stage) { this.stage = stage; this.title = $el; this.text = new PIXI.Text(this.title.innerHTML, { fontFamily: "Unno", fontSize: 120, fill: "transparent", stroke: "white", strokeThickness: 1 }); this.text.resolution = 2; this.getPosition(); this.stage.addChild(this.text); this.addListeners(); const font = new FontFaceObserver("Unno"); font.load().then(() => { this.text.updateText(); }) } getPosition = () => { const {width, height, top, left} = this.title.getBoundingClientRect(); this.text.position.set(left, top); }; ...

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

Hey all! I'm using Pixi.js in my edutainment platform, and it rocks. We're about to go live, and in our testing have found an intermittent issue with how text in Pixi.Text elements is rendered. Context: we're using a webfont loaded using Google's webfont.js like so: <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script> <script> WebFont.load({ custom: { families: ['Short Stack'] } }); </script> This produces a synchronous load, and is run before we bootstrap up Pixi and our framework/game. This seems to be working fine; I include it purely for context. The problem is that very seldomly, our Pixi.Text elements render with the text offset vertically by ~5 pixels. When this happens, ALL our text is offset. Doing a hard refresh (ctrl+shift+R on Firefox) resolves the issue, usually. See the attached screenshots for what it looks like when it borks. So! Any ideas what could be causing this issue? I know folks have had issues with load timing in the past, but the webfont is clearly loaded by the time the game renders - the font is correct in both versions. There's zero code changes between the working and offset versions - just a hard refresh. Help?

Hi, I have problem with getting height of text. Here is a example: text.style.wordWrapWidth = width; var height = text.height; Height is not correct value! After some time when i print in console "text.height" I get correct value! Is there a way to force text transform ?

EDIT: TANKS TO :Jammy EDITOR: http://pixitools.jamdonut.com/ TANKS TO :bigtimebuddy FROM http://mattkarl.com/ EDITOR: https://pixijs.github.io/pixi-text-style/# SOURCE: https://github.com/pixijs/pixi-text-style ___________________________________________________________ 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 ? http://pixijs.github.io/pixi-particles-editor/ thank a lot for help

Hi. everyone.. i wanna talk about PIXI.Text. PIXI.Text is very useful to create game or something.. but it seem not to consider memory first. it create canvas every time when PIXI.Text created second. PIXI.Text call updateTexture when set text like 'power.text = "super power"'; is there some problems if canvas has only one..? thx..

Hello, Thanks to the amazing v2 of PixiJS, managing devicePixelRatio has become a lot easier. However I'm still not very sure of how everything works and I'm wondering how I should deal with my PIXI.Text ? If I have a DisplayObjectContainer, on a retina display (ratio = 2), can I draw a text, let's say 16px height, into a 8px "retina" height ? I know how to do it with PIXI.BitmapText, it's easy because I only have to load a _@2x BitmapFont and it works fine. But what about classic text ? Thanks a lot ! Regards, JDW.