Shaders Case Study - Pixel Art Palette Swapping

Поділитися
Вставка
  • Опубліковано 10 січ 2025

КОМЕНТАРІ •

  • @fernandorodriguezalvarez6545
    @fernandorodriguezalvarez6545 2 роки тому +2

    As an advice for people that may be banging their heads against the wall because the array indexing doesn't seem to work as you would expect: you can use the round() function for it to consistently provide you the correct index. I was having issues where not using this function was resultling in different behaviours in different platforms (Windows, macOS, Android, iOS), and this did it for me. The default rounding made by the shader was removing the decimal part of the value, so multiplications that result in e.g. 3.999 would return 3, and therefore use the incorrect color in the array.

  • @TheRensvind
    @TheRensvind 8 років тому +1

    Love the way you set this up, how you show and explain ways that are worse and not only go straight to the "best" way. Makes it a lot better for learning how works and to do it yourself!

  • @Mythricia1988
    @Mythricia1988 8 років тому +3

    I was just kinda humming along and then you got to the part where you used the greyscale value as a coordinate to lookup the replacement color on a texture, and I _literally_ yelled out loud in exciteamazement. What a simple and brilliant solution. Wow.

  • @keithmanning6564
    @keithmanning6564 7 років тому +14

    I implemented this into my game, but instead of having a new palette file for each palette, I had a single palettes file with each line having a different palette. This is easier to implement because instead of needing file names to choose which colour scheme is being used, it just needs a floating point y cord value.

  • @aryesXNA
    @aryesXNA 8 років тому +5

    We use this technique to save texture space in apps. Artist's can easily preview output in Photoshop via Image -> Adjustmens -> GradientMap... and then save map by simply saving that gradient or "print-screening" it.

  • @normaldefault2206
    @normaldefault2206 5 років тому +1

    This is literally the best tutorial I've found on this topic, I don't think I would've made progress on my project without this, so thank you
    I am having an issue I can't understand though, the colours of the final render are NOT quite the same as the colours I'm picking, they're significantly brighter and after hours of experimenting I haven't found any solution

  • @Ninji00
    @Ninji00 8 років тому +1

    The shader looks so cute, like it just took the biggest bong hit

  • @graygiantgames1802
    @graygiantgames1802 8 років тому +2

    You could overcome the issue of the "4 color limit" by changing your grayscale to have more variance, and multiply by a higher number, i.e. (0, 0.25, 0.5, 0.75, 1) and then multiply by 4. Giving you 5 colors. Theoretically, you could do this up to a fairly high color limit. This solution is very graceful, and I think I may switch the solution I came up with to yours.
    That last effect though, with the selective color changing, that's incredible. Is that just a script that attaches to a single color image, detects the color below it and then has alternative values for the color scheme? Does it change the I'm curious as to how it samples the value of the pixels below them.

    • @purpleice2343
      @purpleice2343 7 років тому

      I'm pretty sure past 256 colours you'd have lots of problems.

  • @blackattack1840
    @blackattack1840 7 років тому

    this channel is one of the most valuable things on UA-cam. Bless you, sir...

  • @LPMAN0
    @LPMAN0 8 років тому +5

    Don't know if this was already suggested but you should make a video on the emancipation grills from portal / portal 2. They look really cool and use diffrent effects. I really enjoy your videos btw. Kepp it up!

  • @tygrak
    @tygrak 8 років тому +2

    Hey all your videos are real awesome but what I think would be useful to almost everyone, is water shaders. Maybe similiar to the water in windwaker, or maybe realistic water. Either would be really cool!

  • @Ziplock9000
    @Ziplock9000 7 років тому +1

    5:39 Amiga Workbench colours :)

  • @MuteObserver
    @MuteObserver 8 років тому +3

    Thanks for this fantastic channel! I've just binge-watched all your content, and eagerly await more. ✌

    • @DanMoranGameDev
      @DanMoranGameDev  8 років тому +3

      It's coming I promise! I haven't had much free time to play any new games for inspiration let alone sit down and grind out a new video. But things are starting settle down and I should be back to releasing somewhat regularly soon.

    • @MuteObserver
      @MuteObserver 8 років тому

      Makin' Stuff Look Good
      That's fantastic! I look forward to it. ^^ - Thanks again!

  • @jakubprokes470
    @jakubprokes470 8 років тому +2

    Thank you for all these small jokes like the one with mirror i really enjoy them.

    • @Soraphis91
      @Soraphis91 8 років тому

      i laughed at "You showed the wrong way first? Gee thanks ..." 2:39
      :D

  • @fraser21
    @fraser21 8 років тому +2

    You should cover some commonly used easy shaders like chromatic aberration, bloom, and a grease layer.

  • @GucioDevs
    @GucioDevs 8 років тому +9

    no way, thanks for this

  • @zop8790
    @zop8790 8 років тому +1

    Great job. I love your channel, just wish you'd upload more frequently lol. Keep up the good work!

    • @stef0262
      @stef0262 8 років тому +7

      well quality takes time...

  • @Utamaru56
    @Utamaru56 8 років тому

    Thanks for the video! Great material and telling. You've encouraged me to continue learning shaders once again.

  • @bahamu
    @bahamu 8 років тому

    I love this Shaders series! Keep it up!

  • @LiPolygon
    @LiPolygon 8 років тому

    Your videos are great! I'll definitely be using some of the stuff you've taught in my projects!

  • @IOSoraOI
    @IOSoraOI 8 років тому

    The dev showcase makes a lot of sense and hopefully I can show you some cool stuff :)

  • @SirRichard94
    @SirRichard94 8 років тому +2

    great job as allways. What about Inklings team color in splatoon, you reckon they use a similar technique?

    • @DanMoranGameDev
      @DanMoranGameDev  8 років тому

      Similar, sure! You can design anything in grey scale and multiply by a color to get a coloured variant. Could even use the R G B channels of a texture to indicate 3 separate colorable areas and 3 Material colors, and a bit of multiplication/addition to a lot of variety out of a single texture.

  • @DJFariel
    @DJFariel 8 років тому

    I have a request! How would one do the Zerg's creep from Starcraft 2?
    A second request would be an in-depth tutorial on how to do custom lighting in Unity via shader. I have no idea how to grab/manipulate the lighting data!

  • @dancingfishfilms
    @dancingfishfilms 8 років тому +34

    hey Dan, I was wondering - how did *you* learn shader wizardry in the first place?

    • @DJFariel
      @DJFariel 8 років тому +23

      Shaders are sorcery, and thus an inherent ability given by lineage or luck. Not wizardry.

    • @purpleice2343
      @purpleice2343 7 років тому +1

      LUL shaders are easy, you say that because you don't understand how they work, even if he did a good job explaining it to any common nooblord out there.

    • @axpanos
      @axpanos 7 років тому +27

      Shadow Lurker the difference between you and him is that you think you know everything

  • @dhedarkhcustard
    @dhedarkhcustard 7 років тому

    You should look into how Sonic 3 did their Special Stage rotating planet effect using palette swapping.

  • @blueasis
    @blueasis 8 років тому

    Thanks for crediting the thumbnail art, and great vid!

  • @dream_catcher7725
    @dream_catcher7725 4 роки тому

    anyone know how to create this kind of mask in 5:47 im using grayscale effect script ?

  • @brucemillis7111
    @brucemillis7111 8 років тому

    I just binge-watched all of your videos. I am still not sated.

  • @doombine2012
    @doombine2012 8 років тому

    Hello, I'm enjoying your channel's contents so far. I appreciate for the great efforts.
    I'm just curious if you will consider Devil Dagger's pixelated 3D effect as an upcoming case study material. (I believe I've seen few pixelated 3D rendering but DD is the only thing I can remember.) I thought that's a cool way to go retro atmosphere. Thanks!

  • @bonbonpony
    @bonbonpony 5 років тому

    How about that trippy palette rotation effect that rotates through the entire colour circle?

  • @WelshGuitarDude
    @WelshGuitarDude 8 років тому +5

    Can we have some videos on simple shader effects that are common in all games - whilst i like the specialised cases i think covering some common shaders would be good. Things like explosion shock waves, heat ripples from fire, and other distortions that a lot of games commonly use. Often learning these basic ones can help people then explore and experiment.
    This War Of Mine uses the shockwave effect very nicely for sound rather than explosions for its stealth component, and their visual effect to make the game dark and depressing is very interesting - not sure how they did that one.

  • @LumpySpoon
    @LumpySpoon 8 років тому

    Do you think you could do a tutorial on how lighting works with 2D games, if it's not too difficult? Love your videos man, I hope you do more!

  • @KoniWorx
    @KoniWorx 8 років тому

    Yaaay I'm so happy to see my name in those credits. Thanks for doing that :)

  • @benjoe1993
    @benjoe1993 8 років тому +2

    Can we expect more videos on this channel? I would very much like to see the "dozens of tutorials" that was "promised" in a shader tutorial :)

  • @TheMonyarm
    @TheMonyarm 7 років тому

    You sir have learned yourself a subscriber

  • @AldoV
    @AldoV 8 років тому +3

    Thanks alot! Exactly what i needed! I will tweet u later.

  • @robby2725
    @robby2725 7 років тому

    These are awesome tuts!!! Could you possibly make one with partical effects for a pixel game?

    • @robby2725
      @robby2725 7 років тому

      OH! and lighting effects (like torches). I have pixels built into the sprite that gives off ambers but I would like them to glow and make the other objects around it glow.

  • @dream_catcher7725
    @dream_catcher7725 4 роки тому

    how did you made that circle mask ??????? omg i was looking it for ages and with color swaps woooooow plzz tell us how you did it
    btw i tryed your code on my project and well.. its didnt show the 4 color properly so i ended up using the unity old grayscale image effect i just edited the texture black and white in ans art software like photoshop and change the colore values in 0%/25%/50%/75%/100% to the color i want but still i dont know how to use a circle mask like you did in my grayscale image effect script and shader??? plz help

  • @tonymax7503
    @tonymax7503 3 роки тому

    Hello, i'm intrested in the second approach with grayscales. But is there any smart way to generate pallete and mapped grayscale from image?

  • @Berixist
    @Berixist 8 років тому

    Your skills are amazing!

  • @mitchell9687
    @mitchell9687 2 роки тому

    This doesn't work for me. Is there something I need to do differently if I am using URP? Do I apply the shader to any objects?

  • @Gonsoi
    @Gonsoi 5 років тому

    very good, now im flying

  • @Minecraftian09
    @Minecraftian09 8 років тому

    Might I suggest making a tutorial on creating toon/cel-shaded fire, such as that seen in Legend of Zelda - Breath of the Wild gameplay?

    • @DanMoranGameDev
      @DanMoranGameDev  8 років тому

      I may get a capture card to go with my switch just so I can do case studies for modern Nintendo games. Breath of the Wild is especially magnificent looking on less powerful hardware (albeit 30 fps/900p). Thanks for the suggestion!

  • @RialuCaos
    @RialuCaos 5 років тому +1

    Is there a way to do this for individual sprites instead of an image effect?

  • @micro_seekers
    @micro_seekers 4 роки тому

    Man! You're great. Thanks so much!

  • @jv9ufxcy
    @jv9ufxcy 4 роки тому

    How would I use this on a character using a sprite renderer?

  • @mohamedmoumni5836
    @mohamedmoumni5836 8 років тому

    hi think you very mush for your job .i have a question about palette swap lookup , how can i gave the player the choose to change between PaletteTextures ?

    • @DanMoranGameDev
      @DanMoranGameDev  8 років тому +1

      You can assign the palette in code with Material.SetTexture or Shader.SetGlobalTexture depending on your setup. So a bit of UI where you associate buttons with textures and assign the texture on button press should do the trick.

  • @wfmg7235
    @wfmg7235 8 років тому

    Could you do a case study on those grass shaders in GTA V?

  • @allanoliveiVideos
    @allanoliveiVideos 8 років тому

    Please make tutorial about shader of water like zelda windwaker

  • @fireflyloverokay
    @fireflyloverokay 8 років тому

    I've just found your channel, amazing tutorials. But you havent uploaded in months, have you stopped making them? I've subscribed just in case you start again

    • @DanMoranGameDev
      @DanMoranGameDev  8 років тому +4

      Plan is for a mini-reboot in 2017, waiting on some audio equipment but I've already started writing plans for a few new videos :D

    • @fireflyloverokay
      @fireflyloverokay 8 років тому +1

      Very nice :) Can't wait

  • @PleaseUnsubscribeHaha
    @PleaseUnsubscribeHaha 7 років тому

    Hey, I'm making a game of my own and want to have the effect you have in the end of the video, but I can't for the life of me figure out how to do it! Could you (or someone else, of course) help me in the right direction? Thank you in advance!

  • @usufhashimov8346
    @usufhashimov8346 8 років тому

    yo can you make tutorial on how to make walking animation like in CS GO like In fps view or you are just good at shaders? pls reply

  • @muratcanagic
    @muratcanagic 7 років тому

    maan you are great :D i am sad, because discovered you too late. thanks for your effort

  • @ucanhle3092
    @ucanhle3092 7 років тому

    you are a fucking awesome wizard. thank you Dan :x :x :x please make more video about shaders

  • @sheepcango
    @sheepcango 8 років тому

    Well how did you selectively swap the color in that circular area? :O

  • @incorrigibleg
    @incorrigibleg Рік тому

    this seems to no longer work as of Unity 2022... the problem is that input colors in your Sampler2D may not reliably correspond to their intended grayscale value. Thus, although you've chosen say 128,128,128,255 as the middle value, in the shader this r-val might fall between 55-56 (i.e. around .2.) It's likely that some goofy things have happened to the default sprite shaders since this tutorial was made that apply gamma correction or something of this sort... in any case, although the substitution works fine in principle, source images will be color-altered before they are available to be sampled, resulting in consistent but not mathematically simple bias in palette sampling. The distortion is so bad that even a four-color palette doesn't work as expected... if anyone knows how to get consistent sampling in shaders as of say 2022, that would be a great help - but as for now I have to abandon this useful and quite simple technique and fall back on extremely expensive operations.

    • @incorrigibleg
      @incorrigibleg Рік тому

      In some new versions of Unity, it appears that Linear Color Space is on by default, but sometimes (what conditions? idk) shaders are still trying to convert from Gamma space, leading to an extra call to GammaToLinearSpace, causing colors to be wrong when you sample them. The solution, other than finding where that might happen, is just to use LinearToGammaSpace on the color that you are using to sample for replacement.

  • @mikeluna2026
    @mikeluna2026 8 років тому

    Hi, I know it's probably a bit simple for you, but how would you make a shader to display vertex colors, but which also has outlines and cellshading too? All toon shaders I've seen only support textures. Is there a reason for that? or is it just because it's not a common technique to use vertex paint?

    • @DanMoranGameDev
      @DanMoranGameDev  8 років тому +1

      Should be simple to add to any existing toon shader. In the app_data/vertexin struct, add "fixed4 color : COLOR". Your vertex shader should now receive vertex colors from the mesh which you can pass along to the fragment, multiply against the albedo/texture color, or the lighting color or whatever. Depends how you want to use them!

  • @gnomemann6986
    @gnomemann6986 6 років тому

    I want to add more colors to my palette, how would i go about doing this using the lookup method?

    • @DanMoranGameDev
      @DanMoranGameDev  6 років тому

      Create your artwork as gray-scale using more shades of gray. Each shade of gray should be 1/n apart from another where n is the number of colors in your palette. For example, you could use 8 shades of gray at 0% gray (black), 12.5% gray, 25% gray, 37.5% gray, and so on. Then look up from a palette (with point filtering enabled in import settings) that is 8 pixels wide, and use the sampled gray value as the x-coordinate to sample the palette.
      You'll want to make sure your gray-scale values are imported as linear, either through the import settings, or by creating an alpha 8 texture (alpha is always treated as linear). Alternatively, you could author your gray-scale textures with gamma correction in mind and have them distributed non-linearly, but that sounds a lot more awkward.

  • @cipod6723
    @cipod6723 8 років тому

    Hey bro we need more of this drugs :(

  • @myDorako
    @myDorako 8 років тому

    Two questions: Does it not annoy you that the intro-chant is "Making stuff look good *with* Unity" rather than *in* Unity?
    And would you consider having a look at the world map shader from Civilization VI?

    • @DanMoranGameDev
      @DanMoranGameDev  8 років тому

      Yes, it bothers me to no end but the musician loves that it's wrong and so refuses to re-record his vocals.
      I'll certainly take a look at it and add it to my list of potential future topics. Thanks for the suggestion!

    • @myDorako
      @myDorako 8 років тому

      Makin' Stuff Look Good Awesome, it's such a nice effect. Also, no* end, haha.

    • @DanMoranGameDev
      @DanMoranGameDev  8 років тому

      Malthe Elkær brain is running on little to "know" sleep

    • @myDorako
      @myDorako 8 років тому

      Makin' Stuff Look Good I can relate. Looking forward to your next video!

  • @zhavii
    @zhavii 8 років тому

    Maybe the next tutorial could be the Assassin's Creed Highlight System

  • @EssilorANO
    @EssilorANO 8 років тому

    Hi! You are awesome! For a almost noob on shaders for Unity, what do you recommend to read or see to become a shader master? :D

    • @DanMoranGameDev
      @DanMoranGameDev  8 років тому +1

      Experiment constantly, and when you see FX in games, think about how you might recreate them. If you have absolutely no idea, flex your google-fu a bit and see if you can find some sources on creating similar FX. At the end of the day it boils down to a lot of practice and scouring the net for cool papers on graphics and rendering. Good luck on your quest to become a shader master!

    • @EssilorANO
      @EssilorANO 8 років тому

      Thank you Mr vaguely British Unity Developer :D

  • @Sp1derFingers
    @Sp1derFingers 8 років тому

    Whats the name of the game that appears at 5:39, please?

  • @BretHudson
    @BretHudson 8 років тому

    Any tips on making this work on Android? I've found Graphics.Blit doesn't get called properly on Android when you pass in a material (seems to freeze the game, not sure if actually frozen or if simply not updating the screen). Thanks!

    • @DanMoranGameDev
      @DanMoranGameDev  8 років тому

      Bret Hudson that's almost definitely device specific. Do other image effects work on your device? It could also be the phone doesn't support some of the shader features being used.

  • @Dasky14
    @Dasky14 6 років тому

    Still bothers me that the text says "in unity" but the jingle sings "with unity". :/

    • @DanMoranGameDev
      @DanMoranGameDev  6 років тому

      It bothered me so much that I changed the whole intro, lol. And then the musician who did both jingles quietly mixed in the word "with" where the new intro says "in" as a goof.
      Sometimes, you just can't win ¯\_(ツ)_/¯

  • @Santu0309
    @Santu0309 8 років тому

    Please Make tutorial on 2d GPU Simulated Water with physics ( Effect like in Limbo and Ori games )

  • @r3s3tme
    @r3s3tme 8 років тому

    Any way to share the code for the last circular effect? should i support in patreon to get those assets?

    • @DanMoranGameDev
      @DanMoranGameDev  8 років тому

      That was just an extra challenge! I'll post my solution on GitHub once most people have had the chance to try it on their own :)
      There are currently no extra rewards for Patrons, they just support me because they like what I'm doing and what me to keep doing it!

    • @r3s3tme
      @r3s3tme 8 років тому

      thank you, waiting for it. i gave up already

  • @swiftanimations3294
    @swiftanimations3294 8 років тому

    Works in editor, but it doesn't seem to work when built. What am I doing wrong?

    • @DanMoranGameDev
      @DanMoranGameDev  8 років тому

      Whoops, shaders need to be in a Resources folder, or otherwise included in the build. Thought I fixed that ages ago. If you make the change feel free to submit a pull request and I'll grab that ^^

    • @swiftanimations3294
      @swiftanimations3294 8 років тому

      Awesome thanks! I put the shaders in the Resources folder and added them to GraphicsSettings - Always Included Shaders and now it's building fine

  • @romaincaudron8746
    @romaincaudron8746 8 років тому

    Do you know if we can do the same kind of material in UE4?

    • @DanMoranGameDev
      @DanMoranGameDev  8 років тому

      Yeah you could do this with nodes in the material editor. Drag a texture sample node in, take it's red channel output and put that as the X component of a vector, and a const of 0 as the y. Connect that vector to the input of another texture sample that is your lookup table, and connect that to your albedo/emissive.
      I haven't spent a lot of time with UE4 but it would be something like that :P

  • @laniakeadev.2271
    @laniakeadev.2271 4 роки тому

    Not working in 2019.3 anymore.

  • @notsoren665
    @notsoren665 8 років тому

    YUS! Thank you :D

  • @sosasees
    @sosasees 5 років тому

    Sorry, but I can't understand how to properly utilize this tutorial.
    I get nothing but compile and shader errors from this!

  • @mccrackhead1832
    @mccrackhead1832 8 років тому

    Can you do a new video, its a been month

    • @DanMoranGameDev
      @DanMoranGameDev  8 років тому +1

      Hi! I got a new job and relocated to California from Ontario, Canada. So it's been a hectic month of moving and figuring out all those details. I will return soon! I have so many new ideas and cool shaders to show off so hang tight!

    • @mccrackhead1832
      @mccrackhead1832 8 років тому

      Thanks

  • @TheSlimshader
    @TheSlimshader 8 років тому

    3 months since last vid...

    • @DanMoranGameDev
      @DanMoranGameDev  8 років тому +1

      TheSlimshader I know! I was indie when I started these videos, recently started at a new job in a different country so it's been tough to find time!
      I have many videos planned and want to make a big comeback in 2017 so stick around a little longer and I'll try and make it worthwhile!

    • @TheSlimshader
      @TheSlimshader 8 років тому +1

      Damn, I had a feeling something bad happened to a fellow indie :P Looking forward to 2017 then!

  • @FlipFlip
    @FlipFlip 8 років тому

    can u make a shader writting tutorial for noobs xd?

    • @DanMoranGameDev
      @DanMoranGameDev  8 років тому

      Noobier than my Shaders 101? I actually do plan on revisiting intro to shaders eventually. If I had all the time in the world I would do full courses where I actually plan out a dozen episodes in advance :P

  • @bsimow8652
    @bsimow8652 8 років тому

    Hmm
    maybe you can make us learn code in the same way you learn us how to do shaders and stuff!
    IK it won't make unity look good but..there so no one who make us learn the way you are doing right now.
    if you don't understand what I mean with the "Way you teach us" I mean like using windows movie maker to make us the vids :D

    • @DanMoranGameDev
      @DanMoranGameDev  8 років тому

      Gameplay Scripting tutorials will happen eventually. They will initially start as a blend between the two disciplines (writing a script that drives animations, shaders, and particle systems), but can eventually evolve into something else based on what the demand is! Any tutorials for scripting will be in the same style, with dumb drawings, short animations, and GitHub releases.

    • @bsimow8652
      @bsimow8652 8 років тому

      Makin' Stuff Look Good Alright good luck man

  • @Stravant
    @Stravant 8 років тому

    I just saw this:
    www.reddit.com/r/natureismetal/comments/545y10/timelapse_from_inside_a_volcano/
    And it struck me as something that would be an exceptionally cool thing for you to approach making a shader replicating as a case study.

  • @skagenmacka_t3444
    @skagenmacka_t3444 6 років тому

    1000 like

  • @swiftanimations3294
    @swiftanimations3294 7 років тому

    Is there any way this can be applied to UI elements?