Uploaded October 2020 | Updated September 2026, 2 hours ago
In this tutorial video, we export pixel art from Aseprite and convert the raster asset to SVG paths for usage in JavaScript games. We specifically use React here, but this technique can be used in any JavaScript templating. You can use this technique to create pixel art HUD for your games or apps!
*** Links ***
⭐️ Get early access to my full JS Game Dev course:
drew-conley-courses.kit.com/66eb6d3ff4
💬 Join our Discord community of people making video games:
discord.gg/umD2GRy
Aseprite (pixel art program)
aseprite.org
Pixels to SVG (by Stephen Shaw)
cdpn.io/shshaw/debug/XbxvNj
Previous video on making Zelda HUD Hearts in React
youtu.be/XTMt6SvvprE
** Timestamps **
00:00:00 Intro
00:00:50 Overview
00:02:00 Creating the empty SVG
00:02:40 Pixels to SVG tool
00:03:28 Lifebar component
00:04:30 SVG breakdown
00:05:30 Sizing the Lifebar
00:06:50 Adding the fill
00:09:00 Pixel math
00:12:00 React state
In this tutorial video, we export pixel art from Aseprite and convert the raster asset to SVG paths for usage in JavaScript games. We specifically use React here, but this technique can be used in any JavaScript templating. You can use this technique to create pixel art HUD for your games or apps!
*** Links ***
⭐️ Get early access to my full JS Game Dev course:
drew-conley-courses.kit.com/66eb6d3ff4
💬 Join our Discord community of people making video games:
discord.gg/umD2GRy
Aseprite (pixel art program)
aseprite.org
Pixels to SVG (by Stephen Shaw)
cdpn.io/shshaw/debug/XbxvNj
Previous video on making Zelda HUD Hearts in React
youtu.be/XTMt6SvvprE
** Timestamps **
00:00:00 Intro
00:00:50 Overview
00:02:00 Creating the empty SVG
00:02:40 Pixels to SVG tool
00:03:28 Lifebar component
00:04:30 SVG breakdown
00:05:30 Sizing the Lifebar
00:06:50 Adding the fill
00:09:00 Pixel math
00:12:00 React state
![Build a Game with JavaScript and HTML Canvas [RPG Kit series]](https://i.ytimg.com/vi/HmxNrlPx8iY/mqdefault.jpg "Build a Game with JavaScript and HTML Canvas [RPG Kit series]
Lets build a simple Top-Down game system in HTML Canvas and JavaScript!
00:00:00 Intro
00:01:23 Vite setup (optional)
00:02:42 Drawing to a Canvas
00:15:50 Sprite Class
00:35:49 Game Loop
00:44:42 Keyboard Input
00:52:05 Grid Movement
01:03:16 Walls
01:07:50 Animation Tracks
01:28:28 Game Objects
01:45:39 Event System
01:54:36 Hero Camera
02:00:00 Item Pickups
02:19:41 HUD Inventory
02:30:00 Ready method for Game Objects
02:33:57 Thank You!
PART 2 continues here:
https://youtu.be/yTFIciZKG0M
⭐️ Get early access to my full JS Game Dev course:
https://drew-conley-courses.kit.com/66eb6d3ff4
💬 Discord
Need help, have a question, or want to share your game dev project?
Join our Discord. Heres the link: https://discord.gg/umD2GRy
📁 Sprites & Code Starting download:
https://drive.google.com/file/d/1BLEVGyI5AmMtgz9SG2bI0J3zYi3QjyFh/view?usp=drive_link
📁 Code Ending Download:
https://drive.google.com/file/d/1Lqkuc92ydqC6WIYAgq4YTU4K27w-1JIv/view?usp=sharing
Twitter / X:
https://twitter.com/drewconley13
Be my friend on LinkedIn:
https://www.linkedin.com/in/drew-conley-a7865a29
New to using `npm`? Check out this article:
https://docs.npmjs.com/downloading-and-installing-node-js-and-npm")
