Pixi.js: Criar um manipulador de fontes SDF

Criado em 15 out. 2016  ·  11Comentários  ·  Fonte: pixijs/pixi.js

No momento, o pixi tem apenas texto baseado em tela e fontes de bitmap criadas manualmente. Eu também gostaria de oferecer suporte a texto SDF diretamente de um arquivo de fonte.

As opções da biblioteca de análise são ouvidas abaixo. Ideal é pequeno, não tem código de carregamento (não é necessário), analisa e cria caminhos.

https://github.com/Jolg42/awesome-typography

| Biblioteca | Estrelas | Tamanho | Fontes Suportadas | Cargas | Analisa | Cria Caminhos | Layout de várias linhas | Notas |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| opentype.js | 1136 | 288k | TTF, OTF, WOFF | ✓ | ✓ | ✓ | | Layout adicionado com layout opentype |
| Typr.js | 271 | 60k | TTF, OTF | | ✓ | ✓ | | Foi criado para resolver alguns problemas com opentype.js |
| kit de fontes | 85 | 379k | TTF, OTF, WOFF, WOFF2, TTC, DFONT | ✓ | ✓ | ✓ | | |
| tipo aberto | 63 | ?k | TTF, OTF, WOFF, WOFF2 | | ✓ | ✓ | | apenas nó? |
| webfontloader | 4961 | ?k | ? | ✓ | | | | Principalmente apenas um observador para carregar fontes CSS |

Stale 🙏 Feature Request 🥶 Low Priority

Comentários muito úteis

@englercj @ivanpopelyshev @PixelsCommander Qual é o progresso atual desse recurso? Se ninguém fez isso recentemente, estou disposto a aceitar o trabalho.
Eu sou o autor do msdf-bmfont-xml que funciona com a ajuda de opentype.js e node-canvas . Funciona bem em Starling-Frameworks .
Quando comecei a usar o Pixi.js recentemente, descobri que o texto do msdf simplesmente não está implementado, então demorei algum tempo para estender o ótimo plugin pixi-sdf-text para habilitar o SDF multicanal sem dependências extras e alguns hacks em BitmapText e Loader , abaixo está meu progresso atual:
pixi-msdf
O efeito stroke & dropshadow é implementado sem nenhuma chamada extra.
Também algumas correções no algoritmo de layout BitmapText (os implementos atuais em 4.7 são um pouco problemáticos, e o parâmetro de linha de base bmfont é importante, mas não usado no layout BitmapText).

Eu li as palestras sobre v5 mudou em arquitetura e shaders, então não tenho certeza se é um bom momento para tentar criar um PR ou apenas deixá-lo em plug-ins autônomos.
Me digam o que acharam galera.

Todos 11 comentários

Há outras coisas com fontes. Por exemplo, use canais RGB como spritesheets diferentes para cobrir todos os símbolos asiáticos.

Olá @englercj , @ivanpopelyshev ,

No momento, estou ocupado com isso, pois nada mudou desde minha solicitação do ano passado https://github.com/pixijs/pixi.js/issues/1679 .

Portanto, o plano é criar uma malha e passar as coordenadas do ponto como atributos de ponto usuais + coordenadas de textura como uvs. Renderize isso uma vez no shader do que no cache.

Alguma sugestão de implementação?

Ivan, não tenho certeza se entendi corretamente quanto ao RGB. Pretende ser uma espécie de compressão para manter 3 vezes mais dados?

@englercj @ivanpopelyshev deixe-me saber seus pensamentos sobre isso

https://github.com/PixelsCommander/pixi-sdf-text

A prioridade atual é a renderização de várias linhas e compatibilidade máxima com texto normal.

PS @ivanpopelyshev descobriu o que você quer dizer com RGB. Programado para as próximas atualizações.

RGB - sim.

Qual o seu email? Vou convidá-lo no slack. Não importa, encontrei.

Marca por @finscn

@englercj @ivanpopelyshev @PixelsCommander Qual é o progresso atual desse recurso? Se ninguém fez isso recentemente, estou disposto a aceitar o trabalho.
Eu sou o autor do msdf-bmfont-xml que funciona com a ajuda de opentype.js e node-canvas . Funciona bem em Starling-Frameworks .
Quando comecei a usar o Pixi.js recentemente, descobri que o texto do msdf simplesmente não está implementado, então demorei algum tempo para estender o ótimo plugin pixi-sdf-text para habilitar o SDF multicanal sem dependências extras e alguns hacks em BitmapText e Loader , abaixo está meu progresso atual:
pixi-msdf
O efeito stroke & dropshadow é implementado sem nenhuma chamada extra.
Também algumas correções no algoritmo de layout BitmapText (os implementos atuais em 4.7 são um pouco problemáticos, e o parâmetro de linha de base bmfont é importante, mas não usado no layout BitmapText).

Eu li as palestras sobre v5 mudou em arquitetura e shaders, então não tenho certeza se é um bom momento para tentar criar um PR ou apenas deixá-lo em plug-ins autônomos.
Me digam o que acharam galera.

@soimy Este é um ótimo momento para colocar um PR para v5 ( next branch). Obrigado pelo voluntariado.

Precisa de alguma discussão sobre o módulo de análise TTF/OTF.
Estou pensando na necessidade de um analisador de fonte true-type em tempo de execução no pixi core. Isso adicionará pelo menos 60k+ carga de código do analisador, mas o benefício dos recursos ttf não parece ser igual. Este recurso deve ser tratado como devDependencies .

Diga-me o que você pensa.
BTW: Alguém pode me convidar para o slack do pixi? ID de folga: [email protected]

Se precisar de ajuda com isso, pode me enviar um ping.

Na verdade, acabei de escrever exatamente este código para uma ferramenta de desenho vetorial da Web que estou criando. Infelizmente, escrevi tudo em GWT e atualmente não tenho ciclos para reescrever tudo em JavaScript puro para Pixi (talvez, quando o Google lançar seu compilador J2CL Java para JS no próximo ano, eu possa recompilá-lo para JS).

No meu caso, a arquitetura que usei foi usar Typr.js para analisar arquivos truetype em tempo de execução. Então, à medida que cada caractere é exibido, eu uso um renderizador ttf personalizado (um simples, na verdade, não é muito código) para criar um SDF em tempo real apenas para o caractere e colocá-lo em um cache. E então os SDFs são renderizados na tela. É tudo razoavelmente rápido e os tamanhos de código não são tão ruins, então não tenho certeza se há necessidade de pré-computar o SDF de antemão.

A principal desvantagem é com os tamanhos de fonte. Para fazer as coisas corretamente, você mesmo precisa analisar os arquivos de fonte ttf, mas precisa agrupar um arquivo de fonte ttf em seu jogo. Os arquivos TTF têm apenas 50 KB ou mais para fontes somente em inglês, mas podem ter várias centenas de KB para fontes europeias e vários MB para fontes não europeias. Portanto, não tenho certeza de quão prática é essa abordagem para jogos na web/móveis.

Este problema foi marcado automaticamente como obsoleto porque não teve atividade recente. Será fechado se não ocorrer mais nenhuma atividade. Obrigado por suas contribuições.

Este tópico foi bloqueado automaticamente, pois não houve nenhuma atividade recente depois que ele foi fechado. Por favor, abra um novo problema para bugs relacionados.

Esta página foi útil?
0 / 5 - 0 avaliações

Questões relacionadas

lunabunn picture lunabunn  ·  3Comentários

YuryKuvetski picture YuryKuvetski  ·  3Comentários

zcr1 picture zcr1  ·  3Comentários

Darker picture Darker  ·  3Comentários

readygosports picture readygosports  ·  3Comentários