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

  1. 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.
  2. 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.
  3. 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.
  4. 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
  5. 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!
  6. I want to set the bounding box of text. Thanks!
  7. 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!
  8. 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
  9. 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
  10. 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?
  11. 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?
  12. 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.
  13. 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.
  14. 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.
  15. 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();
  16. 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?
  17. Hi everyone I'm wondering why font size and font rendering is so different when comparing `DynamicTexture` and `Canvas2D` side by side. http://www.babylonjs-playground.com/#TFFCW Note: The huge but blurred text is `8px` while the small and crisp text is `32px` Dynamic texture returns the expected result while text rendered in canvas 2d seems to be way too big and blurry. Of course I could use a bigger font size (ie. 8 times the size needed) and then scale it down (`scale: 0.125`). But I'd like to understand what's going on… Any hint much appreciated! Anyone?
  18. Hello everybody! I am trying to make text plane fade animation with text drawn on texture. I created dynamic texture, then created a plane. Next I set texture as textPlane.material.diffuseTexture. Texture has hasAlpha set to true. this.textPlaneTexture.drawText(text, null, 50, 'bold 100px Roboto Mono', 'pink', 'transparent'); So there's text written on the screen with transparent background. Next I created fade animation like: var fading = new BABYLON.Animation.CreateAndStartAnimation('fade' + this.text, this.textPlane.material, 'alpha', 30, 30, 1, 0, 0, null, () => { this.textPlane.isVisible = false; }); But here's the problem when the alpha is changing then also backgorund is getting from black to transparent. Why is that? How to prevent changing background alpha, only the text is alpha change is expected. Here's the playground http://babylonjs-playground.azurewebsites.net/#28LOAX
  19. HEY! Guyz, this is so very confusing to me. All i want is to display a single string in one of the corners of the screen. With it i would display my score. So basicly what i would like to display is something like: var textToDisplay = "Score: " + gameScore; All the answers that i found (been working on this for few hours) were very confusing and basicly useless. I did find dynamicTexture.drawText and got it to work, but it had a few problems: -the text moved with camera (didnt stay in the corner), im guessing it has something to do with the renderingPlane. -the text didnt rewrite all the time so "Score: " is writen OK but the numbers just get writen atop of eachother, and after picking up the 1st coin its just a mess. Could you give me some pointers on how to solve this problem? Thank you very much! Satiana
  20. 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.
  21. 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.
  22. 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!
  23. Greetings! I was wondering if there's a way to split text by character or by line? thanks
  24. 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?
  25. Hi all, Thanks for reading the question. I want to show a html symbol like copyright symbol using the code &copy; Is it possible to do that in Phaser. can someone please give some idea on this. thanks Joseph