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

Interests

Found 192 results

1. 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.

3. 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 anything. (using pixi 4.0.3) Anyone with the same problem?
4. 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.
5. 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.
6. 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 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
8. 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; 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.
9. 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?
10. 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", //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.
11. 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 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.
12. 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
13. 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.
14. 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?
15. 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.
16. 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.
17. 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 .
18. 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.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 });
19. 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?
20. 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
21. 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' }); encounterSceneContext.menuRun = this.add.text(55, 225, "Escape", { fontSize: '10px', fill: '#ffffff' }); encounterSceneContext.menuAttack.setInteractive( new Phaser.Geom.Rectangle(0, 0, encounterSceneContext.menuAttack.width, encounterSceneContext.menuAttack.height), Phaser.Geom.Rectangle.Contains); encounterSceneContext.menuRun.setInteractive( new Phaser.Geom.Rectangle(0, 0, encounterSceneContext.menuRun.width, encounterSceneContext.menuRun.height), Phaser.Geom.Rectangle.Contains); this.input.on('gameobjectover', function (pointer, gameObject) { console.log("gameobjectover"); gameObject.setTint(0xff0000, 0xff0000, 0xffff00, 0xff00ff); }); this.input.on('gameobjectout', function (pointer, gameObject) { console.log("gameobjectout"); gameObject.clearTint(); });
22. 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
23. 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 to work out what the source code is doing. Current Workaround The only workaround i've found is rebuilding the font and adding a wide margin to each letter (so the letter boundaries are more 'square'), then in Phaser splitting a Text object into individual Text objects for letters and calculating their position based on letter width, and manually subtracting a value to change the letter spacing. But even splitting and repositioning doesn't work that well (with any font, not just thin fonts) i have to calculate separate margins for even thinner letters like 'I', 'i', or 'l', or wide letters like 'm' and 'w'. I would rather not use BitmapText as i need to use different font sizes. Solutions Has anybody else encountered this issue? Found a solution or a better work-around? Thanks.
24. Fade out text after 2 second delay

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 & transforms but I'm a bit clueless when it comes to doing this with Phaser. For a start how do I specify a time period (2 seconds) between one state and another. Then how do I specify what change is to take place (fade out, travel upwards). It's also important that I can have many of these things on screen at once. (For when player picks up multiple treasures). Easy, right? Well I'm pretty sure this is extremely easy but I can't find any examples. I suspect it's to do with 'tweens' yes? Thanks Owen
25. Dynamically creating text with physics

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?