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.

[@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.

[@zio]

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

[@PolonFemboy]

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

[@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.

[@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)

[@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.

[@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?

[@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

[@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 >_

[@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!

[@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

[@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!

[@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

[@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.

[@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!

[@FeroxOccisor]

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

[@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.

[@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.

[@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

[@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!

[@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.

[@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.

[@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)!

[@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!

[@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].

[@saturnine.]

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

[@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 ^^

[@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.

[@EuphoricPentagram]

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

[@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.

[@psy667]

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

[@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!!

[@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 👍🏼

[@jaxontrainor4269]

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

[@mrCetus]

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.

[@1001digital]

Back in the day when we had to add stuff to a pixel character, we just changed the palette. When your example character here has no arm device equipped it would use a different color in the palette than the rest of the arm, but this color had the same color values. When the device gets equipped you only change the color values for that color and it gets visible. No need to draw everything new. That also saved a lot of disk space. In the same way we did animations. When I was drawing map tiles for a game, I had some colors that were cycling. These were used to animate the trees without actually changing the image. Your approach can do much more, it's really interesting what you did there. I wish we could have done that 25 years ago :D

[@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

[@keyreset]

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

[@gamer-rs7lz]

I already was bro 😂

[@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

[@music389xd4]

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

[@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 💜

[@69605]

0:11 Emiru lookin' kinda fine ngl

[@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”

[@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!

[@NoisyboyMax]

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

[@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

[@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.

[@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.

[@theodoric7335]

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

[@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!

[@perero]

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

[@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.

[@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!

[@CSGhostAnimation]

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

[@ikannunaplays]

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

[@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

[@batguy39]

*That's a baddie.*

[@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!

[@dadmitri4259]

this is so cool! as soon as you showed the red-green gradient image that maps the positions, it clicked: A game called Noita actually uses a similar technique to map stain effects onto enemies (like wet, acid, blood, etc)

[@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.

[@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.

[@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!

[@thertc204]

This is absolutely one of the coolest things I have ever seen! Brilliant!

[@Xch3l]

This is one of the concepts of retro gaming that should be brought back. Remember Mario and Luigi on the NES? They were the same graphics but literally changed colors! Not only allows flexibility but given the amount of color capability of modern systems (+16 bil) over those from back in the day (up to 3 or 6 if you got creative) there's infinite possibilities!

[@Fangornmmc]

I'd thought a bit about this problem before but the best I could come up with was masks. This is a much smarter, more elegant, and more versatile solution. Well done!

[@emurphy42]

I've known about palette swaps for ages, but never thought about applying the same technique to pixel positions. And of course you can pre-calculate all the possible combinations if needed to reduce load during gameplay.

[@bobthebox2993]

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.

[@IzzyIkigai]

This is an ingenous approach! [insert crowd applauding here]

[@jumbocube]

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

[@razi_man]

My friend does this exact same thing as well and she was able to do it with extremely detailed 32 bit pixel art. I am jealous of her.

[@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.

[@milkywayish9315]

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

[@oomphur8195]

this is actually so cool like how can like 30 pixels look and move so smoothly

[@gofrisuto]

Omg, you're so generous for giving us a free game, if we buy your industry changing tools! Jokes aside, you're an absolute madlad. I'm so happy that I started to watch your videos. I'm nearly done speedruning your devlogs.

[@MishaCatz]

'I think it's a great addition to our catalogue of things that nobody will notice" - Never made a game yet and got recommended your video. You've explained it super well, looks like an awesome technic! The background music and your soothing voice makes the video more interesting.

[@willem1703]

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

[@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.

[@amaryllis0]

This is awesome. It makes me think if you could build a custom editor for this where you could just draw your sprite in whatever colors, then warp a skeleton of polygon parts over the result, which would corrolate to areas of the texture to automatically pick the closest color Not sure if there'd be a more convenient or sensical way to do it tho

[@DaBonkinator]

This is going to come in really, really handy. Cheers!

[@sumostudios3958]

OH MY GOD THIS IS GENUIS thank you this will be an amazing tool

[@stoykomarinov]

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

[@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!

[@doko3000]

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

[@graydhd8688]

I feel this video alone has so much worth studying in creating natural movement for a character. I love how when looking at the sprite sheet, every limb and pixel forms a sort of 2d skeleton, and gave me a few lightbulbs on forging my own workflow. I'm new to the visual arts side of creativity, I come from a musical background. It's nice to have access to people as brilliant as yourself so readily online- it almost feels like cheating! Seriously though, appreciate what you do!

[@RionaMarina]

This is so cool I’ve never seen anything like this before, I can’t wait to try this out

[@marverickbin]

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

[@cronaut5429]

Hello, one of my favourite indie devs! It's highly unlikely you remember me, but I still enjoy (re)watching your videos to get myself excited about gamedev! I am that backend dev that tried my hand in making games a bit. Nothing came out of it at the time, as certain life circumstances came in the way, around the same time you released your previous devlog. The good bit is, I'm now working for a fancy company -- and money tends to resolve the unpleasant situations. I'm about to try my hand in gamedev yet again. Animation classes seem to be of help as well! Thank you for being a great inspiration! Your videos are of insane quality and I'm most definitely making sure your infinite knowledge stays in my head during the creation process :D

[@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.

[@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!

[@DecepsisOvermark]

That is a brilliant solution that I would've never figured out on my own.

[@memoryman15]

This is really quite clever and I have had a project in mind that may be helped immensely by this.

[@brnktv]

This is really fantastic. As a software engineer, I understand how you might feel about no one noticing, but if I were you, I'd be damn proud of this. What a phenomenal way to deal with what is otherwise a painfully annoying process. Kudos for sharing.

[@spinnernicholas]

This is one of the most amazing things I've ever seen! Wow!

[@matbrady123456]

Not only is this great information, but it's great information presented beautifully. This needs some kind of communication award, because it deserves it. Well done.

[@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!

[@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!

[@EndEverEsports]

the color data as x and y is mind-blowing for me.

[@darkengine5931]

This is generally how 3D engines using deferred shading work. They'll render UV texture coordinates of 3D models using forward rendering into a G-Buffer (along with other things like world coordinates, normal maps, etc, depending on the engine). Then in a deferred pass, use the G-Buffer texture storing the UV texture coordinates to do texel lookups. Directly drawing UV (or "XY") texture coordinates as hand-drawn pixel art is really novel and clever though.

[@NemoNautilusEra]

That was super interesting. Very clear and to the point as well. Thank you.