# Richard's Arcade Tips #2 - Drawing custom stuff with Images

**URL:** https://forum.makecode.com/t/richards-arcade-tips-2-drawing-custom-stuff-with-images/28400
**Category:** MakeCode Blog
**Tags:** arcade-tips
**Created:** [April 24, 2024, 2:12am UTC](https://forum.makecode.com/t/richards-arcade-tips-2-drawing-custom-stuff-with-images/28400 "2024-04-24T02:12:32Z")
**Posts on this page:** 20
**Page:** 2

<div class="post-metadata">

### Author: ![Luke](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/luke/32/32519_2.png) [@Luke](https://forum.makecode.com/u/Luke)
#### Post date: [February 19, 2026, 7:13pm UTC](https://forum.makecode.com/t/richards-arcade-tips-2-drawing-custom-stuff-with-images/28400/21 "2026-02-19T19:13:50Z")

</div>

> [@Ima.notarobot](#):
>
> each pixel is a different sprite

![please7tv-please](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/3X/3/2/3284caaa2955ee79724ef370859506d6f5a35409.gif)  
the best way to do this would be to change the tile, not use like 50 sprites.  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/3X/c/d/cd643d7d996fe9f210521a30c1c0b398f560bd77.png)  
You can also delay this to make the tile update midway or after the animation of the juice falling. It’ll make the 2 events feel more seamless and like the juice actually did fall on the tile.

As a rule of thumb, try to use as few sprites as possible because they are very laggy.

---

<div class="post-metadata">

### Author: ![randomuser](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/randomuser/32/32505_2.png) [@randomuser](https://forum.makecode.com/u/randomuser)
#### Post date: [February 19, 2026, 7:15pm UTC](https://forum.makecode.com/t/richards-arcade-tips-2-drawing-custom-stuff-with-images/28400/22 "2026-02-19T19:15:13Z")

</div>

The link isn’t there! 🙃

---

<div class="post-metadata">

### Author: ![Ima.notarobot](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/ima.notarobot/32/26551_2.png) [@Ima.notarobot](https://forum.makecode.com/u/Ima.notarobot)
#### Post date: [February 19, 2026, 7:15pm UTC](https://forum.makecode.com/t/richards-arcade-tips-2-drawing-custom-stuff-with-images/28400/23 "2026-02-19T19:15:14Z")

</div>

oopies here is the link [https://makecode.com/\_icXUcvR8JaHx](https://makecode.com/_icXUcvR8JaHx)

---

<div class="post-metadata">

### Author: ![Ima.notarobot](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/ima.notarobot/32/26551_2.png) [@Ima.notarobot](https://forum.makecode.com/u/Ima.notarobot)
#### Post date: [February 19, 2026, 9:28pm UTC](https://forum.makecode.com/t/richards-arcade-tips-2-drawing-custom-stuff-with-images/28400/24 "2026-02-19T21:28:53Z")

</div>

Let me clarify. First one pixel was not intended, but it was the only way I could get the juice to have different lengths. So 16 pixels for each tile covers in juice. Second I tried to use the to bottom of sprite location but images work differently when it comes To tile map location. third If I made a custom tile, like the example I would have to make the game ask what floor tile is beneath the character and there are tons of different ones. Then the juice would all look the same. That’s why I wanted to use images to make a Unique stain on the tile every time.

What I need:

A less laggy solution to making the juice have different lengths. Preferably one sprite.

II need a different unique stain on the tile.

It should cover different tile around it too.

You don’t have to do the coding, I just need a solution for these problems. 😀

---

<div class="post-metadata">

### Author: ![BitBot](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/bitbot/32/33272_2.png) [@BitBot](https://forum.makecode.com/u/BitBot)
#### Post date: [February 19, 2026, 11:29pm UTC](https://forum.makecode.com/t/richards-arcade-tips-2-drawing-custom-stuff-with-images/28400/25 "2026-02-19T23:29:33Z")

</div>

You could make an array and get a random value each time the juice spills!👍

---

<div class="post-metadata">

### Author: ![Ima.notarobot](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/ima.notarobot/32/26551_2.png) [@Ima.notarobot](https://forum.makecode.com/u/Ima.notarobot)
#### Post date: [February 20, 2026, 3:31am UTC](https://forum.makecode.com/t/richards-arcade-tips-2-drawing-custom-stuff-with-images/28400/26 "2026-02-20T03:31:40Z")

</div>

Could you explain more?

---

<div class="post-metadata">

### Author: ![BitBot](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/bitbot/32/33272_2.png) [@BitBot](https://forum.makecode.com/u/BitBot)
#### Post date: [February 20, 2026, 6:27pm UTC](https://forum.makecode.com/t/richards-arcade-tips-2-drawing-custom-stuff-with-images/28400/27 "2026-02-20T18:27:44Z")

</div>

You can put a sprite below the player, when the juice spills, and then set the image to a random value from an array! Then it can look different almost every time!

---

<div class="post-metadata">

### Author: ![Ima.notarobot](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/ima.notarobot/32/26551_2.png) [@Ima.notarobot](https://forum.makecode.com/u/Ima.notarobot)
#### Post date: [February 24, 2026, 7:06pm UTC](https://forum.makecode.com/t/richards-arcade-tips-2-drawing-custom-stuff-with-images/28400/28 "2026-02-24T19:06:44Z")

</div>

(Sorry for the late reply, I never got any notification.) well, yes but no? I can make it a random length using the pick a random block, but that would make the entire image, the length that the pick a random block chose.

---

<div class="post-metadata">

### Author: ![BitBot](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/bitbot/32/33272_2.png) [@BitBot](https://forum.makecode.com/u/BitBot)
#### Post date: [February 25, 2026, 3:55am UTC](https://forum.makecode.com/t/richards-arcade-tips-2-drawing-custom-stuff-with-images/28400/29 "2026-02-25T03:55:28Z")

</div>

Oh! You want the length?

---

<div class="post-metadata">

### Author: ![Ima.notarobot](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/ima.notarobot/32/26551_2.png) [@Ima.notarobot](https://forum.makecode.com/u/Ima.notarobot)
#### Post date: [February 25, 2026, 7:02pm UTC](https://forum.makecode.com/t/richards-arcade-tips-2-drawing-custom-stuff-with-images/28400/30 "2026-02-25T19:02:30Z")

</div>

Maybe look at the example in the game. Press J to activate the blood.

---

<div class="post-metadata">

### Author: ![randomuser](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/randomuser/32/32505_2.png) [@randomuser](https://forum.makecode.com/u/randomuser)
#### Post date: [March 9, 2026, 3:44pm UTC](https://forum.makecode.com/t/richards-arcade-tips-2-drawing-custom-stuff-with-images/28400/31 "2026-03-09T15:44:35Z")

</div>

I’m late, but I think the best solution would be this (a modified version of @BitBot ‘s solution):

- Create an array with a bunch of juice sprites that are all the same size
- Pick a random sprite to use each time
- Use the sprite scaling extension to scale the sprite in the horizontal direction, so it can have a new length
- Place that sprite on the tile map location below the player or enemy
- If the sprite’s placement is off, change the position (ex. If the sprite is in the center of the tile rather than the edge, add 8 pixels to its x and y positions each time it’s placed to fix it)

Additionally, I’d suggest you make the sprite images the size of the largest splatter and then scale them down to new sizes so that the resolution is better.

LMK if this is what you meant! 😊

---

<div class="post-metadata">

### Author: ![MeatballDev](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/meatballdev/32/28502_2.png) [@MeatballDev](https://forum.makecode.com/u/MeatballDev)
#### Post date: [March 9, 2026, 11:44pm UTC](https://forum.makecode.com/t/richards-arcade-tips-2-drawing-custom-stuff-with-images/28400/32 "2026-03-09T23:44:23Z")

</div>

are they gonna do more of these

---

<div class="post-metadata">

### Author: ![Ima.notarobot](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/ima.notarobot/32/26551_2.png) [@Ima.notarobot](https://forum.makecode.com/u/Ima.notarobot)
#### Post date: [March 10, 2026, 4:29pm UTC](https://forum.makecode.com/t/richards-arcade-tips-2-drawing-custom-stuff-with-images/28400/33 "2026-03-10T16:29:36Z")

</div>

wouldn’t I end up with a block then? could you please make an example code? thanks.

---

<div class="post-metadata">

### Author: ![richard](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/richard/32/5417_2.png) [@richard](https://forum.makecode.com/u/richard)
#### Post date: [March 10, 2026, 5:29pm UTC](https://forum.makecode.com/t/richards-arcade-tips-2-drawing-custom-stuff-with-images/28400/34 "2026-03-10T17:29:37Z")

</div>

here’s my take. comments are inside the project:

> **[the juuuuuuuuuuuice](https://arcade.makecode.com/20454-67225-01485-91043)**
>
> a splatter example for Ima.notarobot on the forum

press left/right to turn, up to move, and hold A to shoot juice

---

<div class="post-metadata">

### Author: ![Ima.notarobot](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/ima.notarobot/32/26551_2.png) [@Ima.notarobot](https://forum.makecode.com/u/Ima.notarobot)
#### Post date: [March 10, 2026, 8:06pm UTC](https://forum.makecode.com/t/richards-arcade-tips-2-drawing-custom-stuff-with-images/28400/35 "2026-03-10T20:06:58Z")

</div>

This is perfect! Thank you so much @richard. Also funny name.

---

<div class="post-metadata">

### Author: ![BLADEr](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/blader/32/16422_2.png) [@BLADEr](https://forum.makecode.com/u/BLADEr)
#### Post date: [March 10, 2026, 8:07pm UTC](https://forum.makecode.com/t/richards-arcade-tips-2-drawing-custom-stuff-with-images/28400/36 "2026-03-10T20:07:03Z")

</div>

That’s a pretty clever approach! I was trying to think of ways to edit the actual tile, but the texture masking is really clever.

---

<div class="post-metadata">

### Author: ![richard](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/richard/32/5417_2.png) [@richard](https://forum.makecode.com/u/richard)
#### Post date: [March 11, 2026, 5:14pm UTC](https://forum.makecode.com/t/richards-arcade-tips-2-drawing-custom-stuff-with-images/28400/37 "2026-03-11T17:14:31Z")

</div>

now that i think about it, though, this approach does have a problem which is that it’s going to flood your tilemap’s tileset… tilemaps have a max number of tiles (256) and with this approach the maximum number of unique splatter problems would be something like 2^12 (4096). of course you’re probably unlikely to actually hit that limit, but still not great.

it would probably be better to just draw the splatter on top of the tiles in a `render on z-index` block but to do that every frame i’d probably need to change the copyPartialImage function to be more efficient by using the native `blit` function instead of going over each pixel individually.

or actually, it would make sense to just store the splatter as an image on the tile and then just draw that. i’ll make another version of the project with that approach when i have a sec

---

<div class="post-metadata">

### Author: ![richard](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/richard/32/5417_2.png) [@richard](https://forum.makecode.com/u/richard)
#### Post date: [March 11, 2026, 5:43pm UTC](https://forum.makecode.com/t/richards-arcade-tips-2-drawing-custom-stuff-with-images/28400/38 "2026-03-11T17:43:42Z")

</div>

> **[the juuuuuuuuuuuice](https://arcade.makecode.com/78230-36666-22732-55565)**
>
> a splatter example for Ima.notarobot on the forum with a more efficient use of tiles

if you intend to run this game on hardware, then this is very inefficient memory wise but doesn’t have the tilemap troubles of the earlier example. if you’re just running the game on the computer then memory doesn’t matter

---

<div class="post-metadata">

### Author: ![randomuser](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/randomuser/32/32505_2.png) [@randomuser](https://forum.makecode.com/u/randomuser)
#### Post date: [March 12, 2026, 6:04pm UTC](https://forum.makecode.com/t/richards-arcade-tips-2-drawing-custom-stuff-with-images/28400/39 "2026-03-12T18:04:35Z")

</div>

Well in case anyone else wants an alternative juice system: (Press A to juice)

> **[juice (randomuser version)](https://arcade.makecode.com/82105-37956-36555-38991)**
>
> Made with ❤️ in Microsoft MakeCode Arcade.

There’s a function to spawn the juice so if you want to change how it splatters or add new splatter shapes you can! Since this is just a list of sprites it’s laggier than drawing the juice directly to the screen, but It’s good for temporary juice because you could remove the oldest ones using the ‘array of sprites of kind juice’ block if you want to put in a juice limit.

---

<div class="post-metadata">

### Author: ![SouperMediocre1](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/soupermediocre1/32/22579_2.png) [@SouperMediocre1](https://forum.makecode.com/u/SouperMediocre1)
#### Post date: [March 13, 2026, 4:50pm UTC](https://forum.makecode.com/t/richards-arcade-tips-2-drawing-custom-stuff-with-images/28400/40 "2026-03-13T16:50:28Z")

</div>

in situations like this I would just draw to z screen still because you can just have an array of all the juice locations and another array with a lifetime value or something. you could remove splatters if the lifetime is too high in the array

[Previous page](https://forum.makecode.com/t/richards-arcade-tips-2-drawing-custom-stuff-with-images/28400.md?page=1)

[Next page](https://forum.makecode.com/t/richards-arcade-tips-2-drawing-custom-stuff-with-images/28400.md?page=3)
