Search the Community

Showing results for tags 'text'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Found 177 results

  1. 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?
  2. 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 });
  3. 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?
  4. 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?
  5. WebGL Render Text Speed

    As we know ,webGL is faster and it has more capabilities. But,when I use Pixi.js render a large number of text,the speed is slower canvas.I don't know what the reason is? this is my demo address
  6. GUI Text Improvements

    Hello, I am making this post to discuss possible improvements to the GUI text system. Right now, when generating new text, it can be very slow if you have a lot of it in the screen. One clear improvement would be to pre-generate (or cache) each letter as an object and just generate instances of that object, which turns out to be very very very fast. However, that is not very easy to do as letter spacing can be a hard thing to manage when positioning each letter next to each other. Is there any easy way this could be improved in the babylonjs side to increase GUI text creation speed? Or is there any other solutions for this problem?
  7. Putting text on a box

    Hello, I am searching a way to display text on every side of a box, that is laid over a texture. The user should be able to edit the text. This is what I got by now: https://www.babylonjs-playground.com/#EEINMU#1 The flipped over text can be corrected with the faceUV, but I don't find a way to change the text which is turned by 90 degrees. Is there a way, to assign an individual ambientTexture to every face of the mesh? Or is my idea not suitable from the beginning? Other ideas: - I am using a second box that is a little bit bigger then the first and put the text on this box. I want to find another way to improve the performance. - Putting a plane on every side and displaying the text on them. I haven't tried this on jet, but I am a little bit concerned about the performance. If you have some information on the performance impact of this way, please let me know. -Using a box with shaders. http://www.babylonjs-playground.com/#TRNYD#13 I found this box in the forum, but couldn’t put a diffuseTexture and an ambientTexture on it. The solution that came across my mind was to draw the texture on the canvas, then put the text on it, then turn it back into a picture and put it onto the box. But I don't get the image on the canvas. http://www.babylonjs-playground.com/#TRNYD#22 -Using decals. I also thought about using decals for the text, but I don't know, if this is practical. How do I remove a decal, when the text is updated? How does it affect the performance? How hard is it to place them? I hope, I have provided all the information you need and hopefully you can help me to solve my problem.
  8. Center text in container

    Hi, My query is this: I use the Cocos creator tool to position a text. When you export the position of this element and then integrate it into my phaser game, it happens that the selected position is slightly different from what is previewed in the Cocos tool. I suspect it is due to how both tools draw the font in their respective container. As you can see in the attached images, in the tool the text is centered in its container, however, in Phaser, when debugging the edges of the text, you can see that the font is positioned upwards. In short, both containers are in the same position but the texts are drawn in different positions. Is there any way to modify how Phaser draws the text in his container? As additional information, both texts are centered and added to a sprite as a child. The way the text is positioned varies according to the font used. Cocos tool Phaser:
  9. Hi, I have a button in my game which has two child elements(a text aligned top center in and another text aligned bottom center). The issue is the child texts are also taking click of the button which should not happen. Here is the code for this: Fiddle : https://jsfiddle.net/3sf1b2zL/18/ var game = new Phaser.Game(480,320,Phaser.AUTO,''); var gameStates = {}; gameStates.Main = function(game){}; gameStates.Main.prototype = { preload: function() { this.load.crossOrigin = "Anonymous"; this.load.image('shop','https://s1.postimg.org/6fz3duzc0r/user_input_box.png'); }, create:function(){ var btnText = this.add.text(0,0,"Game Loaded",{fill:"#ffffff"}); var infoText = this.add.text(0,0,"This is a description of the game. It is only an informative text and it should not take click of its parent button. Try clicking this text",{fill:"#ffffff", wordWrap:true,wordWrapWidth:450}); var shopBtn = this.add.button(0,0,'shop', function(){ btnText.text = "Shop Clicked";}, this); shopBtn.anchor.setTo(0.5, 0); shopBtn.addChild(infoText); shopBtn.addChild(btnText); btnText.alignTo(shopBtn, Phaser.TOP_CENTER); infoText.alignTo(shopBtn, Phaser.BOTTOM_CENTER,0,20); shopBtn.x = this.game.width/2; shopBtn.y = this.game.height*0.2; } } game.state.add('main',gameStates.Main); game.state.start('main'); Please help me so that only the button takes click and text should not take the click Thanks
  10. I am using this code to create my text field on screen: screenTypingTextField = gameObject.add.text(200, 520, "", si.Utility.getTextStyleScreenTypingTextGreen()); screenTypingTextField.alpha = 0.5; screenTypingTextField.anchor.setTo(0.5, 0.5); //screenTypingTextField.width = 480; //screenTypingTextField.height = 240; thisObject.menuObjects.add(screenTypingTextField); textStyleScreenTypingTextGreen = { font :'70pt Arial', align : 'center', fill: 'Green' }, As you can see I have commented the width and height rows. Its because when i run this code again by entering the same scene that uses this code, it then starts to spread the text over all screen, even bigger. Is this the right way to create text and then set its width and height? Or I should just use the font to set text field size? here is a picture of my typing text field in green spread all over the screen
  11. Phaser Editor v1.4.3 released

    Phaser Editor v1.4.3 released Hello, A new version of Phaser Editor is available. In this delivery we include: New Text object. Different type of prefabs: Sprite, TileSprite, Button, Text. Improved preview of Atlas (tile, list and texture view modes), Image, and Spritesheet. Brush-like selection of sprite-sheet frames. Local website with examples and code. Internal web browser for a quick game run (experimental). Better HiDPI icons support. Read the release notes. Best Regards Arian
  12. Hey there, I'm really new to Pixijs. I'm planning to develop something which will require text captions displaying over time (think banjo kazooie, spyro, pokemon, etc etc). Does pixi already provide some way of doing this? I wouldn't mind doing it but I don't wanna reinvent the wheel. Thx in advance for the help guys
  13. Hi, I have created a tabbed text using tabs property of text. This works fine until I try to add color to text using addColor function of text. This removes the tabbing done on the text. Example here: //Phaser game initialization var game = new Phaser.Game(480, 320, Phaser.AUTO, 'game_div'); var gameStates = {}; gameStates.Main = function(game) {}; gameStates.Main.prototype = { create: function() { var textHeadings = this.add.text(20, 20, '', { fill: "#ffffff", tabs: [80, 140] }); var headingsArray = [ ['id', 'score', 'country'], ['1', '2300', 'US'], ['2', '1890', 'AUS'], ['3', '1000', 'US'] ]; textHeadings.parseList(headingsArray); //uncomment this line to see the issue //textHeadings.addColor("#00ff00",2); } } game.state.add('Main', gameStates.Main); game.state.start('Main');
  14. Hi all I was wondering if Pixi has a method for creating the appropriate sized text when within a scaled container. In my case, I scale the main container so that its height is 1080. In this container, I would create a Pixi.Text object with height 20px. From what I understand, this creates a 20px text object, which is then scaled down when placed in the container. This results in text which is slightly blurry. I'm planning on creating a method which would calculate the true pixel height required, which would then be scaled to the size needed. Is this something which Pixi itself supports, or would I need to build this myself?
  15. So Ive searched and the topics discussing this in the forum didnt help. I added 3 groups: backLayer, middleLayer, frontLayer declared in that order. Added a sprite to back and middle, and a text to front, however the text is still below the sprites. I tried using game.world.bringToTop on the text itself and the frontLayer group and it didnt work.
  16. So Ive searched and the topics discussing this in the forum didnt help. I added 3 groups: backLayer, middleLayer, frontLayer declared in that order. Added a sprite to back and middle, and a text to front, however the text is still below the sprites. I tried using game.world.bringToTop on the text itself and the frontLayer group and it didnt work.
  17. Hi guys, So, I stuck in a little problem here. I'm building a chat system for my casual game, but I'd like to put icons in the middle of the text, like Whats App messages with emoticons. Does anyone know how can I do it or have any ideas to solve it? EDIT: Just to clarify, the text and emoticons (images/sprites) must be rendered in the same sentence, like when we sent a message with emoticons on the WAPP chat. Thanks!
  18. correct vertical allign

    Hello, I tried many different ways but cannot make text appear vertically centered. Anchor is working fine, the problem is within font itself. When I use number as text, there is invisible space (I can see that if I set background color) bellow base line (for example letter g). However in my case this is critical, because number (score) is shown within small circle and must be ideally centered. 1) The complicated solution could be getting actual text height by scanning canvas' pixels. However, this may be time consuming. 2) Currently the only fast solution seems to be, creation of BitMap font with numbers. Is there any better solution than this? Thanks in advance
  19. Text anchor issue

    Hi. I'm using phaser 2.6.2 and I have an issue every time I create a text and set it's anchor. The text seem to fly away a great distance after setting it's anchor. Example: if I were to set the anchor to 0.5, the text moves to a location far greater than it's size. If I create a text, it's anchor is at default 0 (top left of text)? If I were to change it to 0.5, rather than the text center itself about the anchor, it goes a great distance away from it, like really far. this.goldCoinsText = this.game.add.text(350.6, 86.1, '5000', {font: "20px Arial", fill: "#ffe488"}); this.goldCoinsText.anchor.set(0.5);
  20. Is there any ways to draw outline for them? I know I can have multiple Text2D beneath it and act like "border". I'm just wondering if there's any better way of doing that.
  21. Hi, I'm trying to build my HUD with PIXI.Text, but am having problem that the text is bigger when resolution is larger. For example when l load the page with browser at 200% zoom then my HUD ends up being twice as big. I want the text to stay the same size thou - higher resolution should make it look crisper not larger. Any help/ideas for this? Thanks! // create app var app = new PIXI.Application({ width: window.innerWidth, height: window.innerHeight, resolution: window.devicePixelRatio, autoResize: true, antialias: true, backgroundColor: 0xFFFFFF }); document.body.appendChild(app.view); // create text var text = new PIXI.Text("TESTING"); app.stage.addChild(text);
  22. Is this a rendering issue or...

    My issue here is I'm trying to create a countdown timer using fonts and styling of my choice but I don't know how to update the text variable. I want to call the addChild method once and have the value of that string updated in a function. The only way I can see the updated countdown is with the addChild method but at the moment that leaves duplicate copies of the object on the screen. The render does not clear the canvas even though I read in the documentation it's set to do that by default. I tried two methods to get the desired results: var countdown = new PIXI.Text( days+" days "+hours+" hours " +minutes+" minutes "+seconds+" seconds ",timerStyle); countdown.updateText(); timerContainer.addChild(countdown) //tried a second method and that was use to create a sprite from the text textSprite = new PIXI.Sprite(countdown.texture); timerContainer.addChild(textSprite); I did some extensive google searching and I learned that you need to use the function .updateText(); in order for the text variable to actually update. I thought this would work but it does nothing to change the string value on the screen. I have also tried to declare and add the countdown variable to the stage, outside the function but the text does not update. Any suggestions would be greatly appreciated.
  23. I'm trying to crop a Phaser.Text, so I can make something similar to the As3 TextField class (where your text is inside of a mask). But the crop method is not working, here is what I did: this.pText = new Phaser.Text(this.game, 0, 0, text, style); this.pText.crop(new Phaser.Rectangle(0, 0, 20, 20), true); this.pText.updateCrop();
  24. 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
  25. Scale text question

    So, I have a text in size 200x50, and wan't to scale it down precisely 2 times (100x25) option 1) Scale 0,5. This sucks, as the quality is crewed (more on up-scale, less downscale, but anyways it is..) and I can't afford that in my project. option 2) FontSize/2. This sucks as well in my case, because it wont be precisely 100x25. So are there any alternative options, so I get the precise size and quality as well? Some kind of scale + re-render, duno?