CREATING, HOSTING AND ADDING JSON FILES INTO YOUR UE4 PROJECTS USING VAREST PLUGIN (ALL FREE)

and that's pretty much it we can now go in and we can say the top left is going to be jonathan so that's zero and just to make it easier to see set this to one two so now when we press save current and then press play you can see that they actually update and populate all that information in there for us so hey everyone welcome back to another video so in this one we're going to cover a topic which i don't think very many people know about and that is how we can bring in json data from a online server into our project and update information almost in real time so in this example there will be a five-minute delay between changing the information on the server and then having it update in unreal engine but other than that the entire process is free including the plugins and the hosting so that's something we're going to look at into this in this session and before we get started the first thing we need to do is actually open up unreal engine or epic launcher and go to the marketplace so in here we're actually going to use a plugin called va rest so va rest if i can spell it properly there it is and you see here i've already got it but it's free and all we're going to do is make sure that we've got that downloaded so when you open it and once you've downloaded it you should be given the option to install to engine i already have it installed in 4.26 i'm not currently using 4.27 at the minute no particular reason just don't have it but as you can see it's not actually functioning with 4.27 yet so this works from 4.11 to 4.26 now imagine if you recompile it from source you might be able to work with it and there is a link to this plugins github in the description below so what you can hit install you see it's only given the option 4.25 i've already got it installed 4.26 so i'm going to leave it from there the next thing i'm going to do is jump over to our library and you see i've already got a demo project i've already set up but what we're going to do here is just launch a new 4.26 project awesome so same thing goes as normal we just need to create a new project if you already have a project set up you can just actually open that one and it'll be fine but for this example i'm going to use the first person template just because it's a little bit easier especially doing a tutorial and then we can actually go down to find first person tutorial first and then we hit next i'm just gonna do blueprints maximum quality disable everything else yeah i'll keep it as normal and then i'm just going to make a new folder i think i actually have a json tutorial folder so we'll do [Music] gtxr jason fit up not exactly the best folder name but we know what it is jason tut and then we create project what i'll do is i'll move the window over slightly to the left so you can see it but in the bottom right hand corner what you should be able to see is a setting that says manage plugins so i don't know if this is going to attach nope it's attached to the bottom screen so if i disable my video quickly you can see it there just in the bottom right and then all we're going to do is hit manage plugins and then we could scroll down but it's just easier to search for year rest and we're going to enable this once you've done that it will just ask you to restart the project we'll just hit restart and with that all done we're pretty much ready to go in working with our json files so to do that going to use a website called json editor online dot org it's free and it essentially works as an online ide so in a great development environment but specifically specifically for json so it will tell us if we got any mistakes for example if we move this we'll see that we get an an error and it's telling us what it's for so this is an example that i've wrote previously for the the blog post tutorial which will be linked down in the description as well but it's important to note that i won't be going full in depth on a json tutorial this is just a brief cover okay so before we start actually writing some java json it's pretty good to go over what json actually is and json is a javascript object notation which is an open file format and data interchange format that uses human readable text to both store and transmit data objects consisting of attribute value pairs and arrays so basically it's a list of information that a human can read as you can see here we can read what's on the screen and the computer can also read that it's from what i understand it's normally used for web development and server communication so it's designed for things like e-commerce stores or websites which just need a variety of information that needs to be updated regularly but overall it's basically just a list of information that both a human and a machine can read and that's that's essentially what we're going to do we're going to use this to write our own json file format and then we're actually going to you tell unreal to look at a website and then pull this information from it and then read that out with inside unreal engine so hopefully that makes sense as we start writing some of this out it should make a little bit more sense but rather than going on forever it's probably best if we just take a dive in and start looking at what this information is so if we take a look at this we have essentially a section called user info this is going to be what we use we're in unreal we're going to say look for user info and then we'll look for arrays inside of it so you can see here we have our square bracket anything inside a square bracket so we have one here and one at the end here is classed as an array so any information in here can be made into an array so if you ever read the json file look out for the square brackets that will help you identify what is essentially the information you need and then inside you can see we've got our user id our first name surname a player description max gold and a team i just added these in so we have a variety of information that we can look from and pull the information directly from don't worry we'll actually write this out again and we'll go over it but some of the things that are important to note is any string or text value is surrounded by quotation marks followed by a colon these are what we call objects and it's essentially a key followed by a value so a key value so our key is user id followed by our value of zero first name and then our value and it's important to note that we have six different types of information that we can actually store in a json file strings which are text we then have numbers which are obviously numbers they could be whole numbers or digits or 0.1 0.2 for example followed by booleans we don't actually have any booleans in here but we could do and that is essentially just a true or a false value we then have something called a null value for example if this user id this user wants so terry doesn't actually have a team we could put null in here so we change this to no and then it'll tell the file essentially that there is no information here we don't need to use it so that's just one way that we could use a null and then the fifth is an array so we've already looked at an array so we've got it here open brackets and then n brackets so anything inside of this is part of our array and then finally we're followed by our objects which are these ones here so our user id followed by our and it's important to note that inside of json files you can actually have nested arrays so if we wanted to have another array inside of these arrays we could do that but that gets more complicated and we won't be covering that in this tutorial but some of the stuff to cover on an extremely basic level is that we do need to start with open and close brackets and then anytime we add some text or information or a string we need to add our quotation marks followed by our colon and then we can have the information we want followed by it and at the end of any information inside of an array followed by a comma because we're essentially saying user id equals zero comma is going to be the end of that information and then we're starting another section inside of an array and you can see here that we actually don't have one on the last line it's because we're not telling it that there's any more information afterwards we're pretty much saying that's the end and then our ray has another comma which then says we're starting a new array of information so that's pretty much it for the basics of a json file let's actually close or remove all of this and then we'll actually write a new one so first i'm going to do is start with a open and close brackets and then we're going to hit enter and you can see here if we just do the same thing so we'll do user info but we'll go to surrounding by quotes we'll do user info and we'll have our user info followed by a column and then we're actually going to say all of our users are going to be inside of arrays so if we just had one lot of information we could then just leave it as a string but i want to do a square bracket i'm going to hit enter and that's essentially going to say that we have any information here will be an array we're going to do a curly bracket we'll hit enter and now we can actually start adding in that information so what we can do is we'll do a couple of things but we could do so switch marks and then user id and then we'll do speech marks with our value or by you can see here that we actually have our information but one thing i want to say is i won't actually be using the user id for anything inside of unreal engine the reason i'm putting this in here is so i know which lot of information belongs to which array for example you can see here i've got four different arrays but the starting points in an array or code based system is zero so rather than starting at one two three and four you start zero so adding a user id just helps you identify which information section you're going to be getting from this is just something i find is a little bit more simple to understand which is why i add the user id and then we can start adding information such as our first name so first first name come on and then if we make sure the colon is after that information then we can add our name so jonathan and then go from there so you can see as we go through it we're just making sure that we're adding the necessary information so it's all about the syntax in the the order that it goes in but other than that you're pretty much good to go so we just keep going so surname and then we're gonna make sure we end each line with and each line with a comma so rather than go through and type all this in i'm just going to copy and paste this slot over just because it saves you having to sit through and watch me do it and you see that's messed up so we'll just move that back a little bit and you can see here that our array is actually on the same as our curly bracket you don't need to worry about that but we can move that down and i'm just going to organize it like that so it's a little bit neater and because we're adding another array so you can see here if i was to just copy and paste this now and we put it underneath and we say we've got another array either way you'll see that we get a syntax error and it says instead of curly brackets we need we just need to make sure we had f we have a comma at the end of our each array and you can see that goes away so now we can actually just copy and paste this as much as we'd like into our code so we can have as many erasers and you'll see that our last one doesn't need it because we don't have another array so that's pretty much it for this so i'm just going to copy and paste that over and then add in all the different information and the next step now is to actually host this online and to do this i actually use github it's really important to stress that github has a caching system built into it so when we update our information we have to wait at least five minutes for the system to update on their end before that information is pushed to the web page so if you're wanting something that updates extremely quick and rapidly you might have to look for another solution but for anybody working on a normal project e-learning arc phase vr that type of thing this should be a good enough system for you to use what we'll do is we'll actually copy all of this now so i'm going to copy this json code and then we're going to open github you will need a github account because we're going to make a repository and once you're signed in you just want to go to repositories new and we're going to give this a name i'm going to call this video or json video tutorial and you can see here we've got the option to make it public or private i'm just going to leave it public for now not really too worried about it so we're going to hit create repository and now in here we get the option to get started by creating a new file this is what we're going to use and what we do need to do is make sure we name this something rather than relevant so you can see i've got a couple of versions and what you don't want to do is make these the same name otherwise it'll get a bit confused so i'm going to call this json video tut and it's very important that we finish this line with dot json so we add dot json this will tell github that way we're going for a json format and what we can do now is just paste in our code into this file and now if we hit commit new file you'll see that we get a new folder or a new file in our repository and we can just click this and then we're going to use the raw so you can't copy this link which is what we'll do in a little bit or we won't copy this one you have to go to raw and it'll open this page and then we can actually use this link at the top so we copy this we can use this to call this information from our server so what i'm going to do is i'm going to jump over to our unreal project and i think what i'm going to do is set up some widgets that we can use to display this information so i'm going to just do a new folder called json widgets blueprint class actor vp underscore widget display and then for our widget blueprint just going to call this widget blueprint underscore jason or character info and now we can do is we can add our new widget so widget and then if we select it we want to do widget blueprint character none draw desired size and that's pretty much it for this we might need to actually scale it down so i'm going to do that in the widget i'm going to set that to 0.25 because i know these come in pretty large i'll save and now we can actually close that down and we could we could drag 4 into the scene but we'll set up our widget first so it's important to note that this the code for the the va rest system can actually be put into the level blueprint the character your game instance your save file your user widgets or basically any way you have an event graph you can actually use this plugin so it's pretty versatile and it's pretty cool but the first thing i'm going to do just so we've got some information display is just dragging some text boxes so this will be our first name first name and then i'm just going to duplicate these so we've got a couple so pretty much all i'm doing here is just doing some subheadings and if we add a background image because we can use that teams stuff we can set this up so we just need to change our font be black and then our background to be some kind of gray just so we can see what we've got and what i'm going to do is i'm going to make sure all of my widget anchors are centered just because it's in a 3d widget makes it easier and now just to save some time we're going to make sure that we've got everything sorted so if we have a look at our widgets we have our user id we're not using that yet first name surname player description max gold and then team will be using that in a second so we've got essentially a heading for each section now what we need to do is add some text that we can write out so i'm going to duplicate this once and then i'm going to rename these at the actual top details panel and then set to is variable so we can access these so first name excellent so now we actually have some values that we can modify and change so we drag in four of these into the into the world and we rotate them around we'll actually have four lots of information we can work with so we see they when we press play nothing happens they don't update and now if we jump over to our graph we can actually start setting up our va rest subsystem and first i'm going to do is actually search for va rest subsystem because we need this before we can actually get any access to the necessary nodes and i realized i should have kept the event construct so when we press when we press play this will fire and then it'll update the entire thing we're then going to do drag off our vrs and we're going to go construct vice spell it properly construct json object and what this allows to do is actually call our url so we do call url you can see now we actually have access to paste our web page in and we've got our verb set to get what we do need to do is set our target to our va rest subsystem and now if we compile and save you see we get an error that's because we're missing our callback but also we can now go to our raw github page where we have our information and copy this url so you can right click and then copy and we'll paste this directly in here and normally if you're working with a delegate system you can then right click and do custom event but this won't work it won't give you the the necessary information that you need see that we get an error so what you want to do is actually drag off the callback system and then search custom event and you'll see it actually creates a request input as well so we'll do json request just so we keep everything organized and now we start pulling in that information that we're looking for and we do that by pulling off the request and searching get response by dragging off and get response object and then now we can actually get our array field so in our information here we have our field which is our user info which contains an array so it's our array field it's the easiest way to think about it so what we're going to do is we're going to copy this here just so we don't have to type it all out to user info copy and then we're going to search get array field and what we do is we can paste that array field in here so we're saying look for user info it's filled with arrays so we're going to do a get a copy and then this is where our id comes in place so zero will pull in the first link in the array and then so forth and so forth you could do a for each loop and then populate all the information out as you need it to but for this one we're just going to select which array we look at we're then going to do as objects so you see here it says json as object and what this does is it allows us to convert that information into individual fields so we've got our arrays and what we can do now is we can search get string field so in our information these are all strings so we can actually use this so we can say get our field string so first name and then that will give us the information jonathan so we do a copy and i'm just going to do this a couple of times so if i move that to the other screen and then we know that we have one two three four five different lots of information so i'm just gonna do that five times and we'll do a print string for this one just before we hook it up to our information so we can test that we're actually getting our first name so just copying that in there so now when you compile and then we play you'll see that we get jonathan four times and we get that four times because i've got four of the same actor in the scene with the array set to zero we'll fix that in a little bit so now we know that we're actually getting our information into this project we can then go ahead and pack in the other sections and you see that we've got our team as well this is going to get this is going to pull in a value for red so what we can do now is actually use our sections to add this information to it so first name we find that one we can drag off and do get set text and we'll do set text and i'm just going to duplicate this four times because we don't need it for our teams and then we plug that in and we'll do that for each one so first name followed by surname the description max gold and then we'll plug these in so we're just changing the values nothing fancy and i'm going to hook these up so they populate after each other set you all down and for this last one i'm going to do something super simple we're just going to do equal string and if it equals red then we'll say it's going to be true and we'll set our image background color get set color and opacity so it's true we'll set it to red and because we know we've only got two teams the false channel will mean that they're blue i'll do a lighter blue dark one's a bit difficult to read and then we'll plug the image in there so now what we can do is we press compile and save when we jump into the scene all of these should load in with jonathan's information so we press play say it looks really awful but we're pulling that information down and then what we can do now is we can add a value to our get so we can call this player id hit compile and save and then in our blueprint i'm just going to cast to it so then begin play we're going to cast to wb so widget blueprint character info and we'll use our widget so get user widget object as our actual object and now we can set our player id so set layer id and now we promote this one to a variable as well we can now access this from our blueprint make it public so we can see it and that's pretty much it we can now go in and we can say the top left is going to be jonathan so that's zero and just to make it easier to see set this to one two so now when we press save current and then press play you can see that they actually update and populate all that information in there for us so that's pretty much one way of actually being able to pull all that data in live and if you do want to make modifications to it it's just a matter of opening up your github repo and then go into this little pencil in top right where you can actually edit so we can then name jonathan to jack surname brown enter i don't know pizza and watching movies and we're going to change our gold to 16 and we'll change our team to blue and then what we can do is we scroll down and hit commit changes that'll actually push this update and if you remember the beginning or hallway through i said that there's a five minutes difference if we go to raw file now you'll see that still says jonathan what you need to do is just wait roughly five minutes and then keep refreshing the page and as soon as that's refreshed the information will update in the project this is just one of those restrictions for github since they have so many people pushing information to the website it's just to stop it from being overloaded so if we wait five minutes and then i'll come back and then we'll be able to actually refresh and see this update in real time awesome so it's now being five minutes so if i refresh this we should see it update excellent and then we can actually just press play and we'll see that we have our new information in the scene which is super cool and it's a really useful way of keeping projects up to date so a way that i actually used this recently was for a client project where their website had a load of information that needed to be always updated regularly and then the vr application to follow the website needed to have information displayed as well from that and it was just becoming quite time-consuming being able to pull that data in make the changes and then push it back out so we used this to essentially do that for us and what that means is now on the oculus quest when they turn the application on because it's connected to wi-fi since you need a facebook account it actually pulls all that information in live and then can update just when you launch the headset if you did want to update this maybe every five minutes so if they were in the application and then you want to have that information pulled in real time what you could do is actually set up a timer within the graph so once you have this information you could then do a timer by function i believe so set timer by function name so once you fire it we get the json request so it's a request and because we don't know exactly when the five minutes will start we can set this timer to 30 seconds so once this goes every 30 seconds this is gonna fire and then it would update your information so that's just one way to have it cycled so if it is a live platform and you wanted to update when people are in the headset not just when they start it that's another way of doing that so yeah just to cover everything we installed the va rest plugin from the epic store then we created a project we used we used json editor online just to help us format our json file and our arrays together into the correct order and then we used github to pull that in so in our github we have our repository we have our video tutorial repository and in there we have our json file remember it has it has to have.json on the end and then you can edit and then host the changes and you just need to use the raw file link from the top of the screen to then pull that information into unreal engine where we then pretty much just have our system so we could also take this and then plug it into our level blueprints or something like that and something we won't do in this tutorial is actually posting information but you could actually modify you can use this system to modify json data on a server so let's say if you have a save file which is a bit of a weird one or more likely a settings file you could then post and host this file online which then other people pull down so that's just something to know about with it but that's pretty much it and before i go i want to say a big thank you to all of my patrons for actually making this possible as well as help from the discord being able to originally get this all set up and integrated so thank you to everyone for that and if you'd like to support videos like this or help me make more like that then please head over to the patreon it'll be awesome if not then we have a discord i think we've just got over 700 people in there now so if you need any help with unreal engine or anything along these lines of getting this sorted then please head over there and ask some questions but for now that's pretty much it stay safe and i'll see you next time bye

Channel: GDXR

Views: 12,835

Keywords: Gamedev, Indie, Indie Gamedev, Indie game Devlog, Game Devlog, Game, Dev, XR, GameDevXR, Blueprints, Coding, Unreal, Engine, VirtualReality, VR, ExtendedReality, tutorial, how to, how, To, develop games, making a game, Dev Log, beginer, Unreal Engine 4, archviz, architecture tutorial, beginner tutorial, basics, blueprint tutorial, blender, beginner tutorial series, coding, devlog, Jonathan, Bardwell, JSON, Java Script, VaRest, VAREST, plugin, Host, create, Github, GITHUB, PULLDATa, live, data, realtime, UEVR, bardwell

Id: _yJ7Qh_WykQ

Length: 31min 18sec (1878 seconds)

Published: Wed Jun 16 2021