System Text line break and typewriter-effect update

[khleug35]

Hello, I would like to add small update to the System Text in text.js in order to make it have New Lines like <br> and typewriter-effect like RPG dialogue.

Demo.

new game.SystemText('Lorem ipsum dolor sit amet,\nconsectetuer adipiscing elit. Sed posuere interdum sem.\nQuisque ligula eros ullamcorper quis,\nlacinia quis facilisis sed sapien.\nMauris varius diam vitae arcu.\nSed arcu lectus auctor vitae,\nconsectetuer et venenatis eget velit.');

if the text includes "\n", it become line breaks like <br>

and user enable typing_effect = true;

the text have  typewriter-effect like RPG dialogue.

 

First, 

render\text.js

Add typing_effect varable.

game.createClass('SystemText', 'Container', {
...

/**
    Enable typewriter-effect
    @default false
**/

    typing_effect: false,
    i: 1,

...

 

Add the following code, when user type "\n", it can do line break effect

var lines = this.text.split('\n');  //Check New Lines
for (var i = 0; i<lines.length; i++){
context.fillText(lines, 0,  (i*this.size) );

 

_renderCanvas: function(context) {
        var wt = this._worldTransform;
        var ths = this;
        context.globalAlpha = this._worldAlpha;
        context.setTransform(wt.a, wt.b, wt.c, wt.d, wt.tx * game.scale, (wt.ty + this.size) * game.scale);
        context.fillStyle = this.color;
        context.font = this.size * game.scale + 'px ' + this.font;
        context.textAlign = this.align;
        
        if(this.text == undefined){
        context.fillText(this.text, 0, 0);
        }else{    
        if(this.typing_effect){   //Enable Typewriter-effect
        var lines = String(this.text.substr(0, this.i)).split('\n');
        if(this.i <= this.text.length){    
        this.i++;
         }
        }else{
        var lines = this.text.split('\n');  //Check the text include '/n'
        } 
        for (var i = 0; i<lines.length; i++){
        context.fillText(lines[i], 0,  (i*this.size) );
         }      
        }
    } 

 

Main.js

Enable typing_effect

this.text.typing_effect = true;

game.module(
    'game.main'
)
.body(function() {

game.createScene('Main', {
    init: function() { 
        var ths = this;
        this.text = new game.SystemText('Lorem ipsum dolor sit amet,\nconsectetuer adipiscing elit. Sed posuere interdum sem.\nQuisque ligula eros ullamcorper quis,\nlacinia quis facilisis sed sapien.\nMauris varius diam vitae arcu.\nSed arcu lectus auctor vitae,\nconsectetuer et venenatis eget velit.');
        this.text.size = 50;
        this.text.font = 'serif';
        this.text.color = '#ffffff';
        
        this.text.typing_effect = true; //Enable typewriter-effect

        this.text.x = 10;
        this.text.addTo(this.stage);
//      this.text.text = 'Hello\nPanda';  
    },
    update:function(){

    }
});


});

 

Could you update this  @enpu?

my code may be not good or more hardcode or not the best solution to achieve , Welcome to give me a feedback to improve my coding skill,

Thanks

 

text.js

Edited November 20, 2019 by khleug35

[Stephan]

Nice! ?

[Wolfsbane]

That's very cool! ??

Also, code looks good to me.

Wondering if it should be added into the engine itself, or maybe better as a module?

[khleug35]

@Stephan   @Wolfsbane

Thank for comment???

About is it better as a module?.......

ask him is better ? @enpu

[Stephan]

I think it is best to put this into a separate plugin so you can add this feature (and the extra kbs) if you need the feature.

Shall I give it a go? I have already bundled a couple of other SystemText addons into a personal plugin and this feature would be a nice addition. I can publish the plugin on this forum.

 

I really prefer SystemText over(image based) Text, it is so much more flexibel!

[Stephan]

Here it is, a small System Text plugin with 3 features:

 

1) typewriter effect

2) strokeColor (border)

3) example how to use gradient colors with systemText in Panda.

 

Please note that I included a custom font in the project to achieve the second and third example. See the demo project for files ans details at: 

https://github.com/stephanvermeire/systemtextplugin

 

Quick example (typewrite effect not working here because it is a static image):

 

systemtextplugin.js

game.module(
    'plugin.systemtextplugin'
)
    .require(
        'engine.renderer.text'
    )
    .body(function() {

        game.SystemText.inject({

            /**
             Enable typewriter-effect
             @default false
             **/
            typing_effect: false,
            i: 1,

            /**
             StrokeColor of the text.
             @property {String} color
             @default #000
             **/
            strokeColor: '#000',

            /**
             Width of the text stroke.
             @property {Number} color
             @default 0
             **/
            lineWidth: 0,



            _renderCanvas: function(context) {
                var wt = this._worldTransform;

                context.globalAlpha = this._worldAlpha;
                context.setTransform(wt.a, wt.b, wt.c, wt.d, wt.tx * game.scale, (wt.ty + this.size) * game.scale);
                context.fillStyle = this.color;
                context.font = this.size * game.scale + 'px ' + this.font;
                context.textAlign = this.align;
                context.strokeStyle = this.strokeColor;
                context.lineWidth = this.lineWidth;


                if(this.text === undefined) return;

                var lines;
                if(this.typing_effect){
                    lines = String(this.text.substr(0, this.i)).split('\n');
                    if(this.i <= this.text.length){
                        this.i++;
                    }
                }else{
                    lines = this.text.split('\n');
                }

                for (var i = 0; i<lines.length; i++){
                    context.fillText(lines[i], 0,  (i*this.size) );
                    if(this.lineWidth){
                        context.strokeText(lines[i], 0, (i*this.size));
                    }
                }
            }
        });







    });

 

main.js

game.module(
    'game.main'
)
    .require(
        'plugin.systemtextplugin'
    )
    .body(function () {

        game.createScene('Main', {
            init: function () {

                //typewriter demo
                new game.SystemText('Lorem ipsum dolor sit amet,\nconsectetuer adipiscing elit.\nSed posuere interdum sem.', {
                    size: 50,
                    x: 0,
                    y: 0,
                    typing_effect: true,
                }).addTo(this.stage);


                //custom font with strokeColor
                new game.SystemText('Lorem ipsum dolor sit amet,', {
                    font: 'SoSweetHoney',
                    // align: 'left',
                    color: '#2d963b',
                    strokeColor: '#a2e65e',
                    lineWidth: 2,
                    size: 50,
                    x: 0,
                    y: 300,
                }).addTo(this.stage);


                //gradient font color
                const color = game.renderer.context.createLinearGradient(0, 0, game.width, 0);
                color.addColorStop(0, "#f47c35");
                color.addColorStop(1, "#e6e650");

                const strokeColor = game.renderer.context.createLinearGradient(0, 0, game.width, 0);
                strokeColor.addColorStop(0, "#a2e65e");
                strokeColor.addColorStop(1, "#3577ca");


                let test = new game.SystemText('Lorem ipsum dolor sit amet!', {
                    font: 'SoSweetHoney',
                    lineWidth: 2,
                    size: 50,
                    x: 0,
                    y: 500,
                }).addTo(this.stage);
                test.color = color;
                test.strokeColor = strokeColor;


            }
        });


    });

 

 

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Panda 2 - SystemText</title>

    <link rel="stylesheet" href="style.css"  media="all" />

    <script type="text/javascript" src="src/engine/core.js"></script>
    <script type="text/javascript" src="src/game/config.js"></script>
    <script type="text/javascript" src="src/game/main.js"></script>
</head>
<body>
</body>
</html>

Note that you have to include the fonts directory as well as the style.css file in your project to make the custom font work!

Edited November 20, 2019 by Stephan

[Wolfsbane]

8 hours ago, Stephan said:

I really prefer SystemText over(image based) Text, it is so much more flexibel!

I'm starting to think this way, too. Kind of came in with the idea that the pixel fonts would be consistent on every device, but SystemText is just..more..convenient.

Have to use it for my next project, as I have to be flexible for too many character sets. 

 

[greencoder]

And a bug fix from me :), line breaks have issues when the variable passed is a number (it says that split function is not available for this object) and fixed it like this (similar to typewriter code) on line 55 of systemtextplugin.js : 

lines = this.text.split('\n');

to

lines = String(this.text).split('\n');

 

Edited March 18, 2020 by greencoder