PIXI Text Multi Motions Styles Core V1.0

Discussion in 'JS Plugin Releases (RMMV)' started by Jonforum, Oct 23, 2017.

  1. Jonforum

    Jonforum Veteran Veteran

    Messages:
    1,594
    Likes Received:
    1,380
    Location:
    Canada / Québec
    First Language:
    French
    Primarily Uses:
    RMMV
    [​IMG]
    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
    [​IMG]

    example: GigglesWords + custom tag + debugger
    [​IMG]

    example: GigglesLetters
    [​IMG]

    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
    STRING TEXT TAGS LISTS:
    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
        
    breakWordsfalse//Break words between any two letters on wordWrap //primary
        
    dropShadowfalse,
        
    dropShadowAngleMath.PI 6,
        
    dropShadowBlur0,
        
    dropShadowColor'#000000',
        
    dropShadowDistance5,
        
    fill'black',
        
    fillGradientTypeTEXT_GRADIENT.LINEAR_VERTICAL,
        
    fontFamily'Arial',
        
    fontSize26,
        
    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
        
    letterSpacing0,
        
    lineHeight0,
        
    lineJoin'miter'//"bevel|round|miter"
        
    miterLimit10,
        
    padding0,
        
    stroke'black',
        
    strokeThickness0,
        
    textBaseline'alphabetic'//"alphabetic|top|hanging|middle|ideographic|bottom"
        
    wordWrapfalse//primary
        
    wordWrapWidth100//primary
        
    lineStyle:'middle'//'top'||'middle'||'bottom' //primary


    SCRIPTCALL LISTS && METHODS

    pixiMS
    allow to global access to the plugin, also for initialise and create animated txt obj game.
    [​IMG]


    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
    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
    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
    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
    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
    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
    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
    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
    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
    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(16).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.
    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(16).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(16).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(16).add_GigglesStyles(1,1).txt(txt,styles).start().debug(); // rendering the motion text

     

    DOWNLOAD: 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!
    After target motion txt and pixi animation texture packer!
     
    Last edited: Nov 27, 2017
    #1
  2. Gamefall Team

    Gamefall Team Nebula Games Leader Veteran

    Messages:
    344
    Likes Received:
    432
    Location:
    Italy
    First Language:
    Italian
    Primarily Uses:
    RMMV
    @Jonforum Amazing work!
    I'm looking forward for updates, looks fantastic :kaojoy:
     
    #2
  3. Jonforum

    Jonforum Veteran Veteran

    Messages:
    1,594
    Likes Received:
    1,380
    Location:
    Canada / Québec
    First Language:
    French
    Primarily Uses:
    RMMV
    hey, thanks friendl, its a update of our work .
    he must answer all the needs..
    I need a quick plugin that allows me to do everything with the text.
    hard work but fun
     
    #3
    Kino likes this.
  4. Black Mamba

    Black Mamba Veteran Veteran

    Messages:
    261
    Likes Received:
    77
    First Language:
    pt-br
    i can make a menu from scratch with no programming with it?
     
    #4
  5. Jonforum

    Jonforum Veteran Veteran

    Messages:
    1,594
    Likes Received:
    1,380
    Location:
    Canada / Québec
    First Language:
    French
    Primarily Uses:
    RMMV
    #5
  6. Jonforum

    Jonforum Veteran Veteran

    Messages:
    1,594
    Likes Received:
    1,380
    Location:
    Canada / Québec
    First Language:
    French
    Primarily Uses:
    RMMV
    plz avoid sending me pv on the original tune in psychadelic mode.
    I give the link in original tread, thank you
    enough to laugh for hours, and plunge your brain into an imaginary world
    the original iinspiration are this one.
     
    Last edited: Oct 26, 2017
    #6
  7. Black Mamba

    Black Mamba Veteran Veteran

    Messages:
    261
    Likes Received:
    77
    First Language:
    pt-br
    but is possible to make menus with it? and battles HUD too?
     
    #7
  8. Jonforum

    Jonforum Veteran Veteran

    Messages:
    1,594
    Likes Received:
    1,380
    Location:
    Canada / Québec
    First Language:
    French
    Primarily Uses:
    RMMV
    yes its my first priority why i need it and in developpement.
    Example :
    interactive menu title

    quest gui

    maps menu + reverse MASK


    for battle gui menus, nop , i dont touch or use rmmv battle system in my project.
    you have to see someone specialize in the battle codes from rmmv.
    i never study how work the battle in rmmv engine, i dont like it :).

    another example here for my target, not use PIXI thecnologie here, only rmmv canva thecnologie with some great plugin dev here, @triacontane and @Galv coding (very lagging), but my target is made this in full intro in PIXI thecnologie + motion text, its will be awsome.
    But it easy to dev with heavy js code, am a lightweight code dev.
    this intro made with obsolete and very heavy rmmv code, at end see those codes canvas f.u.c.k.e.d up to 5 fps!

     
    Last edited: Oct 26, 2017
    #8
    LittleSY and Black Mamba like this.
  9. Black Mamba

    Black Mamba Veteran Veteran

    Messages:
    261
    Likes Received:
    77
    First Language:
    pt-br
    omg thats awesome, touch screen works too?
     
    #9
  10. Jonforum

    Jonforum Veteran Veteran

    Messages:
    1,594
    Likes Received:
    1,380
    Location:
    Canada / Québec
    First Language:
    French
    Primarily Uses:
    RMMV
    Android technology is another reality.
    It has some adjustment to make, but it is minor, as a developer it is easier to target an environment than many.
    example in my code here frome PIXI SpriteSheetsAnimations Core:
    at line 213 i buil a checkJSON_Integrity code.
    but this one are build under and use a Node.js thecnologie.
    So work very good for PC, mac, and linux, but f.u.c.k.e.d. up when use under android thecnologie if i try to emulate under XDK
    Am alway try made a code fully compatible all interfacE (pure js but some time it very hard)
    so yes touch screen work , but for now the plugin not work with android because i use Node.js code that not compatible with endroid enviroment.
    Example here.
    PHP:
        // Validate integrity directory: json formats (texturePacker: multipack on single ), also auto detection
        
    _pixiSSA_aniObj.prototype.checkJSON_Integrity = function() {
            if(
    Utils.isNwjs()){ // if pc or mac linux TODO: ANDROID + loader
            
    var path = require('path'),
                
    gameDir path.dirname(process.mainModule.filename),
                
    fs = require('fs');
            var 
    valid_JSON = {};
            for (
    objName in this) {
                if (
    typeof this[objName] !== "object") { continue; }; // jumper valide name 'object'
                
    valid_JSON[objName] = [];
                for (var 
    0len this[objName].json.lengthleni++) {
                    var 
    dirFile this[objName].json[i];
                    if (
    fs.existsSync(gameDir '/' dirFile '.json')) {
                        
    valid_JSON[objName].push(dirFile '.json');
                        continue;
                    };
                    for (var 
    num 0;; num++) {
                        if (
    fs.existsSync(gameDir '/' dirFile '-' num '.json')) {
                            
    valid_JSON[objName].push(dirFile '-' num '.json');
                        } else { break; };
                    };
                };
            };
            for (
    objName in valid_JSON) {
                
    Object.defineProperty(this[objName], 'valid_JSON', { enumerablefalseconfigurablefalsevaluevalid_JSON[objName] });
            };
        };
    };
    i need here to change require that f.u.c.k.e.d up in android envirnoment.
    for now i dont know how target directory with android environment, but its maybe
    very easy, i just neef do testing debug from emulator xdk and try to find a code to target directory environement.
    For now , i dont test a lot android thecnologie. but dont worry ,
    am interested
     
    Last edited: Oct 26, 2017
    #10
    Black Mamba likes this.
  11. bhindi1224

    bhindi1224 NOT Indian Okra Veteran

    Messages:
    295
    Likes Received:
    167
    First Language:
    English
    Primarily Uses:
    RMMV
    Doesn't just using OpenGL make most android phones not want to work anymore? Or is this using Canvas? Sorry for my ignorance, just trying to get it straight in my head.
     
    #11
    Jonforum likes this.
  12. Jonforum

    Jonforum Veteran Veteran

    Messages:
    1,594
    Likes Received:
    1,380
    Location:
    Canada / Québec
    First Language:
    French
    Primarily Uses:
    RMMV
    for mobile, it's not openGL but webGl, a diferent technology.
    And again, I do not think ideally RPG game developer seeks to reach mobile phone users, but rather tablet or rasbery users.
    I do some test, I'm able to RUN my projects on android, but ideally it takes (need) the latest technologies what the most of mobiles user do not have.
    But am not a mobile gamer , so am not very understand and testing mobile thecnologie.
    Am maybe a old young man lol.
    When a play a game, i use only my pc or my china tablet.
    but i know some people use here phone!.
    but its not my priority to target phone for my project, but android yes its in my target.
     
    Last edited: Nov 11, 2017
    #12
    bhindi1224 likes this.
  13. Jonforum

    Jonforum Veteran Veteran

    Messages:
    1,594
    Likes Received:
    1,380
    Location:
    Canada / Québec
    First Language:
    French
    Primarily Uses:
    RMMV
     
    #13
  14. Jonforum

    Jonforum Veteran Veteran

    Messages:
    1,594
    Likes Received:
    1,380
    Location:
    Canada / Québec
    First Language:
    French
    Primarily Uses:
    RMMV
    addition of a small roadmap and preliminary codes.
    add link to alpha code
     
    #14
  15. Jonforum

    Jonforum Veteran Veteran

    Messages:
    1,594
    Likes Received:
    1,380
    Location:
    Canada / Québec
    First Language:
    French
    Primarily Uses:
    RMMV
    release v1.0 + basic tutorial
     
    #15
  16. ashyramoonwolf

    ashyramoonwolf Chibo's Keeper Veteran

    Messages:
    206
    Likes Received:
    142
    First Language:
    french
    Primarily Uses:
    RMMV
    All that work, This is so nice o_O are everything supported on android/ios deploy? I plan to do some update to my project now... (The chibo garden, it is in my signature! So far it look like a rpg maker game, but thanks to your plugin, i may can do a proper mobile game! Do you have any master demo? Also what are the conditions for commercial use?)
     
    #16
  17. Jonforum

    Jonforum Veteran Veteran

    Messages:
    1,594
    Likes Received:
    1,380
    Location:
    Canada / Québec
    First Language:
    French
    Primarily Uses:
    RMMV
    hi
    *no master Demo for this plugin, but a lot of video and tutorial.
    * commercial use license m.i.t
    *as I explained a little higher, for the moment I do not aim for general support on android.
    Android do not support some Node.js thecnologie.
    i need to find other way to write prototype.checkJSON_Integrity
    and find files in a directory.
    window and android no have same directory and need other way.

    the only way it maybe use the XMLHttpRequest, but i not study how it working, but maybe soon.
    PHP:
     DataManager.loadDataFile = function(namesrc) { //  tested and compatible android
        
    var xhr = new XMLHttpRequest();
        var 
    url 'data/' src;
        
    xhr.open('GET'url);
        
    xhr.overrideMimeType('application/json');
        
    xhr.onload = function() {
            if (
    xhr.status 400) {
                
    window[name] = JSON.parse(xhr.responseText);
                
    DataManager.onLoad(window[name]);
            }
        };
        
    xhr.onerror this._mapLoader || function() {
            
    DataManager._errorUrl DataManager._errorUrl || url;
        };
        
    window[name] = null;
        
    xhr.send();
    a version 2.0 will comming soon, with maybe compatibility on OS android.
     
    #17

Share This Page