This is about;
- How i draw them
- How i scale them
- How do i make a history timelapse video
- How do i convert between file formats
The most tricky thing is to scale pixel art without losing the blockiness with nearest neighbour scaling aka preserve hard edges algorithm almost every tools prefers to fix the blockiness so i scale pixelart with imagemagick
- Install imagemagick
brew install imagemagick
- Install gifsicle
brew install gifsicle
- Install ffmpeg with x265 codec
brew unlink ffpmeg && brew install ffmpeg –with-x265- Because the regular ffmpeg that brew installs doesn't have the mp4 codec
- A Mac computer
- (you might be able to use the same steps on linux if you manage to install the tools)
- On windows idk, you are probably better off using photoshop or something to scale
- Internet
- go to jspaint.org
- image>attributes => set WxH to 64x64
- view>zoom>custom => 800x
- draw as you would
- save the 64x64 png
- I'll refer to this as
small.png
- I'll refer to this as
- extras>render history as gif
- I'll refer to this as
small.gif
- I'll refer to this as
- create a scaled up image
convert small.png -sample 1680x1680 large.png
- create a scaled up history gif
gifsicle --resize 1080x1080 --resize-method sample small.gif > large.gif
- convert large history gif to video
ffmpeg -i large.gif -pix_fmt yuv420p -r 60 -filter:v "setpts=0.15*PTS" large.mp4
Last command that converts gif to video does 2 things that you might want to adjust
- it speeds up the video because there's usually way too many frames, which result to a very long video
- omit this part
-r 60 -filter:v "setpts=0.15*PTS"if you don't want it - Change
0.15part in"setpts=0.15*PTS", the lower the number the faster it plays - but this setting drops frames to shorten the time to prevent this preceding command is required:
-r 60is the frames per second, this forces the short video has more frames (60 frames per second) than usual so it looks like a timelapse