Moving Text

Text can be scrolled, scaled, rotated or animated in various other ways.

Example of scrolling text (Run Example)

ScrollingText.js

/* Author: Derek O Reilly, Dundalk Institute of Technology, Ireland. */

class ScrollingText extends GameObject
{
    /* Each gameObject MUST have a constructor() and a render() method.        */
    /* If the object animates, then it must also have an updateState() method. */

    constructor(text, y, endX, fontSize, textColour, delay)
    {
        super(5, delay); /* as this class extends from GameObject, you must always call super() */

        /* These variables depend on the object */
        this.x = canvas.width;
        this.y = y;
        this.endX = endX;
        this.text = text;
        this.fontSize = fontSize;
        this.textColour = textColour;
    }

    updateState()
    {
        this.x--;
        if (this.x <= this.endX)
        {
            this.stop();
        }
    }

    render()
    {
        ctx.fillStyle = this.textColour;
        ctx.font = this.fontSize + "px Times Roman";
        ctx.fillText(this.text, this.x, this.y);
    }
}

The updateState() method scrolls the text until it reaches it endX location.

updateState()
    {
        this.x--;
        if (this.x <= this.endX)
        {
            this.stop();
        }
    }

scrolling_text.js

/* Author: Derek O Reilly, Dundalk Institute of Technology, Ireland.             */
/* There should always be a javaScript file with the same name as the html file. */
/* This file always holds the playGame function().                               */
/* It also holds game specific code, which will be different for each game       */





/******************** Declare game specific global data and functions *****************/
/* images must be declared as global, so that they will load before the game starts  */

/******************* END OF Declare game specific data and functions *****************/







/* Always have a playGame() function                                     */
/* However, the content of this function will be different for each game */
function playGame()
{
    /* We need to initialise the game objects outside of the Game class */
    /* This function does this initialisation.                          */
    /* This function will:                                              */
    /* 1. create the various game game gameObjects                   */
    /* 2. store the game gameObjects in an array                     */
    /* 3. create a new Game to display the game gameObjects          */
    /* 4. start the Game                                                */


    /* Create the various gameObjects for this game. */
    /* This is game specific code. It will be different for each game, as each game will have it own gameObjects */

    gameObjects[0] = new ScrollingText("Welcome", 70, 135, 60, "red", 0);
    gameObjects[1] = new ScrollingText("to", 300, 135, 300, "green", 2300);
    gameObjects[2] = new ScrollingText("Europe", 450, 20, 160, "blue", 4300);

    /* END OF game specific code. */


    /* Always create a game that uses the gameObject array */
    let game = new CanvasGame();

    /* Always play the game */
    game.start();
    
    
    /* If they are needed, then include any game-specific mouse and keyboard listners */
}

Each text message is a seperate object, as declared below:

    gameObjects[0] = new ScrollingText("Welcome", 70, 135, 60, "red", 0);
    gameObjects[1] = new ScrollingText("to", 300, 135, 300, "green", 2300);
    gameObjects[2] = new ScrollingText("Europe", 450, 20, 160, "blue", 4300);