Laura

Members
  • Content Count

    10
  • Joined

  • Last visited

  • Days Won

    2
  1. Turns out, they were It actually was deceivingly simple. The PIXI code from my previous message works, but the parameter fontFileXML, which represents the fnt descriptor, has to be created as an XMLDocument (document.implementation.createDocument (namespaceURI, qualifiedName, docTypeObj)) and for fontPNGBase64String, instead of encoded PNG, just extract the canvas drawing as PIXI.Texture. BitmapFont will know how to interpret that as your custom font.
  2. This is another approach I tried to explore using PIXI: public installFont(fontFileXML, fontPNGBase64String) { PIXI.BitmapFont.install(fontFileXML, fontPNGBase64String); PIXI.BitmapFont.from("custom", { fontFamily: "custom", fontSize: 70, }); const title = new PIXI.BitmapText("This is the title", { fontName: "TitleFont" }); } From the official documentation, seems like I can do something like that, using an xml string as input data and some texture. However, the engine cannot autodetect the format. I am not even sure if this is supposed to work for my particular case.
  3. Yes, it was css, assigned to a variable and written with backtick, created dynamically inside a method and it worked for some woff font from the internet. I wasn't very specific in my answer. const nodeStyle = document.createElement('style'); nodeStyle.textContent = ` @font-face { font-family: 'testFont'; src: url(${pngBase64String}) format(png); // not suited for fnt fonts font-weight: normal; font-style: normal; }`; document.head.appendChild(nodeStyle); const nodeParagraph = document.createElement('p'); nodeParagraph.style['font-family'] = "testFont"; nodeParagraph.innerHTML = this.inputText; document.getElementById("canvas").appendChild(nodeParagraph); However, I don't think this is suited for loading a font in fnt format, like the one I have. That's why I was counting on Pixi to have this kind of functionality with the posibility to load the font from a base64 string and a descriptor file that will have all the details about letters positions. I currently can load a font from my assets using PIXI.BitmapText, but I wanted to load a dynamically created font.
  4. Thanks for the suggestion! I have tried the approach with @font-face (I'm not sure if I need to install some package to access FontFace, Angular doesn't recognize the class). I set the style as follows: @font-face { font-family: 'testFont'; src: url(${pngBase64}) format(png); font-weight: normal; font-style: normal; }`; However, it doesn't work and I am not really sure if it's supposed to work, since a bitmap has also a descriptor file, not only the png image and I didn't find anywhere the way to load that in font-face.
  5. Hello! I have a custom font that I create and I want to test it before being downloaded as an archive. At the moment of the test, I do not have a font file to load it using the BitmapText(text, OPTIONS) functionality. I was wondering if I can load it directly from an xml data string or blob or data url. I checked the official documentation (BitmapFont, BitmapFontLoader), but it is unclear to me if that will work. I would greatly appreciate an example, handling custom fonts is scarce on the internet. Thank you!
  6. Laura

    Generate bitmap font

    If anyone faces the same issues, I have discovered the problem. In the fnt file: <font> <info face="testFont" size="72" bold="0" italic="0" charset="" unicode="" stretchH="100" smooth="1" aa="1" padding="0,0,0,0" spacing="0,0" outline="0"/> <common lineHeight="80" base="57" scaleW="361" scaleH="512" pages="1" packed="0"/> <pages> <page id="0" file="testFont.png"/> </pages> ... On line 2, face="testFont" must match the name from line 5 (file = "testFont.png") Apparently, this undefined size error is a facade for anything that might be wrong with the font file.
  7. Hello! I am trying to build my own bitmap font using pixi 5. I was able to draw the letters and form a png file with them (attached file - it's a poor quality drawing, wanting to have some test file quickly). The fnt file is something I downloaded from littera and replaced position, height, width values with the ones I computed for my png file. When I try to load the font, I get the error: core.js:6185 ERROR TypeError: Cannot read property 'size' of undefined at BitmapText.updateText (text-bitmap.es.js:172) at new BitmapText (text-bitmap.es.js:155) I am able to load other bitmap fonts from the internet, so I am sure I am doing something wrong with either png or .fnt file. I haven't found much information on the internet regarding the fnt, so if you have some ideas on what seems wrong, I'd really appreciate it. Do you think this is fixable? Thank you, Laura testFont.fnt
  8. Thank you for your reply, Ivan! It is very useful.
  9. Hello! I am developing an application with Angular and PIXI JS which generates bitmap fonts using bezier curves. The curves represent the outlines of my letter and supposing I am drawing the letter O as seen in the image I attached (it is not a stylish drawing, but you get the point), I would like to fill in with colour the interior of my drawing - the letter itself. I have not found away to do it. I have tried to create a texture from my graphics and then a sprite from the texture, then adding a tint to the sprite, as follows: const bezierTexture = renderer.generateTexture(this._splineGraphics); // convert shape to texture const sprite = new PIXI.Sprite(bezierTexture); this._stage.addChild(sprite); sprite.texture = PIXI.Texture.WHITE; sprite.tint = 0xFF0000; sprite.width = this._width; sprite.height = this._height; However, this is tinting my entire canvas. Thank you, Laura
  10. Hello! I am developing an application with Angular and PIXI JS which generates bitmap fonts using bezier curves. The curves represent the outlines of my letter and supposing I am drawing the letter O as seen in the image I attached (it is not a stylish drawing, but you get the point), I would like to fill in with colour the interior of my drawing - the letter itself. I have not found away to do it. I have tried to create a texture from my graphics and then a sprite from the texture, then adding a tint to the sprite, as follows: const bezierTexture = renderer.generateTexture(this._splineGraphics); // convert shape to texture const sprite = new PIXI.Sprite(bezierTexture); this._stage.addChild(sprite); sprite.texture = PIXI.Texture.WHITE; sprite.tint = 0xFF0000; sprite.width = this._width; sprite.height = this._height; However, this is tinting my entire canvas. Thank you, Laura