Pixel Art Animation. Reinvented - Astortion Devlog

In this indie game devlog™, we're taking a look at a simple feature that allows us to easily change the appearance of our characters - without the need to recreate every animation.
=== Wishlist Astortion on Steam ===
store.steampow...
=== Support the channel ===
Patreon:
/ aarthificial
KZbin Memberships:
www.youtube.co...
=== Tools I'm using ===
JetBrains Rider
Unity
Adobe Audition, Photoshop
Motion Canvas
Davinci Resolve
=== Music from Epidemic Sound ===
www.epidemicso...
Trevor Kowalski - The Garden's Light:
• The Garden's Light (Pi...
Trevor Kowalski - Late Nights in Harmony:
• Late Nights in Harmony...
#MadeWithMotionCanvas

[@aarthificial]

*A more in-depth explanation with source code:* kzbin.info/www/bejne/pIrGmZKKftCkbNk *FAQ* 1) Isn't this just color palettes? Yes, color palettes, color indexing, LUTs, etc. As I've mentioned in the video - the idea of looking up colors is nothing new. This video focuses on using this idea to replicate the process of UV mapping used in 3D modeling. 2) Will it work for more complex sprites? IMO, this process is practical only for smaller canvases. In my case (24x24px), it takes me roughly 30 minutes to overlay the colors for one animation. You can, however, experiment with using it only for the parts of your character that need this level of control (for instance, the face) and reuse colors for the rest of the body - like in more classical palettes. 3) What about lighting/depth? I'm planning another video on this topic but notice that we have the entire blue channel to encode all sorts of lighting information. 4) Can I use this to change the shape of my character? Yes, you can use the alpha value from the lookup texture to hide specific parts for your character. But this may cause problems in places where things overlap. I'd stick with using multiple sprites stacked on top of each other that can be enabled/disabled.

[@ЭдуардСухарев-ш9ч]

30 minutes of human workhours or 30 minutes of some intensive CPU/GPU calculations? can't believe it the latter.

[@aarthificial]

@@ЭдуардСухарев-ш9ч The process of overlaying colors described in the video is manual. Sorry for the misunderstanding.

[@ЭдуардСухарев-ш9ч]

@@aarthificial oh, ok, so that pretty much depends on how fast one can switch between colors when mapping pixels, and that's initial investment in mapping, while any further "skin" updates are almost free, right?

[@aarthificial]

@@ЭдуардСухарев-ш9ч Exactly

[@saturatedodin476]

Why is she such a baddie?

[@darkhawk155]

As a programmer myself: The "technically complex sequence of workarounds to achieve a tiny outcome nobody is likely to ever notice" are some of the things I'm often most proud of.

[@frqstbite1001]

it always ends up being why we cant really show off our work to other people because "all i see is a character" yeah but what if i want them to wear different clothes? by the time you're done explaining theyre always like "wow im going to pretend to have understood that haha" :(

[@roblox_user0]

I feel you. Little things rarely get noticed and having it work is actually like a blessing.

[@Aquillyne]

It takes an amazing amount of work to create something utterly effortless and intuitive. And because it is so effortless and intuitive, it seems like nothing is there at all. And that is the goal!

[@frqstbite1001]

@@Aquillyne that is a fantastic way to put it

[@electron8262]

I think this is where I see the beauty in programming. These sorts of things make your program beautiful.

[@luke.rayman]

I'm just amazed by the animated girl. Just a few pixels but you clearly see everything. And she walks so naturally in just a few frames. So nice!

[@Carlo99yehey]

Pixelussy

[@Mercymurv]

100%

[@rogerwilco2]

Indeed. All parts are very well done.

[@kimjanek646]

I really love that kinds of pixel art. It’s so simple but still contains an incredible amount of detail while still leaving room for interpretation. Simply amazing. I feel like you can easily convert 90% of 3D game into pixel art like that and the resulting game would be just as enjoyable or even better.

[@RugbugRedfern]

It still impresses me how you bring so many genius innovations into your game dev. You're an inspiration as always! Can't wait to see the dynamic mud textures and the like in action.

[@bafi29]

Is one of the classic tricks on the book, Is called palette swap. That's how they gived new outfits to sprites like Megaman or Mario on the NES.

[@Temac000]

@@bafi29 color pallet was a limitation of the way NES created sprites. There weren’t 16 billions colors for any pixel, you could only use set up to 4 different (with some limitations again) colors from a pallet of 32 colors. This, however, creates dynamic and unique color map for every (or only main character for now) sprite with correct uv’s

[@bafi29]

@@Temac000 The concept at the core is the same, a palette is just a very small LUT. Your argument sounds more like saying that because we have access to a sextillion colors the moder pixel art should be declared as a enterily different beast from the limited 8 bit palettes, event if in the end both are just putting pixels on a deliverated manner on screen.

[@Aurora_Animates]

Mhm! :D

[@satibel]

@@Temac000 this is basically a 16 bit pallette, but shaped as a uv map. Having a palette is great for file size of 2d images, most image compression formats still use it in some form or another (usually subdivided in parts with a set palette and deviation from it)

[@TheBlackBrickStudios]

This is an absolutely insane game changer for streamlining asset generation. I can't begin to express how valuable of a tool this will be in my own work. You, sir, are a legend.

[@anothergol]

But is it? To me it's exactly the same as a palette. Only with a 16bit index instead of the usual 8 bit. In fact, it could as well be 8bit, as there's probably no more than 256 "parts" in the skin. The only thing that's "new" is the visualization of the palette as a model, to make it easier to update. But at the end of the day, it's a palette. It doesn't allow (unlike a 3D model) adding elements to the model, only recolor.

[@commenteroftruth9790]

@@anothergol I think its mostly people who arent good at this kind of stuff who are impressed lol. i mean, its a good tool, but it isnt new, its interesting, but people are responding like it's a game changer.

[@erkling5865]

@@commenteroftruth9790 it has a potential, if a skilled programmer puts his mind to it. the way i see it, he just made a potential pixelart app that utilizes 3d rendering (at least mapping out the 3d shape) straight up in pixelart 2d. not having to render a 3d animation and pixelate it. if he can also find a way to use blender's weight painting, then, that's where his joints are, and also with weight painting, he can be able to change the shape of the texture for shadows and highlights

[@frqstbite1001]

@@anothergol changing the color of a palette cant add a wristband to my character unless i add a whole new *slightly different* color where i want it to be, which is ridiculous

[@AxoiTanner]

@@frqstbite1001 it can - this map is literally pallete - where each pixel of map is separate index that be colored and associated with where is should be in final animation. However visualizing this in this way, like texture, not just list of colours is genius.

[@zio]

This is stunning... I am just amazed how good can a simple devlog be. Great work!

[@Polon_8]

nie spodziewałem się cie tutaj

[@HrabiaKefir]

jooł siema zio

[@missterymoon]

its crazy how they never wanna support you until its to late.. all it take is right person to hear me give my music a chance i promise you wont be disappointed

[@Chris_t0]

its not good go away@@missterymoon

[@Nimphious]

This conceptual combination of LUT and unwrapped model texturing for 2D art is one of those things that is so simple and obvious in hindsight but coming up with it in the first place is a stroke of genius. The only piece of the puzzle that's left really is to come up with some kind of animation authoring tool or workflow improvement, but I can't think of anything significantly better than your map texture solution. Thanks for yet another great video Jacob. I'm definitely going to use this myself.

[@aarthificial]

Thank you too!

[@Ami-Wishes]

Some sort of realtime editor that allows you to sample something from an example lookup, and paint onto that, would be the next step, I think. Something akin to a traditional palette system. You select the pixel you want to use, then paint it. Especially if you gave it the ability to highlight which pixels in an animation use a given pixel(s) from the final lookup, double props for if that would work while animated.

[@grimfang4]

Exactly what I'm thinking. I wrote a pixel editor (Pixel Proof) based on experimental workflows, so maybe this should be included?

[@decb.7959]

For authoring, you could imagine something where you uv map one frame, and then point to where each pixel ends up in subsequent frames. That way, once the first frame is uv mapped, you can do most of the remaining work with a final texture. You would still have to uv map any newly-visible pixels, though. You could even generate a motion vector pass with this, although I'm not sure what you would use it for.

[@satibel]

I think you put the 4 in a square grid position animation, render, temp uv map, color uv map. And make it so that you can sample from either to paint on either Maybe also add a mode with only the animation and uv map and allow swapping between them. Or even better allow an arbitrary number of textures to be swapped between.

[@aarthificial]

Sorry for the long break, everyone I had to work on my thesis and stuff. But I've finally graduated, so now we're back to regular devlogging!

[@vystaz]

this makes me very happy

[@alexanderosinubi5154]

congrats!

[@_LordLux_]

Congratss!! and welcome back^^

[@CampoObligatorio]

Oleeee

[@EshanTahir]

Congratulations!! What degree did you get?

[@dealloc]

Reminds me a bit of color cycling mainly used in early computer games, where a palette is shifted to produce the impression of animation for a single image to use less memory and processor power than having individual animation frames. This feels like a modern take on it, using a similar approach for a different purpose. Dig it!

[@nialltracey2599]

Yes, that was my first thought too -- why wasn't the device just another "colour" that was palette swapped same/different as skin? This technique is clearly more powerful, allowing much more radical reskinning, but I wonder if there's a middle ground that makes the workflow as powerful, but just a little more intuitive...?

[@dealloc]

​@@nialltracey2599 I don't think the tradeoffs are worth it. Indexed colors are only really necessary where memory and file storage is scarce, i.e. in embedded systems. It would be much more limiting, especially for things like generative textures, as shown in the video and the workflow would also likely be much more cumbersome to having to deal with palettes, rather than full RGBA. But I do like the idea of using indexed colors for re-skinning when you have more static textures.

[@goge957]

@@dealloc the uv is the index, its fundamentally the same, there is no limitation in colour spectrum only in address. this is old tech come new again for an audience who did not know of the origins and so would never even know to look for palette swapping. this is exactly the usecase palette swapping solved in the "old days" (mario and luigi), palette swap animation was a novel and clever solution to animation on limited hardware.

[@endlesswanderer1753]

Now I'm imagining JRPGs where Army Ant and Fire Ant aren't just palette swapped entities, but almost uniquely different in their appearance. A dev could use transparent pixels to "change" the shape of the original sprite and make it seem wholly different.

[@nialltracey2599]

@@dealloc indexed colours mean only having to change one value instead of many. The approach taken here is powerful and flexible, but that means making every choice every time. If you want to change trouser colour, you have to repaint all trouser pixels. If someone only wants to change colour in blocks, there are quicker ways. And we’re still only reskinning here - this technique doesn’t get us closer to more radical outfit swaps that change the ‘s shape. I like it, it’s a very neat solution to this programmer’s problems, but it’s quite a specific workflow aimed at his own style. There will be other workflows that might be more generalisable.

[@frqstbite1001]

years and years of developer + pixel artist experience under my belt and im still finding seriously innovative and high quality content like this that changes my whole perspective stay on the grind !! love seeing it all come together

[@AbsolutelyPlasmadic]

You have single handedly inspired a huge wave of pixel art from my end. I appreciate all the work you have poured into this. The dedication, the passion, the fire inside to create unabated. Its all so obvious in your creation, the care that goes into it. It has *ALL* inspired me. Down to the last drop of determination to assure every ounce of precision in your image is astoundingly crisp and appealing. I absolutely adore it. Here's to the hours I have and will spend, hoping to accomplish that same task you have! Here's to the thousands of souls you have touched, to them I wish the same fire will burn inside you all! And finally: Here's to you Aarthificial, for being you. Because nobody else could do that. :)

[@zoekmath]

if only this idea worked on actual pixel art sprites and not a stick figure, plus if you were to have rotation on the character the lighting would rotate with it so its pretty much useless

[@yytyyy5329]

Chill, it's not that serious

[@rhedgeco]

Just wow. I've been following you for a while, and don't comment often on anything. But I am constantly astounded at these little breakthroughs by taking some common idea and using it in a novel way. Really well done. Keep it up.

[@aarthificial]

Thank you, it means a lot!

[@jaysonbunnell8097]

I'm a Computer Engineering major, and although I'm super excited to play your game, the most exciting part for me of your devlogs are the tools you used ot create it. I love designing (and implementing!!) utilities, and seeing such fun innovation is really inspiring for me. Keep doing what you're doing! Glad you've finished up your thesis, and can get back to the regular logs. Peace and love from over here!

[@joukeseinstra1127]

As a 2D artist seeing a rotation of a portrait in pixel-art is beyond impressive. To reduce a concept to such simple terms without sacrificing communication. It appears becaus of that, pixel art itself can be a tool to understand simplification on an educational level. Having put this into perspective along traditional interpretations of realism, pixel art is without question an important art movement of our time I find. To say so much with so little with such concise clarity is truly awe-inspiring.

[@Kennedy00Louis]

Devlog 1: Ripping off every valve game in name of boredom "I want to make a small game I can finish" Present day: reinvents pixel art animation, solves olds problems in retro and modern pixel art, has dynamic dialogue systems with implicit choices. Dude, you went from 0 to a 100, from "I want to make a game" to being the one who inspires people to make theirs and teach them, I can't think of any better achievement. Of all the devlogs in KZbin, yours are my favorite and the most inspiring. Mad respect to you.

[@Nikowo1610]

NIKO

[@Bokita_Enjoyer]

Niko

[@isodoubIet]

These problems are old but so are the solutions. I recommend Coding Secrets' video on the Sonic 3 special stages. Very similar techniques were used there to solve essentially the same problem except with a slightly different (but related) motivation.

[@nithishwarai5998]

Animation was always traditional for me, even though I knew oops and use them to code regularly ,using these concepts in animation you have opened me to a new world >_

[@casualdutchman]

This is just a refreshing take on pixel art. It probably isn't something new and other games use it as well but this is the first time I see it. Very nicely done! I am jealous!

[@mogaming163]

@@SkeleTonHammer same but for me it’s UI/frontend interactions, everything else I have a hat for

[@FeroxOccisor]

This man is just casually making entire revolutions in game development and rendering. Excellent work as usual, dude.

[@josephhelms2362]

As someone who has struggled to make a good walking animation in a character that is about 20x50 pixels, I am very impressed by that walking animation with a very small number of pixels.

[@Otakutaru]

Even if Astortion doesn't get to release as a game, It will undoubtly be one of the best documented game design demos

[@billedefoudre]

Dear journal, it's only 8 AM, and yet my mind has been blown beyond expectation. How could something be so simple, elegant, and yet so powerful and full of possibilities ? I'm in awe.

[@erikahlundhelguera]

Really nice implementation of LUT, never thought about doing something like this. The only thing that confuses me is the general workflow... It'd be great to see a time-lapse of you working on a simple walking animation using this Intermediate LUT (map) system. Do you first draw the full animation in "normal" colors and then change the colors to use the ones in the map? Do you work directly using those colors? Seems like a pretty cumbersome way of drawing 2d animations (although the result is great and I especially like the flexibility you can achieve with this) Anyways, would love to see a time-lapse or, even better, a long video of you making a simple walk cycle animation :)

[@aarthificial]

Thanks! I'd like to try live streams at some point and this sounds like a cool idea for the first stream 🤔 To answer the question - I animate with normal colors and then overlay the map on top of it.

[@erikahlundhelguera]

@@aarthificial I'd definitely watch that! And I'm sure others are interested in this too :)

[@alexanderosinubi5154]

@@erikahlundhelguera me too!

[@bilalinci4981]

@@erikahlundhelguera me too

[@carlosandres8041]

@@erikahlundhelguera me too!

[@capsey_]

This man keeps surprising me with every video. He literally made a rig pixel art animation!! I'm wondering is it possible to make a Aseprite add-on to make mapping colors easier 🤔 like previewing the LUT while painting with index colors

[@aarthificial]

I was wondering the same thing! I haven't checked yet but that would be super useful

[@carlosandres8041]

at first glance this might look similar as doing a pixel art normal map, just that this time it would only use RG instead of RGB, seems like it would be pretty useful

[@RavensKrag]

@@aarthificial This seems similar to the technique "HD Index Painting in Photoshop" by Dan Fessler. In that video, he explains how you can use the eyedropper tool to pick from indexed colors, while displaying the final colors on the canvas, using gradient maps. Maybe you could adapt elements of that?

[@ilonachan]

@@RavensKrag I honestly don't think these two things are related at all. HD Index paint is about freehand drawing in a discrete color space with dithering, while this is essentially UV mapping for pixelart

[@RavensKrag]

​@@ilonachan I understand your confusion. Maybe I should say this a different way: It might not be necessary to switch to Aesprite to automate the color mapping. It should be possible to implement this in Photoshop using gradient maps. You are correct that the two techniques are very different in their outcomes, but they could use similar technologies. The key idea of Fessler's technique is that you can draw in one color space and display in a different one. As you said, in his particular case he colors in black and white and displays colored dither patterns. At 3:24 aarthificial explains (and clarifies in another comment thread) that he draws in "normal" colors and manually converts to the LUT colors (what the video calls the map colors). Instead, you could use Fessler's gradient map technique to color using the LUT while automatically displaying the "normal" colors. The OP of this thread suggests writing a custom Aesprite add-on to automate this - but Fessler already figured it out, without writing any new code :D Hope that clears things up a bit.

[@Csumbi]

this is amazing, im blown away by the stretching animation in the beginning, despite how low res the character is it manages to convey so much personality and intent, i understood instantly what she was doing, it really blows my mind.

[@psy667]

That was really interesting to watch, thanks so much for sharing!

[@TeeArCreep]

That's truly a clever way to go about it. It truly reminds me of how color palettes in older games work, and how they were often swapped around for various, clever usages.

[@MsMacintosh]

This person somehow makes coding more interesting than nearly a good third of the stuff on youtube. I love this game so far, and want to learn more behind the scenes already! Keep up the great work!

[@neonelll]

Dude, your sense of style, design, and animation flow is top-notch. I believe it's the character appeal that makes this tutorial so attractive. Really well done.

[@pafnutiytheartist]

Reinvented is a good word for it. This is a more flexible evolution of pallet swapping used in retro games. Good concept

[@TwinechoesEntertainment]

don't mean to be a naysayer but I don't see what it adds that pallet swapping doesn't already achieve

[@darkengine5931]

​@@TwinechoesEntertainment Palette swapping doesn't lend itself well to easy manipulation to do things like, say, add a tattoo to a character's arm or make one of their eyes blink because it's 1-dimensional. Indexed image formats that use more than 8-bits per pixel also aren't standardized, and you'll quickly need more than 256 colors to achieve this flexibility because every single individual pixel of the sprite will potentially map to a unique texture coordinate (a 32x32 sprite would already require up to 1024 colors). The reason 3D models use 2D texture coordinates even though they require a bit more computation than 1D coordinates (as in the case of indexed color) is first because the 2D texture image is easy to read and manipulate in any image editor. Another is that, because the texture image is 2-dimensional, we can do more sophisticated sampling than a simple indexed lookup. We can do nearest neighbor, bilinear sampling, bicubic, etc. You can also use different texture resolutions for the same model/sprite, like even later replace the texture assets in the game from 64x64 texture images to 256x256 as hardware gets more advanced for more detailed textures. There's just so much more flexibility for both artists and programmers alike using 2D texture coordinates as opposed to 1D color indices. You can also combine this with palette swapping (very practically and with possible hardware support if the texture image only uses 256 or fewer colors), but you'd do the palette swapping on the texels, not the texture coordinates.

[@TheStickofWar]

​@@TwinechoesEntertainment the main benefit is the real time ability to modify select parts of the texture. You can think of it is as a really dumb shader.

[@saturnine.]

Wow. This is too easy. I’m amazed this isn’t more widespread. Thanks for making this video!

[@ran_b]

This is awesome. I will definitely try to incorporate something like that in the future. Animating like that is definitely worth it for main characters at the very least.

[@lanik8163]

I was working on something similar. I'm soo glad to find a MUCH more developed version of it! Your work flow is absolutely brilliant!

[@GoodOldQuestion]

When you are watching any aarthificial video it's always feels clever and genius. Everything in videos feels like the best way to design/do something (and it even might be not the best, but it feels like it unless you know a better solution). Awesome! Also congrats on graduation

[@aarthificial]

Thanks so much!

[@nix3l_]

I love how you always find a more efficient way of doing things - good luck! cant wait to play it!

[@EuphoricPentagram]

This is amazing it's like a color palette swap but with more control and customizability Definitely something I wanna try using

[@theodoric7335]

I'm so fucking jealous of these mad pixel art skills. HOW, HOWW

[@C_Corpze]

Basically UV mapping but for sprites? Why did I never think of this earlier? This is absolutely genius. I’m mind blown by this.

[@macha-leaf]

a lot of cohesive, finely crafted and well thought out ' things that no one will notice' are the pieces that make up a masterpiece

[@godofthecripples1237]

Man, this opens up the door to proper character customisation in games with pixel art styles, without limiting characters to very simplistic animation

[@music389xd4]

I really like the way you designed the animations. Looks cool.

[@iamlogdog]

I'm not exaggerating when I say that this is one of my favorite channels. It is everything I ever wanted - very educational, has insane quality, relaxing music and narrator, beautiful visualizations, and amazing ingenuity. I get excited every time I get a notification. Thank you for creating these videos! I've been meaning to ask you for a while now, how do you make these insanely clean animations for your videos? Is it all inside of Unity or are you using DaVinci Resolve or some other tool for it?

[@aarthificial]

Thanks so much! I used to use After Effects for all the motion graphics stuff but during my break I created my own tool for animations. It's similar to 3Blue1Brown's Manim but uses typescript instead of python. This devlog was made exclusively using it. I'll probably make a video about it soon because I find it really exciting.

[@iamlogdog]

@@aarthificial Given how much you love inventing your own systems, I'm not surprised :D I'm looking forward to seeing the video about it and potentially even using it someday (if you decide to release it to the public)!

[@tomasroch4905]

I just wanted to point out that this whole video from animations to explanation is incredibly well done. And I also really like the fact that you made it less than 5 minutes. Most of the time I really don't have time to watch longer videos. It even motivated me to make pixel art animated characters on my own! I wish you good luck man and hope you will make more of this great content ^^

[@Chronomatrix]

This is genius! Please show us the whole process, a 101 tutorial for dummies, pleeease.

[@kayagorzan]

Yes please

[@tenorio9671]

Yes pls

[@KrayGan]

Yeah!

[@DayzeXzxR]

to

[@willem1703]

I could not have expected this! I saw the mesh-like texture in the thumb and immediately thought it genius.

[@littlebigb5370]

Using a 3D method on 2D animation that can create realistic 3D space without ever using 3D models is blowing my mind out of my skull. It looks so good!

[@tokubutnotreally]

Every video you make is such a pleasure to watch. From the editing to the explanations, to the actual things you create, it's such a pleasure to see your journey with this game and your thought process. Thank you ^-^

[@aarthificial]

Thank you too!!

[@xAqult]

This is incredible!! I never knew this was even possible! I'm for sure going to use this, and it's going to save so much time!

[@JetBalrog]

I've been wanting to get into making games for a long, long time, and this video straight-up does wonders for figuring out a process to get started, holy crap. Also game me some insight into what the heck *shaders* actually are and do, at least... loosely. I know they can be super complex, but like... I always wondered how "a thing that shades" could be used to do all kinds of nonsense, and now I have a starting point to understand it. It's no longer horribly intimidating.

[@trash-heap3989]

I adore creative design architecture like this which lets you solve problems in elegant ways never thought of before, saving so much trouble for everyone!

[@doktorphlog2143]

This is beautiful. Genuinely, truly, and elegantly beautiful. Never have I seen a dev go this far to create a solution with so many uses, such depth, and such a creative idea to solve several issues with an entire style of animation for a videogame. Not since Quake 2's damage meshes has such a design evolution in game graphics been made thats not just "make 'x' look more realistic". The dynamic changing of the system is awesome, and layers could be added to make it so that cosmetics that change the characters silhouette different as well, and make those customizable or distressable too.

[@ShenDoodles]

You’re a legend for not only coming up with this but also telling us how you did it. As an indie dev in training, this is gonna be so useful for when I need to make crowds.

[@DavizaoDestruidorDeFhannyCopia]

0:01 this guy predicted cammy stretching

[@im2tired2sleep]

i’ve always wanted to make a retro game, just for fun, this a brilliant way to make the process less tedious and extra, if you’ve got more videos like this im here to stay 👍🏼

[@aequinoctiale]

Glad this popped up in my recommended again, I was thinking just last week about how cool this was and how I wanted to look for this video again

[@congobongoproductions5476]

Just got casually got recommended this video and decided to binge all of the Astortion Devlogs (+ extras). Can't believe you started thanking 150 subs and now you're at +60k I've been blown away by the sheer scale of your progression, your brilliance in terms of coming up with so many game making breakthroughs AND condensing your findings into such compact, top quality edited videos. You truly deserve all of the support and love you can get I will continue to humbly follow this series, even tho so many programming things just escape my comprehension (really, to me it's all black magic), but I always find it extremely enjoyable to be so dumbfounded; even continuously Much love from another rando in the Internet 💜

[@eboatwright_]

That's amazing! My (very primitive) solution to things like this, was just to have a base texture (like a player without any clothes) and then have each clothes piece overlayed ontop of the character at run-time. So that I could have different shirts, and things like that :)

[@SkeleTonHammer]

I've done this as well. The real issue comes in when you need to add a new animation, suddenly you now need to go back and add hundreds of new frames for each clothing variant. It's a nightmare.

[@eboatwright_]

@@SkeleTonHammer Yeah. The solution Aarthificial came up with is amazing

[@robertlupa8273]

This ia complete wizardry to me, but that doesn't stop me from loving it. Also 0:40 that's a cute girl :3

[@TylerBaraby]

This technique really knocks over a lot of the barriers that have been keeping me from branching out into pixel art and spritesheet animation in general. Very interesting! Cant wait to try it out.

[@stomyn]

I now want to get back into game design and programming just so I can explore stuff like this. It is ridiculous how cool this is!

[@perjuniper6556]

I am mindblown by this innovation! What a wonderful way to liven up pixel sprites without using a ton of time and space on animation frames!

[@zeldaandTwink]

i would love a step by step tutorial. this is amazing but im having trouble wrapping my mind around how it works. In my head, the model is 3D, like a mincraft texture. You tell it how to fold, ect. and then place the character in the world, and the camera looks at the 3d model, and repositions the pixels to appear flat, 2D But its that last step im stumpped on

[@pallingtontheshrike6374]

Some adaptation of raycast???

[@mushnoodle]

people who arent too familiar with 3d modelling indepth: a computer isnt autonomous enough to understand the concept of a "surface" without clear mathematical instructions/some continuity. what you see on a screen isnt an actual 3d object but something that visually mimics being 3d via screen coordinates as if it were on a reallife XYZ axis. The mental step you might be missing: the texture of a 3d model is anchored to something additional called "UV-map". its actually the uv map that is the vaguely unrolled skin of a model. if the point on the uv map gets the command "be in that location on the screen" or "dont show up" the pixels of the texture, no matter what it is, that has been placed on top of that uv map will follow that command as well. you can move the texture around how you want as long as the uv map remains unchanged. (the actual reason we need to do it this way is reducing deformation of a texture but thats not much of an issue with minecraft models and 2d so dont worry about that) uh sorry if you're more confused now xD

[@mushnoodle]

another aspect you need to think about while a computer makes animation display decisions based on mathematics and predictions, artists make them based on aesthetics (uh aka kinda chaotic). an "uv map" for a 2d character is based on what an artist needs so usually just a "partial" unwrap. (i'll write it like that for the sake of imagining it...) we will not really go though the effort of making something that isnt going to show up in an animation anyway like idk in his case worrying about the bottom of her shoes or whatever lol

[@canberk4786]

From what I understand, This coding uses coordinates. The color values on each dot on the source animation are used as coordinates. These numbers are taken and searched on lookup. Then the color of that part is changed with the lookup pixel and goes to output.

[@agentstache135]

In simple terms the animator makes a paint by numbers for each pose the character might be in, and the thing that looks like a minecraft skin is the key that tells you what color to paint each number. The way it’s layed out is just to make it easier for a human to know what number corresponds to what body part so if they want to change the color of that body part they can just decide to tell the computer “hey actually when you see number 12 I want you to paint those areas brown”

[@jno7]

That is crazy! My Idea for this would've been to use different colorpaletts, like it was the standard back on retro consoles, or have Multiple Sprites on top of each other that together form a whole character and this right here is basically those ideas, but developed 100 steps further.

[@keyreset]

2:30 yall can think of this like Minecraft skins if it’s easier.

[@gamer-rs7lz]

I already was bro 😂

[@NoisyboyMax]

This is a really smart way of incorporating a method only normally done with 3D models to pixel art. Bravo!

[@AllAfterTheFact]

I've been thinking around a similar solution but couldn't quite get the ideas in order. Thank you for laying it out so clearly - this is great!

[@Nizart]

I though about doing this in a 2d game to make an easy custom character editor. But i quickly realized that it would be way too much work for me to get a good workflow of making animations with LUT-textures. If you decide to go through with this I will take my hat of to you (do you say that in English?). It's astonishing how much work you put in this project, but it will be all the better for the final product. Also congrats on graduating.

[@aarthificial]

Thanks so much! In my case, it takes roughly half an hour to convert one animation clip (~8 frames) but I use really low resolution so that's definitely making it easier

[@liamkennedy8768]

The generally accepted phrasing is "hats off to you" but your meaning is coming across well.

[@liamkennedy8768]

@championchap I have never heard someone say "I take my hat off to you" but that could just be the fact that I'm only 20ish

[@jaxontrainor4269]

I don’t have my lights on, and the transition at 3:20 made me freak out thinking i dropped my phone

[@piousthepious]

Heavily thinking about this more raises some concerns: - The workflow, it sounds like it could be a hassle to start something like this. Lots of things need to be figured out like the actual application of translating every pixel to a UV, or even starting the actual animation itself and being conscious of what you can or can’t do knowing you’ll have to translate it to a UV -In that vain, complexity of the sprite. There’s lots of places where I can’t imagine it’ll be easy to do this due to larger sprites creatively using shading and color values to create contrast or depth. Or even just a change in perspective can already complicate things. Isometric characters that have two different directions with a single source of shading, am I to map out shaded pixels and then shift the shaded pixels as I move the character? Or recolor pixels as I just turn?

[@aarthificial]

I'm not sure what you mean by "actual application of translating every pixel to a UV" but I definitely agree that this would be a nightmare with higher resolutions. In general, this is not a works for all solution I'm afraid

[@piousthepious]

@@aarthificial Hm this is hard to explain. Like after having an existing sprite, I can’t quite imagine how I’ll want to plan out ascribing a place in the UV map for each part of the sprite. Lets say I have an arm right. there’s lighting that gives it depth for some sense of muscularity, but as it animates it’s not always going to have that different shade on the same place of the arm. I’ll have to be conscious about how I’ll make it shift in lighting since it’s not always going to be uniform. I was thinking I’d have to make two “kinds” of arms, lighting and unlit, so now I have to be conscious of where the part of the sprite will take from the texture. I may be thinking about this wrong though

[@piousthepious]

@@aarthificial But this is an amazing idea even if it has an initial limitation. I feel like this has such huge potential as a way of animating sprites

[@hstubbs3]

@@piousthepious What if you combined this technique with an overlay image for each animation frame that was just the shading? Then the colors could change dynamically but the shifts in lighting used to represent the underlying shapes would stay intact... kinda like how NTSC broadcast Chroma and Luma separately...

[@hstubbs3]

@@aarthificial higher resolutions would end up being gradients... something like the "Geometry Images" of ianfeng Gu, Steven Gortler, Hugues Hoppe. ACM Trans. Graphics (SIGGRAPH), 21(3), 2002.

[@multiplysixbynine]

That’s a pretty clever way to encode a palette in a form that is geometrically representative of how each color is applied to the model. It’s still a lookup table but it’s projected in two dimensions in a way that seems like it could be more intuitive to an artist. Nice.

[@darkengine5931]

It's one of the ultimate reasons we use 2D texture maps rather than a 1D LUT in 3D. It makes it easy for artists to easily read and manipulate the texture image in any image editor of their choice. It's not the only reason though: there are many others. For example, with 2D texture map, unlike a 1D texture or palette, you can do sampling on the texels (ex: nearest neighbor, bilinear, bicubic, etc). It's also resolution-independent if the UV texture coordinates are normalized as fixed point in the range of [0, 1].

[@mechamogus]

I logged into KZbin just to drop a like in this video. This is so cool. It actually blew my mind. It gave me a burst of inspiration that cannot possibly be overstated. It somehow left me in awe. I'm definitely going to remember this idea forward, there is just no way I can forget it really. Thank you so much!

[@helbeglin]

I'm learning how to create 2D animations, and wanted to avoid the exact situation this video solves. I love the idea of using 3D maps for 2D animations, thank you for the video!

[@semproser19]

Doesn't this process mean you'd need to use a select a unique pixel for every single pixel in your frame? Wouldn't that make drawing really cumbersome, because you have to first find and select each colour mapping coordinate pixel before you can paint each one?

[@Niuskayz]

Probably yes, he still has to draw whole new sheet if he wants to make new animation. But method he uses lets him recolor parts of the animation without changing every single frame. But I see a flaw to this. If you want to make an animation where your character changes color or makes some explosion type shenanigans he would still need to make each frame different. For example if character pulls out sword and the sword shines and does explosion, you still have to animate each frame because if you use the method in the video you would have to make the shine and explosion as a separate object.

[@sluchaynayakotya1386]

you are right, he did not show how he draw the character. if he will explain that, everyone will see how overcomplicated it is, especially for sprites bigger that 16x8. using 3d render and painting over it with hand is much more easier

[@NoahHornberger]

you can easily make a script that generates the map from an animation. Then you use that map to make modifications to the animation colors.

[@KonamiCode]

That's why it's a low res stick figure. You couldn't do this with something as complicated as a capcom arcade sprite without driving your artist to madness.

[@orbyfied]

@@sluchaynayakotya1386 I imagine it's quite easy, just a little tedious to look up each pixel on the map. But I would be willing to make that trade off for dynamic, runtime-generated appereance changes without having to redraw every single frame manually for each change, which would be a million times more tedious.

[@batguy39]

*That's a baddie.*

[@effeKtSVK]

Okay, you just absolutely blew my mind with this, I admire game dev so much because you need to have both creativity and logical thinking. I'm a mobile app dev and I have mostly logical thinking so I love to watch videos like this to learn stuff.

[@clintmilner2365]

Wow! In hindsight, it seems so obvious, but we keep on thinking on things the same old way out of habit. This is a geniusly clever approach to 2D/pixel sprite animation!

[@SimonBuchanNz]

This seems like a more complex sprite palette system - and there are plenty of dedicated editors for that. Maybe useful, but I feel like it's probably overkill unless you really are going to use the UV map functionality.

[@togz813]

Maybe he could use it for dynamic lighting on pixelart?

[@SimonBuchanNz]

@@togz813 you could do that, but that's a map of normals, which changes every animation frame so better done on the frame itself, and material properties, which is probably simplest to tie to the palette entry: eg this upper body area uses entry 4, which is (white and matte cotton) or (tan and glossy leather) The main reason you'd do this 2d UV map approach is that you don't have to decide how to split up the palette ahead of time; eg you can after the fact decide that this entry should have a different color collar, or add a design to the shirt, etc. - it's not a bad idea, it just might be overkill depending on what you're doing, and it means you can't use existing sprite tools.

[@cubicledemon2544]

Exactly, I was expecting that comment to be the most voted one. The UV-approach might look innovative, but that's just a random application of 90's tech to a colour palette from 80's which does not make a lot of sense on the second thought.

[@CSGhostAnimation]

KZbin: [finally recommends something good instead of the usual music video celebrity garbage] Me: Finally a good fucking youtuber

[@Velossitee]

Very nice shortcut. I wouldn't have thought of this so easily. Thank you for the tip!

[@milkywayish9315]

This is cool! it inspires me a lot more then I thought, I love you guys so much for sharing this!

[@anthony_wijaya]

Hi! Have watched most of your devlogs since a while back, super inspiring to see you solving traditional problems in a more modern and thoughtful way. First time commenting since the issue is very relevant to the game I'm making: which is to animate a character while having the requirement of changing their outfit. I have resorted to the simpler solution of redrawing everything as you have said (which comes with its own obvious complications), since I couldn't think of a better way. Do you think a similar system will work if, say, you want to add another piece of garment to the character's outfit? A cape, for example, which is something that adds to the total amount of texture instead of just replacing colors.

[@gaweringo]

You would most likely have to animate everything with the cape and then to remove it make those pixels in the LUT transparent. But there might be a problem with things that would have been hidden by the cape.

[@Throckmorpheus]

You could always mix methods, using the LUTs for everything that's shared and then creating distinct sprites for additions like capes that would otherwise hide things behind them? If you needed to control the outfit even further, you could even use the LUT method for each of those sprite layers.

[@aarthificial]

I agree with all of the above. I'd go LUTs for colors - layered sprites for optional parts

[@roshibomb4247]

Another idea as well (coming from someone who's never done pixel art before, so take it with a grain of salt), if you plan to have a lot of different capes but not always use a cape, you could possibly have a section on the sprite always reserved for the ability to add a cape, but keep it transparent when it's not being worn. That way, you keep the ability to add a cape but not necessarily the fact that you're forced to use it, and you get to also keep the customizability of it. You could do even possibly some similar things with hats and whatnot, as long as you don't plan to have any other garment that would go there that would need to be animated differently from the one you're adding it for, I believe? Dunno, I'm not 100% clear on the process but from my limited understanding of the topic this seems like a viable solution.

[@andrewhamel1]

Was the "hoodie girl" at 0:45 your asset? If not would love to know where it's from

[@aarthificial]

Yes, I initially made it in Blender as a form of practice and ended up using it in the video.

[@Spubbily01]

2:53 I read the text on the bottom left, why not? That would be easy to do and I would absolutely love it. I love when games let you directly change the sprite of your character like Minecraft skins, and it's such a rarity nowadays.

[@lemonlupinreuben5362]

That's such a simple yet amazing answer to that kind of problem! Amazing!

[@LucyTheBox]

Ever since this video has been released, I end up finding myself back here about every 3 months. It's such a cool solution and whenever I run into a problem with animating something that can have multiple pixel textures, I come back to this video for reference. I've never been able to actually use the content of the video, but I hold out hope that, one day, I will.

[@TheDrunkenPL]

1:26 and here’s when I stopped to understand anything…

[@samkaffinsky]

I've seen this video on my feed for a few months now, I'm so glad I finally decided to watch it, this is super interesting!

[@ROAD-HORROR]

Wow this is absolutely fantastic and so so smart. Thank you so much for creating this video and sharing this hard work! This really changes the pixel game, and in so many ways too! This is seriously a game changer and while I'm just a little fella still learning the ropes, I know I'll definitely be using and doing my best to push this idea even further in creative ways.

[@doko3000]

I'm surprised not only by how clever the technique is but also how well explained it is, very minimal and efficient. Cheers!

[@incurae8967]

as someone just getting started with pixel art, im excited to have a smart, streamlined way to do this sort of work off-the-bat - thanks for showcasing this!

[@jumbocube]

this actually blew my mind as a pixelartist. Thanks for sharing!

[@matthewexline6589]

This video was BRILLIANT. Thanks so much for sharing!

[@stoykomarinov]

This is simply great! Every time you upload a new video, inspiration strikes!

[@tertervouz]

npm motion-canvas brought me here only to find out the dev was already in my subscription list like, what the hell bro you are so cool

[@marverickbin]

Wow Had no idea it was possible. Brilliant. Now I need an 1 hour tutorial with every step.

[@omnisel]

It just feels so obvious in hindsight, like it would have been implemented for, say, Megaman back in the 80s. Excellent work

[@monke4044]

bro these animations are god tier, it lets people easier to understands what you actually mean even if I'm not that expert at coding/game devs.. If only those tutors and mentors teach half as good as you did, all they do is show the line of code and told me what its functions are, before asking me to repeat and do it myself which apparently leads to another project I don't fkn understand

[@riisezz0]

Your ingenuity is always really freaking impressive. There is an elegance to the way you problem solve and I find it to be really inspiring stuff.

[@Night_Hawk_475]

This is a really beautiful demonstration, thank you for putting it together and sharing it with the broader gamedev community :) I hope it inspires some creators to try this alternative method - and to further innovate more unique ideas as well!

[@ikannunaplays]

This is brilliant, so brilliant that many do not fully understand how it can be used yet.

[@OllAxe]

This is so clever! And the coolest thing is that it wouldn't necessarily have to end with just modifying the texture, you could make a normal map of the animations, use metallic/specular/emission textures and get a whole ass PBR workflow into a sprite-based game using this technique with minimal memory usage. The potential is UNREAL!