# SOLVED: Trying to create a Sprite from TileMap - frame of tileSetImage

**URL:** <https://phaser.discourse.group/t/solved-trying-to-create-a-sprite-from-tilemap-frame-of-tilesetimage/3186>\
**Category:** Phaser 3\
**Created:** [July 21, 2019, 10:36pm UTC](https://phaser.discourse.group/t/solved-trying-to-create-a-sprite-from-tilemap-frame-of-tilesetimage/3186 "2019-07-21T22:36:01Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![fruitbatinshades](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/fruitbatinshades/32/826_2.png) [@fruitbatinshades](https://phaser.discourse.group/u/fruitbatinshades)\
**Post date:** [July 21, 2019, 10:36pm UTC](https://phaser.discourse.group/t/solved-trying-to-create-a-sprite-from-tilemap-frame-of-tilesetimage/3186/1 "2019-07-21T22:36:01Z")

</div>

I am trying to convert some tiles into sprites so I can manipulate them. I have successfully done this but the sprite takes the whole of the tileset image (‘GS’):

```javascript
let tiles = this.getVisibleTiles(scene);
let ids = tiles.map(a => a.index);
let s = scene.mapLayers['InteractionTiles'].createFromTiles(ids, null, { key: 'GS', frame: 17});
s.forEach(x => {
    scene.add.existing(x);
    //scene.physics.world.enable(x);
    x.alpha = .5;
    x.depth = 100;
});
tiles.forEach(t => {
    scene.mapLayers['InteractionTiles'].removeTileAt(t.x, t.y)
});
let tilesAfter = this.getVisibleTiles(scene);
debugger;

```

Is there a way to get the image/frame from the tileset image or do I have to also create a sprite sheet from the same image?

Below are my attempts and what the result is:

```javascript
let s = scene.mapLayers['InteractionTiles'].createFromTiles(ids, null, { key: 'ComponentSheet'});

```

This version selects the first frame:  
 ![Annotation%202019-07-22%20104941](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/1/19c2c49714f16ecf5febdbdb002b49ad492da2d0.png)

```javascript
let s = scene.mapLayers['InteractionTiles'].createFromTiles(ids);

```

this version cannot find the image:  
 ![Annotation%202019-07-22%20105200](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/3/3b457e1bff4857bf352c23ecddae29ec405161bf.png)

---

<div class="post-metadata">

**Author:** ![fruitbatinshades](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/fruitbatinshades/32/826_2.png) [@fruitbatinshades](https://phaser.discourse.group/u/fruitbatinshades)\
**Post date:** [July 23, 2019, 11:24pm UTC](https://phaser.discourse.group/t/solved-trying-to-create-a-sprite-from-tilemap-frame-of-tilesetimage/3186/2 "2019-07-23T23:24:29Z")

</div>

I realise this is not a standard practice but I’ve solved it. `createFromTiles` runs through and creates a sprite for ALL instances of that tile. I am kidnapping the tiles from the map, creating a container with them in as sprites instead (complicated physics is why).

Here is rough utility that does what I want which is convert the tiles in this area to a collection of sprites and add them to a container so they can be used as a group.

```javascript
let container = new Phaser.GameObjects.Container(scene, this.body.x, this.body.y);
                let s = Utils.TileAreaToSprites(tiles, { key: 'ComponentSheet' }, scene.mapLayers['InteractionTiles']);
                s.forEach((x, i) => {
                    //adjust origin and position to macth use case
                    x.setOrigin(0);
                    x.x = 0;
                    x.y = i * 64;
                });
                container.depth = 100;
                container.add(s);
                scene.add.existing(container);

```

```javascript
static TileAreaToSprites(tiles, spriteConfig, layer) {
    if (spriteConfig === undefined) { spriteConfig = {}; }

    let tilemapLayer = layer;//.tilemapLayer;
    let scene = tilemapLayer.scene;
    let camera = scene.cameras.main;

    let sprites = [];
    let i;

    for (i = 0; i < tiles.length; i++) {
        var tile = tiles[i];

        if (tile.index !== -1) {
            spriteConfig.x = tilemapLayer.tileToWorldX(tile.x, camera, layer);
            spriteConfig.y = tilemapLayer.tileToWorldY(tile.y, camera, layer);
            if (tile.index != -1)
                spriteConfig.frame = tile.index -1;
            else
                delete spriteConfig.frame;

            var sprite = scene.make.sprite(spriteConfig);
            sprites.push(sprite);
        }
    }

    return sprites;
};

```