Make Graphic into Sprite

[JcKairos]

Hi, I am trying to create generate a texture for my graphic so I can use it as a sprite. However I have a problem when using the following code:

sprite = game.add.sprite(400, 300, graphics.generateTexture());

as the graphic which I want to create is done by the player, so I have no idea how to set the x axis and y axis so that the generated sprite literally takes over the place of the graphic.

Is there a way to add the sprite right above the graphic?

[Fenopiù]

You could try to put things in two different gorups and render the sprite group above the graphic group or use the same group and add child in right order.

[JcKairos]

graphicsend = this.game.add.graphics(0, 0);
        graphicsend.beginFill(0xffffff);
        graphicsend.lineStyle(3, 0x228B22, 1);
        graphicsend.moveTo(startpoint.x,startpoint.y);
        i =1
while (i < numberoflinesdrawn+1){
            graphicsend.lineTo(storedx,storedy)
 i++;
        
        }
graphicsend.endFill();

This is my code for creating the graphic which the player have drawn, but due to the first line of this.game.add.graphics(0, 0), all axis related to the graphic became (0,0).

So I do not understand how to add child since everything will just appear at 0,0.

[Kosmoon]

i wanted to achieve the same thing not long ago, here is how i did it, there is maybe a better way but i did not find any in documentations:

to place the new texture at the right place, we need the good top left coordinates. so we need to find the point with the lowest X in the graphic shape, and aslo the point with the lowest Y.

here is the array of points of the graphic: yourGraphic.currentPath.shape._points

let say i put this array in a G variable.

the even indexs in this array represent all the X coordinate of the points, and the odd indexs represents the Y coordinate of the points. i wrote two functions to make new arrays: xPoints and yPoints, and then i aplly the reduce function (its a global javascript array function that takes another function as parameter) to obtain the minimum number of each array, and VOILA you have the coordinate to the new texture:

function evenIndexArray(array){
    let newArray = [];
    for (let i = 0; i < array.length; i++){
        if (i%2 === 0){
            newArray.push(array[i])
        }
    }
    return newArray;
}
function oddIndexArray(array){
    let newArray = [];
    for (let i = 0; i < array.length; i++){
        if (i%2 !=0){
            newArray.push(array[i])
        }
    }
    return newArray;
}

xPoints = evenIndexArray(G);
yPoints = oddIndexArray(G);

function minSearch(a,b){
    if (a>b){
        a=b;
    }
    return a;
}

textureX = xPoints.reduce(minSearch);
textureY = yPoints.reduce(minSearch);

the problem with this method is that you need to reajust according to your lineWidth:

yourNewTexture = game.add.sprite(textureX - yourGraphic.lineWidth, textureY - yourGraphic.lineWidth, yourGraphic.generateTexture());

 

[JcKairos]

On 3/1/2018 at 10:35 PM, Kosmoon said:

i wanted to achieve the same thing not long ago, here is how i did it, there is maybe a better way but i did not find any in documentations:

to place the new texture at the right place, we need the good top left coordinates. so we need to find the point with the lowest X in the graphic shape, and aslo the point with the lowest Y.

here is the array of points of the graphic: yourGraphic.currentPath.shape._points

let say i put this array in a G variable.

the even indexs in this array represent all the X coordinate of the points, and the odd indexs represents the Y coordinate of the points. i wrote two functions to make new arrays: xPoints and yPoints, and then i aplly the reduce function (its a global javascript array function that takes another function as parameter) to obtain the minimum number of each array, and VOILA you have the coordinate to the new texture:

function evenIndexArray(array){
    let newArray = [];
    for (let i = 0; i < array.length; i++){
        if (i%2 === 0){
            newArray.push(array[i])
        }
    }
    return newArray;
}
function oddIndexArray(array){
    let newArray = [];
    for (let i = 0; i < array.length; i++){
        if (i%2 !=0){
            newArray.push(array[i])
        }
    }
    return newArray;
}

xPoints = evenIndexArray(G);
yPoints = oddIndexArray(G);

function minSearch(a,b){
    if (a>b){
        a=b;
    }
    return a;
}

textureX = xPoints.reduce(minSearch);
textureY = yPoints.reduce(minSearch);

the problem with this method is that you need to reajust according to your lineWidth:

yourNewTexture = game.add.sprite(textureX - yourGraphic.lineWidth, textureY - yourGraphic.lineWidth, yourGraphic.generateTexture());

Thanks! I was not familiar array of points but your codes were clear to understand, I managed to create the texture but I still have to get it reflecting diagonally... Regardless, thank you for your help! I was stuck for so long trying to figure out how to find the exact coordinates.