Question

我正在使用javascript / html5制作游戏。我正在生成完全由精灵组成的随机思想气球。气球本身和文字。我得到的所有工作没有问题，但是，我试图模拟一个回车，以便“字符串”不会太长。这是不起作用的部分。我很沮丧地接近我能感受到的解决方案。在解决了这个问题的最后72小时后，虽然我太接近了，但我认为并需要一些外在的眼睛。

为了做到这一点，我设计了一个系统，我基本上有一个二维数组：

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"]
];

这样的事情。我随机选择了一个想法然后将它传递给一个函数，该函数将字符串中的字母映射到精灵表上的相应图像。之后，我将精灵渲染到屏幕上。设置代码的方式是将每个片段转换为精灵，然后推送然后依次渲染。这就是我被困住的地方。无论我做什么，我都无法将三个片段叠加在另一个上面，如下所示：

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

它们要么是偏移的，要么是所有碎片都正确堆叠但是每个片段中的精灵都呈现在彼此之上。

这是渲染代码的样子：

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

我尝试了许多排列来解决这个问题。同时使用x和y以及嵌套for循环等。我甚至尝试创建一个newLine对象，以便我可以操纵其y值而不会产生任何影响。行为是一样的。

非常感谢任何帮助。

更新

我发布了整个逻辑，因为我认为这对于发现解决方案非常有用：

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;
    };

更新2

经过24小时的嘎吱嘎吱嘎吱的努力，我非常接近解决方案。对一些功能进行了一些小调整：

function convertStringToImages(string)
    {
        var string = string;
        var splitString = string.split("");
        var x = 0;//Added x here
        var y = 0;//Added y here CAN set y here
        for(var s=0; s<splitString.length; s++)
        {
            if(s !== -1)//If s is not the last element
            {
                x = s * kearning;

                switch(splitString[s])
                {
                            case "A":
                            var letterSprite = new LetterSprite(1,1,8,10,x,y);//Now with x,y
                            output.push(letterSprite);
                            break; //Redacted for brevity
                }

            }
            else
            {
                x = 0;//This resets fine
                y += leading;//This has no effect WHY?
            }



        }

我现在可以在x方向上将所有片段渲染到彼此之上。大！现在我只需要将它们垂直分开。这是我再次陷入困境的地方。设置后我无法操纵y坐标。我不知道为什么。

更新3

我终于解决了。我需要做的就是解决x pre render（按原样）并像这样解决y post render：

function render(array)
    {

        context.clearRect(0,0,canvas.width,canvas.height);
        var array = array;
        var letterSprite;

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

            letterSprite = array[l];
            //letterSprite.x = l*kearning;
            //console.log(letterSprite.x);
            //letterSprite.y += leading;

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

            letterSprite.y += leading;//Update y here
        }

        console.log("X: " + letterSprite.x + ", Y: " + letterSprite.y);

    };

Javascript，从精灵表中绘制文本，模拟回车

0 个答案: