Search the Community

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?

I made a super tiny plugin for webfonts. https://github.com/tonetheman/phaser3_webfontloaderplugin To be clear I know very little about how loaders work in Phaser3 I just stumbled through it until I got it working. I needed it for a facebook instant game I am working on.

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

Hi! I'm doing a thing in pixi (actually, in it's dart port (https://github.com/FedeOmoto/pixi) but that should be the same for the purpose of this question) and I'm using its text features (http://www.goodboydigital.com/text-updates/). I understand that before rendering a text, you set the style in which to render it, and that the style includes many different things like color, align and font... What I don't get is: where do the fonts come from? In the provided example, they used 'Arial' font and I know for sure that you can use 'Snippet' font as well. Is there any list of all available fonts I can choose from? And will these fonts work the on every machine?