# Create image from the arrangement of tiles in tileset or how to merge tiles into new texture

**URL:** <https://phaser.discourse.group/t/create-image-from-the-arrangement-of-tiles-in-tileset-or-how-to-merge-tiles-into-new-texture/12015>\
**Category:** Phaser 3\
**Created:** [July 13, 2022, 8:15pm UTC](https://phaser.discourse.group/t/create-image-from-the-arrangement-of-tiles-in-tileset-or-how-to-merge-tiles-into-new-texture/12015 "2022-07-13T20:15:49Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![viandwi24](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/viandwi24/32/6706_2.png) [@viandwi24](https://phaser.discourse.group/u/viandwi24)\
**Post date:** [July 13, 2022, 8:15pm UTC](https://phaser.discourse.group/t/create-image-from-the-arrangement-of-tiles-in-tileset-or-how-to-merge-tiles-into-new-texture/12015/1 "2022-07-13T20:15:49Z")

</div>

Excuse me, want to ask about texture.

I have a texture tileset, then I want to create a new object where the reference is from the tiles that are already in the tilesets.

how should i start ?

for now I use the renderTexture function to draw the required tiles from the tilesets, then take a snapshot so that I can retrieve them as new, drawable textures.

```javascript
// mapping tiles
const tiles = [[0, 1], [2, 3] ]

// my funct to get tiles from tilesets, and draw to render texture (crop, dll)
const toRenderTx = getRenderTexture(tiles)

// draw
const sprite = this.scene.physics.add.image(0, 0, toRenderTx)

// fc
getRenderTexture(tiles: number[][], key = 'default') {
    const tileset = 'my-tileset'
    const sourceTexture = this.scene.mapManager.tileMap?.getTileset(
      tileset
    ) as Phaser.Tilemaps.Tileset
    const { tileWidth, tileHeight } = sourceTexture

    const tileIds = tiles
    const rt = this.scene.make.renderTexture(
      {
        width: tileIds[0].length * tileWidth,
        height: tileIds.length * tileHeight,
        x: 0,
        y: 0,
      },
      false
    )
    for (let y = 0; y < tileIds.length; y++) {
      // loop X
      for (let x = 0; x < tileIds[y].length; x++) {
        const tileId = tileIds[y][x]
        const coordinate = (sourceTexture.getTileTextureCoordinates(tileId) || {
          x: 0,
          y: 0,
        }) as { x: number; y: number }
        const ft = sourceTexture.image.get().clone()
        const newRT = this.scene.make.renderTexture(
          {
            width: ft.width,
            height: ft.height,
          },
          false
        )
        newRT.draw(ft)
        newRT.setCrop(coordinate.x, coordinate.y, tileWidth, tileHeight)
        rt.draw(
          newRT,
          -coordinate.x + x * tileWidth,
          -coordinate.y + y * tileHeight
        )
      }
    }
    return rt.texture
  }

```

but it turns out that this method causes a very large and uncontrolled memory.  
with 6 object like code above, use 3.8gb of ram.

any suggestions i can do?

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [July 14, 2022, 1:32pm UTC](https://phaser.discourse.group/t/create-image-from-the-arrangement-of-tiles-in-tileset-or-how-to-merge-tiles-into-new-texture/12015/2 "2022-07-14T13:32:01Z")

</div>

Can you show what textures you want to produce?

---

<div class="post-metadata">

**Author:** ![viandwi24](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/viandwi24/32/6706_2.png) [@viandwi24](https://phaser.discourse.group/u/viandwi24)\
**Post date:** [July 14, 2022, 1:41pm UTC](https://phaser.discourse.group/t/create-image-from-the-arrangement-of-tiles-in-tileset-or-how-to-merge-tiles-into-new-texture/12015/3 "2022-07-14T13:41:20Z")

</div>

I have a tilesets.

but I want to build a new image composed of the existing tiles in the tilesets.

For example, I want to make a picture of a chair object, where the chair object is composed of tiles with id 0, 1, 2, and 3 on the tilesets.

I’ve managed to make the function like the code I attached above, which is using render texture.

but this turns out to take a lot of memory, even for 6 objects it reaches 3gb of ram.

---

<div class="post-metadata">

**Author:** ![viandwi24](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/viandwi24/32/6706_2.png) [@viandwi24](https://phaser.discourse.group/u/viandwi24)\
**Post date:** [July 14, 2022, 1:51pm UTC](https://phaser.discourse.group/t/create-image-from-the-arrangement-of-tiles-in-tileset-or-how-to-merge-tiles-into-new-texture/12015/4 "2022-07-14T13:51:40Z")

</div>

is there a proper way to create an new image object from tiles (tile index) in tilesets?

---

<div class="post-metadata">

**Author:** ![viandwi24](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/viandwi24/32/6706_2.png) [@viandwi24](https://phaser.discourse.group/u/viandwi24)\
**Post date:** [July 14, 2022, 2:02pm UTC](https://phaser.discourse.group/t/create-image-from-the-arrangement-of-tiles-in-tileset-or-how-to-merge-tiles-into-new-texture/12015/5 "2022-07-14T14:02:09Z")

</div>

An example image that might illustrate it:

> **[image-3](https://ibb.co/bvMXymf)**
>
> Image image-3 hosted in ImgBB

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [July 15, 2022, 2:04pm UTC](https://phaser.discourse.group/t/create-image-from-the-arrangement-of-tiles-in-tileset-or-how-to-merge-tiles-into-new-texture/12015/6 "2022-07-15T14:04:38Z")

</div>

- Load the tileset image using `load.spritesheet(…)` so you can select frames for each tile index
- Create one render texture with the exact dimensions you need
- Call `drawFrame(texture, frame, x, y)` to draw each tile

---

<div class="post-metadata">

**Author:** ![viandwi24](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/viandwi24/32/6706_2.png) [@viandwi24](https://phaser.discourse.group/u/viandwi24)\
**Post date:** [July 17, 2022, 12:38pm UTC](https://phaser.discourse.group/t/create-image-from-the-arrangement-of-tiles-in-tileset-or-how-to-merge-tiles-into-new-texture/12015/7 "2022-07-17T12:38:01Z")

</div>

thanks, it turns out that the problem arose because I cloned the texture, the possibility that caused the ram problem to arise.

---

<div class="post-metadata">

**Author:** ![viandwi24](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/viandwi24/32/6706_2.png) [@viandwi24](https://phaser.discourse.group/u/viandwi24)\
**Post date:** [July 17, 2022, 12:41pm UTC](https://phaser.discourse.group/t/create-image-from-the-arrangement-of-tiles-in-tileset-or-how-to-merge-tiles-into-new-texture/12015/8 "2022-07-17T12:41:01Z")

</div>

then, in the case of the code below why doesn’t it seem to work? only renders the first index.

```javascript
   for (let y = 0; y < tileIds.length; y++) {
      for (let x = 0; x < tileIds[y].length; x++) {
        const tileId = tileIds[y][x]
        rt.drawFrame(tileset, tileId, x * tileWidth, y * tileHeight)
      }
    }

```

> **[Screenshot-2022-07-17-193944](https://ibb.co/02BJT2s)**
>
> Image Screenshot-2022-07-17-193944 hosted in ImgBB

but when i try to change it to like this it seems to work.

```javascript
    for (let y = 0; y < tileIds.length; y++) {
      for (let x = 0; x < tileIds[y].length; x++) {
        const tileId = tileIds[y][x]
        const newRT = scene.make.renderTexture(
          {
            width: tileWidth,
            height: tileHeight,
          },
          false
        )
        newRT.drawFrame(tileset, tileId, 0, 0)
        rt.draw(newRT, x * tileWidth, y * tileHeight)
      }
    }

```

> **[Screenshot-2022-07-17-194035](https://ibb.co/F4thWFY)**
>
> Image Screenshot-2022-07-17-194035 hosted in ImgBB

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [July 17, 2022, 3:05pm UTC](https://phaser.discourse.group/t/create-image-from-the-arrangement-of-tiles-in-tileset-or-how-to-merge-tiles-into-new-texture/12015/9 "2022-07-17T15:05:57Z")

</div>

> [@viandwi24](#):
>
> then, in the case of the code below why doesn’t it seem to work? only renders the first index.

Is `rt` the right size?

And add

```
console.log(tileset, tileId, x * tileWidth, y * tileHeight)

```

---

<div class="post-metadata">

**Author:** ![viandwi24](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/viandwi24/32/6706_2.png) [@viandwi24](https://phaser.discourse.group/u/viandwi24)\
**Post date:** [July 18, 2022, 10:36am UTC](https://phaser.discourse.group/t/create-image-from-the-arrangement-of-tiles-in-tileset-or-how-to-merge-tiles-into-new-texture/12015/11 "2022-07-18T10:36:56Z")

</div>

yeah it should be right. in my example I have tiles like this:

```javascript
const tileset = "my_example_tileset"
const tileSize = 16

const tileIds = [
  [8476 , 8477, 8478],
  [8539 , 8540, 8541],
];

const resultWidth = tileIds[0].length * tileSize 
const resultHeight = tileIds.length * tileSize

const rt = this.scene.make.renderTexture(
    {
        width: resultWidth ,
        height: resultHeight ,
        x: 0,
        y: 0,
    },
    false
)

for (let y = 0; y < tileIds.length; y++) {
    for (let x = 0; x < tileIds[y].length; x++) {
        const tileId = tileIds[y][x]
        const newRT = scene.make.renderTexture(
          {
            width: tileWidth,
            height: tileHeight,
          },
          false
        )
        newRT.drawFrame(tileset, tileId, 0, 0)
        rt.draw(newRT, x * tileSize , y * tileSize)
    }
}

```

btw, the logs are as follows:

```javascript
# console.log(tileset, tileId, x * tileWidth, y * tileHeight)
my_example_tileset 8476 0 0
my_example_tileset 8477 16 0
my_example_tileset 8478 32 0
my_example_tileset 8539 0 16
my_example_tileset 8540 16 16
my_example_tileset 8541 32 16

```

thanks

---

<div class="post-metadata">

**Author:** ![viandwi24](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/viandwi24/32/6706_2.png) [@viandwi24](https://phaser.discourse.group/u/viandwi24)\
**Post date:** [July 18, 2022, 10:43am UTC](https://phaser.discourse.group/t/create-image-from-the-arrangement-of-tiles-in-tileset-or-how-to-merge-tiles-into-new-texture/12015/12 "2022-07-18T10:43:48Z")

</div>

I don’t know why, but when I tried it again it suddenly worked.

thanks for your help once again.

I want to ask a final question, is this a safe way to create objects?

I’m planning on creating a lot of objects this way actually, because instead of reloading the sprites, using the layout of the existing tileset for the tilemap I think makes sense.

This my finally code :

```javascript
const tileset = "my_example_tileset"

const tileSize = 16

const tileIds = [
  [8476 , 8477, 8478],
  [8539 , 8540, 8541],
];

const resultWidth = tileIds[0].length * tileSize 
const resultHeight = tileIds.length * tileSize

const rt = this.scene.make.renderTexture(
    {
        width: resultWidth ,
        height: resultHeight ,
        x: 0,
        y: 0,
    },
    false
)

const rt = scene.make.renderTexture(
    {
        width: tileIds[0].length * tileSize ,
        height: tileIds.length * tileSize ,
        x: 0,
        y: 0,
      },
      false
    )
    for (let y = 0; y < tileIds.length; y++) {
      for (let x = 0; x < tileIds[y].length; x++) {
        const tileId = tileIds[y][x]
        rt.drawFrame(tileset, tileId, x * tileSize , y * tileSize )
    }
}

```

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [July 18, 2022, 4:36pm UTC](https://phaser.discourse.group/t/create-image-from-the-arrangement-of-tiles-in-tileset-or-how-to-merge-tiles-into-new-texture/12015/13 "2022-07-18T16:36:08Z")

</div>

It should be fine.

But don’t you want `addToScene = true` when making the render texture?