Smooth out scrolling ticker

Phaser 3
1

Hello! I’m working on a rather unique app and it features a scrolling ticker at the bottom. I’ve created the ticker with bitmap text and I’m using a simple timed tween to move it. Here’s the code:

    var scrollTextValue = "You are viewing a beta version of the ivuWeather app for fireTV.  If you would like to participate in the beta, please email ivuweather@gmail.com and someone will get back to you.";
        var scrollText = this.make.bitmapText({
            x: 1920,
            y: 1034,
            text: scrollTextValue,
            font: 'OpenSansBold48',
            size: false,
            align: 0,
            add: true
        });
    var scrollingAdTween = this.tweens.add({
            targets: scrollText,
            x: (scrollText.width - 360) * -1,
            y: 1019,
            ease: 'None',
            duration: (scrollText.width - 400) * 20,
            yoyo: false,
            loop: -1,
            loopDelay: 500,
            useFrames: false,
            delay: 3000,
        });

There is some stuttering in the scroll as can be seen in this video: https://www.youtube.com/watch?v=t9NQQ_vY_bA

Can anyone offer any advice on how to smooth that scroll out a bit and prevent the jittering?

Thanks in advance!
Scott

2

Try something like this. From the RetroFonts examples:
https://labs.phaser.io/view.html?src=src\game%20objects\bitmaptext\retro%20font\scrolling%20retro%20text.js

var config = {
type: Phaser.WEBGL,
parent: ‘phaser-example’,
pixelArt: true,
width: 800,
height: 600,
scene: {
preload: preload,
create: create,
update: update
}
};

var i = 0;
var dynamic;
var content;

var game = new Phaser.Game(config);

function preload ()
{
this.load.image(‘neuromancer’, ‘assets/pics/case.jpg’);
this.load.image(‘knighthawks’, ‘assets/fonts/retro/knighthawks-font.png’);
}

function create ()
{
var prose = [
“The sky above the port was the color of television, tuned to a dead channel.”,
“‘It’s not like I’m using,’ Case heard someone say, as he shouldered his way”,
“through the crowd around the door of the Chat. 'It’s like my body’s developed”,
“this massive drug deficiency.’ It was a Sprawl voice and a Sprawl joke.”,
“The Chatsubo was a bar for professional expatriates; you could drink there for”,
“a week and never hear two words in Japanese.”,
“Ratz was tending bar, his prosthetic arm jerking monotonously as he filled a tray”,
“of glasses with draft Kirin. He saw Case and smiled, his teeth a webwork of”,
“East European steel and brown decay. Case found a place at the bar, between the”,
“unlikely tan on one of Lonny Zone’s whores and the crisp naval uniform of a tall”,
“African whose cheekbones were ridged with precise rows of tribal scars. 'Wage was”,
“in here early, with two joeboys,’ Ratz said, shoving a draft across the bar with”,
“his good hand. ‘Maybe some business with you, Case?’”,
“Case shrugged. The girl to his right giggled and nudged him.”,
“The bartender’s smile widened. His ugliness was the stuff of legend. In an age of”,
“affordable beauty, there was something heraldic about his lack of it. The antique”,
“arm whined as he reached for another mug.”,
" ----------- From Neuromancer by William Gibson "
];

content = prose.join(' ').toUpperCase();

var config = {
    image: 'knighthawks',
    width: 32,
    height: 25,
    chars: Phaser.GameObjects.RetroFont.TEXT_SET2,
    charsPerRow: 10
};

this.cache.bitmapFont.add('knighthawks', Phaser.GameObjects.RetroFont.Parse(this, config));

this.add.image(400, 300, 'neuromancer').setAlpha(0.3);

dynamic = this.add.dynamicBitmapText(0, 190, 'knighthawks', '  ---------------------   ');
dynamic.setScale(1);

}

function update (time, delta)
{
dynamic.scrollX += 1;

if (dynamic.scrollX >= 32)
{
    //  Remove first character
    var current = dynamic.text.substr(1);

    //  Add next character from the string
    current = current.concat(content[i]);

    i++;

    if (i === content.length)
    {
        i = 0;
    }

    //  Set it
    dynamic.setText(current);

    //  Reset scroller
    dynamic.scrollX = dynamic.scrollX % 32;
}

}

3

Thanks RocketStar. I’ll give that a shot and see how it turns out. I appreciate the pointer!