Atomix Remake - Pt2 - Atom Shapes and Fixing the Serializer

welcome back everyone this is the atomics remake part two uh in this video we do two things the first thing we do is we fix the serialization uh i initially have an idea about making my own serializer uh but i found a better one on the web and we end up using that and it works out perfectly spoiler and then the second part is i create a prefab that is going to represent the shapes in the original game and also in the the kp atomics remake uh they use png files we're not using png files here we're going to use unity and so i create a prefab that takes in the same data used in in the um the earlier uh incarnations of this game and uh i build the prefab from that and that's as far as we get in in this video um but yeah it all starts after the fade all right so here's the problem is these atoms here they don't work for me um they they cause problems because uh i can't serialize them into um into a json object what i need to do is i need to have the atoms uh as as separate or as as basically a combined i need to have them as fields so instead of having atoms like this uh i think what we need to do is we need to have atoms as uh an array uh instead of that and instead of let's just call this atoms x uh and instead of that we have these as um um id is that and then shape is that i think that's what we need to have instead uh so we need to do some kind of translation now there is actually actually if i go to here i think it's this one here yeah i did i did some um research so there is this thing there's a full serializer here which will actually get me the dictionary uh i might try this um and if this works then that's good um but it means i've got another um another library in here uh do i need another library in here maybe or what i can do is i can actually write a serializer and that's what i'm going to do in this video is i'm going to write a serializer because it um well i i think that might actually be the best way forward because it because then we can actually add other things to it as well not that matters to be honest um well let's try it both ways let's do it this way and then let's do it with the serializer first and then see if that fixes the problem and if it does all well and good and if it doesn't then we can write our parser uh installation import the source folder into your unity project you're good to go you also see the dll based import at the bottom of this document uh so okay so let's download the zip file uh and then show in folder okay let me go to there assets full serializer source okay and then um what i'm gonna do is get rid of this go to project um and then we get scripts and then i'm going to create and i'll call this full serializer double click that and then i'm going to i'm basically going to select i'm going to go to here and then show an explorer that there and then this is the the zip file that i just downloaded so i'm going to grab everything in here and i am just going to drag and drop it into here and if this blows up it doesn't work then we can just get rid of full serialize and if it does work then all good to go compiling compiling compiling compiling compiling um uh okay so we've got a couple of warnings do we have any more warnings tangent mode is obsolete okay but we can maybe fix these things i mean these are kind of minor minor issues what is this for well i guess we don't need any tangent modes i'm just getting rid of it we're not going to use it anyway uh watches use tangent modes uh okay so that's tangent mode again so we don't need that okay and then the last one will be the same thing as well okay that's just a unity error uh all right so if we go to our where's our project um that's full serializer scripts nope that's what i wanted scripts um atomics json and then that's the file loader in here so we use the json utility for this we're gonna use something else for this we are going to use uh this one here so the usage is this uh blah blah blah blah blah need a new serializer and then you want to serialize that and then deserialize that okay so let's just let's just copy and paste this text here so i'm gonna create copy that there and then up here i'm just gonna pop it down in there um and then i'm going to add that there and this is going to be system using system okay blah blah blah blah blah d deserialized type yeah i mean i don't like the fact you gotta pass in the type but that's okay uh so to do this we need to pass in deserialized type so um what i'm going to do is let's make let's get it working first and then we can start tweaking these values here all right so instead of level data equals that what we're going to say is um d serialize uh type of atomics file um and then json and that's me as atomics file now this is very kind of old-school way of doing things this deserialize with types and things so we're going to change that we're going to make it type safe or at least we're going to use types uh i mean everything's type c if it's c sharp i don't know i said that sorry all right so let's get this working so we do that and then we press f10 and then level data is that levels is that and then atoms is boom a dictionary there we go so that's it we don't need to do anything else oh that's uh that's a message let me just turn that off so there you go that's it that's easily fixed thank you very much you wrote this this is uh jacob default uh he wrote full serializer fantastic stuff uh does exactly what it says in the tin um yeah that's perfect so i don't know if you can see that there but that's that's exactly what i was looking for um yep string two string two string two values one and nine yeah that goes to level zero atoms string two one in g yep and that is three cg yep and that is gonna be one and see i yeah i don't know why they chose to do that particular format but that i'm just sticking with it because that's the one that they used inside that game there but that that's that done so let's fix this here so instead of having type um what i'm going to do is i'm going to choose t um and that's going to be type of t and this is going to be t so now we're making this tight we're giving it a a a template a class template um actually we're unis technically in c sharp we're using generics not um not type what am i looking for we're using generics uh so we pass in the type using these angle brackets uh and then we use type of t in here to do that which means that we can now do d serialize and then we can completely ignore the json and we can completely ignore this and is it going to pick that up is it we sometimes it does sometimes it doesn't it's not liking that at all the type arguments for method what uh what oh that's why oh because i didn't do it right i should have put d there so now so this will go away and i can actually get rid of this as well because uh it's putting it into this variable and syntactic sugar and all that kind of stuff but no fine um okay maybe i was wrong there uh um so yeah dc realized then atomics filed that that's good um and then um really we kind of want this is like a as an object by itself we don't want to keep creating this serializer so what i suggest we do is we create an instance of it and then we just keep it around while we need it um so this is trying to serialize that compress that in there uh do we even need to know like it doesn't make any sense the fact we need to know that type um okay so we're gonna be we're probably gonna use this in other places so let's create our own serializer wrapper thing so inside atomics json let's create our json zero position json serialization not to be confused with json statha sorry that was a terrible joke okay json serialization um and then um we want to get rid of these i don't want to do that and i want to do that and we want to do that and that is everything okay so now instead of doing that we do json serialization dot d serialize so now we can use this any which way we want and um we don't need to have full serializer everywhere we can just have that one thing so if we do end up there's a thing in the documentation about changing uh what does it say um it's right down the bottom here let me just uh uh where did i put that yeah so it says feel free to use full in your own asset store package if you do so please rename the full serializer namespace to something like mypackage.full serializer so there's gonna be no conflicts so uh yeah um if we do have to rename it we just have to rename it in one place and then we're we're good to go so um yeah i think that's everything um so now um we should be able to load the level and everything should be fine let's make sure that's okay okay all right perfect um so i think the next thing we're going to do in this video is get rid of these walls which means we're gonna have to change some a way that we do um we deserialize it we're gonna have to change some of the levels wrong sir all right so i just realized that uh in the remake so i'm just gonna bring this up just now this one here uh you actually just click here and it shows the arrows um i think we could do just something similar to that we don't need to worry about the other collision detection there so we can just let it run out however what we do need to do though is inside here this is the description of the the different graphics um that get used so here's the bonds and everything here and that ties in with uh this here so for example um that's a later level uh this one here so we have uh our three atoms so we have one three and one so our three atoms are one three one and if you look at the code here uh one three and one is the hydrogen and three is atom o for oxygen so one three one is one hydrogen one oxygen one hydrogen and that's the winning condition is h2o because it's h2o there and you notice it's got c c g and g and that refers to if we go down here bond type so c is bond right uh g is bond left so you've got c c g and g so we need to write a uh a factory for those because that's the the next thing that we need to do so i'm going to um create a a sort of a prefab for these so these these basic ones here uh are just they're like uh cubes and they have letters on them so i'm just going to build cubes with letters on them and then i'm going to have the the various bonds now i'm going to cheat just i'm just going to have left and right bonds for just now and then i will um add more bonds as we need them but yeah right now we just need h well oxygen and hydrogen so we'll do that just now the easiest way to create this is actually just to create a new um a new scene and then i'm going to create a new empty prefab an empty object and this is going to be an atom and we're gonna put it to zero zero zero uh and then we're gonna press f to zoom in on it so there's nothing there right now but we're gonna add a cube so i'm gonna add a 3d object which is a cube and so cube is perfectly centered at that particular location um but i'm going to scale it halfway down on the y to be honest probably don't need to do that actually i probably don't need to do that but i am going to scale it the cube itself 0.75 and the reason why is because we need to give it some um so if we go back to here uh you'll see that the bonds are kind of sticking out so we have two cubes that we've got like a a square one that's offset from that so i'm going to do that one there and then the other one sits on top of it so i need another cube and then this first cube so this bottom cube here is just going to be called white uh no use so i'm just going to call it no use because we're not using it and then this top one here we're going to rotate it 45 degrees on the y-axis so now it's kind of slightly offset so you can see that there and i'm going to raise it slightly as well because uh i want it to not yeah there you uh just try and keep these units as kind of um regimented as possible and so you can see that this is uh if i loop uh there oh good it's there okay so you can see that this is now starting to take shape and looks kind of similar to that um i'm going to add some uh art if you don't already have that in here so we've got green uh so if i add that to um let's call this a background color uh and then we drag and drop that over to there and so you can see that we've now got our uh background color there and now we need to add a um a bit of text so that we can see what's going on so i'm going to add a 3d object and hopefully it says 3d text uh and i've got a funny film we'll probably have to rotate that uh i'm going to rotate that on there 90 degrees like that and you can see the sample text is there and instead of sample text we'll call that h uh where is h okay h is over there um and so i'm gonna make this a little bit smaller all right [Music] and the text for this is going to be much smaller probably right there um and i'll make sure that this is centered on here so that we don't no matter what we put in here uh it's always going to be oops text that's kind of difficult to see with this that's not so great is it um why is that offset okay i don't really one will make that uh upside down freaky um okay let me make that a little bit higher all right so what would be that zero point let's just make it zero point eight five okay uh we can move this light as well we don't need that light uh all right uh where are we let's go for the y okay so that is that there [Music] boom i think we have it okay cool um so there's our h there and of course it's going to be black as well so we'll make that black like that and then that's our that's our basic shape there so i'm going to go ahead and add the rest of these these things here so um so this is going to be atom uh name i'll just call atom name that's fine um and then i'm going to add what else do we have we need to have our north south east and west our left right up down so i'm going to create a 3d object and this is going to be a cylinder and our cylinder um our cylinder is going to be rotated on the um z-axis and that's going to rotate 90 and we obviously don't want it that big so we're gonna scale it 0.25 0.25 0.25 okay and then that's gonna stick out here so when we look at it from above you can see that it sticks out a little bit uh and then let's make that 0.5 okay so you get the idea i'm going to go and create those and then we'll come back after i've created these and then we'll show you what's going to happen next so now that we have this uh prefab we're now going to create well we actually don't have the prefab just yet we're going to create a prefab in just a sec but once we create the prefab we're going to add a script to it or we're going to add a script to it and then create the prefab either way we need a script and that script is going to control what bonds us are shown the the text in here and then the color so i've got two colors here green and red um and then we're going to choose which ones we're going to show based on the values that get passed in so we're going to start that now all right so let's go down to scripts and go to game uh oh and this is all the other stuff here let's go to atomics um create um folder and then we'll call this um game board or well let's just call it game uh and then inside here we're going to create another script and we're just going to call this atom because that's what it's going to control um and what do we need to control we need to have um and again i'm just going to do this in a very very basic format this is maybe not be the best way to do it but this is what i'm thinking anyway so do public team object uh left join right join top join so that's going to be right bottom and top join red public teal green um what else do we need to do oh yeah public tm pro text mesh pro text um and then we need to do public void um set up shape now i don't know what's going to go into set up shape just now but we need we need it um so what do we have over here uh that's not the one it's this one here so um we need to pass in one we need to pass in a number which is going to correspond to a particular shape and then we're going to need to tell it where it's going to be c c g or g so these are the bonds that we have here so this is one left bone blah blah blah blah okay so um we need to map these two particular things so right now we have c and cg okay so what if we did um left join dot set active false paint join top join bottom join okay and then we do text.text equals that so as soon as it becomes activated it's we don't use it until we reset it there so set up shape and it's going to be atom connections and then um i'm gonna cheat a little bit i'm gonna see uh well i keep saying cheap it's not cheap it's just coding um private dictionary uh action there and then this is going to be what i'm going to call this uh [Music] join joint let's call it joint and then we'll see joint equals new that there and uh then we'll say uh actually we could set them up here um and then this is gonna be c and c c and g so right now we have c and then that is going to be um so what am i doing here okay what i'm doing is i'm setting up um a i'm gonna have to set this up as that i think i do okay um so what i'm doing here is i'm setting up a dictionary and the dictionary is going to have a mapping between the [Music] those num those letters so these letters that are in whatever that code is this one here yes this one here so it's going to map these letters here and instead of having bond blah blah blah blah it's actually going to do the do the right thing so c is going to set bond right to be true and g is going to set bond left to be true so that's that's what i'm setting up here and then i'm going to do that is i'm going to say c is that i completely forgot now bond right so i'm gonna say c is uh right join dot set active true and uh g is gonna be left join dot set active true and i can take that up like that so now uh i can do the same thing for atoms so i can say private dictionary oops dictionary spring action atoms [Music] and then i can have inside here i can see equals new dictionary blah blah blah blah and then inside here again i'm going to do exactly the same thing as we have here so instead of having um atom blah blah blah blah blah these are all uh png files we don't have png files we're going to use shapes so instead of having that i'm going to say change these to hc blah blah blah so i only need um h and o just now so i'm going to say uh one uh and then that is going to set text.text equal hydrogen okay and then three is going to set it to oxygen so i'm going to copy that again so that's oh okay um all right so set shape uh atom connections so all i need to do now is i need to do atoms atom that i know that looks weird i'll get to the second and then the other one is joints this one's a little bit more complicated because that's gonna be for each char in uh actually um for ins i equals zero i less than connections dot length i plus plus um uh connection equals connections uh i uh oh yeah it doesn't like that so let me just do those two strings um and then i'm gonna say actually do i need that can i just implicitly set that across yeah it no no i can't damn it c sharp um okay so now i have my connection there um now what i want to do is i want to then call that joint so i want to say joints connection bloop okay and that sets everything up now what is this what is this line doing and this is the same similar line here well up here we're setting up this dictionary of strings and actions so a dictionary is a key value pair you have a key like that's a way to access the data and then you have the value which is the data you want to access and you can have like a telephone number so for example you could look up uh sloan in the telephone dictionary you'd get my telephone number like five five five one two three four that's how you would look up my number in a telephone book and so with a dictionary or a hash or whatever you want to call it you have a particular value and that's your key and that unlocks the data and that's the key value relationship there so in this case here we have these keys which are our strings that represent uh either the item kind or the bond kind and we set them to be actions in other words a task to perform so a task to perform is just a a void um statement so it's just like doing console.printline dot right line something except we don't need any anything else so we don't need to pass in any parameters so what we're saying here is perform this action and this action is going to set the text to h when we get nm1 so when we get in our atoms that's what that's going to do is set up there but because we also need to set the material we also need to do multiple lines here so this is where it gets a bit complicated because we actually need to say um uh where we got we got uh public name object cube so inside here so hydrogen is green oxygen is red okay so hydrogen is green so we say cube dot material renderer renderer equals green and then oops we'll fix that in just a second that looks awful um and then this one here we're going to say cube dot get component renderer dot material equals red [Music] this one needs that in there uh why is that not teddy talk well that's just awful well hopefully this will be a little bit easier to understand uh so put that in there so i mean you could do that you could do this in one line you could pass in you could just tell it um what those values are so what we could do is we could actually have and this will let's do that just now we can have a let's copy these two lines here so we're going to go like that and then we're going to go down here now we're going to say private void set up atom uh string atom um add some name and then material material and i'm going to say text equals that i use item name and then that equals material okay so now instead of having those multiple lines we can then just have that as one line that says set up atom that there there you go and now we're back to just that one line um and then we can do the same thing for our oh okay so that makes it it makes it just a little bit easier to read okay uh so set up shape and we don't need that anymore that's there guys i probably typed it that's why it's there okay so we go back to unity let's make sure everything's okay compile it there are two candidate types [Music] okay so i quite like using trello because it keeps me honest uh all right so when we create our um when we create our uh where am i going here yeah when we create the the map we we're going to use this um atom so i'm going to add atom to the script here and then i'm just going to drag and drop these values across so left bond i've got a left join there doesn't matter right bond bottom top and then we need the cube which is the background color and then we need red which is our material uh i i think i created the red off camera but it's essentially just a copy of uh the greeting material but i've changed the the albedo um and then the last one is the text of course so uh that would be atom name okay so that's everything set there um okay uh now i'm gonna go and copy that into the prefabs i just drag and drop and boom it creates the the prefab and you can see that we have a nice uh version over there which is good so um what we can also do as well is we can go to left one blah blah blah all those bonds there and we can set them to be off uh to start with uh and then uh inside here we can get rid of that as well because that'll tidy that up um we don't need that and then the text as well uh the atom name we can get rid of the h in there as well let me get rid of that line two and that's our prefab ready okay um we might come back to that prefab later on because we need to know whether it's a playing piece as well well actually we can change that to play piece as well so we can do yes children objects uh and we'll probably need to add a cube to it as well so let's add box collider which is going to fit exactly over 1 which is perfect okay that is good i think uh yeah that's good okay um cool oh except none of that appeared on there okay let me just do that in here so add component box collider and then let's call that player piece uh yes okay and then let's take all of these uh and then punk and then atom name is gonna be take that off there okay all right okay uh so now if we go back to our game recent scene game so if we go over to our player pieces over here uh i'm just going to drag out atom uh into here and now what we need is we need some some way to to create that atom we're just gonna for now uh just gonna use the uh the builder part um the map reader so that is inside atomics uh where is it where did i put that actually uh file loader oh is it in here oops that's not good okay um okay that's not so good all right um so if it is not a dot so if it's a dot that means it's an empty space that means it's a just a like there's nothing in it uh otherwise it's going to be a uh an atom so uh i need to say else if rho [Music] x equals is not equal to a full stop then we need to figure out what it is so the value at that point is going to be char um actually let's make a string [Music] and then it's going to be atom equals row x and then we need to figure out oh yeah let's do two string and then we need to figure out from the atoms where that is so we need to we need to figure out a couple of things there's the numbered atom the one two three and then we have one three and one here and this is this part here this part here is the shape of the atom and this part here is used to determine the solution of the puzzle so you see that molecule is one two three so that means that it has to be in a row one two three and if we go down to methane methane then you see that the molecule is in this pattern here which means it's in a cross pattern so two at the top four at the bottom then one three five along the the side there and that corresponds to uh these values here describing these shapes here so the the way they've done it is actually really elegant uh and so i'm just gonna keep using it because rather than having to change all these these uh variables or changes all the maps around this makes a lot easier for me so yeah that's what i'm gonna do just now um so i need to figure out what the shape is based on that so uh i'm gonna go to level data levels arena so this is the the current arena so i'm gonna say arena uh uh you know why oh that's the arena isn't it sorry that's gotta be level data dot levels level index dot atoms and then we've got the key which is the atom key and then we have uh the zeroth element and we have the first element because this is a an array which is a list so that's going to be zero uh so that is string atom type let's call that atoms nope let's just call it atom uh atom tape equals that and then string connections level data dot levels level index dot atoms oops atoms that's um one um and then we need to have public game object um and this is going to be atom prefab uh we're gonna say um bar go equals instantiate uh atom prefab go.transform.position position equals mu vector 3 x 0 minus y um we're not going to add the squares but we do need to add the pieces so to do add pieces but we do need to set the values so we need to do is go dot get component atom setup shape and then the shape is going to be the atom type and then connections okay now we need to set up a couple of things there so uh i just want to make sure this is working and then we can we can do that um okay so uh what do we have here we have our atom let's move that to characters and then look at the canvas look at the main camera then we get board manager and then we have our attend prefab so we need our atom prefab to be dragged and dropped to there and now we run it and there we go there we have her our pieces which is fantastic okay and you can see that that's blocked because uh that's the way that the the cursor works because it's blocks against the game piece um the i think the ages and things are a little bit too big but that's okay uh we can work with these these this is good so it's coming together okay um so the idea will be that when you click on rather than using the cursor key you can use the that there so which means that we can make it for a mobile phone or an ipad or you know android tab whatever your your poison is um and then this one here quite like the way that overlaps those those there um we can then uh move these valley move these just by clicking on them which is nice um but yeah that's that's good so we need to know what the pieces are so um we need to give it the tag as well so uh let me also pass in uh the actual atom that it is as well um okay because i need to know i need to know the the index of that so i'm going to pass in atom separate to that or at the same time as that so if we go to this definition here and i'm going to call this um index ref uh and then i'm going to say um public string index ref um tooltip this is the reference the when condition um i'm okay with it not hiding inspector just know uh so i'm going to say this dot this dot index ref equals index ref all right so when we're on this now uh we should have that index reference there uh so if i go to uh atom clone here we have our index ref which is one atom clone which is two and then the other one should be three and there we go three okay sorry so now the next big thing is to click on it and display the arrows and the arrows i'm gonna go with are the ones that we used um in the lunar lockout game and it was good enough for that it's good enough for this so uh that's what we're gonna use next so um uh i'm gonna end the video just now um because i think this has gone on going on far too long i think this is i think this is probably a good place to stop it to be honest um and we'll do the click and in the next video and also get rid of the cursor thank you so much for watching this video i'm actually really enjoying this project so thanks again for the suggestion there um if you like this video then give a thumbs up if you didn't like this video give it a thumbs up but please let me know in the comments uh what you didn't like and how i could improve and maybe not be as rambly if you got this far though uh it would be great if you could like the video and share it on social media because it really does help the channel out and if you like what you see and you want time the reminders of when something new goes up then hit the subscribe button notification bell and youtube will let you know but yes thank you again for watching and i will catch you in the next video bye-bye

Channel: Sloan Kelly

Views: 149

Keywords: gamedev, game dev, game development, unity, made with unity, unity3d, retro, retro game, retro gaming, make games, coding, programming, c#, c-sharp, csharp, remake, retro remake, retrogamer, retro gamer, atomix

Id: IF6bwGyC9CA

Length: 54min 41sec (3281 seconds)

Published: Thu Dec 09 2021