Jump to content

Pixi custom font not working


temp123
 Share

Recommended Posts

I am using pixi-legacy version 7.3.2 and I am trying to create text using custom font (.otf font file) and add it to the stage of pixi application. Down below is demo version of how I am trying to achieve that but seems like pixi will always use some default font (Times New Roman in my case).

 

One solution I found was to call updateText method on pixi Text instances but I dont like this solution as I dont wan't to save all the references to Text instances throughout the project. Is there any other solution? How to ensure that font is loaded before continuing with the code execution. Seems like async/await doesn't work here.

 

import { Application, Assets, Text } from "pixi.js-legacy";

class testClass {
  font;
  app;

  constructor() {
    this.app = null;
    this.font = null;
  }

  async init(canvas) {
    this.app = new Application({
      width: 600,
      height: 120,
      backgroundColor: "0xffffff",
      view: canvas
    });

    // add and load font
    Assets.add({
      alias: "font",
      src: "path/to/font.otf"
    });

    this.font = await Assets.load("font");

    // create text
    let txt1 = new Text("Some Text", {
      fontFamily: "font",
      fontSize: 60,
      fill: "0x000000",
      fontVariant: "small-caps"
    });
    txt1.anchor.set(0.5);
    txt1.x = 300;
    txt1.y = 60;

    // add text to stage
    this.app.stage.addChild(txt1);
  }
}

export { testClass };

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...