Multi-Style text

Akis · October 26, 2014

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:

Let me know what you think.

praneybehl · October 27, 2014

Sweet I was just looking for this. I'll play around with it and let you know if there are any issue, suggestions or enhancement requests.

Thanks.

GBear · October 28, 2014

it's looks good...

Akis · October 29, 2014

Thanks guys!

Mat Groves · October 29, 2014

nice work Akis!

sripriya2691 · October 31, 2014

Its simple and best one

praneybehl · November 2, 2014

Is there a way to maybe implement rich text straight from the rich text WYSIWYG editor?

Nagaraju · February 4, 2020

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 February 4, 2020 by Nagaraju

ivan.popelyshev · February 4, 2020

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.

Nagaraju · February 4, 2020

Working great. Thank you.

Iko · May 26, 2020

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.

> [email protected] 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! [email protected] build: `microbundle --name MultiStyleText`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] 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 May 26, 2020 by Iko

Sign In

Multi-Style text

Recommended Posts

Akis

Link to comment

Share on other sites

praneybehl

Link to comment

Share on other sites

GBear

Link to comment

Share on other sites

Akis

Link to comment

Share on other sites

Mat Groves

Link to comment

Share on other sites

sripriya2691

Link to comment

Share on other sites

praneybehl

Link to comment

Share on other sites

Nagaraju

Link to comment

Share on other sites

ivan.popelyshev

Link to comment

Share on other sites

Nagaraju

Link to comment

Share on other sites

Iko

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members

Browse

Activity