Cute tiles to play with

Ideation
1

This is a depot for cute game tiles I find, to make little 2D scenes (and potentially include in an interactive game…).

2

918×515 26.4 KB

3

I’ll have to look at these, they look really cute, and might work with Potato Guy!

4

918×515 116 KB

918×515 142 KB

What a trip!

5

918×515 15.2 KB

They have little people, to sit in the cars!

I don’t like using vehicles in anything, but these are so cute, I kinda want to make random traffic lines at the bottom of webpages…

6

These could go along with the cute sprites @tim posted! Tiny Sprite Sheet Generator 👾 (beautiful procedural generation)

[https://global.discourse-cdn.com/flex015/uploads/talkgroup/original/2X/f/fc9e6e7193e72865c0e23d1a28d851b9cd61bbc3.png]

7

That’s really neat, and all it is:

<canvas id=c width=512 height=256 style=width:100%;image-rendering:-moz-crisp-edges;image-rendering:pixelated>
<!--
Right click on the image to save.

Sprites are aligned to a 16x16 pixel grid with a transparent background.

Reload for a new sheet, or set the seed to whatever you want! ✌️😄
-->

// Tiny Sprite Sheet Generator - Frank Force 2020 - MIT License

'use strict'
let seed, x, R, i, j, pass, s, X, Y;

seed = Date.now();    // seed for random generaton, can be replaced with hardcoded value
x = c.getContext`2d`; // 2d canvas context
x.lineWidth = 2;      // set 2 pixel wide line width to make the black outline
R = ()=> (Math.sin(++s + i*i) + 1)*1e9 % 256 | 0; // get a seeded random integer between 0-256

for(i = 32 * 16; i--;)                          // for each sprite (32 rows x 16 columns)
for(pass = 4; pass--;)                          // 4 passes, outline left/right and fill left/right
for(s = seed, j = R()/5 + 50|0; j--;)           // set seed, randomize max sprite pixels, 50-101
  X = j&7, Y = j>>3,                            // X & Y pixel index in sprite
  R() < 19 ?                                    // small chance of new color
    x.fillStyle = `rgb(${R()},${R()},${R()})` : // randomize color
    R()**2 / 2e3 > X*X + (Y-5)**2 &&            // distance from center vs random number
      x[pass&2 ? 'strokeRect' : 'fillRect'](    // stroke first for outline then fill with color
          7 + i%32*16 - pass%2*2*X + X,         // x pos, flipped if pass is even
          2 + (i>>5)*16 + Y,                    // y pos
          1, 1);                                // 1 pixel size

And it generates sheets like:

canvas

Thanks @tim and @judytuna! :slight_smile:

1 Like