Pixel Art Class - Fully Lit Isometric Tiles in Unity!

[@TheZenmaster585]

In case anyone was having the same issue I was trying to get the normal map to work, one crucial step that was omitted in this video was that when you import the normal map png you have to set the Texture Type to Normal Map rather than Sprite 2d. It won't give you any error when you attach it as a normal map when it's just a regular sprite, but it just won't do the normal mapping lighting effect.

[@ShiloBuff]

You are seriously underrated. You cater to my experienced game programming side and my amateur pixel art passion. And the way you explain things is the way I think and like to learn. I would totally pay for detailed tutorials or assets from you. Thank you for the lovely content.

[@nikosv7230]

Become a patron!

[@ShiloBuff]

@@nikosv7230 Good idea. Thank you!

[@nikosv7230]

Good call, every dollar helps small creators :^)

[@prototype8137]

How is he underrated? Its a youtuber guy making pixel art tutorials to sell a program called asperite.. i mean nothing new here. Typical. Although he does get into more detail than others. Cool vids but i dont see how its underrated. 40k + views is good.

[@leocalder]

@@prototype8137 he’s most certainly underrated, and he’s not selling aseprite or promoting it.

[@justinwhite2725]

I've been using unity for years (maybe even a decade now) and I learned 2 things. 1 - 'secondary textures' is huge. I would have had to create a custom shader to use normal maps without that. Fantastic. 2 - you can do math in the inspector!? 3- having the grass sit 'on top of' the base tile is a fantastic idea. I would have been dead set in making these full solid tiles.

[@yvettenaomi3870]

for anyone who needs correct Z values (for 3D A* implementations for example) you can change the "Transparency Sorting Axis" for the 2D Renderer part of URP to "Custom" and change Z to -.26. it does some math and renders tiles at higher Z axes on top of those with lower!

[@yanisgaultier6951]

thank you very much !

[@pi-or-die]

Found your channel recently and just wanted to say that this is really incredible content. You really teach how to *think* about the the problems and find solutions to them rather than just simple how-to tutorials. Good luck with your game!

[@ironbard4901]

Woah! That looks so clean and beautiful! I don't quite know how to describe it, but this is like seeing graphics from an alternate timeline, where 3D accelerated hardware never became a thing, and so 2D graphics progressed two or three decades further than in our own timeline. I want to try my hand at this in the not too distant future.

[@cat-boy1357]

By far the best videos on isometric. All of the channels that cover this topic, just kinda handwave away the textures. "Yeah, just import these textures I found. Mess around with these settings till it looks good." This video thoroughly explains not only the how, but the why as well. Quality work.

[@vincebilotti8301]

The most helpful video ive seen about isometric game dev i swear.

[@koalaaberhart7485]

wouldn't it make sense to make the textures unshaded except for stuff like ambient occlusion and subtle details, so that the lighting is solely based on the normal map and thus more accurate?

[@AdamCYounis]

I tried this, but decided that in this case baking some lighting into the texture was better than no lighting, as it's still a flat 2D scene, even with the normals. There's an element of charm you lose when the pixel art doesn't have the benefit of being shaded with detail. I can't explain, but give it a go yourself and let me know what you think :)

[@Grynjolf]

I was curious about this as well, so it would have been cool to have shown the comparison.

[@Manas-co8wl]

I mean my instinct says the best option is to have the best of both worlds. It really depends on how much we diverge our lighting workload on texture shading and normal maps.

[@clickchapman5240]

Love this new format! Feels much more like a personal connection/teaching lesson rather than watching a Twitch VOD. Will be back for much more!

This was brilliant! I just installed Unity and it looks so complicated and technical, tutorials like this help A LOT! Thank you!

[@GabeWilliams]

I was…amazed when I saw what you could do with those isometric tiles and textures. I’m definitely going to have to try this out

[@yasselesca]

If someone has a problem with higher Z position tiles rendered underneath, go to the 2D Renderer Data and set the Transparency Sort Axis in Z smaller to 0, e.g. to "-0.5".

[@giovannicesaramorim9adigan961]

Got the same problem, just want to add that you also need to set the Y sort axis to 0 for some reason

[@t3ssel8r]

very cool process. bit scary how unintuitive some of the 2D tools are, but your explanations were clear, the results look great, and the lighting/shadow system works a lot better than I would have expected.

[@AdamCYounis]

The 2D tools are definitely a minefield right now. I was pulling my hair out for 5 hours last monday on stream trying to figure out the right cocktail of settings to get this going. It's got a lot of potential, but the fact that it's such a closed system makes me feel like there's not much room for extensibility on our end. I'd love to have the shadows respect the tile z-axis, for example, but I think that'd require me to roll my own solution rather than expect to mod the shadow caster.

[@ahnmichael1484]

I have watched hundredsss of tutorials, and this is probably the best I have ever seen. Incredible structure, flow, demonstration, and execution 😭

[@dotgrid]

I couldn’t agree more. It’s absolutely brilliant. Thank you!

[@frankeeeej]

Wow thats neat :D You can make it even more fancy by also drawing the lines between the bricks in the normalmap :)

[@faycalbenlarbidelai5586]

DUDE!?? I've always loved isometric games n wanted to make some but they always seemed haarder, but u really explain things way better n simpler making me wanna get on it! thanks man!

[@pantsurevolution]

Fun fact: secondary texture in sprite editor must be named EXACTLY "_NormalMap", or light will not detect it.

[@tobario]

Just another Unity Quirk

[@cprkan]

@@tobario make your own engine in c than. I do it and im 16 (not even that hard)

[@tobario]

@@cprkan cool story bro.

[@cprkan]

@@tobario ?

[@リset]

This literally just happened to me and I was stumped. THANK YOU 🙏🏻

[@LootGoblinPenny]

I love watching you work, especially when you're happy with something, your whole face lights up with a smile it's great. Keep up the great work, it helps a lot

[@JustGabe]

This is GOLD!!! This will seriously help my videogame to get more polished :D THANK YOU!

[@chimichuflis]

this really helped me a ton, this and the last isometric art video are so good, your explanations are really on point, im working on a simple isometric pixel art game engine on javascript and this videos are gold!

[@-geefius-5353]

As I am just watching this video without following along in Unity, I cannot test this, but, I would like to know: Are you able to change the angle at which the camera sees the tiles? If so, would you have to draw the tiles differently? If no, would it just be easier to do it all in 3d, just with a locked camera angle (i.e. still isometric)? To give a visual of the angle I'm thinking of, look up the game "Bleak Sword" or "Bleak Sword DX". I'm new to game dev, and definitely do not want to throw myself off the deep end trying to make complex games off the bat, but I would just like to have an idea of what I'd need to work towards/practice to get a similar angle and functionality to that game.

[@toongloong]

I wonder if you know how good our videos are... bro... these are so well thought and delivered. Masterclass material.

[@meepsterfgsltw5685]

Thank you so much, your videos are easy to understand and are followable if the audience wants to do this themselves, as well as you are doing an amazing job on the textures and your game design!

[@Hersatz]

This is exactly what I needed. Thank you very much, good sir. Extremely underrated channel.

[@tyreldelaney]

These isometric videos are really great! I would love to see an isometric character video sometime 🙌

[@teggundrut]

This is my first time seeing your channel and omg you are amazing! I have been wanting to make a game for a while and I didn't have any ideas until I saw your isometric tutorial and now im binging you videos. Thank you for your great work! :)

[@ohdahhoart]

Nice video! I have a question; how do you apply that normal map to more complex objects like pixel art trees, bushes, characters, etc? Or it just applies to the tiles? Have a nice day! :3

[@gsczo]

An isometric game like Bastion is veeeeery good, one of my favorite games.

[@zomk1342]

This looks soo good :)

[@danielwilkins1147]

Holy crap soo good :)

[@HawkranGeneral]

Make sure Sprite-Lit-Default is the material being used for your Tilemap Renderer component

[@HawkranGeneral]

Lighting won't appear on your tilemaps otherwise

[@oscarnak4197]

@@HawkranGeneral thx you !

[@Waseem-1488]

спасибо

[@monarchdrumandbass8700]

So underrated! Incredible content and so well explained! Keep up the good work!

[@gutsberserker5476]

loving the slow pace. I was able to follow along and enjoy a cup of tea

[@leorainard2731]

How do you stop the shadow from going over walls it shouldn’t?

[@MrHalomaster1000]

I followed your tutorials, but for some reason it shows the tiles with a higher Z value as being below the tiles on Z = 0, and tiles with a lower value appear above 0. This makes placement really confusing. Any idea how I might fix this? Just to clarify, If I did the same thing you did at 15:40 in the video, the tiles show up under the blocks I place them on. - Thanks for the videos!

[@kassarin]

Experiencing this issue as well... Higher Z values would elevate the tile BUT render the tile at the back. Edit: I have found a working solution. Under the 2D Render asset > General > Transparency Sort Mode > Set to 'Custom Axis' > Set the values to (0, 1, -0.26). It's kinda arbitrary and looks like a magic number, but it was what was suggested on the Unity manual (here: docs.unity3d.com/Manual/Tilemap-Isometric-CreateIso.html)

[@kyonru]

@@kassarin is there any explaination for this?

[@bigcaka7725]

@@kassarin its just not working with 2d renderer. it works with no urp. idk what to do.

[@rxqueenalice]

this video has helped me numerous times in my tilemap journey. thanks so much!

[@bolic-47]

These really cool things, man. It's like a new breath for isometric solutions. Thanks.

[@nilsnoske6460]

Ran into your videos a few days ago. You're honestly inspiring! Love to you! :)

[@Anita028]

this is looking incredible... there's a really easy game to make with this tiles that is awesome, I highly highly recommend to take a look to snes Equinox, it's a puzzle dungeon with some action elements but the game is all about to find tokens inside of isometric dungeons.

[@maximilianomalvido]

Man, this is gold! Thank you so much for sharing 👏

[@nikowolfwood]

I'm designing a tile based game and this video is pure GOLD. Liked and subbed!

[@MirroredDreamscape]

is there a way to replicate the elevations effect on a hexagonal tileset? I'm not seeing an option to set Z as Y under the hexagonal grid options, so for the moment if I want elevation I need to do it by creating a new tilemap and offsetting it up by 1 on the X axis (for flat top hexes), which I can see getting a bit clunky the more elevations I add in.

[@apollo933412]

Make sure to name your secondary texture "_NormalMap", otherwise it wont work. For whatever reason in my version of unity (2021.3.15) there was no dropdown with suggestions for the name-field of the secondary texture... :(

[@jeanpablo1031]

this series is incredibly amazing, I hope you continue!

[@Illusionaire1]

I would love to see this kind of technology taken to a more "fitting" aesthetic. Like the lights having only 4-5 shades and dithering. I always find jarring the "ultra smooth gradients" of lighting above the 2-3 color sprite/tilework.

[@RialuCaos]

Is there also a way to add shadow-casting to the walls and elevated terrain?

[@blades575]

Neat. Any info on how it works to transition players between the tile map Z height?

[@Aviiven]

awesome, only thing missing is normal maps on those tiles so they would pop out more with the lighting.

[@michaeldamon7500]

You are an excellent teacher :) Thank you

[@lordbrenno6354]

Thanks for the tutorial man, I didn't even know Asprite had a normal's color setting. Keep up the good work

[@MilanJ]

Just a purist nitpick but now the lighting is higher resolution than your pixel art textures. I wonder what it would look like if they render at the same scale and afterwards you scale the image up to get the blocky pixel art look.

[@geshtu1760]

I had a lot of trouble getting shadow occluders working with Unity's URP and using a composite tilemap collider. I couldn't really see evidence of shadow occlusion in your example either. Did you happen to implement that and get it working? I'd be very interested to know if this is possible to do in Unity. Those shadows look really nice btw.

[@Hersatz]

I've done a few test, and normal mapping is definitely a nightmare to do properly by hand. I understand now why people always says to bake these things through photoshop or freewares. Yet, even then, sprites are kind of sketchy to work with when it comes to normal textures. Normal mapping mostly uses details to make either pop in or out details whenever a light comes into contact with it. Creating shadows and depth in the seems of the sprite. As sprites even from 64x64 starts lacking in details, normal baking might create some artefacts or even create a normal map which isn't that much help at all. That being said, I did see someone uses normal baking for a huge pixel art tree and the final render was impressive soooo... that's that. Definitely something to try mastering out, if you believe your game can be enhanced with dynamic lights. Or just if you want to delve into normal mapping, which is used extensively in 3D modeling.

[@zeleck3x]

Keep creating mate, you are really good at it, I love all of your materials!

[@Tacopool]

I know this Tutorial is a year old but just in case anyone is following along now and gets stuck on the .png bit where you import your tiles from Aseperite you need to make sure that Filter mode is on Point (No Filter), otherwise your pixel sprites will be blurry.

[@danielward9758]

I love this! If you need any ideas for future isometric content, I think character sheets would be a cool focus point. Great content!

[@BlaineSirius]

Dude. I love you. Literally answered all my questions in one vid. ✋👏💪

[@ErwanLeCun]

Awesome tutorial! Is there a way to set this up so that the tiles also cast shadows? It would make sense for the walls to cast shadows onto the floors behind them, etc. Thanks!

[@dotgrid]

I have the same question. I’d love to see how the walls could also cast shadows.

[@TheTurkkid34]

Hey hopefully you see this, I'm using a 128x 128 tile block created everything in aseprite but when I import the asset into unity and slice by grid size (128x128) the tiles don't take up the entire isometric tile in unity, there's space between each tile and they don't line up flush. what am I missing here?

[@WyMustIGo]

I don't think it is possible for Adam to make a bad video. Keep up the excellent work!

[@dafanofftwenty-onepilots4462]

This is exactly the series I need right now (~^-^)~ Just one quick question! I'm seeing in a lot of your videos that when you export your sprites, the change is immediately updated into your unity. Do you just export it directly to the sprites folder in your unity project or what else do you do to achieve this? Thank you so much! Sorry if I don't know whether you have mentioned this somewhere in one of your videos.

[@AdamCYounis]

Yeah! I just keep the aseprite files and the exported pngs in my sprite folder in the Unity Project

[@mio-xh1ln]

I wish I could put into words how thankful I am for your video !! keep it up, buddy :)

[@thigict]

Awesome sensei, you inspired me a lot :D !

[@oscarlundin3842]

One of the best ones yet! Keep up the good work!

[@bishopjackson2264]

Hey, did you figure out a way to cast a smaller shadow for certain objects?

[@Bluequaz]

Subscribed. Don't know how I've never seen you, this was awesome!

[@gorguliastone]

Adam, you're cool, and everything you do is just great!

[@helloween2186]

Hey i tried what you are doing in the video...as soon as im at the elevation section pressing + or - to elevate hum my tiles doesnt show correctly i tried your method setting the parameter to individual but it seems to erase the tile,i tried with 4 version of unity and still no results. i tried playing with the sorting axis of the renderer and a lot of thing to correct this i can't find the problem,did you do any manipulation that isn't in the vid?

[@brutastouch9971]

I have the same problem, I don't know what I need to do, are you stuck there or did you fix it?

[@helloween2186]

@@brutastouch9971 Sorry im still stuck with the same problem :(

[@brutastouch9971]

@@helloween2186 U need change the Transparency sort Axis, X 0 Y 1 Z -0,26

[@helloween2186]

@@brutastouch9971 Thanks a lot its working now adjusting the value in the 2D Renderer was the right move !!

[@dizadaza]

BLESS Y'ALL I had the same issue and now I can sleep!!! :D

[@tycho25]

One thing that bugs me is that the tiles themselves don't cast shadows. Is there a way to do that?

[@weckar]

Crazy question, perhaps: Once you use a normal map for your lighting, shouldn't you remove the drawn shading you already did?

[@xelmenguyzxlt5571]

Thank you for listening to my suggestion ! I love isometric and your videos are great help

[@chase.lemons]

How did you get into game development? Is it something you went to school for or just picked up and learned on the go? Love watching your work and I’ve learned a lot in the past week.

[@Sliceoffrontpi3]

Loving these isometric explorations!

[@chrismanuel9768]

Would you be able to get more "realistic" shadows by shaping the shadow box around your objects, or would that make it look weird because it's not really 3D?

[@el2746]

Holy Fock, it looks super cool !!! Everytime i watch one of your videos i feel the need to draw pixel art too. Damn dude, nice video

[@Chessxn]

The "fixing the sorting order" step didn't work for me at all, my tiles that are lower on the Y-axis are still rendering in front of the tiles that are higher in elevation, anyone have advice?

[@penwheel6993]

Really love these tutorial videos you've been doing

[@rafaelbertacchi]

wonder what it looks like if you just put the diffuse colors on the texture without any shading and let the normal map do all the work

[@Slu2112]

im making a game like what u showed at the end, thanks alot for this videos they keepme going

[@АзяЗ]

10:31 .. How did you fix the fact that you have highlighted the borders of the normal map?

[@susboinathey5662]

Would you be able to have the tiles themselves cast a shadow? if so how would you go about that?

[@xxsmbr]

How did you get the normal map preview to show in ASE?

[@michaelvance1838]

Does this lighting setup work with the SuperTiledToUnity show in a previous episode, or does this mean that I'll need to build the tilemap within unity?

[@mayo8555]

I looking for that URP in my package manager the whole time but i keep searching on the wrong name "Lightweight" then after I watch your video! OMG ! Thanks you so much !

[@kevinhocking3531]

Great tutorial,, even better teaching. Thank you sir!

[@habelgfg]

When I get to 14:00 where I need to press B and start creating the map, nothing really happens. I've done everything the same way he does and it's not working... Can anyone help?

[@ГОГИ-в1д]

Hi Adam, I'm sorry for my english , but i wonna ask about program you use to sketch the ideas (black the desk, not in this video , but in video that you have done before) I'l be glad if you will answer for me, and thank you for videos that you doing , they are inspiring ,and teach allot

[@jebbp9223]

Why did you color your cubes sides if your going to use a light source ? Doesn't it make more sense to make them without any light info ?

[@mmfarrell]

Great video, I didn't know Aseprite had normal map capabilities. I was curious what color pallete you are using on the left?

[@isaacsmithart1316]

My normal map png file is set to "Normal Map" under it's texture settings, but it stills doesn't behave correctly as shown in your video. It only adds a slight difference in realistic lighting.

[@black_crest]

You need to name your secondary textures exactly "_NormalMap", otherwise lighting won't be affected

[@c4ke_rs]

Is there a way to use the 2D Light while importing maps through Tiled? For me imported Maps just don't react to the light at all. EDIT: figured it out. It doesn't like the group function that you can use for layers.

[@GeorgeKarala]

This Guy Is Pixelart GEM

[@adrianpinnock]

I having a weird issue where how tiles render out at higher elevations. For the most part the just disappear and I tried changing form chunk mode to individual. Any thoughts on what I could be doing wrong?

[@リset]

the music @ 13:40 is 🔥

[@santiagobeitia4473]

I've learn so much and I have so many doubts at the same time, really cool! A recurrent one during de view was: If you can make the lights work dinamically, why shadowing the tiles? Why don't use the same color for all the faces and let unity do the rest? (It's helpful when you draw it, but you can have two textures, one to draw and "see it" and one for the game itself, right?) (sorry if I missed in any word, second language issues)

[@IamExplouder]

I've literally dived into isometric pixel art lighting and shadows, and there is no best solution in how to make it realistic (I have founded nice approaches but not complete solutions). I've managed to achieve some kind of this effect by making second scene with 3d shapes, but when it comes to animations it becomes nightmare to make every single frame of moving objects. If there is any ideas about it I would like to hear some thoughts of people who tried it. Game examples: Sea of Stars, Pathway.

[@ElDonitazz]

will you make a tutorial on elevation collisions? ewe

[@hiiambarney4489]

This may just get me interested in making an isometric game haha. Love it but I feel a bit restricted making isometric pixel art games... I feel like one can only aim to recreate Final Fantasy Tactics Advance as that is hands down the best isometric game in pixel art known to man!!!11!one!!eleven!

[@christopherkarlsson4919]

"This is the really cool thing" But everything before that was really cool!

[@rikman81]

Great video with loads of useful info - thanks!