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
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 169 results

  1. 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
  2. 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
  3. 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
  4. 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
  5. 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');
  6. 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?
  7. 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.
  8. 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.
  9. 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!
  10. 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
  11. 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);
  12. 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.
  13. 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);
  14. 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.
  15. 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();
  16. 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
  17. 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?
  18. hi guys in abow image i am palcing the name of the building when i drag also it will come along with the building because i am drawing it on top of building by using me.font like this i wana add pin image to my building and it should stick to my building while dragging also ,i tried creating sprite image and adding it to world but it wont stick to my building can someone help me with this .. i am thinking to do as shown in the below image like this
  19. Hello all! I have a sprite with some children, 3 sprites and a text. The text floats above the sprite and moves with it. I have 4 layers that in my map and the sprite is rendered after layer 2. The problem is that the text ends up behind part of the map that sits in layers 3 and 4. Is there a way to force the text to the top of everything?
  20. default text object function

    i'm trying to make a Text object i can call and will build the correct bitmaptext var Text = function(game, target, font) { Phaser.BitmapText.call(this, game, target.x, target.y - target.height /2 , font, '', 24); this.anchor.setTo(0.5); console.log(this) } /// //so i can do something like this this.nameDisplay = new Text(game, this, 'font:default'); but it gave me an error that this.updateText is not a function, so i added Text.prototype.updateText = function() { } under the text function, but now it says 'Cannot read property "PhysicsBody" of undefined'
  21. Scalable text for pixi.js

    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!
  22. Hello. I managed to create code that draws a button along with a textfield and also with the four states that a button have, onInputUp, onInputDown, onInputOver and onInputOut. However, it is still experimental, and since I add text object as a child of Phaser.Graphics, the text is a bit blurry. But the bigger issue is, new graphical elements are added without removal, so I have a bug somewhere, or it is just not possbile to create dynamically drawn button with text and all states and to add custom click event handler. I will post another topic for the code itself, but here i just want to ask if there is a plugin for Phaser that draws buttons dynamically, or buttons on which I can change the text dynamically? Or how can I create button and be able to change its text dynamically? Should I just place Graphics object below and on top a text field both pointing to the same click listener?
  23. Dancing TextField with right align

    Hello, I have two TextFields. The first one is aligned right by setting anchor.x = 1. The second one is aligned left by default. There is a visual issue if text value of the RIGHT aligned TextField is changing on the different one with different width: the digits are "dancing" a little, while the LEFT aligned TextField stands. Here is the example: https://jsfiddle.net/7dv61c63/ Don't know is it a bug at PIXI but I'll be much appreciated for any suggestion how to fix this issue.
  24. Issue with Text rendering

    Hi, I am new to Phaser and trying to develop a game that includes some light weighted animations so that the game always covers the whole screen available. To achieve this I am using a background image larger then the canvas size and scaling down the game components to fit into the screen, Initially i included some text inside these game components which was getting pixelated when scaling down the component by 50%, so I have decided to keep text elements out of the components and replacing them by lowering the font size. The issue seems resolved but when the game goes fullscreen and restored back to default size the text again is getting blurred. Anybody ever encountered any such issue? What could be the possible reason for this behavior. I am attaching the screenshot of the text in both the situation. Whenever the screen is resized, I destroy the current text element and redraw it using the new font-size. After restoring screen from fullscreen mode. Default screen on initial load.
  25. Rotated Text collision

    Hi everyone! I have several Pixi.Text objects floating in my Pixi container. var style = { font:"22px Verdana", fill:getRandomColor() }; var text = new PIXI.Text("My text", style); text.anchor.set(0.5, 0.5); text.dx = 0.1; text.dy = 0.1; Each Text object is rotating from -90 degrees to + 90 degrees. When collision happens with Text object and container, Text acts like a ping-pong ball changing its direction. Currently I'm using this code to check if text object is < or > of my pixi container width: if(text.x < 0 || text.x > $("#pixi-container").width()) text.dx = -text.dx; if(text.y < 0 || text.y > $("#pixi-container").height()) text.dy = -text.dy; text.x += text.dx; text.y += text.dy; Collision happens when a center of text object reaches container border. I need collision detection when ends of text object touches the container border.