Home » Javascript » Javascript, drawing text from a sprite sheet, simulating a carriage return

Javascript, drawing text from a sprite sheet, simulating a carriage return

Posted by: admin August 19, 2018 Leave a comment

Questions:

I am making a game in javascript/html5. I am generating random thought balloons composed entirely of sprites. The balloon itself and the text. I get all of this working no problem, however, I am trying to simulate a carriage return so that the “strings” are not too long. This is the part which is not working. I am frustratingly close to a solution I can FEEL IT. After the last 72 hours of tackling this problem though I am too close to it, I think and need some outside eyes.

To accomplish this, I devised a system whereby I have the essentially a 2-dimensional array:

var testThoughts = [
    ["fragment 1 ", "fragment 2 ", "fragment 3"],
    ["fragment 1 ", "fragment 2 ", "fragment 3"],
    ["fragment 1 ", "fragment 2 ", "fragment 3"],
    ["fragment 1 ", "fragment 2 ", "fragment 3"]
];

Something like that. I pick a random thought and then pass it to a function that maps the letters in the string to corresponding images on the sprite sheet. After that, I render the sprites to the screen. The way the code is set up is each fragment converted to sprites then pushed then rendered in turn. This is where I’m stuck. No matter what I do I cannot get the three fragments to stack one on top of the other like this:

//This is a
// really
//long sentence.

They are either offset, or all the fragments stack properly but
the sprites in each fragment are rendered on top of one another.

Here is what the render code looks like:

function render(array) {
    //console.log(array);
    context.clearRect(0, 0, canvas.width, canvas.height);
    var array = array;

    for(var l = 0; l < array.length; l++) {
        var letterSprite = array[l];
        letterSprite.x = l * kearning;
        letterSprite.y = leading; //Trying to offset the y, I have tried +=  and = l*leading

        context.drawImage(
            art,
            letterSprite.sheetX,
            letterSprite.sheetY,
            letterSprite.width,
            letterSprite.height,
            letterSprite.x,
            letterSprite.y,
            letterSprite.width,
            letterSprite.height
        )
    }
}

I have attempted many permutations to solve this. Messing with both x and y as well as nested for loops etc. I even tried creating a newLine object so that I could manipulate its y value instead to no effect. The behavior is identical.

Any assistance is greatly appreciated.

UPDATE

I’m posting the entirety of the logic, as I think it will prove useful in discovering a solution:

function loadHandler()
    {
        assetsLoaded++;

        if(assetsLoaded === assets.length)
        {
            art.removeEventListener("load",loadHandler,false);

            displayThought(testThoughts)
        }

    };

    function displayThought(array)
    {
        var array = array;
        var randomIndex = getRandom(array);

        for(var f=0; f<array[randomIndex].length; f++)
        {
            testString = array[randomIndex][f];

            convertStringToImages(testString);
        }
    };

    function getRandom(array)
    {
        var array = array;
        var randomIndex = Math.floor(Math.random()*array.length);

        return randomIndex;
    };

    function convertStringToImages(string)
    {
        var string = string;
        var splitString = string.split("");

        for(var s=0; s<splitString.length; s++)
            {
                switch(splitString[s])
                {
                            case "A":
                            var letterSprite = new LetterSprite(1,1,8,10);
                            output.push(letterSprite);
                            break;  //redacted for brevity...               
                }
            }

        render(output); 


    };

    function render(array)
    {
        counter++;
        //console.log(array + " number " + counter);
        context.clearRect(0,0,canvas.width,canvas.height);
        var array = array;


        for(var l=0; l<array.length; l++)
        {

            var letterSprite = array[l];
            letterSprite.x = l * kearning;
            letterSprite.y += leading;

            context.drawImage
            (
                art,
                letterSprite.sheetX,
                letterSprite.sheetY,
                letterSprite.width,
                letterSprite.height,
                letterSprite.x,
                letterSprite.y,
                letterSprite.width,
                letterSprite.height
            )

        }
    };

    function LetterSprite(sx,sy,w,h)
    {
        var self = this;
        self.sheetX = sx; 
        self.sheetY = sy;
        self.width = w;
        self.height = h;
        self.x = 0;
        self.y = 0;
    };                                                 
Answers: