Search the Community

Showing results for tags 'text'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Platform
    • 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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 184 results

  1. 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 =, 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 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.
  2. 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 ->
  3. 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., 0, 'test', { font: '18px Verdana', fill: '#000000', wordWrap: true, wordWrapWidth: 230 }, this); Thanks for any insight!
  4. I want to set the bounding box of text. Thanks!
  5. 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!
  6. 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(, 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
  7. 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
  8. 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?
  9. 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.
  10. 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.
  11. crffty

    text field

    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( + 150, + 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) { 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: thank you in advance for you help.
  12. 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 =, 10, 'carrier_command', "Crystals:" + crystalCount, 12); coinText.updateText();
  13. Hi everyone I'm wondering why font size and font rendering is so different when comparing `DynamicTexture` and `Canvas2D` side by side. 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?
  14. 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
  15. 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
  16. ecsancho

    Splitting Text

    Greetings! I was wondering if there's a way to split text by character or by line? thanks
  17. Hi all, Thanks for reading the question. I want to show a html symbol like copyright symbol using the code © Is it possible to do that in Phaser. can someone please give some idea on this. thanks Joseph
  18. Hey guys, Please take a look at this JSFiddle: As you can see I'm trying to have a button with a text on it. Therefore I create a Graphics object and draw it as a Rectangle. Afterwards I add a Text object to its children AND this Text object receives an option called "align : center". That way I expected the Text to be centered to its local container. Sadly the Text just got rendered at the global x:0;y:0 Can somebody tell me what I'm misunderstanding in regards to the container system of PIXI.js? greets Charlie!
  19. Hay guys, trying to learn states and i've run into a problem. I've got this function. And when it is called, i need it to create some text. States and breaking my phaser game into several files is a first for me and i cant for the life of me figure this out. I need to create some text from the animationPass function, but i get this error: Uncaught TypeError: Cannot read property 'text' of undefined -- of line 7, and thats where the create introText line is. in my intro.js i've got function animationPass() { introText = this.add.text(320, 240, 'Write some text'); //i've tried this.introText - but that didnt work either. } var introMap = function (game) { var introText; } introMap.prototype = { create: function () { animationPass(); }, update: function () { } } And this has worked fine so far. Infact i've used this structure in another file and it works just fine there. Here i get however Uncaught TypeError: Cannot read property 'text' of undefined -- of line 7, and thats where the create introText line is. My preload.js looks like this preload = function (game) { WebFontConfig = { google: { families: ['Press Start 2P'] } }; } preload.prototype = { preload: function () { this.load.spritesheet('intro', 'img/introAnim.png', 172, 124, 25); }, create: function () {"introMap"); } } I humbly ask for your assistance. And i'm sorry if the answer is obvious. I would not ask if i hadn't spend a great deal of time trying to figure out the answer myself.
  20. 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?
  21. Hi, im newbie in Phaser developement and I'm trying to create "speech bubble with text"... It should looks like this: I dont know how to create rectangle below text which will cover all text area. In documentation there are only text color and no option to set background of text. Any suggestions? (or example code? ) :-)
  22. I tried to create a text centering solution. I create a Group2D container for a Text2D - textFieldContainer. Inside the container I create a Text2D (naturally) - textField. Whenever I change the text, I set textField.x to be textField.width / 2 (textField.width returns different values for different widths as expected). By doing that I'm attempting to keep the actual text centered to the (0, 0) of the textFieldContainer. (and so I'm able to play freely with textFieldContainer's x and y without affecting textField.x centering solution. The problem is the text isn't actually being moved on screen. I created a PG reproducing this problem: Line 24 has no effect at all, commenting it results in the same display. I created the marker textField to help you see better that the text is not moved. It's as if there's an extra placement logic for Text2D behind the curtains that's preventing me for moving it around properly. I also tried playing with textField.origin, to no avail. I attached an image demonstrating how it is now (X), and how it should look centered (V). @Nockawa
  23. Hi all, Is this possible? e.g. // Create textvar t =, 10, "Hello World", { font: "16pt Arial", fill: "#FFFFFF", align: "center" });// Ideally not this because it uses internal values, and actually doesn't update the text displayed. t._style['fill'] = "#FF0000";// Perhaps something like this...!t.updateCSS({ font: "16pt Arial", fill: "#FF0000", align: "center" });Thanks!
  24. Rayj

    Scrolling Text

    Is there an example anywhere of scrolling text? I want to scroll text from right to left at the bottom of a webpage. Thanks, Ray
  25. So say I set the text in two lines: this.labelText = "two\nlines"; this is inside an object so it looks a little wacky this.label = callbackContext.add.text(this.x + this.labelPositionX, this.y + this.labelPositionY, this.labelText,; this.label.setShadow(2, 2, 'rgba(0, 0, 0, 0.6)', 4); It only displays the first line. Using the line break works everywhere else but here. here is the font style: game.dictionaryFontStyle = { font: '28px "museo-sans"', fill: '#ffffff', align: "center", stroke: '#000000', strokeThickness: '2' };