Sign in to follow this  
Akis

Multi-Style text

Recommended Posts

Allo!

 

For a specific project, I needed to create a lot of multi-style text. And to be honest, it's just painful to do it manually every time. So I decided to create an object to do it for me, because I don't want to do it manually anymore :) This one calculates the position of each group of text automatically and will save me a lot of dev time now.

 

I called it "MultiStyleText" and the source code is available on github if you want: https://github.com/tleunen/pixi-multistyle-text

 

I'm pretty sure there are a few bugs in there, especially with styles using different font-size. But this is a start :)

I've released it as 0.1.0 because I'm not sure yet of the way to create it, with the 2 "styles" object. Feel free to suggest improvements on that!

 

I put an example using the same that Mat created for Pixi.Text and here is the result:

lQZeHZ1.jpg

 

Let me know what you think.

Share this post


Link to post
Share on other sites

I am getting PIXI undefined in pixi-multistyle-text.m.js. I am developing in react.

 

←→1 of 2 errors on the page
Unhandled Rejection (ReferenceError): PIXI is not defined
node_modules/pixi-multistyle-text/dist/pixi-multistyle-text.m.js:340
 
how to add PIXI reference in the library ?
 
Edited by Nagaraju

Share this post


Link to post
Share on other sites

If you use it through npm - then you have to do the same thing as for other pixiJS plugins: https://github.com/pixijs/pixi-layers/#webpack-browserify-angular

import * as PIXI from "pixi.js";
window.PIXI = PIXI;
const { MultiStyleText } = require("pixi-multistyle-text");

The problem is that PixiJS is referenced globally in plugins and we really can't make it work through `import`s and at the same time generate typescript bindings and allow vanilla <script> usage. ES6 imports are hell for library+plugins architectures.

Share this post


Link to post
Share on other sites

I am trying to use MultiStyleText through browser but I have difficulty building the js file from the source I downloaded on github. I admit I am not very familiar with npm, I have read a lot a documentation but somehow I can't seem to get my head around it. Il y run npm run build I get the following output and error. Thank you for your help.

 

> pixi-multistyle-text@0.10.0 build /Users/calpabia/Dropbox/CYOA/Golfe_CYOA/Tests/PIXI/___src/pixi-multistyle-text-master
> microbundle --name MultiStyleText

node-resolve: setting options.module is deprecated, please override options.mainFields instead
node-resolve: setting options.jsnext is deprecated, please override options.mainFields instead
node-resolve: setting options.module is deprecated, please override options.mainFields instead
node-resolve: setting options.jsnext is deprecated, please override options.mainFields instead
node-resolve: setting options.module is deprecated, please override options.mainFields instead
node-resolve: setting options.jsnext is deprecated, please override options.mainFields instead
(rpt2 plugin) Error: src/pixi-multistyle-text.ts:245:57 - error TS2345: Argument of type 'TextStyleExtended' is not assignable to parameter of type '{ align?: string; breakWords?: boolean; dropShadow?: boolean; dropShadowAlpha?: number; dropShadowAngle?: number; dropShadowBlur?: number; dropShadowColor?: string | number; dropShadowDistance?: number; ... 20 more ...; wordWrapWidth?: number; }'.
  Types of property 'whiteSpace' are incompatible.
    Type 'string' is not assignable to type 'boolean'.

245  	this.withPrivateMembers()._style = new PIXI.TextStyle(this.textStyles["default"]);
     	                                                      ~~~~~~~~~~~~~~~~~~~~~~~~~~
src/pixi-multistyle-text.ts:256:57 - error TS2345: Argument of type 'TextStyleExtended' is not assignable to parameter of type '{ align?: string; breakWords?: boolean; dropShadow?: boolean; dropShadowAlpha?: number; dropShadowAngle?: number; dropShadowBlur?: number; dropShadowColor?: string | number; dropShadowDistance?: number; ... 20 more ...; wordWrapWidth?: number; }'.

256  	this.withPrivateMembers()._style = new PIXI.TextStyle(this.textStyles["default"]);
     	                                                      ~~~~~~~~~~~~~~~~~~~~~~~~~~
src/pixi-multistyle-text.ts:267:57 - error TS2345: Argument of type 'TextStyleExtended' is not assignable to parameter of type '{ align?: string; breakWords?: boolean; dropShadow?: boolean; dropShadowAlpha?: number; dropShadowAngle?: number; dropShadowBlur?: number; dropShadowColor?: string | number; dropShadowDistance?: number; ... 20 more ...; wordWrapWidth?: number; }'.

267  	this.withPrivateMembers()._style = new PIXI.TextStyle(this.textStyles["default"]);
     	                                                      ~~~~~~~~~~~~~~~~~~~~~~~~~~
src/pixi-multistyle-text.ts:395:29 - error TS2345: Argument of type 'TextStyleExtended' is not assignable to parameter of type '{ align?: string; breakWords?: boolean; dropShadow?: boolean; dropShadowAlpha?: number; dropShadowAngle?: number; dropShadowBlur?: number; dropShadowColor?: string | number; dropShadowDistance?: number; ... 20 more ...; wordWrapWidth?: number; }'.

395  	return new PIXI.TextStyle(style).toFontString();
     	                          ~~~~~
src/pixi-multistyle-text.ts:697:113 - error TS2345: Argument of type 'TextStyleExtended' is not assignable to parameter of type '{ align?: string; breakWords?: boolean; dropShadow?: boolean; dropShadowAlpha?: number; dropShadowAngle?: number; dropShadowBlur?: number; dropShadowColor?: string | number; dropShadowDistance?: number; ... 20 more ...; wordWrapWidth?: number; }'.

697  		this.context.fillStyle = ((this as unknown) as TextWithPrivateMembers)._generateFillStyle(new PIXI.TextStyle(style), [text]) as string | CanvasGradient;
     		                                                                                                             ~~~~~

Error: src/pixi-multistyle-text.ts:245:57 - error TS2345: Argument of type 'TextStyleExtended' is not assignable to parameter of type '{ align?: string; breakWords?: boolean; dropShadow?: boolean; dropShadowAlpha?: number; dropShadowAngle?: number; dropShadowBlur?: number; dropShadowColor?: string | number; dropShadowDistance?: number; ... 20 more ...; wordWrapWidth?: number; }'.
  Types of property 'whiteSpace' are incompatible.
    Type 'string' is not assignable to type 'boolean'.

245  	this.withPrivateMembers()._style = new PIXI.TextStyle(this.textStyles["default"]);
     	                                                      ~~~~~~~~~~~~~~~~~~~~~~~~~~
src/pixi-multistyle-text.ts:256:57 - error TS2345: Argument of type 'TextStyleExtended' is not assignable to parameter of type '{ align?: string; breakWords?: boolean; dropShadow?: boolean; dropShadowAlpha?: number; dropShadowAngle?: number; dropShadowBlur?: number; dropShadowColor?: string | number; dropShadowDistance?: number; ... 20 more ...; wordWrapWidth?: number; }'.

256  	this.withPrivateMembers()._style = new PIXI.TextStyle(this.textStyles["default"]);
     	                                                      ~~~~~~~~~~~~~~~~~~~~~~~~~~
src/pixi-multistyle-text.ts:267:57 - error TS2345: Argument of type 'TextStyleExtended' is not assignable to parameter of type '{ align?: string; breakWords?: boolean; dropShadow?: boolean; dropShadowAlpha?: number; dropShadowAngle?: number; dropShadowBlur?: number; dropShadowColor?: string | number; dropShadowDistance?: number; ... 20 more ...; wordWrapWidth?: number; }'.

267  	this.withPrivateMembers()._style = new PIXI.TextStyle(this.textStyles["default"]);
     	                                                      ~~~~~~~~~~~~~~~~~~~~~~~~~~
src/pixi-multistyle-text.ts:395:29 - error TS2345: Argument of type 'TextStyleExtended' is not assignable to parameter of type '{ align?: string; breakWords?: boolean; dropShadow?: boolean; dropShadowAlpha?: number; dropShadowAngle?: number; dropShadowBlur?: number; dropShadowColor?: string | number; dropShadowDistance?: number; ... 20 more ...; wordWrapWidth?: number; }'.

395  	return new PIXI.TextStyle(style).toFontString();
     	                          ~~~~~
src/pixi-multistyle-text.ts:697:113 - error TS2345: Argument of type 'TextStyleExtended' is not assignable to parameter of type '{ align?: string; breakWords?: boolean; dropShadow?: boolean; dropShadowAlpha?: number; dropShadowAngle?: number; dropShadowBlur?: number; dropShadowColor?: string | number; dropShadowDistance?: number; ... 20 more ...; wordWrapWidth?: number; }'.

697  		this.context.fillStyle = ((this as unknown) as TextWithPrivateMembers)._generateFillStyle(new PIXI.TextStyle(style), [text]) as string | CanvasGradient;
     		                                                                                                             ~~~~~

    at error (/Users/calpabia/Dropbox/CYOA/Golfe_CYOA/Tests/PIXI/___src/pixi-multistyle-text-master/node_modules/rollup/dist/rollup.js:3460:30)
    at Object.error (/Users/calpabia/Dropbox/CYOA/Golfe_CYOA/Tests/PIXI/___src/pixi-multistyle-text-master/node_modules/rollup/dist/rollup.js:21251:17)
    at RollupContext.error (/Users/calpabia/Dropbox/CYOA/Golfe_CYOA/Tests/PIXI/___src/pixi-multistyle-text-master/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:17186:30)
    at /Users/calpabia/Dropbox/CYOA/Golfe_CYOA/Tests/PIXI/___src/pixi-multistyle-text-master/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:24940:19
    at arrayEach (/Users/calpabia/Dropbox/CYOA/Golfe_CYOA/Tests/PIXI/___src/pixi-multistyle-text-master/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:532:11)
    at forEach (/Users/calpabia/Dropbox/CYOA/Golfe_CYOA/Tests/PIXI/___src/pixi-multistyle-text-master/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:9360:14)
    at printDiagnostics (/Users/calpabia/Dropbox/CYOA/Golfe_CYOA/Tests/PIXI/___src/pixi-multistyle-text-master/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:24916:5)
    at Object.transform (/Users/calpabia/Dropbox/CYOA/Golfe_CYOA/Tests/PIXI/___src/pixi-multistyle-text-master/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:26582:17)
    at /Users/calpabia/Dropbox/CYOA/Golfe_CYOA/Tests/PIXI/___src/pixi-multistyle-text-master/node_modules/rollup/dist/rollup.js:20962:25

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! pixi-multistyle-text@0.10.0 build: `microbundle --name MultiStyleText`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the pixi-multistyle-text@0.10.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/calpabia/.npm/_logs/2020-05-26T10_11_02_623Z-debug.log

 

Edited by Iko

Share this post


Link to post
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...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.