Pixi.js: рдкрд╛рда рдкрд░рд┐рд╡рд░реНрддрди рдХреЗ рдмрд╛рдж рдмрд┐рдЯрдореИрдк рдкрд╛рда рдЪреМрдбрд╝рд╛рдИ

рдХреЛ рдирд┐рд░реНрдорд┐рдд 22 рд╕рд┐рддре░ 2020  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ  ┬╖  рд╕реНрд░реЛрдд: pixijs/pixi.js

рдЕрдкреЗрдХреНрд╖рд┐рдд рд╡реНрдпрд╡рд╣рд╛рд░

рд╡рд░реНрддрдорд╛рди рд╡реНрдпрд╡рд╣рд╛рд░

рдЗрд╕ рдкрд╛рда "111111111111111111111111111" рдХреЗ рд╕рд╛рде рдПрдХ PIXI.BitmapText рдЙрджрд╛рд╣рд░рдг рдмрдирд╛рдПрдБред рдЗрд╕рдХреА рдЪреМрдбрд╝рд╛рдИ рдпрд╛рдж рд░рдЦреЗрдВ, рдлрд┐рд░ рдЯреЗрдХреНрд╕реНрдЯ рдХреЛ "1" рдореЗрдВ рдмрджрд▓ рджреЗрдВ рдФрд░ рдлрд┐рд░ рд╕реЗ рдЪреМрдбрд╝рд╛рдИ рдЬрд╛рдВрдЪреЗрдВ, рдпрд╣ рд╕рдорд╛рди рд╣реЛрдЧрд╛ред

рд╕рдВрднрд╛рд╡рд┐рдд рд╕реНрдерд┐рддрд┐

рдпрд╣ рд╕рдорд╕реНрдпрд╛ рддрдм рд╣реЛрддреА рд╣реИ рдЬрдм PIXI.BitmapText рдЗрдВрд╕реНрдЯреЗрдВрд╕ рдореЗрдВ PIXI.Mesh рдЙрджрд╛рд╣рд░рдг рд╣реЛрддрд╛ рд╣реИ рдЬрд┐рд╕рдореЗрдВ 199 рд╕реЗ рдЕрдзрд┐рдХ рд╡рд░реНрдЯрд┐рдХрд▓ рд╡рд╛рд▓реЗ рдмрдЪреНрдЪреЗ рд╣реЛрддреЗ рд╣реИрдВ

рдкреНрд░рдЬрдирди рдХрд░рдиреЗ рдХрд┐ рдкреНрд░рдХреНрд░рд┐рдпрд╛

https://pixijs.io/examples/#/text/bitmap -text.js
рдЗрд╕ рдХреЛрдб рдХреЛ рдЪрд┐рдкрдХрд╛рдПрдБ:

const app = new PIXI.Application({ backgroundColor: 0x1099bb });
document.body.appendChild(app.view);

app.loader
    .add('desyrel', 'examples/assets/bitmap-font/desyrel.xml')
    .load(onAssetsLoaded);

function onAssetsLoaded() {
    const bitmapFontText = new PIXI.BitmapText('11111111111111111111111111111111111111111111111', { font: '55px Desyrel'});
    console.log(bitmapFontText.width);
    bitmapFontText.x = 50;
    bitmapFontText.y = 200;
    bitmapFontText.text = '1';
    console.log(bitmapFontText.width);
    app.stage.addChild(bitmapFontText);
}

рд╡рд╛рддрд╛рд╡рд░рдг

  • pixi.js рд╕рдВрд╕реНрдХрд░рдг : 5.3.2
  • рдмреНрд░рд╛рдЙрдЬрд╝рд░ рдФрд░ рд╕рдВрд╕реНрдХрд░рдг : рдХреНрд░реЛрдо 85
  • рдУрдПрд╕ рдФрд░ рд╕рдВрд╕реНрдХрд░рдг : рд╡рд┐рдВрдбреЛрдЬ 10

рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА

рдпрд╣рд╛рдБ рдПрдХ JSFiddle рд╕рдВрд╕реНрдХрд░рдг рд╣реИ:
https://jsfiddle.net/bigtimebuddy/syt6gdpb/

рдЬреИрд╕рд╛ рдХрд┐ рдореИрдВ рд╕рдордЭрддрд╛ рд╣реВрдВ, рдпрд╣ рд╕рдорд╕реНрдпрд╛ рдЗрд╕рд▓рд┐рдП рдкреИрджрд╛ рд╣реЛрддреА рд╣реИ рдХреНрдпреЛрдВрдХрд┐ рд╣рдо рдирдП рдкрд╛рда рдХреЛ рдкрд┐рдЫрд▓реЗ рдХреА рддреБрд▓рдирд╛ рдореЗрдВ рдЫреЛрдЯрд╛ рдХрд░рддреЗ рд╕рдордп рдмрдлрд░ рдХреЛ рд╕рд╛рдл рдирд╣реАрдВ рдХрд░рддреЗ рд╣реИрдВред
рдЬрд╛рдВрдЪреЗрдВ рдХрд┐ рдпрд╣ рд╕реНрдерд┐рддрд┐ рдХреИрд╕реЗ рдХрд╛рдо рдХрд░рддреА рд╣реИ
image

рд╕рднреА 3 рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

рдпрд╣рд╛рдБ рдПрдХ JSFiddle рд╕рдВрд╕реНрдХрд░рдг рд╣реИ:
https://jsfiddle.net/bigtimebuddy/syt6gdpb/

рдпрд╣рд╛рдБ рдПрдХ JSFiddle рд╕рдВрд╕реНрдХрд░рдг рд╣реИ:
https://jsfiddle.net/bigtimebuddy/syt6gdpb/

рдЬреИрд╕рд╛ рдХрд┐ рдореИрдВ рд╕рдордЭрддрд╛ рд╣реВрдВ, рдпрд╣ рд╕рдорд╕реНрдпрд╛ рдЗрд╕рд▓рд┐рдП рдкреИрджрд╛ рд╣реЛрддреА рд╣реИ рдХреНрдпреЛрдВрдХрд┐ рд╣рдо рдирдП рдкрд╛рда рдХреЛ рдкрд┐рдЫрд▓реЗ рдХреА рддреБрд▓рдирд╛ рдореЗрдВ рдЫреЛрдЯрд╛ рдХрд░рддреЗ рд╕рдордп рдмрдлрд░ рдХреЛ рд╕рд╛рдл рдирд╣реАрдВ рдХрд░рддреЗ рд╣реИрдВред
рдЬрд╛рдВрдЪреЗрдВ рдХрд┐ рдпрд╣ рд╕реНрдерд┐рддрд┐ рдХреИрд╕реЗ рдХрд╛рдо рдХрд░рддреА рд╣реИ
image

рд╕рдВрднрд╡рддрдГ рд╢реАрд░реНрд╖ рдмрдлрд╝рд░ рдХреЛ рд╢реВрдиреНрдп рдХрд░рдиреЗ рд╕реЗ рдпрд╣ рд╕рдорд╕реНрдпрд╛ рдареАрдХ рд╣реЛ рдЬрд╛рдПрдЧреА, рдЕрдЧрд░ рдпрд╣ рдирдпрд╛ рдирд╣реАрдВ рдмрдирд╛ рд╣реИред

рдХреНрдпрд╛ рдпрд╣ рдкреГрд╖реНрда рдЙрдкрдпреЛрдЧреА рдерд╛?
0 / 5 - 0 рд░реЗрдЯрд┐рдВрдЧреНрд╕

рд╕рдВрдмрдВрдзрд┐рдд рдореБрджреНрджреЛрдВ

finscn picture finscn  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

Makio64 picture Makio64  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

st3v0 picture st3v0  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

softshape picture softshape  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

sntiagomoreno picture sntiagomoreno  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ