# Layering Sprites with Shapes

**URL:** <https://forum.code.org/t/layering-sprites-with-shapes/22700>\
**Category:** Unit and Lesson Discussion\
**Tags:** csd-unit-3, csd-unit-3-lesson-6\
**Created:** [November 28, 2018, 6:14pm UTC](https://forum.code.org/t/layering-sprites-with-shapes/22700 "2018-11-28T18:14:31Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![aharris](https://avatars.discourse-cdn.com/v4/letter/a/bcef8e/32.png) [@aharris](https://forum.code.org/u/aharris)\
**Post date:** [November 28, 2018, 6:14pm UTC](https://forum.code.org/t/layering-sprites-with-shapes/22700/1 "2018-11-28T18:14:31Z")

</div>

Hello All!

My students and I have run into a problem I can’t solve. We are trying to layer background, sprite, shape, sprite. However, when we call drawSprites() on the second sprite, it redraws the first sprite (already drawn) on top of the shape. I have tried using sprite.depth and I have tried writing separate functions to draw the sprites in hopes of limiting the scope, but no luck. Can anyone help me make this work?

Thanks in advance!!  
Amy

---

<div class="post-metadata">

**Author:** ![heather.paquette](https://avatars.discourse-cdn.com/v4/letter/h/90db22/32.png) [@heather.paquette](https://forum.code.org/u/heather.paquette)\
**Post date:** [November 28, 2018, 8:33pm UTC](https://forum.code.org/t/layering-sprites-with-shapes/22700/2 "2018-11-28T20:33:54Z")

</div>

![image](https://us1.discourse-cdn.com/flex016/uploads/codeorgforum/original/2X/0/02c2798081cf814a6031d4f30eb8ef6cce953350.png)

add the var and sprite animation after first draw sprite. I did this in level 14 and it draws the bell on top of the snake…

---

<div class="post-metadata">

**Author:** ![aharris](https://avatars.discourse-cdn.com/v4/letter/a/bcef8e/32.png) [@aharris](https://forum.code.org/u/aharris)\
**Post date:** [November 28, 2018, 8:58pm UTC](https://forum.code.org/t/layering-sprites-with-shapes/22700/3 "2018-11-28T20:58:08Z")

</div>

Thanks so much for your reply! Yes, it does draw the bell on top of the snake, but the snake is no longer behind the bars - we are trying to get the snake to stay on its original layer instead of moving to the top.

---

<div class="post-metadata">

**Author:** ![elizabeth\_admin](https://avatars.discourse-cdn.com/v4/letter/e/bb73d2/32.png) [@elizabeth\_admin](https://forum.code.org/u/elizabeth_admin)\
**Post date:** [November 29, 2018, 5:50pm UTC](https://forum.code.org/t/layering-sprites-with-shapes/22700/6 "2018-11-29T17:50:01Z")

</div>

I don’t think this is possible to do with the blocks that you have in this lesson. `drawSprites` draws every sprite at the same time, so it’s impossible to draw a shape between them.

Once you have the “visible” property, you can do it, though. You’d need to create the first sprite, draw it, then make it invisible. Then draw your shape, then create and draw the second sprite. I have an example here:

> **[Check out what I made](https://studio.code.org/projects/gamelab/vxO85X77zwiqchvZ_1SQYvFwZ6W9WShBTBdTSCQTIUk)**
>
> I wrote the code myself with Code.org

There are other ways to do this that don’t feel as much of a workaround, but they rely on blocks that aren’t in the curriculum.

Elizabeth

---

<div class="post-metadata">

**Author:** ![aharris](https://avatars.discourse-cdn.com/v4/letter/a/bcef8e/32.png) [@aharris](https://forum.code.org/u/aharris)\
**Post date:** [November 29, 2018, 6:36pm UTC](https://forum.code.org/t/layering-sprites-with-shapes/22700/7 "2018-11-29T18:36:51Z")

</div>

Thank you, Elizabeth! That works perfectly. My kiddos are already flipping back and forth between blocks and code, so they can type it in. I really appreciate the assistance!

---

<div class="post-metadata">

**Author:** ![ackerson.teach](https://avatars.discourse-cdn.com/v4/letter/a/a5b964/32.png) [@ackerson.teach](https://forum.code.org/u/ackerson.teach)\
**Post date:** [March 21, 2023, 2:20pm UTC](https://forum.code.org/t/layering-sprites-with-shapes/22700/9 "2023-03-21T14:20:47Z")

</div>

I’m a few years late to this…

Logically this is blowing my mind. The multiple drawSprites and how it’s interacting with the .visible property…

I can put this idea in a draw loop to get a shape drawn between sprites but I don’t understand why it’s working. For example:

> **[Check out what I made](https://studio.code.org/projects/gamelab/I75iiahOJ2g0RvbNrQP6HRtBGfKLLJcwc8TzFyrCeBE)**
>
> I wrote the code myself with Code.org

---

<div class="post-metadata">

**Author:** ![mwood](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/mwood/32/4941_2.png) [@mwood](https://forum.code.org/u/mwood)\
**Post date:** [March 21, 2023, 8:55pm UTC](https://forum.code.org/t/layering-sprites-with-shapes/22700/10 "2023-03-21T20:55:47Z")

</div>

@ackerson.teach,

I agree that it is a little confusing and hard to explain.

I prefer the undocumented “drawSprite()” function (singular) that allows you to draw a single sprite at a time rather than drawing them all. Elizabeth didn’t suggest this in her post, but it does work if you put the name of the sprite inside the ().

Mike

---

<div class="post-metadata">

**Author:** ![kostrowski](https://avatars.discourse-cdn.com/v4/letter/k/e480ec/32.png) [@kostrowski](https://forum.code.org/u/kostrowski)\
**Post date:** [May 9, 2025, 11:47am UTC](https://forum.code.org/t/layering-sprites-with-shapes/22700/11 "2025-05-09T11:47:13Z")

</div>

When I do this, the sprite is drawn at (0, 0). I cannot seem to move the sprite.

---

<div class="post-metadata">

**Author:** ![christine.carney](https://avatars.discourse-cdn.com/v4/letter/c/8e8cbc/32.png) [@christine.carney](https://forum.code.org/u/christine.carney)\
**Post date:** [May 9, 2025, 2:01pm UTC](https://forum.code.org/t/layering-sprites-with-shapes/22700/12 "2025-05-09T14:01:43Z")

</div>

Funny! Same here. I’d love to play with the drawSprites(sprite); function to call a single sprite.

On a side note: I would think that calling all the sprites multiple times per draw loop would cause an issue with processing and not be good practice.

---

<div class="post-metadata">

**Author:** ![mwood](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/mwood/32/4941_2.png) [@mwood](https://forum.code.org/u/mwood)\
**Post date:** [May 12, 2025, 5:25pm UTC](https://forum.code.org/t/layering-sprites-with-shapes/22700/13 "2025-05-12T17:25:33Z")

</div>

Hmmm maybe share a link and we can try and look at it?

Mike
