- Joined
- Mar 28, 2016
- Messages
- 1,623
- Reaction score
- 1,437
- First Language
- French
- Primarily Uses
- RMMV
PIXI TEXT MULTI MOTIONS STYLES CORE
Thousands of possible combination for make a great game
under M.I.T licence
Required:
* pixi.js v4.5.6 or upper
* PIXI SpriteSheetsAnimations Core
* Easing Library from @Iavra
the Debuger will be an advanced and super functional version of my old plugin RMMV PICTURES DEBUG TOOL
TUTORIAL AND EXAMPLE
OTHER EXAMPLE debugger + pixi icons textures
debug pictures rmmv
example: GigglesStyles
example: GigglesWords + custom tag + debugger
example: GigglesLetters
Presentation
pixi text plugin with multi style and motions animations managements.
will support, multi language localization, multi styles, motions animations, filters and icons textures.
Also detection of text info with mouse hover for show animated box.
The plugin work with a registar Closures that allow to registe a custom setup for eatch styles, word, letter or icons.
Alow text scroll with a alpha Mask and Filter (no need photoshop)
FEATURES AVAIBLE :
- * pre build cache text in memory for permanent text
- * multi styles with easy tag in string (custom tag in plugin manager)
- * allow auto mask text with height || width detection for (page slider box)↓↑←→
- * Mask allow all new pixi filter ! with performance preRendering.
- * allow text fade in && out , and also rmmv command text
- * allow letter Giggles animations
- * ultra performance preCache localization language
- * mouse detection hover word with desciption box
- * word motion animation with filter and easing library
- * easy multi language dataBase
- * easy create, delete and manage text in game progress.
- * allow custom icons library from pixi sprite and texture packer.
- * work with layer from PIXI SPRITESHEETS ANIMATIONS CORE
Surround the wish text with the {id tag}, to use a customize styles.
Use the hooks to add parameters to the text.
the settings can also inherit styles or properties.
add special tag to your custom string text.
Styles: {s+id} text {/s+id}
This is for set the custome style id of a specifique text
Icons: {i+id}
This its a proprety that allow to insert a true pixi texture icons id
NewLine: {n+factor}
This its a proprety thats allow to jump line, by default {n0} will use the heigth of last line, and the number are the factor of the jump line by pixel ~negative number allowed.
pause: {p+time}
this is a proprety thats make wait text for X time if you use motions show. Only for text message by motions sequences.
wait: {w+valur}
this its a wait command, text will wait command input.
valur:0 = wait any command
valur:1 = wait Mouse Command
valur:2 = wait keyboard input
valur:z,d,t,y = wait a specifique key list input command
function callBack: {f+callBackID}
Pass a callBack ID defined in the plugin list, it allow to make custom Interaction.
For example, make talk animation or face animations of other obj.
the text id passed as parameter.
note: usefull for pause and wait command combinaison for text sequences motions animations.
mouse interaction: {m+text}
This allow to embed specifique text and allow to call specific callBack mouse method.
Its will detect the click, over mouse, and mouse out.
The text embed will passed at parameter for the custom function proprety.
STYLES TEXT PROPRETY LISTS: <s>
you can use the generator here
This list its basic for now, i need to edit it, but here all feature for styles..
PHP:
align: 'center', // 'left'||'center'||'right' //primary
breakWords: false, //Break words between any two letters on wordWrap //primary
dropShadow: false,
dropShadowAngle: Math.PI / 6,
dropShadowBlur: 0,
dropShadowColor: '#000000',
dropShadowDistance: 5,
fill: 'black',
fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL,
fontFamily: 'Arial',
fontSize: 26,
fontStyle: 'normal', //normal|italic|oblique|initial|inherit
fontVariant: 'normal', //normal|small-caps|initial|inherit
fontWeight: 'lighter', //normal|bold|bolder|lighter|number|initial|inherit|900|600|400
letterSpacing: 0,
lineHeight: 0,
lineJoin: 'miter', //"bevel|round|miter"
miterLimit: 10,
padding: 0,
stroke: 'black',
strokeThickness: 0,
textBaseline: 'alphabetic', //"alphabetic|top|hanging|middle|ideographic|bottom"
wordWrap: false, //primary
wordWrapWidth: 100, //primary
lineStyle:'middle', //'top'||'middle'||'bottom' //primarySCRIPTCALL LISTS && METHODS
pixiMS
allow to global access to the plugin, also for initialise and create animated txt obj game.
legend: green:finish yellow:available partially red:todo
.newMS(id, layer, txt, styles, x, y) ■
initialise and create a new multi Style pixi object ID to a specific layers.
id(number): id asign to the pixi multiStyle object stored in the register
layer(number): layer id where show the pixi multiStyle Object,
txt"string": text string
styles{obj}||"string": pass a pure pixi styles obj or styles name id in plugin dataBase
x(number)optional: x pos of container, default 0;
y(number)optional: y pos of container, default 0;
return: motionTextContainers
id(number): id asign to the pixi multiStyle object stored in the register
layer(number): layer id where show the pixi multiStyle Object,
txt"string": text string
styles{obj}||"string": pass a pure pixi styles obj or styles name id in plugin dataBase
x(number)optional: x pos of container, default 0;
y(number)optional: y pos of container, default 0;
return: motionTextContainers
PHP:
var styles = 'myMenuStyle1';
var txt = "hi, am a awsome {s0}PIXI text{/s0};
var myVar = pixiMS.newMS(1, 6, txt, styles, 200, 10)__________________________________________________________________________________________
motionTextContainers METHOD AND SETUP
.add_splitBy(type) ●
Registe a split method to this text setup. Its the regex algoript to use when text will building.
The split algorypte will also afect performance and how motions will work and rendering. You can also set the default split algorithme for all game in the plugin Manager
2:"letters" , use a regex for split string by letters
1:"words", use a regex for split string by words
or default 0:"tag" use a regex and split text by styles tag.
type(number)||"string"optional: set a number or string type, for registe the regex algorithme.
return: motionTextContainers
The split algorypte will also afect performance and how motions will work and rendering. You can also set the default split algorithme for all game in the plugin Manager
2:"letters" , use a regex for split string by letters
1:"words", use a regex for split string by words
or default 0:"tag" use a regex and split text by styles tag.
type(number)||"string"optional: set a number or string type, for registe the regex algorithme.
return: motionTextContainers
PHP:
var styles = 'myMenuStyle1';
var txt = "hi, am a awsome {s0}PIXI text{/s0};
var myVar = pixiMS.newMS(1, 6, txt, styles, 100, 10).add_splitBy(2).add_Giggles( xLimit, yLimit, rotLimit, frame, tag) ●
Regist a motions Giggles setup on the regex splited string. You also can afect only some words , letters or tag, you can crush or push multiple motions setup. Giggle have random x,y move regex with easing effect.
xLimit(number): the X power for the Giggles (pixel)
yLimit(number): the Y power for the Giggles (pixel)
rotLimit(number)optional: the Radius power for rotation (its divid/100), default 0
frame(number)optional: speed of the motions effect (time frame) default 100
tag[array]optional: list , tag or words or letters, will apply this motions setup on this list if exist. default false..
return: motionTextContainers
xLimit(number): the X power for the Giggles (pixel)
yLimit(number): the Y power for the Giggles (pixel)
rotLimit(number)optional: the Radius power for rotation (its divid/100), default 0
frame(number)optional: speed of the motions effect (time frame) default 100
tag[array]optional: list , tag or words or letters, will apply this motions setup on this list if exist. default false..
return: motionTextContainers
PHP:
var styles = 'myMenuStyle1';
var txt = "hi, am a awsome {s0}PIXI text{/s0};
var myVar = pixiMS.newMS(1, 6, txt, styles, 100, 10).add_splitBy(2)
.add_Giggles( 1, 2, 0, 120).add_Scaler( wLimit, hLimit, rotLimit, frame, tag, crush ) ●
Regist a motions Scaler setup on the regex splited string. You also can afect only some words , letters or tag, you can crush or push multiple motions setup. Scaler have random scaleX,ScaleY transformation regex with easing effect.
wLimit(number): the X power for the Scaler sX(pixel) 1:100%
hLimit(number): the Y power for the Scaler sY(pixel) 1:100%
rotLimit(number)optional: the Radius power for rotation (its divid/100), default 0
frame(number)optional: speed of the motions effect (time frame) default 100
tag[array]optional: list , tag or words or letters, will apply this motions setup on this list if exist. default false.
crush(boolean)optional: crush the current setup list, prevent multi motions registar on a list.
return: motionTextContainers
wLimit(number): the X power for the Scaler sX(pixel) 1:100%
hLimit(number): the Y power for the Scaler sY(pixel) 1:100%
rotLimit(number)optional: the Radius power for rotation (its divid/100), default 0
frame(number)optional: speed of the motions effect (time frame) default 100
tag[array]optional: list , tag or words or letters, will apply this motions setup on this list if exist. default false.
crush(boolean)optional: crush the current setup list, prevent multi motions registar on a list.
return: motionTextContainers
PHP:
var styles = 'myMenuStyle1';
var txt = "hi, am a awsome {s0}PIXI text{/s0};
var myVar = pixiMS.newMS(1, 6, txt, styles, 100, 10).add_splitBy(2)
.add_Giggles( 1, 2, 0, 120)
.add_Scaler( 1, 2, 0, 120,'next page',true).add_Shaking( xLimit, yLimit, rotLimit, frame, tag, crush ) ●
Regist a motions shacking effect on regext string text. similar to giggle but less easing
xLimit(number): the X power for the Shaking (pixel)
yLimit(number): the Y power for the Shakings (pixel)
rotLimit(number)optional: the Radius power for rotation (its divid/100), default 0
frame(number)optional: speed of the motions effect (time frame) default 100
tag[array]optional: list , tag or words or letters, will apply this motions setup on this list if exist. default false.
crush(boolean)optional: crush the current setup list, prevent multi motions registar on a list.
return: motionTextContainers
xLimit(number): the X power for the Shaking (pixel)
yLimit(number): the Y power for the Shakings (pixel)
rotLimit(number)optional: the Radius power for rotation (its divid/100), default 0
frame(number)optional: speed of the motions effect (time frame) default 100
tag[array]optional: list , tag or words or letters, will apply this motions setup on this list if exist. default false.
crush(boolean)optional: crush the current setup list, prevent multi motions registar on a list.
return: motionTextContainers
PHP:
var styles = 'myMenuStyle1';
var txt = "hi, am a awsome {s0}PIXI text{/s0};
var myVar = pixiMS.newMS(1, 6, txt, styles, 100, 10).add_splitBy(2)
.add_Shaking( 0,5,0,20).add_Blinks( bLimit, teint, frame, tag, crush ) ●
add a blink effect on the regex string text, blink afect alpha, also color teint.
bLimit(number): blink alpha power,
teint(number)optional: allow to set and conbine a target teint color effect with this motions
frame(number)optional: speed of the motions effect (time frame) default 100
tag[array]optional: list , tag or words or letters, will apply this motions setup on this list if exist. default false.
crush(boolean)optional: crush the current setup list, prevent multi motions registar on a list.
return: motionTextContainers
bLimit(number): blink alpha power,
teint(number)optional: allow to set and conbine a target teint color effect with this motions
frame(number)optional: speed of the motions effect (time frame) default 100
tag[array]optional: list , tag or words or letters, will apply this motions setup on this list if exist. default false.
crush(boolean)optional: crush the current setup list, prevent multi motions registar on a list.
return: motionTextContainers
PHP:
var styles = 'myMenuStyle1';
var txt = "hi, am a awsome {s0}PIXI text{/s0};
var myVar = pixiMS.newMS(1, 6, txt, styles, 100, 10).add_splitBy(2)
.add_Blinks( 1 ).set_startEffect( mode, startProps, easingType, duration, waitTime) ●
registering a starMotionEffect when element will rendering.
mode'string': the mode for starting effect todo: (will allow multiple mode) default: linear
startProps{obj}: add starting props for the starting props, see pixi obj props
easingType[array]: add easing libray, from ivra, [type,inout]
duration(number): duration in frames (ms) for easing library
waitTime(number): time waiting at eatch element showing
return: motionTextContainers
mode'string': the mode for starting effect todo: (will allow multiple mode) default: linear
startProps{obj}: add starting props for the starting props, see pixi obj props
easingType[array]: add easing libray, from ivra, [type,inout]
duration(number): duration in frames (ms) for easing library
waitTime(number): time waiting at eatch element showing
return: motionTextContainers
PHP:
var styles = 'myMenuStyle1';
var txt = "hi, am a awsome {s0}PIXI text{/s0};
var myVar = pixiMS.newMS(1, 6, txt, styles, 100, 10).add_splitBy(2)
.add_Giggles( 1, 2, 0, 120)AFTER SETUP , COMPILER SETUP REGISTAR
.end() ●
start build text with all setup registered . its allow build text in a loading phase befor start the rendering. this method will not rendering text, it only start the regex, build register and variable closure for performance motions
return: motionTextContainers
return: motionTextContainers
PHP:
var styles = 'myMenuStyle1';
var txt = "hi, am a awsome {s0}PIXI text{/s0};
var myVar = pixiMS.newMS(1, 6, txt, styles, 100, 10).add_splitBy(2)
.add_Giggles( 1, 2, 0, 120)
.add_Scaler( 1, 2, 0, 120,'next page',true)
.end()// build text regex and closures with all setup registered befor__________________________________________________________________________________________
motionTextContainers CONTROLER (AFTER COMPILER)
.start() ●
Start Rendering text and style , also start the motions animation engine if you add it in the register.
you need use compiler from .end() befor for registering all setup
return: motionTextContainers
you need use compiler from .end() befor for registering all setup
return: motionTextContainers
PHP:
var styles = 'myMenuStyle1';
var txt = "hi, am a awsome {s0}PIXI text{/s0};
var myVar = pixiMS.newMS(1, 6, txt, styles, 100, 10).add_splitBy(2)
.end() // compile
.start() // start compiled motions text.pause() ●
Pause freeze, all motions text animations registered
PHP:
var styles = 'myMenuStyle1';
var txt = "hi, am a awsome {s0}PIXI text{/s0} with {s0}Multi Styles Motions.{/s0} I support {s1}line Break{/s1} and also {s1}wordWrap{/s1} .I have a {s2}optimised performance core{/s2} with motions core animations.I also support icons {i8} and animated icons {i6} preCache.";
var myVar = pixiMS.newMS(1, 6).add_GigglesStyles(1,1).txt(txt,styles).start(); // rendering the motion text
myVar.pause(); // pause the motion text animation only.stop() ●
Stop all motion register and clear text render.
the ID remains cached, which allows you to quickly start and redering again the text already built.
the ID remains cached, which allows you to quickly start and redering again the text already built.
PHP:
var styles = 'myMenuStyle1';
var txt = "hi, am a awsome {s0}PIXI text{/s0} with {s0}Multi Styles Motions.{/s0} I support {s1}line Break{/s1} and also {s1}wordWrap{/s1} .I have a {s2}optimised performance core{/s2} with motions core animations.I also support icons {i8} and animated icons {i6} preCache.";
var myVar = pixiMS.newMS(1, 6).add_GigglesStyles(1,1).txt(txt,styles).start(); // rendering the motion text
myVar.stop(); // stop rendering and remove text children.destroy() ●
No need use this text ID again, destroy the text from cache and all render registar.
PHP:
var styles = 'myMenuStyle1';
var txt = "hi, am a awsome {s0}PIXI text{/s0} with {s0}Multi Styles Motions.{/s0} I support {s1}line Break{/s1} and also {s1}wordWrap{/s1} .I have a {s2}optimised performance core{/s2} with motions core animations.I also support icons {i8} and animated icons {i6} preCache.";
var myVar = pixiMS.newMS(1, 6).add_GigglesStyles(1,1).txt(txt,styles).start(); // rendering the motion text
myVar.destroy(); // destroy text ID and Cache rendering and remove text children.debug() ●
Active live Debugger to check text engine and understand how its work. Userfull for setup text, motions and styles.
PHP:
var styles = 'myMenuStyle1';
var txt = "hi, am a awsome {s0}PIXI text{/s0} with {s0}Multi Styles Motions.{/s0} I support {s1}line Break{/s1} and also {s1}wordWrap{/s1} .I have a {s2}optimised performance core{/s2} with motions core animations.I also support icons {i8} and animated icons {i6} preCache.";
var myVar = pixiMS.newMS(1, 6).add_GigglesStyles(1,1).txt(txt,styles).start().debug(); // rendering the motion textDOWNLOAD: v1.0 stable
download v1.0
note: the plugin is stable but will evolve according to the evolution of my project.
target project befor motion!
Last edited:
