The Perfect Pixel Art Parallax Tutorial [and Unity script!]

look at that super nice right i really really love parallax it's one of my favorite things to do in games and i'm really proud of the result welcome pals to another video today we're going to be talking about parallax backgrounds in 2d games and specifically pixel art games it's a topic that's uh like last week very near and dear to my heart because i've spent a lot of time making uh parallax background solutions and backgrounds in my games so today we're going to be covering how to build all of that i'm also going to do something a little bit different today and maybe if this is successful we're going to be continuing this i'm going to be releasing everything that i make today on instagram i o for you to download for patrons it'll be free and for everybody else it'll be available for a really affordable price so parallax backgrounds okay so first question is what is parallax parallax is a really interesting uh phenomenon that happens in the real world whenever we are looking at things or multiple things that uh fade off into the distance as we move our head left and right objects that are closer appear to be moving faster and objects that are further away are sort of stationary in the background and that depth effect is kind of what parallax is it was originally coined as a term i think when talking about uh astronomy in parallax backgrounds for 2d games what these are are multi-layered sprites so multiple sprites with some z depth difference that move with the camera to give that same illusion of depth so here we have a little graphic that gives us a pretty reasonable explanation of what's happening in parallax you can see at our uh sort of screenshot one here we have the character he's standing among some trees uh with some city and forest in the background and the mountains and these all appear in the game at different layers now each of these parallax layers move at a different speed or a different ratio relative to the camera so the things that are close to us don't like catch up as much as the others so things way off in the distance catch up with the camera and they move at a rate that is almost one it's close to one so for every one unit the camera moves stuff way off on the horizon moves almost one but stuff much closer like these trees here they move at 0.5 for example and that means that if the camera moves one unit they'll only move half the distance and so if we walk you know past the town a little bit you can see those trees have been left behind we see a little bit of the town some of the forest and still most of the mountain it almost looks like the mountain hasn't moved at all we can describe this as like a a simple rule basically the rule for any parallax layer is you take their origin so the starting position of that sprite when the level loads and you add to that the amount that the camera has traveled multiplied by the parallax value of that layout so you understand what what these first two things mean the last one would be parallax so how do we actually get the parallax value how do we determine that we can quantify that as things on the horizon so things infinitely far away from the camera move at a rate of one things that are in line with the subject so the player in this in this context if the camera is watching the player things that are on the player's level in the mid ground are moving at a rate of zero and interestingly things that are actually closer to the camera than the subject so things within this space actually move in a negative parallax value as you move infinitely close to the camera you approach negative one speed that means for every unit that the camera moves in one direction we move one unit in the opposite direction we're actually moving sort of twice the speed in the other way here are a couple of examples from different games i really like alpine regions so we've got some snowy mountains with alpine trees here and the first example here is from chasm it was a game that was released a couple of years ago it is a beautiful pixel art game and you can see there are a few different parallax layers here at play we have the background so the mountains we have multiple layers of trees which get more clear as they approach the camera and we have our foreground or middle ground where the player is and you can see here that there's really no restriction on how many layers that we have we can have as many as you want although for the sake of composition you can tell that the layers that are in the middle and as they sort of head further into the background those layers tend to be less detailed here's an example from a classic video game on the snes this is from donkey kong country and it's another snowy level you can see the foreground it's very detailed in fact donkey kong country is not a pixel art based game it's actually based on 3d models that have been sliced up into 2d sprites and then those sprites have been you know imported into the game so everything kind of looks like it's low resolution 3d which it is based on uh you can see here very detailed textures here there's a tile set for the underneath the snow we've got our layer that the player is on on this same layer are these trees so you don't have to have every single thing on its own layer some things that are in relative proximity to each other can stay on the same layer so all of these trees even though there's distance between them right between the stuff in the background and closest to the camera it's all on one layer it all moves at the same speed the parallax effect it's one that you can get pretty um liberal with and the eye can still accept what it sees in the background for example we have a lot of range here between these trees that are sort of off in the mid ground and uh the mountains way off in the background and that all moves on one layer you can see those three layers do a lot you really get that perception of depth and especially i think the trees in the foreground versus the trees in the mid ground so these ones here that are on the tile set and the ones that are actually further behind give a really nice sense of depth you can see that the stuff in the very very background either doesn't move at all or moves very slowly we have a nice effect here where the actual uh last background layer gets grayed out as we head further off into the level as if we're sort of moving through a snowstorm but at this very very beginning layer you can see the mountain looks pretty much stationary that said it is a looping texture if we were to take this texture here and copy it across you'll notice that when we get right to the edge it does loop and this is a really really advantageous and sometimes necessary aspect of parallax because what happens when things move outside of the view of the player they have to loop you'll find that i think even this second layer will loop let's have a look it does and this is what allows us to get that that reuse of those uh yeah beautiful textures across the entire level donkey kong country levels are really really big because the motion is so so great so uh one really really important aspect of parallax is the idea of infinite scrolling so infinite scrolling leads to looping backgrounds and all that really means is that when something leaves the camera it is replaced by the same texture as soon as it leaves the screen looping textures don't have to be the size of the screen that's mostly just for backgrounds in actual fact the rule for looping anything is uh something that i derived to myself and it looks like this basically you have your texture when the texture leaves the screen it must leave the screen by half of its width at the very least for it to be off screen so if this is the center of the transform here the center point needs to be off the screen by the same amount of half of its total width and then rather than replacing it at the last pixel you have to replace it half of its width off screen further in the opposite direction so the distance between these two objects even though they loop perfectly right when one leaves the other enters the distance between them is not one screen because they share the same central transform which is here and here and that distance is half plus half the width so it's a full width between them so that's parallax that's infinite scroll see how we make some stuff let's do it okay so parallax backgrounds are reasonably straightforward um they are merely sprites with layers and here we are in a sprite what i like to do before i get started is actually set this to tiled mode on the x-axis what that means is that whatever we place in the scene will be replicated at least once on either side so our actual canvas is you know yay big but we get a duplication of it on either side and this just allows us to have this really nice uh tiling situation it might be interesting to have this be like a nighttime alpine scene or yeah night time would be interesting and i might just use the shader tool to create a nice night sky in the background just using really nice big strokes here and i might see if i can add a color here what tends to happen is if you're using a palette like i am i find that it makes the most sense to extend that palette whenever you're doing a really high resolution or high fidelity background that's the only time it really makes sense to do that it allows you to have more subtle differences between your colors just for these really really far-off backgrounds and i'm basically going to use just one color here just the single color ramp it's all blue and keep in mind before we really start getting too deep into this it's really important to make sure that you know where your play is going to be in this scene if we know that our foreground is here and our player is you know yay tall then it makes sense that we don't have the background encroaching too far in and what i like to do is rather than have these backgrounds be just straight banded like this i like to dither them with clouds start creating some cloudy shapes and let this be more undulating rather than having it be so flat and what's great about this is that we don't really have to be looking at any one point in this tiled setup we know that the end result will be tiled perfectly so you can just go to town and just be really nice and free with your placements here and to avoid the sprite looking like a repeating texture it's important to use lots of varying sizes in any of your repeating patterns that appear in that texture so i'm using these sort of cloud shapes but you can see the cloud shapes themselves are of varying different sizes and shapes and i think i want some more diversity here starting to take some shape now and i'm just using these nice big circular shapes really it's quite quite straightforward the idea that i usually that i usually sort of go with in my mind is you know i have some shape and then that shape is invaded by another smaller shape that's the same series of pattern right so you can see here we've got like this color here and then this color here but then it gets sort of broken up by this smaller color and if you want to go even further you can try to identify i like these little like seagull shapes right almost like a bird i use those to highlight in the negative space these uh circles here that make up the cloud that gives it a really nice sense of depth you just got to keep stepping back every now and again and just looking i think the biggest thing with this is contrast so just making sure that you know it's fine to have this really dark black but how then do we break it up you know how much of the of the overall pixels does it occupy and how many details are there uh that sort of make their way through this contrast you know having this here creates a really focal point for your eyes your eyes really want to look at this because you can see there's a really really light area right next to a really dark area whereas areas like this that are more gradual don't attract the eye quite as much and our goal here for this very very background layer is to attract the eye as little as possible so i'm actually going to make sure there are no dark pixels touching the sky here and i think i just want to break this up a little bit it looks like one big monolith of clouds which i don't like keep it nice and separated and you can see i like to just create zones and then work them back it's not the situation where you know every time you place the pen you have to like keep that you can just add stuff take it away add stuff take it away it's really free you know it doesn't cost you anything so just lay your stuff down and see what happens so the goal for this low contrast one color ramp add colors if you need to just between your tones to keep it nice and um nice and soft and we can even i mean we can even add another color here if we want we'll just go to even more abstract cloud shapes this layer of clouds this very furthest back layer is really just one bit you can see there's only one color that separates it from the sky behind it so once we're happy with that sky on the same layer we can just focus on the mountains in the background and what i'm going to do here is create some kind of an idea of there being like a light source maybe the moon is behind us on the left side so that's where i'll think of the light source and anywhere that i see a slope heading right to left downward i'll put some light there nice and then what i'll do is i'll just make this line more broken up and i'll just i like to creep the line over this way and since the moon is above us looking down we can even get really nice and sharp with some of these details here just to highlight those caps especially if there's snow capped we can go even we can add some white in there we could do plenty of stuff and you'll notice areas where we move from one color to the next across one pixel like this don't really look that good they look kind of blurred so if you're going to have a sharp edge go for it don't do it halfway it doesn't look very good and don't forget there's some depth here so you might have some edges that aren't you know they don't reach the horizon here but they're still part of the mountain range nice and maybe this glistening kind of color can be snow maybe we can go a little further with some of this and add one more color at that very peak there just a couple of pixels so now let's take a little bit of a leaf out of donkey kong's book and have some trees on this mountain range heading towards the middle ground nice so now i'll just make sure these are nice and pointy because they are pine trees and giving the edges here where there is a little bit of detail some of that contrast and attention is what's going to really make this stand out as pixel art and not just you know a regular kind of art all right these pixel choices that we're making right here that's what makes it pixel art it's typified by these repeating shapes i think that's the thing that really really sells it thinking about having maybe these little uh jigsaw edges like this these sawtooth edges at the end of the day it's a very minor detail but it'll go a long way in just selling the overall effect and it can really help if you use a brush that's like this shape then you can go you can get really quite nice tree shapes just by dragging the brush left and right as you come down so if we were to use a square brush it's much harder because you can't really get those sharp edges but the three size brush is like a plus sign and that actually gives you a lot more control you can always use it like a stamp beautiful so that's our background now let's move on to middle ground so on a new layer what i'm going to try to do is go for darker colors in the middle and then as we get to the foreground really brighten them up i'm just going to drop in some nice trees and i don't want them to take up all of the space along the horizontal axis because then you can't see what's behind it the idea and the the whole point of the parallax is that you're watching things move past each other and even this layer remember will not be the last layer so you want to thin it out make sure it doesn't take up too much space and use the same overall patterns that we saw in the previous layer so even though we're not using the same brush we're still sort of making a lot of those same shapes and try to make these trees at least look like they're in the same plane of distance so don't draw trees that are only this small and extra trees that are this big in the same layer because we want to stay in the same sort of ballpark like i said the eye is pretty forgiving but even then you don't want to test it too much so some of this we could explain away as being you know undulating terrain so you know there's a hill here maybe it doesn't have to be that these trees are necessarily much closer than the others they can just be higher up and it can be nice sometimes to just pick a different color like i usually do when i'm animating and the point of this is just give your eyes a bit of a break these subtleties in the tones can be quite hard to look at after a while so doing something like this can be a bit of a help and we know what shapes we're mostly looking for so it doesn't really matter that the colors are off right now again we can use that three 3x brush to get some really interesting shapes and i really don't want you to go too far on this one just yet the reason being is i'm going to take this layer and the layer in front of it and keep them on a very low detail so that we can apply them into the game and then finish them off that's the process that i want you to take that looks good and then next layer up so not really even choosing the color that we want we're sort of just blocking out some shapes and i'm going to try to make these ones quite large and these are full-sized trees right these are in the foreground we can really see them they've got lots of gaps between them so we can see the layers in the background maybe they've got some branches that are all off kilter so we can really see the cracks between them as we see those like really low fronds fanning down and i imagine we will have like a second color here i'm not sure if we'll backlight them like this or do the opposite so you could take the inverse and light them like this ah now i think the contrast is better yeah i'm using the shade brush here to not muck up any of the work so those are our layers let's now take the very very foreground layer maybe we'll go for some snow and i imagine this would be for you probably like a tile set something like that might be nice to even have it be a bit darker here with like the lip being the bright part so the part that's sort of approaching here and then behind cool and then we can even go underneath cool that's looking really good so we'll save this now and the next thing is i'm going to break away from the art for a bit and we're going to go straight to programming and then we'll come back to the art and finish it the reason for this is i really want you to appreciate the fact that this process is one that is iterative and it should be a conversation between your engine and your art program so that you're going back and forth and seeing what feels right in the game and um yeah trying not to try not to spend too long in a space that isn't the final destination so that you don't accidentally go way off course then put it in the game and realize oh no it doesn't work okay so it's sunday night i'm editing the video i've decided i'm going to show you all of the art first and then all of the programming because that makes way more sense but justifies it to say i then went and did all the code and i'm going to show you that at the end of the video okay continue so here we are back in a sprite let's go ahead and give some of these trees some more detail i really liked how they looked in the actual editor so i'm not really going to make any major changes but what i would advise if you were going to make any changes is the things that you want to look out for are just to see like if your foreground tiles are obscuring the stuff in the background so much that you can't really appreciate them then i would thin them out a little more it's just stuff like that my approach here will be to do a kind of two-tone dithering effect so we're actually going to see you know the color go from this brighter color to a darker one in the middle but this middle color will be for the most part not banded like this we're going to use our good old environment shading technique to dither our way there and let's get the silhouette right first and we want to bias our left side because that's where the light source is so i'm just going to use the right side i'm going to light it just a little bit less so we still see all those shades but the left side has a bit more going for it and give it some other some of that shape back at the layer level so that we don't have it be a nice big block and it can be beneficial to just add a layer between what you're working on so that you can see it as its own thing sometimes it can be a bit hard especially when you're going for something really subtle as you layer things down it they sort of start to blend and again your eyes lose the ability to really tell what's going on so this is just a nice way of just creating a you know just a temporary layer that we can use to differentiate what it is we're looking at just going to try a slightly different technique here that's pretty quick dramatic tree drawing this music we could go up so we could go like this into this into this if we wanted or even just i think it's too much i like it i like it i just don't love it you know we could we could just take this and just just kiss the bottom of these with some light in fact what would be really good is if we did that with snow so i'm just gonna like drop in some snow and then shade above it and might be nice to add another tone to this cool you want to make sure that your lighting is about the same as the tree that's underneath it and another way you could probably do this if you want to be really clever is to take that tree that's underneath it cut it paste it on the layer above and then change all of its colors so you could say this becomes this and then this and then this and then you would just erase from there i think you get a different effect doing it like this but still kind of interesting the lighting will be correct at least you could just use it for the beginning if you want just don't make it too obvious that's all you know snow is a different texture to leaves so that's the front if we want to do any work on this back layer we can very quickly you know add just a little bit of something we don't really want to give it too much yeah very nice so let's assume we were happy with this and we were ready to go we could take the same approach we took before export this as zero export this as one and now we can have a look see what that looks like really nice okay uh i'm back long story short i was going to end the video here but i decided i didn't want to do that so i'm going to finish the rest of this and then i'll show the implementation afterward okay i'm just going to drop in some grass here just to iron out the separation simple lines just to recap on this process obviously the the way we're going about this is i have a big triangle you know shape and that shape i am you know filling in and cutting into like this and then i'm winging out these bits a bit more right just trying to create some more interesting shapes and then a base on the bottom that's pretty much it give it some 3d aspect sweep some of these shadows down like this and then fill them in that's the basics the rest of it's just detailing i'm really happy with how this has turned out honestly i think this looks excellent it's not perfect but i would be happy to have this in a game okay it's probably worth us doing a little bit of work on this at least and all we're going to do is take these two colors and blend between them just a little bit more carefully really we did do that in about three seconds before speed painting is so fun you just get results so quick let's just clean up some of these blobby shapes and we're good to go cool so the next thing we want to do is basically add some detail to this situation over here i'm following this undulating lightest color and all i'm doing is finding little interesting shapes i can create along this seam and what that's going to do is give me the guide for where the light should go and then everywhere where this is sloping up this way i'm gonna fill that in as a dark shape so i'm gonna take these two colors go into my shader brush and just drop straight down from there anywhere that we see that so this is fine that's going down yep yep yep and we can even start splitting it away so now anywhere at the top edge i'm just going to do this anywhere where we see these shadows keep it nice and simple for some of these work it back just defines those edges a bit better cool here all i want to do is keep these uh these shapes a little more like convey convey that this is receding into the background so we've got like at the very very bottom here our shapes are kind of round looking and then they go flatter and then flatter and then closer together and flat out like that that'll look like it's got some sort of depth to it so that's what i'm doing here like making our shapes become more flat so it looks like this is fading into the background there even though it's not that far it still will give us a perception of depth okay boom and there you have it our finished parallax background now i'm actually going to throw you guys a bonus here i've shown you parallaxing for backgrounds but i haven't shown you anything in the foreground what i like to do with this is take just the darkest color right like a black or something like that i don't know what else you would choose but black is good enough uh let's go from the bottom and this is your opportunity to tell the players eye about the kinds of detail that they're going to expect over here mostly though i do it with things like rocks and stuff fits in the foreground but here we don't really have that kind of scenery so these are our super duper foreground elements and now what we're going to do is put it all together in the scene look at that super nice right i really really love parallax it's one of my favorite things to do in games and i'm really proud of the result now if you're looking for an explanation on how to do this stick around and i'll play that now so here we are in unity which is my engine of choice i'm using unity 2020 although this will work in any version i believe so the basic idea here is that we have a 2d scene now unity's scenes are all 3d even if you're using 2d so you can take the camera here and see that there is a 3d projection even if when we press the number 2 that switches back and forth between them even if the game will always be appearing in this perspective the data of that z-axis is always still there so the first thing that we're gonna do is export our sprites into the project and the way we're going to do that is i'm going to take each of these layers one two three four and i'm going to hide the ones that i don't want to export press ctrl alt shift s and then i'm going to give them a name we're going to name these from 0 which is the very furthest back all the way up to the front so in this case we can just call this zero and make sure that we have a destination set inside of our project directory so this is inside of our unity project and i like to use the folder sprites for my stuff so alpine parallax background zero that's what we're exporting this as export then i show the next one we're exporting the visible layers so that's what i do and we're going to call this number one so what that does is if we look in our sprites folder now you can see each of our layers here nicely i want to import all of these with the same setting which is to make them not bilinear filtered point filtered that lets it be pixel art we also want to make it in rgba 32-bit format which affords for alpha and if we apply this for each of them then we can drop them into the scene no problem so the first thing i want to do is take the background and just plonk it into the scene if we set this position of this sprite to 0 and 0 it will fit in the scene perfectly so this is basically our camera looking at our sprite and you can see now that because the camera is orthographic it doesn't matter how close it is the sprite doesn't get any bigger or smaller that's how we know we don't have a perspective camera and that's why we need the parallax in the first place what i want you to do is set your camera up such that the size of the camera is the exact size of those dimensions and the way that we do that is we take the height of the sprite the height of the sprite in this case is 180 pixels divide that by our pixel to world unit scale so in this case i've got a scale of 100 that gets set here the default pixels per unit is 100 so there's no reason to change that so you have 180 pixels tall divided by 100 gives you 1.8 and then half that so that's 0.9 that's the size of your camera if you want to do this perfectly so 0.9 the pixel art would look now perfect in the scene nothing is getting distorted if we had our sprite set to buy linear filtering then we would notice we get some really odd and weird blurring when we scale this up to something like 1080p so to avoid that make sure we point filter now it looks good so we'll switch back to our original resolution there we go and what i want to do here is basically create our parallax object so we're going to add a new script on this i'm going to call it parallax i've already created it in this scene and that's going to be our base kind of parallax object like we said the intro the goal for this is to move by some distance when we move the camera so let's uh let's write that up now okay so here we are in visual studio code this is our parallax script uh we are going to be writing in c-sharp obviously so there are a few things that we needed when we were plotting this out let's see if we can remember we needed an origin plus the travel of the camera multiplied by some parallax value those are the relevant variables in this problem so we're going to make sure that we have space for them here what that means is the following first thing we're going to do is create a public reference to the camera i'm going to call it cam then we're going to have a public reference to the uh subject or the thing that is the player in this case so it's a transform and it's going to be called subject so the next thing we want is the start position this is not a public variable it's just a variable so we're going to have a vector 2 called star position and i'm saving this as a vector 2 even though this object has 3d a 3d variable for its position i'm going to save the z-axis as a separate variable so we're going to say float start zed and keep that separate now we're going to define our start function this is basically the setup and it'll run once when the game starts and we're going to say start position equals transform.position this is the position of the object we're also going to say start z equals transform.position.z so because this is a vector 2 and this is a vector 3 what's happening is the third axis of this vector is getting chopped off when it gets saved into start position because it's only going to save the x and the y that's why we're going to store the z separately we're going to be doing some vector math inside of the update function but it's all 2d math so that's why i'm saving this as a 2d because i don't want to be casting back and forth between vector 3 and vector 2. so the next thing we want to do is define a couple more variables these are things that are going to be updated every frame and i'm going to save them in what are called properties they're kind of like functions but we treat them like variables so they're variables that we calculate every time we call them basically that's how i like to think about it one is travel and the other one is a parallax vector now the way we set these is we have equals and then we have our little arrow this basically says that what comes next is going to be calculated every time we call this and it's going to be read only so we can't set this inside of the code it's going to be set right here and what it's going to be is we're going to cast to vector 2 the camera.transform.position minus the start position okay so this is the distance the camera has moved from our original position of the sprite so before we define our parallax factor let's get this running an easy way to do that would be to just have our public void update loop and we're going to say transform dot position equals start position plus travel okay now this obviously isn't going to be the parallax yet all this is going to do is move things at the same speed as the camera so let's just make sure that's working first and then we'll go to the next step now this script that we just created has two public variables one is the camera which we need to supply and the other is a transform for the subject now we don't have a subject in the in the scene yet so uh drag in the sprite of your game's character or literally just any sprite if you like so i'm going to drag in armin here he is he goes in that slot too because i don't have any code here that's going to move the character around what we'll do is i'm just going to make the sprite for the character a child of the camera that means that if we move the camera around the character is going to move with us this is going to make it look like we're playing the game we press play then the background should follow us around if we drag this left and right you can see the background is chasing the camera around perfectly if we were to use like a fake parallax factor here let's say it's 0.9 then this will follow along in such a way that it gets left behind by the camera as we move left and right there we go it's still mostly following along but it's getting left behind a little bit as we move this is the basis of the entire parallax effect here but hard coding this value of 0.9 is kind of clumsy and it's very it's going to get really really prohibitive to add lots and lots of layers and try to calculate the value for each of those so i'm going to show you a way to do that without any numbers at all no magic numbers it's just going to be nice and simple so remember at the beginning of this tutorial we had a model when we were talking about the horizon and the camera so the the distance that our object is from the subject to the horizon or from the subject to the camera that defines this value here which is our parallax value now the horizon is an infinite distance away and the camera it's our proximity to the camera is also something that we don't really have straight off the bat because we don't really know the bounds of the camera so there is a value that we can actually use that will stand in for the horizon and the camera's eye position and those are the clipping planes the clipping planes define what the camera can see the default value is 1000 which is really far away what i'm going to do is just bring this like way the hell in to something like uh 50 okay it's not going to change anything in the scene it just means that anything outside of 50 units away from the camera won't be visible and the near plane i'm just going to set to zero anything that's exactly where the camera is is visible and anything that's up to 50 units away is visible this will be our horizon this will be our camera's eye position now all we need to do is factor in the distance of the uh sprite from those two values so the parallax factor is a product of a couple things the first thing we need to do is find out the distance from the subject so float distance from subject equals this is the distance to the player and we supply that in the inspector so we already know that subject is going to be not null so we're going to write transform.position.said minus subject dot position. that's our distance from the subject and that's okay if it's negative two uh so we want the sign as part of this we don't want the absolute value now the other thing that we want is the closest clipping plane what we need to know is are we going to use the far clipping plane or the near clipping plane as the thing that we are factoring the distance between because uh if we're further away from the camera then the subject is then we want to use the far plane if we're closer than the subject then we want to use the near plane so it's just if we're this we want to use an airplane if we're over here we want to use the far plane the reason why we want to do that is to cover the fact that things that are nearer actually move in that opposite direction so there's a bit of a different amplitude on the parallax factor if we're closer than the player so that's pretty straightforward too all we're going to do is say uh float clipping plane this is the z position of the clipping plane and this equals uh the following transform so it's the camera's position plus and i'm going to add a ternary operator in here so this is the distance from subject is this number greater than zero if we if we are greater than zero then we're using the camera.far clipping plane and if we're not greater than zero then we're going to use the camera.near clipping plane so it's the camera's position plus either the far clipping plane or the near clipping plane so now we can define our parallax factor all we need to do is flow parallax factor and the answer is math f dot absolute value of the distance from the subject divided by the clipping plane that's it so the only thing we need to do now once we have our parallax factor is just make sure that we're not resetting the transform position's z-axis every time right so we're going to call this vector2 new pos and then we're going to say transform.position equals new vector3 newpos.x new pause dot y and the starting z now this will work exactly how we want it to so let's drop in a couple more sprites and see this in action we can just place them now where we want in the scene so this one here is right where the player is number two is probably a little bit this way three is a little bit further away but not too far away and our horizon is basically all the way out here so this is what it looks like in 2d this is what it looks like in 3d if you want this to be a little more convincing we can take our sprites we can set them to tile mode and then we can stretch them way out so there we have it pixel perfect parallax now before we close this out i do want to let you know that there is a way to achieve a looping effect without tiling i'll let you download the asset and have a look i hope you guys have enjoyed this new kind of direction going in a little bit more technical depth and i will see you in the next one thank you for watching and happy parallaxing hey pal thanks for watching and thanks most especially to the patrons and twitch subs who support this channel and my gamedev project insignia to find out more click the links in the description below and if you like this video tell youtube by clicking the like button and then youtube will tell me and then i'll make more videos that's nice thanks again and until next time

Channel: AdamCYounis

Views: 105,280

Keywords: game development, pixel art, game dev, game, video game, indie games, stream, tutorial, parallax, code, c#, unity, aseprite

Id: tMXgLBwtsvI

Length: 49min 2sec (2942 seconds)

Published: Sun Jan 17 2021