Hello i wanted to split a big image into tiles using Texture Canvas
And it works but there is a strange outline to each box
can anyone tell me what cause this?
Here is the code im using
var scene = this.scene
var tileWidth: number = 32
var tileHeight: number = 32
function splitTexture(originX: number, originY: number, textureKey: string): EditorGameObject[] {
var textureImage = scene.textures.get(textureKey).getSourceImage()
var numColsToCut = textureImage.width / tileWidth
var numRowsToCut = textureImage.height / tileHeight
var resultImages: EditorGameObject[] = []
for (var x = 0; x < numColsToCut; ++x) {
for (var y = 0; y < numRowsToCut; ++y) {
var newTextureKey = textureKey + '_' + x + '_' + y
var texture = scene.textures.createCanvas(newTextureKey, tileWidth, tileHeight)
console.log(-(x * tileWidth), -(y * tileHeight))
texture.draw(-(x * tileWidth), -(y * tileHeight), textureImage)
resultImages.push(new Phaser.GameObjects.Image(scene, originX + (x * tileWidth), originY + (y * tileHeight), newTextureKey))
}
}
return resultImages
}
for (let image of resultImages) {
this.displayList.add(image)
}