Tutorial: Pixel art SVGs for React game HUD
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!
Thanks for watching!
*** Links ***
Join us in our Discord:
https://discord.gg/umD2GRy
Join my Email List:
https://us13.list-manage.com/subscribe?u=467755aba42db48795fa86c95&id=b40db07f16
Aseprite (pixel art program)
https://www.aseprite.org/
Pixels to SVG (by Stephen Shaw)
https://cdpn.io/shshaw/debug/XbxvNj
Previous video on making Zelda HUD Hearts in React
https://youtu.be/XTMt6SvvprE
My website (with links to my games)
https://thedangercrew.com
** 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
Видео Tutorial: Pixel art SVGs for React game HUD канала Drew Conley
Thanks for watching!
*** Links ***
Join us in our Discord:
https://discord.gg/umD2GRy
Join my Email List:
https://us13.list-manage.com/subscribe?u=467755aba42db48795fa86c95&id=b40db07f16
Aseprite (pixel art program)
https://www.aseprite.org/
Pixels to SVG (by Stephen Shaw)
https://cdpn.io/shshaw/debug/XbxvNj
Previous video on making Zelda HUD Hearts in React
https://youtu.be/XTMt6SvvprE
My website (with links to my games)
https://thedangercrew.com
** 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
Видео Tutorial: Pixel art SVGs for React game HUD канала Drew Conley
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
Build Zelda hearts with JavaScript/React (Gamedev Tutorial)Game Loop Speed in Pizza LegendsTutorial: Scenario and Story Points in a JavaScript gameEnd-to-End Testing with Playwright (an Intro)GODOT TUTORIAL #4: Collisions, Export inspector variables, Top Down layering (for beginners)Creating Pizzas for the Lineup! Pizza RPG Ep. 14Story Progress! Pizza RPG Ep. 13Finishing the Battle! Pizza Battle RPG Pt. 8Pizza Team HUD - RPG Battle pt. 7Saving game progress - Pizza RPG Ep. 15Busting out Items in Battle | Pizza RPG Battles Pt. 5Build an Attack Menu! RPG Battles Pt. 4Build JavaScript games with Excalibur JSShould you build an Editor for your game?What I learned from using Unity for a weekBuild an Inventory screen layout with CSS Grid (Beginner Tutorial)Pizza RPG Part 5 - Character Animations #pizzalegendsPizza RPG Part 9 - Expanded Cutscene behaviors!Pizza RPG Part 6 - Camera #pizzalegendsPizza RPG Part 3: Overworld Maps #pizzalegends