Блог

Главная - Вопросы по программированию - Могу ли я установить ширину шрифта шрифта в Phaser 3?

Могу ли я установить ширину шрифта шрифта в Phaser 3?

#javascript #canvas #webgl #phaser-framework

Вопрос:

Я использую Phaser 3 для разработки браузерной игры на холсте с WebGL. Я задаю ширину текста на холсте с помощью пользовательского загруженного шрифта, но не могу задать его стиль (например, курсив, полукольцо).

Вот код, который я использую для создания текста:

 this.add.text(100, 600, 'Test Text', {
  font: '50px Poppins'
})
this.add.text(100, 600, 'Test Text', {
  font: '50px Poppins semibold'
})

Вот результат:

введите описание изображения здесь

На втором изображении используется шрифт по умолчанию, а не Поппинс. Похоже, что как только я попытаюсь установить курсив или любой другой стиль, он вернется к шрифту по умолчанию.

Я также попытался установить его с помощью свойств (не повезло). Кто-нибудь сталкивался с такой же проблемой (стилизация пользовательских шрифтов) и как правильно загружать пользовательские шрифты в стиле?

Ответ №1:

Вопрос:

semibold не является действительным font-weight . так что это будет рассматриваться как шрифт.

введите описание изображения здесь

Решение:

введите описание изображения здесь

 this.add.text(100, 600, 'Test Text', {
  font: '600 50px Poppins' // 600 equivalent to Semi Bold
})

https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight

Комментарии:

1. Спасибо за вашу идею. Однако это ничего не меняет: imgur.com/a/0BxSbRw В документах также говорится, что нет атрибута для установки веса шрифта: newdocs.phaser.io/docs/3.55.2/…

2. Спасибо за ваше обновление. Я нашел проблему. Это не было связано с холстом. Это было связано с асинхронной загрузкой шрифтов из Google. С помощью webfontloader от Google я могу подождать с активным событием, пока они не будут готовы. Это устранило проблему.

3. @LarsFlieger, пожалуйста, подумайте о том, чтобы опубликовать свой собственный ответ и принять его, поскольку, похоже, вам нужно было решить две несвязанные проблемы. Я не уверен, почему вы приняли этот ответ (исправил ли он одну из ваших проблем?), Но, к сожалению, ваше решение скрыто в комментарии.

Ответ №2:

Проблема была связана с асинхронной загрузкой шрифтов из Google. С помощью webfontloader от Google я могу подождать с активным событием, пока они не будут готовы.

 import WebFont = require('webfontloader')

export class BootScene extends Phaser.Scene {
  private ready: boolean = false
  constructor() {
    super({
      key: 'BootScene'
    })
  }
  async preload(): Promise < any > {
    WebFont.load({
      google: {
        families: ['Poppins:600i,600,400', 'Inconsolata']
      },
      active: () => {
        // This is required for asnyc loading
        this.ready = true
      }
    })
  }
  // Launch game when all assets are loaded
  update(): void {
    if (this.load.isReady() amp;amp; this.ready) {
      this.scene.start('MainMenuScene')
    }
  }
}
Метки: