# Select one tile from tileset

**URL:** <https://phaser.discourse.group/t/select-one-tile-from-tileset/6731>\
**Category:** Phaser 3\
**Created:** [June 21, 2020, 12:08pm UTC](https://phaser.discourse.group/t/select-one-tile-from-tileset/6731 "2020-06-21T12:08:21Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![odd-otocyon](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/odd-otocyon/32/3676_2.png) [@odd-otocyon](https://phaser.discourse.group/u/odd-otocyon)\
**Post date:** [June 21, 2020, 12:08pm UTC](https://phaser.discourse.group/t/select-one-tile-from-tileset/6731/1 "2020-06-21T12:08:22Z")

</div>

Hello everyone, I’m new to phaser 3 and video game development.

I would like to create a prototype of roguelike, for that I have a tileset representing ASCII characters in one image (the fonts are withe) :  
 ![glyphs](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/7/7a7df0aa952901a7eb1b2cae32d8c13d875feda9.png)

For the moment I’ve created a rectangular level:

```
export default class LoadingSprites extends Phaser.Scene {
  constructor() {
    super('bootGame')
  }

  preload() {
    this.load.image('fontTiles', 'src/assets/glyphs_8x8.png');
  }

  create() {
    const atlas = {
      empty: 0,
      point: 1,
      at: 64
    }

    const level = []
    for(let y = 0; y < 30; y++) {
      level.push(new Array(50).fill(atlas.point));
    }

    const map = this.make.tilemap({ data: level, tileWidth: 8, tileHeight: 8 });
    const tiles = map.addTilesetImage('fontTiles');
    const layer = map.createStaticLayer(0, tiles, 0, 0);

  }
}

```

I’d like to represent the player with the arobase character, but I don’t know how to select this particular character on the tileset, in order to display it.

On all the resources I consulted, the different objects of the game were on separate files in order to animate them.  
So I don’t know in which direction to look for this kind of tileset where all the elements are on the same image.

Thank for help me

---

<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:** [June 21, 2020, 3:40pm UTC](https://phaser.discourse.group/t/select-one-tile-from-tileset/6731/2 "2020-06-21T15:40:03Z")

</div>

You can add a spritesheet using the same image:

```javascript
this.load.spritesheet('glyph', 'src/assets/glyphs_8x8.png');
// …
this.add.image(0, 0, 'glyph', 1);

```

---

<div class="post-metadata">

**Author:** ![odd-otocyon](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/odd-otocyon/32/3676_2.png) [@odd-otocyon](https://phaser.discourse.group/u/odd-otocyon)\
**Post date:** [June 21, 2020, 7:11pm UTC](https://phaser.discourse.group/t/select-one-tile-from-tileset/6731/3 "2020-06-21T19:11:47Z")

</div>

Thank you, it work.

It’s very simple, my mistake was to load an image and not a spritesheet.