Sign in to follow this  
khleug35

System Text line break and typewriter-effect update

Recommended Posts

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.

ezgif-4-3e034cdad1a5.gif.025e0ae93ac1df4e31a5a824f0069356.gif

 

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 by khleug35

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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):

image.thumb.png.cc2b338a72e9fb061cf592ad7888125b.png

 

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 by Stephan

Share this post


Link to post
Share on other sites
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. 

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.