Coding Blockchain MMORPG Game [Runescape Tibia Clone] - Moralis Web3 Programming

okay guys welcome back to the channel as a kid this is a bit of story time as a kid i was fascinated with runescape and the reason is because i learned so much you know i learned english from runescape as a kid you don't know a lot of english you start playing games online world of warcraft runescape you learn english so that has been a huge impact but also i learned so much about tracing you know on runescape you can trade with other players they have an exchange so if you want to buy or sell different items you can use the exchange and everyone else is using that exchange so it's kind of like a binance you can say for runescape items so you learn a lot about trading about economies flipping items doing quests you're a knight you can go you can hunt dragons you can kill different monsters you can go fishing boot cutting fire make i mean it was a lot it was a lot and so i played this game for a very long time and really what got me into programming was runescape because at one point my account was stolen by the way runescape and gaming also teaches you about security how to ensure that the scammers don't steal your account because as a kid i learned this the hard way because somebody stole my runescape account so my runescape account was gone after years of playing and so that's how i got into programming because i thought hey let me learn teach myself how to create games because it's amazing that's where my motivation came from and so in this video what i will show you is how we can implement something like runescape you know cloning runescape like the title says in morales because morales is the blockchain framework where you can do things like this as you can see this is a real-time game i'm moving around this guy right here i'm logged in with my ethereum wallet with metamask as you can see i can walk around now if we switch to this guy you see this guy is logged in with another address also through metamask you see so this is basically crypto runescape it's a bit early version okay it's a bit early version you can easily add yourself if you use the link below you find the source code you can easily add yourself different features like you know trading fighting this and that right now this is just bare bones stuff where we can have real-time game and it is saved on the blockchain all right it is the state of the game is being persistent so i will show you how this is done and maybe somebody of you can prolong this project you can fork the project of github you can add more features but let me first show you how this works and how this state is being saved in a decentralized way and what you can do in order to expand on this and like i told you this game is built with morales if you really want a nice motivation to learn morales to learn how to build web 3d dapps cross chain buzzers ethereum binder chain massive moon beam plasma whatever you want and if you want to learn that you need to learn morales and right now we do have a hackathon with a 50k prize pool if you come first we give you 30 000 that you can use in order to grow your business grow your idea grow your project second 15k third 5k so use the link below sign up if you ever had an idea for let's say a game a crypto game a blockchain game or something some kind of other idea uh you need to learn this you need to learn moralist because here is where you get nice juicy prizes so read the official rules use the link below and join as soon as possible this is the best motivation ever ever to learn this new technology and not only can you win this this technology is gold's worth i mean it's invaluable to yourself because as a developer you're powerful you know morales you are the most powerful developer in crypto because you can build anything you want even real-time games you can build and so as three engineers before building something we have to discuss it we have to think it through and we have to draw it because if you start building without a plan you will build a mess so let's do that let's talk about the different problems that we have building something like runescape okay and unchained runescape how do we do that i mean the first thing we have to realize is that we have many big areas that could be a bit problematic for blockchain i mean the first one is of course real time communication you see that whenever i move my guy here in this window he moves in the other window this is very heavy this is very heavy when it comes to networking this is very heavy when it comes to computation and we have to ask ourselves does this need to be unchained or not because it is a trade-off when you're making a game like this it's a trade-off i would love to put everything on ethereum i would love to have real-time communication on ethereum it's not possible so you can think for yourself how how you would do real time communication and i will show you how i've done it the next problem is how do we save the state of the game meaning that when i log out from this game and i come back in how does it know my location how does it know which skin i have because you can see this guy is a ninja this guy is a viking so they look different this is saved of course in the state of the game so how do we save that do we save it on ethereum do we save it on ipfs do we save it on binance chain what is the best solution you can think for yourself a bit i will show you my answers because at the end of the day we need to really be asking the question what is truly needed to be decentralized okay what do we actually want decentralized what do we actually want censorship resistant and so forth i mean one important thing is of course the location where i am in the game is very important okay if my character is moving somehow without my consent maybe there is a bug in the game whatever you know this should be on chain where i am in the game world should be on chain because it's a very important thing if i'm suddenly for some reason teleported into a dangerous area where there is a lot of monsters shouldn't happen so location i think is very important that the game remembers where everyone else is in a decentralized way so that also other people can build their own front-ends you see if the location data is on chain someone else might come and build another front-end for this game okay they can host their own front end because all the important data like for example where everyone is on the map it's on chain you can build your own front end so location should be unchained uh items obviously should be on chain uh what else skins what i wear you know what i have equipped should be on chain and if you think about you think about it that's basically it you know location items skins should be on chain this should be decentralized now do we need real time communication on chain i don't think so because number one is not feasible so it's not even possible and number two is not that important you know i don't need all of the data for example exactly pixel by pixel how this guy is moving from this position to this position pixel by pixel animation does not have to be on chain he can move to this position and this can be saved on chain he can move here now it can be saved on chain so with regular intervals we can just sync the state of the game on chain all right so that's very very important then we do have a few other problems how do we handle authentication how will the players login and so on so forth so here is my solution how i've done it using morales i solve most of the problems number one authentication with one line of code my users log in and they have them in the database i have all of their previous transactions i have all of their real-time transactions and so so forth so authentication is morales number two how do we do real time also morales it's so simple you will soon see in the code it's so so simple to do real tensions real-time events in in morales as soon as they click a button everyone else who is in the game knows that they clicked a button so real time uh communication will be through morales um number three ipfs will be used for decentralized storage why because this is free okay i could have used eth i could have saved the state of the game on if it's going to be very expensive or binance chain or matic there it's all possible but only ipfs is completely free and it's one line of code with morales you will see how short this program is you know the source code of this program is very short why because morales does all of the heavy lifting all of the real-time communication ipfs authentication with ethereum with binary chain with matic man is so simple so simple so this is the plan and that being said guys let's look at the code now before i show you the code of course there are always ways to make this code even better there is some code duplication there is some better ways of writing you know it's all good you can go to github you can you can make pull requests okay just to get that out of the way and i will by the way i will show you some bad parts of the code that you can improve if you want because i know that look i know the different parts that can be improved but for me this small project with the game to demonstrate how it can be done is more about getting things done okay and then we can optimize together on github okay the first thing look here at the left it's called escape kind of like runescape but on ethereum because you log in with ethereum the first thing you see is the images so here i have the different assets for example i have the viking i have this other viking i have the mage i have the other mage i have archer or ninja that you saw and some other ninja so i just took some you know random assets uh free assets because these are the ones that will be used for the character then i have this this is the game map that you saw it's just an image an image of course if you're building a serious game you would not just have a static image you would have a tile map you would put this buildings in a programmatic way but this is not the point here is the point just to show you how it can be done real time and so forth and then we come into index.html this is the actual website the file with the site that has the game as you can see we do a lot of importing as with all websites first and foremost we have the morales we have web3 this thing is not needed because we're not even using it anymore like this then we have the phaser graphics library so to do graphics we use phaser it's a very nice library you can you can do anything you want then we import our two scripts number one morales number two game js so these are the files this one and this one that are that are used for all the logic so all the logic is there then we have some stylings so let's see some css let me actually check what it is it's just oh it's just this style of this button uh right here login logout and also this text so it's yeah it's very very simple okay so if we go to game.js here is where most of the game logic is and the first thing you should pay attention to is that this game is just 300 lines of code it's 300 lines of code in game.js and in morales.js is just 40 lines of code so as you can see i mean this game it's very very easy to build why because you have great tools such as morales okay that's why it's so easy and let's go to morales.js first because it's just uh shorter and it will be easier to grasp the whole thing first we initialize morales then we have a function for logging in so when the user clicks login we just run morales web3 authenticate and the user is logged in he gets his metamask and when that's done we get an entry in our database for that user the same is with logout very very simple and here is some ui stuff so that you know when when we load the page we should check is anyone logged in if so we should display current user and we should display their address so this is this thing right here that we put this information and if we are logged in we should not display the login button but we should display the out button so none is that we don't show login and block means that we do show so it's like block display so we do show log out we don't show login and vice versa if we don't have a user so it's a man it's so simple so simple so this is morality.js if we go to game.js it's a bit larger i mean here it is 300 lines of code the first thing that we can look at is just the setup here and this is standard phaser library configuration phaser is the graphics library so you just specify the size of your canvas type this one was quite important for me i had to pick phaser.canvas because if i pick something else like auto or web webgl it it was a bit laggy so for all of you who experience a bit of lag using phaser use phaser.canvas as type so i have some variables here to to make the game work i load all assets like this i have a function here to ping the server okay and basically the only thing this does is to increase the latest ping for the player so that the game knows which player is active which player is not active so that it doesn't have to show inactive players to all the different users that are in the game alright so if i haven't been online for an hour the game will hide me from the map from the map and the screen of everyone else to truly understand this game you need to understand how it's organized on the back end in moralist so what morales does for you so whenever you log in your user and if they log in for the first time they will be added here to the user column and you can add different data to this to these columns like for example username if you want you can add some extra data but instead of storing the data like location here i store all the player data in a separate table right here player data so here's where i store location here is where i store the skin of the player latest spawn time latest ping all of that and the reason why i do it here is because we need a way for outsiders to be able to view this data but without viewing the sensitive information about the user because here in the user class we can store sensitive information like for example email address some kind of other sensitive information but in the player data where everyone can read and see what's here we don't want to store sense information here we just want to store information that everyone should know so let me remove by the way this bam so these rows right here represent the location the skin latest spawn time all the public data about these users and i can click on the user i can get to the user i can click on this user i can get to this user now whenever i move so let's say i go here to this right here and i move bam bam bam bam so this guy i moved i refresh here as you see the location here changed as you can see it's nine seven five i move it a bit by my mum i refresh now it's 1200 1200 so this is all updated in real time this thing right here what we're looking at here is not the blockchain this is in morales okay this is just morales how do we save it in a decentralized manner because this kind of thing like location skin i want in a decentralized way i don't just want it here on the back end i want it in decentralized way so as you can see it's very simple if you scroll all the way back here to the bottom you see that we have the save state function what it does is that it queries the playerdata class and playerdataclass is like i showed is the one on the screen right here so it just queries everything that is in this class um it takes out the user the location and the location y location x the skin and then it creates a file out of it like this it's just one line of code morale is that file and then it says file that's saved to ipfs and that's it and then it is saved to ipfs this is how easy it is to save things to ipfs with with morales very very simple you just take a json object like i have here uh state to save i populate state to save here and then i just write save to ipfs and that's it and that's it so that is how that's done so we do save the state in a decentralized manner now if we go back here to ping as you can see the only thing i do here is that i fetch the user data and then i just update the ping time latest ping and that's it and i do it each and every two seconds i have a function here for spawning the user so when i want to put when i log in for the first time for example i ping the server and i tell the server hey what is my location x location y so i get it from the server and i draw i draw this on the map and this is done for my user and also this is done for all users that are communicating with my client so when some other user joins spawn user will be used in order to fetch their location and then to draw them to draw them on on the screen this is spawn user [Music] we have the create function right here is just setting up everything like adding the background page placing the user current user and then what it does is the real-time communication part this is very key here is where we watch for any change in player data class this is very simple with morales as you can see we just write like this we create query variable and then we say hey watch player data and we create a subscription and then whenever something changes we get updated so here whenever something changes in this table right here in this class all clients will get a notification all so this is how simple it is with real-time communication it's dead simple with morales you don't have to set up your own sockets you don't have to do anything you just write hey class name and then dot subscribe that's it so here we get all the updates as soon as we get an update we either spawn a new user because if a new user joins and we haven't seen them before or they're not on our screen yet we spawn them and if they are in the screen then we move them to the new location that they have so i have this this array here called destinations and destinations holds all of the positions of the users where they are supposed to go and then what the game does is that it animates you see when i click this you see this animation this animation is just client it's client-side the on the server side the player is already here okay but on the client side we make a smooth animation because when i click the button boom on the server side it already knows that the you know the guy is here already but on the client side to make it nice we make a smooth animation but otherwise if we didn't have the animation it would just be choppy so we have here we go for all players we check where they are where their destination is and we move them we move them towards their destination a bit at a time you see we have this speed variable that says how fast we move we check so that players don't spam they cannot spam moves there is a cool of time event cool up so they can only move each and every 500 milliseconds and then there is some you know some code for making the moves work here is um where we actually move you see here uh if we can move then we update it like this and that's it basically guys this is it it's a very small game and this is how it works next let's discuss how it can be better and how you can extend the functionality how can you add a trading how can you add items how can you make the world bigger because right now the world is quite small i mean if i just go here if i go to the edge of the world what happens well i just disappeared so let's start with trading because i think items are very very essential part of any rpg game right now this game escape it doesn't have items it's just characters moving around but how can you add items if you're interested in figuring that out [Music] what you could do is to build a store all right so let's say that this right here is the store where this guy can buy items so what i would do is that i would put some kind of collision box around this and you know in phaser it's it's very easy to do collision box so you can just um you can just search for all kinds of um phaser physics let me actually find it you do collision box around that thing and they have a very nice documentation how it can be done with this library and when the player hits the collision box you can pop up a menu telling him to buy stuff so maybe he uses the if in his wallet to buy some gold coins or some sword or something and then you can use morales in order to see what kind of transactions what kind of items a particular player has because it will be instant in the morales database as soon as the player gets an item on chain it will be seen in morales all right that's how easy it is i mean that's the power of morales and when that happens you will get an alert through live query so you can use a query like i showed you you can subscribe to a query and whenever something happens like for example a new item is being added to the wallet of the user you can you will get this event here subscription update event and then you can add a sword image to your user you can just replace the image of your user for example you can solve it in different ways but you get the point the fact that with morales you can view real-time transactions even with nfts and so forth i mean it's quite easy then of course you can have so that if i right click on a player like this there is a menu that shows up where i can trade and then when a trade happens and i transfer the nft with my meta mask it will also be seen in morales very very quickly and you can then change the the outfits of them if one item went to the other guy he can he can get it so yeah i mean the sky is the limit here that's that's how i would do items then of course how do we do the world bigger how do we do the environment bigger because right now if i move to the edge like you saw i just disappear here is where we need a way i would do it with ipfs most probably where we map different backgrounds to different positions because the client just needs to know that all right if the player is beyond a certain area like if the player is right here what kind of image do i put in the background so we the simplest thing to do would be that if the player moves right here that the whole background just changes instead of doing scrolling you know instead of doing some more complicated things like you know animating the camera and scrolling towards the right or scrolling towards the left if you want a simple solution that is fast as soon as we move outside i would just replace this whole background with a new background and this information comes from ipfs i would put that thing on ipfs so basically in if player is between these coordinates on the x-axis and y-axis use this background if this course has used this background and then it's very easy for the client to stay update so i would do that i mean just think thinking about some low-hanging fruits that can be improved and added so we can have a bigger world then of course i mean a big thing here is that all of these buildings they're not real buildings it's just back the same image as the background so how can we make that better well we need basically an array a list of items and their position in the world i would also put that on ipfs to be honest i mean all these things i would put on ipfs and pin it so whenever the because the only thing the game needs is the location that's it and then it can place everything else on the client side so there are some ideas guys please don't forget the fact that we do have a huge hackathon going on right now with morales if you want an idea what you want to build maybe continue building this game guys uh because let me actually show you morales io hackathon because you can win thirty thousand dollars the the price pulled together is uh 50k but first place gets 30k second place get 15 third place five use the link below and sign up you have two months to build so the deadline is july 15th there are many ideas if you use the take of any of our partners you get extra points so maybe you can integrate for example viewer labs into your game because they have good apis maybe you can do something with one inch maybe you can have you know the trading somehow go through one inch where you have the game currency list zone look you are the master of your destiny you are the master of your creativity of your ideas so figure out something you have the most powerful tool in the world for building dapps which is moralist real time games like even if you don't want games you can build websites you can clone ether scan we have a full youtube channel about morales use link below use your brain and i'll see you all very very soon have a good guys have a good guys day have a good day guys and goodbye goodbye goodbye

Channel: Ivan on Tech

Views: 28,674

Keywords:

Id: ZiLeVVeo19I

Length: 28min 53sec (1733 seconds)

Published: Sun Apr 11 2021