Hi there, I'm a frontend developer and learning to become a game developer, I very stuck when searching art, and sprites for my game so I decided to draw them with my experience on javascript :D here are my work (It's very simple):
Prepare a canvas element
<div style="width: 100vw;height: 100vh;display: flex;justify-content: center;align-items: center;">
<div>
<canvas id="canvas" width="512" height="512" style="width: 512px; height: 512px"></canvas>
</div>
</div>
Data:
Color schema
[
"#c6bfbe",
"#040309",
"#e0e6e9",
"#9d919d",
"#b0813f",
"#cf7f33",
"#adb6b1",
"#1d1f29"
]
Pixel maping:
{
"2_3": 1,
"2_4": 1,
"2_5": 1,
"2_6": 1,
"2_8": 1,
"2_9": 1,
"3_3": 1,
"3_4": 3,
"3_5": 1,
"3_6": 4,
"3_7": 1,
"3_8": 6,
"3_9": 0,
"4_2": 1,
.....
}
And code to drawl pixel
const canvas = document.getElementById("canvas");
const baseSize = Math.round(canvas.width / size)
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#F0F0F0";
ctx.fillRect(0, 0, canvas.width, canvas.height);
for (const key in data) {
const [x, y] = key.split("_")
ctx.fillStyle = colors[data[key]];
ctx.fillRect(+x * baseSize, +y * baseSize, baseSize, baseSize);
}
Tada! It's results:
You can get more pixel art data by inspecting API from simplepixelart.com. I welcome that!
Full source code at:
<!doctype html> | |
<html class="no-js" lang=""> | |
<head> | |
<meta charset="utf-8"> | |
<title></title> | |
<meta name="description" content=""> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<meta property="og:title" content=""> | |
<meta property="og:type" content=""> | |
<meta property="og:url" content=""> | |
<meta property="og:image" content=""> | |
<meta name="theme-color" content="#fafafa"> | |
<link rel="manifest" href="site.webmanifest"> | |
</head> | |
<body style=" padding: 0; margin: 0;"> | |
<div style="width: 100vw;height: 100vh;display: flex;justify-content: center;align-items: center;"> | |
<div> | |
<canvas id="canvas" width="512" height="512" style="width: 512px; height: 512px"></canvas> | |
</div> | |
</div> | |
<script> | |
const size = 16 | |
const colors = [ | |
"#c6bfbe", | |
"#040309", | |
"#e0e6e9", | |
"#9d919d", | |
"#b0813f", | |
"#cf7f33", | |
"#adb6b1", | |
"#1d1f29" | |
] | |
const data = { | |
"2_3": 1, | |
"2_4": 1, | |
"2_5": 1, | |
"2_6": 1, | |
"2_8": 1, | |
"2_9": 1, | |
"3_3": 1, | |
"3_4": 3, | |
"3_5": 1, | |
"3_6": 4, | |
"3_7": 1, | |
"3_8": 6, | |
"3_9": 0, | |
"4_2": 1, | |
"4_3": 3, | |
"4_4": 1, | |
"4_5": 1, | |
"4_6": 4, | |
"4_7": 2, | |
"4_8": 2, | |
"4_9": 2, | |
"5_1": 1, | |
"5_2": 2, | |
"5_3": 1, | |
"5_4": 1, | |
"5_5": 1, | |
"5_6": 5, | |
"5_7": 2, | |
"5_8": 2, | |
"5_9": 2, | |
"6_1": 1, | |
"6_2": 2, | |
"6_3": 1, | |
"6_4": 0, | |
"6_5": 0, | |
"6_6": 4, | |
"6_7": 2, | |
"6_8": 2, | |
"6_9": 2, | |
"7_1": 1, | |
"7_2": 2, | |
"7_3": 1, | |
"7_4": 1, | |
"7_5": 1, | |
"7_6": 2, | |
"7_7": 2, | |
"7_8": 2, | |
"7_9": 2, | |
"8_1": 1, | |
"8_2": 2, | |
"8_3": 1, | |
"8_4": 3, | |
"8_5": 1, | |
"8_6": 2, | |
"8_7": 2, | |
"8_8": 2, | |
"8_9": 2, | |
"9_1": 1, | |
"9_2": 2, | |
"9_3": 3, | |
"9_4": 1, | |
"9_5": 1, | |
"9_6": 2, | |
"9_7": 2, | |
"9_8": 0, | |
"9_9": 0, | |
"10_2": 1, | |
"10_3": 1, | |
"10_4": 1, | |
"10_5": 2, | |
"10_6": 2, | |
"10_7": 0, | |
"10_8": 2, | |
"10_9": 2, | |
"11_3": 1, | |
"11_4": 1, | |
"11_5": 1, | |
"11_6": 1, | |
"11_7": 2, | |
"11_8": 2, | |
"11_9": 2, | |
"12_7": 1, | |
"12_8": 2, | |
"12_9": 2, | |
"13_8": 1, | |
"13_9": 1, | |
"2_10": 1, | |
"2_11": 1, | |
"3_10": 0, | |
"3_11": 0, | |
"3_12": 1, | |
"4_10": 0, | |
"4_11": 0, | |
"4_12": 7, | |
"5_10": 2, | |
"5_11": 0, | |
"5_12": 0, | |
"5_13": 1, | |
"5_14": 1, | |
"6_10": 2, | |
"6_11": 0, | |
"6_12": 0, | |
"6_13": 4, | |
"6_14": 4, | |
"7_10": 2, | |
"7_11": 0, | |
"7_12": 0, | |
"7_13": 1, | |
"7_14": 1, | |
"8_10": 2, | |
"8_11": 0, | |
"8_12": 0, | |
"8_13": 1, | |
"8_14": 3, | |
"9_10": 0, | |
"9_11": 0, | |
"9_12": 0, | |
"9_13": 1, | |
"9_14": 1, | |
"10_10": 0, | |
"10_11": 0, | |
"10_12": 0, | |
"10_13": 4, | |
"10_14": 4, | |
"11_10": 2, | |
"11_11": 0, | |
"11_12": 7, | |
"11_13": 1, | |
"11_14": 1, | |
"12_10": 2, | |
"12_11": 0, | |
"12_12": 1, | |
"13_10": 1, | |
"13_11": 0, | |
"13_12": 1, | |
"14_10": 1, | |
"14_11": 1 | |
} | |
const canvas = document.getElementById("canvas"); | |
const baseSize = Math.round(canvas.width / size) | |
const ctx = canvas.getContext("2d"); | |
ctx.fillStyle = "#F0F0F0"; | |
ctx.fillRect(0, 0, canvas.width, canvas.height); | |
for (const key in data) { | |
const [x, y] = key.split("_") | |
ctx.fillStyle = colors[data[key]]; | |
ctx.fillRect(+x * baseSize, +y * baseSize, baseSize, baseSize); | |
} | |
</script> | |
</body> | |
</html> |
Top comments (1)
nicee