I now have a written version of this tutorial if that's more your speed. You can find it here: codernunk.com/tutorials/sprite-sheet-from-3d/. Otherwise, I hope you enjoy the video!
If you are on a Windows system, you'll need to prefix the command with "magick" as it won't work the same way as it does on a Linux system. Instead, you'll be running the command like this: magick montage * -geometry 128x128 -tile 16x16 -background transparent -filter Catrom spritesheet.png Thank you for pointing this out in the comments!
Thank you for watching! Here's the final ImageMagick command I used, for reference: montage * -geometry 128x128 -tile 16x16 -background transparent -filter Catrom spritesheet.png
Ah, sorry about that. This was my second edited video, so yeah, I definitely didn't understand the best use of sound effects back then (still don't really, but I rarely so SFX in my videos anyway)
If you can use Blender's Render function (CTRL + F12) to render grease pencil, it'll work just fine. Render the animation with a similar configuration like I have here, and it'll generate .png files for each frame of the animation. Then you can use ImageMagick to compile the individual images into a sprite sheet. Hope this helps.
Nice video. I think if you wanted to push this even further, it might almost be worth writing a custom exporter for blender which would render all animations into sprite sheets for you. You can imagine how tedious it would be to re-render a ton of frames, either after adjusting a model, or an animation.
Thank you so much! Yeah, I realize having a solution directly in Blender would be better, but this was a way I could get it done without engineering something like a plugin. I appreciate the suggestion though!
Sadly, I would need to do more research on this, so it may be a while before I have a video tutorial on this. I'm guessing you could utilize Python scripting inside of Blender to do this, but I'm not sure if there's a limitation on stitching images. Worst case scenario, if Blender supports running external processes, you could write a plugin that turns this into a one-button process - export all the frames to a temp directory, then the Blender plugin will run the same ImageMagick command to generate the sprite sheet, so you don't have to leave Blender.
does the downsizing made by Imagemagick leaves the end image with weak or transparent pixels? how does it compare with photoshop/gimp's resizing functions?
From my experience, ImageMagick's downsizing gets the job done just fine. I think programs like Krita do a better job overall, but I also think it depends largely on how small you make your target image. I recommend playing around with the different options that ImageMagick has (rather than -Catrom per se) to see if you get results more to your liking. Hope this helps!
What is the alternative to image magick? Would this work? I could manually make my own sprite sheet? Could i simple take each image and place it on a file in gimp or ps or even paint and manually align them? Or do i need a program like magick?
ImageMagick is not required by any means, but it's the tool I was able to find that makes the process the most efficient. You can certainly use an existing image editing program to manually align the images after you generate them, but it will take quite a long time. I can understand if you're hesitant to use ImageMagick if you're on a work computer or don't like using the command line, but if you have the opportunity to use external software, there are sprite sheet compilers online that get the job done too, such as this one: codeshack.io/images-sprite-sheet-generator/. I'd have to do more research and see if tools like Gimp or Krita have a sprite sheet generator feature or plugin, but I do not know yet if they do.
oh nah i dont like it to generate it for me. Id like to manually make the sheet myself. More control. take times but ill feel better about myself @@codernunk
Are you using Windows? You'll have to install ImageMagick manually from the website, and when you run the command, prefix the command with "magick" and it should work. Let me know if you would like further assistance. Thanks for tuning in!
Quick question for you bruh. Everytime I render the frames, they png files are waaaay darker than they show in the viewport. Is there any solution to this? I see in your video your renders are identical to the viewport preview.
Sorry for the late reply. Glad you found something that works. I'm thinking that maybe the issue was that either you did not have a light in your scene, or your light was disabled for rendering (the camera icon next to the light object in the scene tree).
@@codernunk I have one more question, do you know how to fix imagemagick instantly closing as soon as I open it? not sure why but the command window blips on screen for a nano second but vanishes soon after.
@@juhadexcelsior Interesting question. It may be more dependent on the OS and the terminal you're using. Are you opening a terminal like I do in the tutorial the same way? Or are you running it from a script file?
Apologies for the late response. If your intention is to only make your 3D models into pixelated sprites, you can use Blender's compositor to manipulate your renders. A quick search leads me to this video, but you should be able to find similar tutorials if this doesn't meet your needs: th-cam.com/video/E320fF5EsX4/w-d-xo.html
This video's primary goal is to show others how you could use Blender as a way to make 2D sprites. Was this comment meant for another video, maybe my recent stream?
@@codernunk No, my friend, all your broadcasts are enjoyable to me, but when you explain, I can never keep up with you, so I called it a story. I hope you slow down the pace of explanation to keep up with newcomers in this field or that you are just looking for experts to explain to.
@@codernunk Another thing, I know that my comment did not affect you, but just so you know, I do not mean to diminish your efforts in your content, so do not take me personally, as I do not usually rely on constructive criticism. Thank you for your effort.
@@mimosaber3681 It's all good! I just didn't fully understand the context of the question, but now I do. I have received feedback about the speed of my content, and I have learned that slowing down the content is considerably more helpful when it comes to educational content. Thanks for your feedback!
May you please clarify what does not work? This is just the process of making a sprite sheet, which is pretty engine agnostic (meaning it should work with any game engine, including Godot 4). Maybe you meant to comment on a different video of mine? Thanks!
I'm looking for a software app, which can do vertical PNG sprites which is large format, example: 200 frames, 1000 px X 1000 px, and suggestions? I export my PNG sequence from After effects, and then need to make a sprite sheets. Thank you.
ImageMagick can do this - you have full flexibility in the number of tiles horizontally and vertically you want to have. However, I would advise against making sprites that are too tall because they're not as efficient on space, hard to see in editors, and I think there may even be a hard limit on how large images can be. In the case that your single frame image may be large, ie. 1000x1000px, it's best not to force that into a single sprite sheet. If at all possible, I would also recommend scaling down your images if you can (especially since having 200 of these can eat up disk space and memory), but I could understand that being difficult for preserving quality. It may be better in this case not to make a sprite sheet at all, and if you want to use the full quality images you can make a folder with all 200 of them, ordered, and then load them into your game (or animation) directly. Is there something besides ImageMagick that maybe you're looking for? I know there's some tools out there but I have not used too many other than ImageMagick. I'm also not sure I understood your question completely either, so let me know how I can help.
@@codernunk Hi, thanks for replying to my comment, I appreciate your information. Lately with user interface design, there's a trend to have the same graphic interface in 3 or 4 different resolutions, 1000px 2000px 3000px 4000 px, so they display correctly depending on the screen resolution. So just imagine a controller knob 200px X 200 px which rotates from left to right has an animation of 100 frames, or 200 frames. When you multiply the resolution X4 the same control knob would be 800px X 800px, (100 frames). The developers need these as PNG sprites, to include into their programming platform. This has to do mainly with vst audio design units a.k.a music audio plugins. So the demand for large PNG sprites is making me hunt for a reliable software. For now I use GlueIT a free open sourse sprite sheet generator, I recommended you check it out. I think its memory capacity can be expanded within the code, but Im not a developer, so I cannot be certain for this. But it can handle images up to 500 px X 500 px, 200 frames. Give it a try. Thank you.
I now have a written version of this tutorial if that's more your speed. You can find it here: codernunk.com/tutorials/sprite-sheet-from-3d/. Otherwise, I hope you enjoy the video!
If you are on a Windows system, you'll need to prefix the command with "magick" as it won't work the same way as it does on a Linux system.
Instead, you'll be running the command like this:
magick montage * -geometry 128x128 -tile 16x16 -background transparent -filter Catrom spritesheet.png
Thank you for pointing this out in the comments!
it's always a privilege to watch a master at work
The privilege is all mine :D
Want to know something funny? Not with blender, but this "pre render" method was used on Club Penguin Avatar models
Thank you for watching! Here's the final ImageMagick command I used, for reference:
montage * -geometry 128x128 -tile 16x16 -background transparent -filter Catrom spritesheet.png
Listening to this in the dark with headphones on and the sounds at 0:04 scared the crap out of me 😂
Ah, sorry about that. This was my second edited video, so yeah, I definitely didn't understand the best use of sound effects back then (still don't really, but I rarely so SFX in my videos anyway)
Thank you very much bro, excellent video. Explain clearly, simply and directly. Greetings from Mexico.
Perfect! This works so much easier than how I was doing it. Thanks!
No problem!
Straight to the point, thanks.
No problem!
Super helpful. Thanks!
Hello, do you think this this workflow would also works with Blender's Grease Pencil generated images?
If you can use Blender's Render function (CTRL + F12) to render grease pencil, it'll work just fine. Render the animation with a similar configuration like I have here, and it'll generate .png files for each frame of the animation. Then you can use ImageMagick to compile the individual images into a sprite sheet. Hope this helps.
hey buddy my xml file has everything commented out under policymap; do i uncomment it and then make cheanges or let it be? Thankyou in advance.
I believe you can just comment out the lines you need to change and it'll work fine. Make a backup just in case.
Nice video. I think if you wanted to push this even further, it might almost be worth writing a custom exporter for blender which would render all animations into sprite sheets for you. You can imagine how tedious it would be to re-render a ton of frames, either after adjusting a model, or an animation.
Thank you so much! Yeah, I realize having a solution directly in Blender would be better, but this was a way I could get it done without engineering something like a plugin. I appreciate the suggestion though!
How would one go about that? I am currently trying to do exactly that, it would save me hours of time!
Sadly, I would need to do more research on this, so it may be a while before I have a video tutorial on this. I'm guessing you could utilize Python scripting inside of Blender to do this, but I'm not sure if there's a limitation on stitching images. Worst case scenario, if Blender supports running external processes, you could write a plugin that turns this into a one-button process - export all the frames to a temp directory, then the Blender plugin will run the same ImageMagick command to generate the sprite sheet, so you don't have to leave Blender.
Excellent! 😍
Thank you!
dude! you rule! thank you!!!!!!
Well edited
Thank you! I'm working on getting better with each video!
Great video!
Thanks so much!
thanks so much!
thanks!
Thanks man!
Happy to help!
Is it the same for windows?
oh wait nvm i found a comment that helped, thanks!
No worries!
does the downsizing made by Imagemagick leaves the end image with weak or transparent pixels? how does it compare with photoshop/gimp's resizing functions?
From my experience, ImageMagick's downsizing gets the job done just fine. I think programs like Krita do a better job overall, but I also think it depends largely on how small you make your target image. I recommend playing around with the different options that ImageMagick has (rather than -Catrom per se) to see if you get results more to your liking. Hope this helps!
What is the alternative to image magick? Would this work? I could manually make my own sprite sheet? Could i simple take each image and place it on a file in gimp or ps or even paint and manually align them? Or do i need a program like magick?
ImageMagick is not required by any means, but it's the tool I was able to find that makes the process the most efficient. You can certainly use an existing image editing program to manually align the images after you generate them, but it will take quite a long time. I can understand if you're hesitant to use ImageMagick if you're on a work computer or don't like using the command line, but if you have the opportunity to use external software, there are sprite sheet compilers online that get the job done too, such as this one: codeshack.io/images-sprite-sheet-generator/. I'd have to do more research and see if tools like Gimp or Krita have a sprite sheet generator feature or plugin, but I do not know yet if they do.
oh nah i dont like it to generate it for me. Id like to manually make the sheet myself. More control. take times but ill feel better about myself
@@codernunk
Ok this is cool. Now I want to learn how to get this type of cartoony lighting and those sweet outlines going on.
Will you be teaching that too?
Thank you! I cover it briefly in my first video on how to make a sprite from a 3D model but I'm happy to cover it in more depth in the future.
The terminal I have isn't working for me. Is there a specific terminal you used in the video?
Are you using Windows? You'll have to install ImageMagick manually from the website, and when you run the command, prefix the command with "magick" and it should work. Let me know if you would like further assistance. Thanks for tuning in!
@@codernunk It worked. Thanks a lot.
Your video deserve more views thank you soo much❤
You're very welcome. This made me smile!
Quick question for you bruh. Everytime I render the frames, they png files are waaaay darker than they show in the viewport. Is there any solution to this? I see in your video your renders are identical to the viewport preview.
Figured out a workaround. Simply go to view and click render viewpoint animation
Sorry for the late reply. Glad you found something that works.
I'm thinking that maybe the issue was that either you did not have a light in your scene, or your light was disabled for rendering (the camera icon next to the light object in the scene tree).
@@codernunk I have one more question, do you know how to fix imagemagick instantly closing as soon as I open it? not sure why but the command window blips on screen for a nano second but vanishes soon after.
@@juhadexcelsior Interesting question. It may be more dependent on the OS and the terminal you're using. Are you opening a terminal like I do in the tutorial the same way? Or are you running it from a script file?
Now how can I pixelate hmm
Apologies for the late response. If your intention is to only make your 3D models into pixelated sprites, you can use Blender's compositor to manipulate your renders. A quick search leads me to this video, but you should be able to find similar tutorials if this doesn't meet your needs: th-cam.com/video/E320fF5EsX4/w-d-xo.html
@@codernunk Neat thanks!
are you giving a information or you are teling a story
This video's primary goal is to show others how you could use Blender as a way to make 2D sprites. Was this comment meant for another video, maybe my recent stream?
@@codernunk
No, my friend, all your broadcasts are enjoyable to me, but when you explain, I can never keep up with you, so I called it a story. I hope you slow down the pace of explanation to keep up with newcomers in this field or that you are just looking for experts to explain to.
@@codernunk Another thing, I know that my comment did not affect you, but just so you know, I do not mean to diminish your efforts in your content, so do not take me personally, as I do not usually rely on constructive criticism. Thank you for your effort.
@@mimosaber3681 It's all good! I just didn't fully understand the context of the question, but now I do. I have received feedback about the speed of my content, and I have learned that slowing down the content is considerably more helpful when it comes to educational content. Thanks for your feedback!
Mind adding a disclaimer that this will not work in godot 4.0? There's a different workflow and this will not work.
May you please clarify what does not work? This is just the process of making a sprite sheet, which is pretty engine agnostic (meaning it should work with any game engine, including Godot 4). Maybe you meant to comment on a different video of mine? Thanks!
This was not a tutorial but rather a demonstration.
I'm looking for a software app, which can do vertical PNG sprites which is large format, example: 200 frames, 1000 px X 1000 px, and suggestions?
I export my PNG sequence from After effects, and then need to make a sprite sheets. Thank you.
ImageMagick can do this - you have full flexibility in the number of tiles horizontally and vertically you want to have. However, I would advise against making sprites that are too tall because they're not as efficient on space, hard to see in editors, and I think there may even be a hard limit on how large images can be.
In the case that your single frame image may be large, ie. 1000x1000px, it's best not to force that into a single sprite sheet. If at all possible, I would also recommend scaling down your images if you can (especially since having 200 of these can eat up disk space and memory), but I could understand that being difficult for preserving quality. It may be better in this case not to make a sprite sheet at all, and if you want to use the full quality images you can make a folder with all 200 of them, ordered, and then load them into your game (or animation) directly.
Is there something besides ImageMagick that maybe you're looking for? I know there's some tools out there but I have not used too many other than ImageMagick. I'm also not sure I understood your question completely either, so let me know how I can help.
@@codernunk Hi, thanks for replying to my comment, I appreciate your information. Lately with user interface design, there's a trend to have the same graphic interface in 3 or 4 different resolutions, 1000px 2000px 3000px 4000 px, so they display correctly depending on the screen resolution.
So just imagine a controller knob 200px X 200 px which rotates from left to right has an animation of 100 frames, or 200 frames.
When you multiply the resolution X4 the same control knob would be 800px X 800px, (100 frames). The developers need these as PNG sprites, to include into their programming platform. This has to do mainly with vst audio design units a.k.a music audio plugins. So the demand for large PNG sprites is making me hunt for a reliable software.
For now I use GlueIT a free open sourse sprite sheet generator, I recommended you check it out. I think its memory capacity can be expanded within the code, but Im not a developer, so I cannot be certain for this. But it can handle images up to 500 px X 500 px, 200 frames.
Give it a try.
Thank you.