Making text bounce [PIXI.Text]

Discussion in 'Learning Javascript' started by Seth-Rah, Oct 31, 2017.

  1. Seth-Rah

    Seth-Rah professional amateur Member

    Messages:
    22
    Likes Received:
    7
    Location:
    South Africa
    First Language:
    English
    Primarily Uses:
    RMMV
    Is it possible to make the text element generated by PIXI have a floating bounce like attribute to it?

    Example
    On the site Bounce.js there is some text at the top left of the screen
    "Add a component or select a preset"

    This text is bouncing / floating really slowly, I was wondering if there was an easy method of implementing this with PIXI.Text or if it would be a bit more difficult than that. I was going through the documentation at http://pixijs.download/dev/docs/PIXI.Text.html however I could not really find any methods that would allow me to move the text around other than pivot / rotate.
     
    #1
  2. Poryg

    Poryg Pixie of the Emvee kingdom, Ham of a Hamster Veteran

    Messages:
    3,862
    Likes Received:
    9,703
    Location:
    Czech Republic
    First Language:
    Czech
    Primarily Uses:
    RMMV
    text.x and text.y combined with wait command. You may want to look at my DIY series, first two episodes are about PIXI text :)
     
    #2
    Seth-Rah likes this.
  3. Seth-Rah

    Seth-Rah professional amateur Member

    Messages:
    22
    Likes Received:
    7
    Location:
    South Africa
    First Language:
    English
    Primarily Uses:
    RMMV
    Thanks
    I actually had a look at them earlier, but somehow I appear to have missed your flying text display on the first guide.
    I blame myself for skimming over the footage instead of watching it fully.
     
    #3
  4. Poryg

    Poryg Pixie of the Emvee kingdom, Ham of a Hamster Veteran

    Messages:
    3,862
    Likes Received:
    9,703
    Location:
    Czech Republic
    First Language:
    Czech
    Primarily Uses:
    RMMV
    You can't always remember everything, so don't worry about it :) Even pros often have to research some things they "should have known".
     
    #4
  5. Seth-Rah

    Seth-Rah professional amateur Member

    Messages:
    22
    Likes Received:
    7
    Location:
    South Africa
    First Language:
    English
    Primarily Uses:
    RMMV
    Thanks for the help once again

    I managed to get desired results using the following.
    Hoping to find a way to slow down the animation without it looking laggy at the moment, as 3 frames seems to give it a noticeable jitter, and I cannot really move less than 1 pixel at a time.

    [​IMG]
     
    #5
    Poryg likes this.
  6. Poryg

    Poryg Pixie of the Emvee kingdom, Ham of a Hamster Veteran

    Messages:
    3,862
    Likes Received:
    9,703
    Location:
    Czech Republic
    First Language:
    Czech
    Primarily Uses:
    RMMV
    As you said, you cannot move by less than 1 pixel, so there is only a certain maximum you can slow it down to.
    From there you can only work in illusions. For example you can increase the resolution and decrease the text size a bit.
     
    #6
    Seth-Rah likes this.
  7. Seth-Rah

    Seth-Rah professional amateur Member

    Messages:
    22
    Likes Received:
    7
    Location:
    South Africa
    First Language:
    English
    Primarily Uses:
    RMMV
    Reducing the font size definitely got me a much more satisfying bounce on it.

    In the future this will probably be replaced with images, but it's a really nice placeholder for now to do some testing with :)

    [​IMG]
     
    #7
  8. Jonforum

    Jonforum Veteran Veteran

    Messages:
    1,577
    Likes Received:
    1,353
    Location:
    Canada / Québec
    First Language:
    French
    Primarily Uses:
    RMMV
    loll ! nice try but if you need easing (bounce) you need use a ease library in JS only
    http://easings.net/
    here the math calculation
    PHP:
       // elastic bounce effect at the beginning
        
    easeInElastic: function (t) { return (.04 .04 t) * Math.sin(25 t) + },
        
    // elastic bounce effect at the end
        
    easeOutElastic: function (t) { return .04 / (--t) * Math.sin(25 t) },
        
    // elastic bounce effect at the beginning and end
        
    easeInOutElastic: function (t) { return (-= .5) < ? (.02 .01 t) * Math.sin(50 t) : (.02 .01 t) * Math.sin(50 t) + }
    or other optimised math
    PHP:
        easeOutBounce: function (xtbcd) {
            if ((
    t/=d) < (1/2.75)) {
                return 
    c*(7.5625*t*t) + b;
            } else if (
    < (2/2.75)) {
                return 
    c*(7.5625*(t-=(1.5/2.75))*.75) + b;
            } else if (
    < (2.5/2.75)) {
                return 
    c*(7.5625*(t-=(2.25/2.75))*.9375) + b;
            } else {
                return 
    c*(7.5625*(t-=(2.625/2.75))*.984375) + b;
            }
        },
    or use the ivra plugin
    PHP:
    var myBounce = new IAVRA.ANIMATE.Tween(pixiTextObj, {_y 100}).bounce.inOut.duration(60).start();
     
    Last edited: Oct 31, 2017
    #8
    Seth-Rah likes this.
  9. Seth-Rah

    Seth-Rah professional amateur Member

    Messages:
    22
    Likes Received:
    7
    Location:
    South Africa
    First Language:
    English
    Primarily Uses:
    RMMV
    I will be sure to give that a look tonight after I get home.
    I think that will definitely be helpful.
     
    #9
  10. Seth-Rah

    Seth-Rah professional amateur Member

    Messages:
    22
    Likes Received:
    7
    Location:
    South Africa
    First Language:
    English
    Primarily Uses:
    RMMV
    So I tried using this plugin, but started running into some new issues after trying to use it

    At first I tried to update the _y property, however it did not seem to affect the graphic at all. It was just sitting there as if no logic was being applied to it.
    I replaced the _y property with just y hoping that it would start updating the y coordinate, which it did seem to do with the animation, However I ran into a different issue.

    It started smearing the object over the screen slowly instead of moving it. It's like it's not redrawing the frames where it used to be. Any thoughts?

    [​IMG]


    [​IMG]

    UPDATE

    So for anyone interested in why the above happened, it turns out that the parallel / autorun process was constantly recreating the PIXI.Text object. I moved the creation of the text object out of the parallel process Where the bounce happens, into an autorun process, and made sure to set an "Erase Event" after the text has been generated.

    This does mean the issue is fixed now.
    I am running the following in a loop now for the desired result.

    Footage containing the bounce can be seen here. (I turned it off and on again in the footage)

     
    Last edited: Nov 2, 2017
    #10
  11. Jonforum

    Jonforum Veteran Veteran

    Messages:
    1,577
    Likes Received:
    1,353
    Location:
    Canada / Québec
    First Language:
    French
    Primarily Uses:
    RMMV
    you can also use call back for great control, am not remember how the original plugin work, because a modify a lot .
    but you can add onComplete in the register and call a callback that obj will passed at parameter, for syncro animation.

    PHP:
    var endFunction = function(obj){
        
    // your stuff callback
        
    obj.easing(IAVRA.EASING.circ.out).duration(50).start();
    };

    var 
    inspect1 = new IAVRA.ANIMATE.Tween(testtext2,{165}).easing(IAVRA.EASING.circ.in)
      .
    duration(50).start().onComplete(endFunction);
     
    #11
  12. Seth-Rah

    Seth-Rah professional amateur Member

    Messages:
    22
    Likes Received:
    7
    Location:
    South Africa
    First Language:
    English
    Primarily Uses:
    RMMV
    That would be nice as it would replace a 4 liner with a 2 liner.
    Will have to give that another look when I get home this evening then.

    If I do end up struggling with it tonight though, I think I will park this one for another time, as the onComplete won't change the animation itself, just make the call a bit tidier. I will update this post if it does work as intended though.

    Update

    I had some trouble with that function so going to leave optimizing that for another time. it's possible because your endFunction shown does not have me updating the y co-ordinates of the entity I am working on, so the entity just waits on 165.
     
    Last edited: Nov 2, 2017
    #12

Share This Page