# Best way to create a grid of sprites?

**URL:** https://community.thunkable.com/t/best-way-to-create-a-grid-of-sprites/2219540
**Category:** Questions about Thunkable X
**Tags:** canvas
**Created:** [January 12, 2023, 5:03pm UTC](https://community.thunkable.com/t/best-way-to-create-a-grid-of-sprites/2219540 "2023-01-12T17:03:46Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)
#### Post date: [January 12, 2023, 5:03pm UTC](https://community.thunkable.com/t/best-way-to-create-a-grid-of-sprites/2219540/1 "2023-01-12T17:03:46Z")

</div>

I’m trying to make a grid of sprites using a nested loop:

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/8/c/8c277563b630ae7f8611bf347efc6d2ae63e39e3.png)

This works ~~reliably~~ [**edit:**] _sometimes_ with the 0.03 seconds wait block. ☹ But even then it’s slow. You can watch as it draws the individual sprites. Here’s what it looks like in a browser preview:

![Thunkable (2)](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/d/e/de75a6d70d226c6462c6c5ec4f3e8e179a2789d9.gif)

It takes approximately 3 seconds to complete. With 49 sprites being created, that’s going to be a _minimum_ of 1.47 seconds (49 \* 0.03 = 1.47). That feels very slow for a game that needs to refresh the screen for new levels.

Does anyone have a fast, reliable way to create a grid of sprites?

---

<div class="post-metadata">

### Author: ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)
#### Post date: [January 12, 2023, 6:26pm UTC](https://community.thunkable.com/t/best-way-to-create-a-grid-of-sprites/2219540/2 "2023-01-12T18:26:27Z")

</div>

I think something is wrong with my logic or something is wrong with the Canvas component.

If I add much longer delays, I still see positioning errors:

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/b/5/b5add28025b88c1c60b50d3b5d35767bab839630.png)

![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/e/8/e88b1012be2c810635c5403d76c280f23ae664e5.png)

Even giving each Wait block a 1 second value (for a total of about 50 seconds!) results in positioning errors. Ack!

---

<div class="post-metadata">

### Author: ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)
#### Post date: [January 12, 2023, 8:18pm UTC](https://community.thunkable.com/t/best-way-to-create-a-grid-of-sprites/2219540/3 "2023-01-12T20:18:10Z")

</div>

When I do this with a button instead (no Canvas), it works beautifully and immediately without any Wait blocks required:

![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/a/f/af44016216a5a17072f0aa840362dd992f377621.png)

It takes visibly no time at all to render the entire grid of buttons:

![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/6/2/620507046bdb63ab15727f05b0642e8e2aec17a6.png)

**This leads me to believe that the problem is with the Canvas component and not with my logic.**

---

<div class="post-metadata">

### Author: ![rosapaulamolina105g3](https://avatars.discourse-cdn.com/v4/letter/r/e5b9ba/32.png) [@rosapaulamolina105g3](https://community.thunkable.com/u/rosapaulamolina105g3)
#### Post date: [January 12, 2023, 8:26pm UTC](https://community.thunkable.com/t/best-way-to-create-a-grid-of-sprites/2219540/4 "2023-01-12T20:26:39Z")

</div>

Is it necessary that it be with sprites? I think you could make a row of cells (buttons, columns or labels) and then save it as a Data view layout, in this way, depending on how many rows your database has, can you replicate the row in different rows?

---

<div class="post-metadata">

### Author: ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)
#### Post date: [January 12, 2023, 9:29pm UTC](https://community.thunkable.com/t/best-way-to-create-a-grid-of-sprites/2219540/5 "2023-01-12T21:29:31Z")

</div>

It does have to be sprites. I decided to make a proof-of-concept for a tower defense game. I know that Thunkable is limited in terms of the games you can make but my first step is to figure out how to spawn the grid. That will allow me to generate mazes, allow the player to add towers, etc.

Part of the simplicity (good) of Thunkable is that each component is ideal for a specific task; part of the limitation (bad) of Thunkable is that each component is specialized so I can’t, for example, set the speed or position of a button using blocks. I can set the speed/position of a sprite but I can’t do sophisticated swipe/drag & drop detection with a sprite (or a button for that matter).

---

<div class="post-metadata">

### Author: ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)
#### Post date: [January 12, 2023, 9:36pm UTC](https://community.thunkable.com/t/best-way-to-create-a-grid-of-sprites/2219540/6 "2023-01-12T21:36:16Z")

</div>

I’ve reported this Canvas issue here: [Canvas processing is slow and unpredictable · Issue #1232 · thunkable/thunkable-issues · GitHub](https://github.com/thunkable/thunkable-issues/issues/1232)

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/f/0f59f292712368bce16ff80133ae10de8a6f27e8.png) [@system](https://community.thunkable.com/u/system)
#### Post date: [April 12, 2023, 9:36pm UTC](https://community.thunkable.com/t/best-way-to-create-a-grid-of-sprites/2219540/7 "2023-04-12T21:36:45Z")

</div>

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.
