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 154 results

  1. 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?
  2. 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
  3. 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?
  4. 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'
  5. Hi, I'm adding fontWeight to some text and it works fine on everything except iOS where only the first character responds to the command. var textObj = game.add.text(0, 0, 'Hello World! This is a triumph!', { font: 'Arial', fontSize: 32 }); textObj.addFontWeight('bold', 6); textObj.addFontWeight('normal', 11); Only the 'W' becomes bold. Any suggestions?
  6. First of all I would like to say that I've read all topics and issues on github, related to this problem and it didn't help me. I've checked PIXI.RESOLUTION, antialiasing, different fonts (google web fonts, system fonts), colors, etc and anyway I am still getting blurry text. And when I apply a little scaling to canvas It gets even worse. Examples how it looks without scaling and with scaling I attached. Would like to hear any advice on subject. Thanks in advance!
  7. 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!
  8. 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.
  9. 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?
  10. 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.
  11. 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.
  12. I have a code like this: fonts.css @font-face{ font-family: 'LiberationMono'; src: url('../fonts/LiberationMono-Regular-webfont.eot'); src: url('../fonts/LiberationMono-Regular-webfont.eot?iefix') format('eot'), url('../fonts/LiberationMono-Regular-webfont.woff') format('woff'), url('../fonts/LiberationMono-Regular-webfont.ttf') format('truetype'), url('../fonts/LiberationMono-Regular-webfont.svg#webfont') format('svg'); } @font-face { font-family: 'archivoblackregular'; src: url('../fonts/archivoblack-regular-webfont.woff2') format('woff2'), url('../fonts/archivoblack-regular-webfont.woff') format('woff'), url('../fonts/ArchivoBlack-Regular.ttf') format('truetype'); } fonts = "30pt LiberationMono"; fontTitles = "50pt archivoblackregular"; ... text = this.game.add.text(this.game.world.centerX, 130, "┬┐What option is the correct?", { font: fontTitles, fill: "#005ba6", align: "center" }); text.anchor.set(0.5) But in the first round does not work. I have thought to use this as it says in https://hacks.mozilla.org/2016/06/webfont-preloading-for-html5-games/ var fontLoaded = false; var gameCreated = false; function createText() { if (!fontLoaded || !gameCreated) return; game.add.text(0, 0, 'Lorem ipsum', { font: '12px Amatica SC', fill: '#fff' }); } function preload() { let font = new FontFaceObserver('Amatica SC'); font.load().then(function () { fontLoaded = true; createText(); }); } function create() { gameCreated = true; createText(); } But it's a lot of code change, since my games are all with text. Thanks in advance.
  13. For some strange reason Canvas API doesn't have an underline text feature. This missing feature in Canvas means you can't underline text in Phaser. I'm not sure if anyone ever missed this feature, but fear not... now you can underline text! I've extended the Phaser.Text object by adding a simple *hack* to get underlined text. GitHub Repo -> https://github.com/brentstrandy/phaser-underline-text
  14. Is there a way to underline text? This seems like such a simple question, but I can't find a solution on the internets. I'd image adding a simple "underline" to the font attribute would work, but no luck. this.game.add.text(0, 0, 'test', { font: '18px Verdana', fill: '#000000', wordWrap: true, wordWrapWidth: 230 }, this); Thanks for any insight!
  15. I want to set the bounding box of text. Thanks!
  16. Hello, fellow Phasorians! Using Phaser 2.2.1 and Canvas renderer. I have a weird problem which is most probably not a bug within Phaser, but it's something that I'm doing wrong. I've added a text instance using game.text.add(20,20,"hello",style) in the create() method, but for some reason it doesn't show up! I'm also rendering a tilemap on the canvas (tilemap is created AFTER the text instance). When I enable the layer.debug on all layers and set some alpha values around 0.3, I can see the text! However it's not the color I've defined (white fill with black stroke), instead it blends with the background (tilemap). If I don't set the style (black font), it doesn't show at all. I create the text instance within the create() method and the tilemap instance after the create() has been executed. I've tried setting the text.z property, but it doesn't seem to make a difference. I'm not currently posting code, because I have feeling it's something really obvious I'm missing!
  17. I've read multiple posts similar to what I'm trying to accomplish, but still haven't been able to get this working. I'm trying to center a text object vertically within its own bounds. var fontScoreWhite = { font: "24px Avenir", fill: "#000000", boundsAlignH: "center", boundsAlignV: "middle" }; this.timeText = this.add.text(this.game.width-12, 12, this._time, fontScoreWhite); this.timeText.setTextBounds(0, 0, this.timeText.width, this.timeText.height); this.timeText.anchor.set(1,0); Am I missing something? I'm following the example https://phaser.io/examples/v2/text/center-text
  18. I'm using Phaser to upgrade an old flash game. Unfortunately, all of the text in my game seems to have fairly poor quality. I've attached two comparison images* and included my code below. *I understand the fonts on the two images are different this.buttonText = game.add.text(35, 0, buttonText, { 'font': '18px', 'fill': '#000000' }, this.parentGroup); Any idea why Phaser's text would appear blurry? Brent
  19. How do you vertically align text in the center? I have a high score box that shows 5 scores listed vertically. I render the names using a dynamic font size - so depending on how wide the name is, the font size is bigger or smaller. You can see in the attachment that if the name is very long with a very small font, the name looks like it is vertically aligned to the top. I want the text to be vertically centered. I tried using boundsAlignV in the style of the font, but that didn't change anything: var style = {font: "64px Knewave", fill: "#ffffff", boundsAlignH: "center", boundsAlignV: "center"}; Any other ideas?
  20. I'd like to have a 2d text (text always facing the camera, so no need for 3d), which 2d position and scaling are affected by its position in the 3d world, and 3d objects in the 3d worlds can be rendered in front of it and hide it, depending on its position in the 3d world. I feel like I've seen such an example somewhere, was it in Canvas2D maybe?
  21. Hello everyone, I'm currently creating my first Phaser game, so I'm relatively new to all of this. Basically what I'm trying to achieve is to create text with images inside. I'm thinking of building Strings like "This is a {{test}} String", which gets parsed in a way that the "{{test}}" part will be replaced by an image that has previously been loaded into the cache, using the identifier 'test'. I've been searching through the web in the past few days but didn't find anything that really helps me. For experimental purposes, the images I want to use in my Text are the Playstation input symbols (Cross, Square, Triangle and Circle). So, for example, if I add a text "Press {{cross}} to continue" to the game I want it to show the Cross-Symbol inside the text. Hopefully this explains enough. Does anyone have a good idea for a way of achieving this, or done this before? I will greatly appreciate any help! Kind regards and thanks for reading! Edit: Thanks for the answers! Just like mattstyles suggested, I figured I'd have to generate the text and image parts by parsing the string and then calculate each of the parts positions. For those who are interested in how I did it: First I parsed the string by splitting it at spaces (" "), iterating over the resulting array and depending on the "substring", either add a text or image to a previously defined group. Then I iterated over the groups children and set each of their x and y attributes after calculation the position, based on the all the previous children's widths, heights and a fixed anchor point. My result is a tooltip that follows the mouse pointer when hovering over certain objects. This is a very rough explanation. If anyone wants, I can provide some of my code with more precise information.
  22. Hi, I am completely new to phaser and game dev. I am trying to implement a crossword and would like a scroll bar on the right side so users can scroll to read the clues. (Please see attached image). Does phaser have some pre-built function that can handle this? Thanks.
  23. Hi I'm trying to put a small text field that the player can type text into and them submit the the text. I've seen so may complicated ( over my head ) ways to do this but I was hoping for a simple solution. Just need to click on a box and be able to type in it, then cluck "subScore". this.subScore = game.add.sprite(this.game.world.centerX + 150, this.game.world.centerY + 100, 'subScore'); this.subScore.anchor.setTo(0.5, 0.5); // Enable input on the subScore button this.subScore.inputEnabled = true; // Attach a function to the input down ( click/tap) this.subScore.events.onInputDown.add(function() { var name = ""; var score = ""; $.ajax ( { url:"/vaultage/publicHTML/score.php", data:{name:name, score:score}, type:"post", success:function(result){ if (result === "success"){ alert ('yes'); } else { alert ('no'); }; } }); }, this); full repo: https://github.com/craftycal/vaultage thank you in advance for you help.
  24. Hi all, I'm trying to create a coin counter in my game, using a bitmap font. Everything displays fine, and the counter works, however when a player collects a new coin, rather than replacing the '0' with a '1', it shows a '1', but underneath you can still see a '0' visibly. I've tried several work around methods, including even doing an if statement checking how many coins and replacing it with plain text rather than replying on the var count, and using coinText.updateText();. Does anyone have any ideas? I'll leave my code sample below. var crystalCount = 0; var coinText; //Skip down to the update section coinText = this.game.add.bitmapText(20, 10, 'carrier_command', "Crystals:" + crystalCount, 12); coinText.updateText();
  25. 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?