Build a fully onchain game with MUD in 20 minutes by Frolic | Devcon SEA

[Music] hello hello I'm Frolic can you hear me good great I'm uh one of the core developers of mud um we're going to attempt to build a non- train game in 20 minutes it's kind of a lot to ask uh we'll see if it's a actually a game by then but um so this is meant to demonstrate some of the uh stuff we've been working on um didn't quite have enough time to make this a fullon template that you can use but um yeah we've got a a template project that we'll we'll clone from and just to save a bit of time I've already uh cloned it into my um personal uh GitHub account and also um cloned it here so let me um adjust sizing here real quick how's that look looks great thank you um okay so let's start this mud um project um this mud projectss generally come out of the box with a bunch of services um so when you run the dev script um actually let me quit out this and run the local one um when you start the dev script you get uh a front end server that's your client you get contracts you can see it's currently um evaluating all of our contracts and deploying them to our local chain we have our local chain and then the Explorer which you may have seen uh already um but we'll uh take a look at that in a second um so in our browser we now have uh a application um and if you've uh played with mud before at all um you might recognize this we we have a to-do list app as kind of our default application I don't know why you would put a to-do list app on chain but it's a good demonstration of of uh the kind of full stack and and really easy to understand um so in this uh demo we've already got um our onboarding flow wired up so I'll sign in here uh create an account with a pass key and then right now behind the scenes it it gave us a gas allowance and then it's setting up a session account uh the session account under the hood is basically a local signer that signs all of our transactions so we don't have to confirm every time uh with a wallet popup um so we're approving the the session account and now we're good to go so we've started our new project can tick that box great job uh and we will uh next open Explorer um to kind of show you the the local flow there um this is both um able to run locally and um uh once we deploy we'll we'll show it there as well but um you can pop this open a new tab when you're running locally but I've embedded it here just so we can see it a bit easier um so we can already see uh our task table um we've already got the uh the first task completed U Mark is completed and if I connect uh I can actually edit start editing code so if I want to uh change this back to zero I can you can see it unticked and then if I uh check this again we can see the the Explorer update automatically um and similarly if we want to interact and call the complete task function um we can do that here it's the first task oh actually it's completed so let's reset reset task uh and it it um reset it and then we can complete it just calling these functions to the Explorer and it completed it and then as we um check and uncheck we also get a live view all of our transactions floating uh flowing through our world um here which we can then inspect um and and see all the uh mud logs being emitted um including the user operation so every one of these uh transactions is a user operation 437 user operation um so everything is wrapped automatically for you sent to wires saww confirmed uh very rapidly um and yeah makes our our we uh web app super responsive um so let's try oh we did the explore great um let's try to build uh sorry I'm not used to these full screen things so just a second there we go okay get this running locally again get the code editor open great okay so everything in a mud project starts from your mud config this this is where you define um your tables and uh your schemas your data model um we use a very familiar approach uh like you would with a database uh you have a a list of fields in your schema and then you define basically a primary primary key which can be one or more Fields uh so in here we've already got a task table for our to-do list app um next for our game we're going to add a position table so every player has a position on the map and they can move around uh so we'll do that here schema so the first thing we want is a player um this will be one position per player and then we'll have an x and y coordinate uh and then our our typescript is telling us um everything in mud is strongly typed um so typescript is telling us we're missing a key uh so we'll add that next and also we can see auto complete kind of reminding us what our fields are in case uh you've forgotten um and behind the SC as I'm I'm typing this and saving uh m is actually rebuilding the project um so if we look at our uh Dev contract script again um it recognized that there was a file change in the config uh it reran the dev Runner I think it actually already found our position table up here let me see if I can find it oh yeah so um up here when we saved the first time we had the uh existing uh task table um and then it recognized that we need to register a new table so it's uh ident I I don't know how to say that word um and every time you um make an update to your mud config it automatically um figures out what it needs to deploy whether it's a a a table or a system and and runs it for you and then we can also see in the Explorer um if we open that up uh we have our position table already but there's no data in here yet so um we'll do that next um okay not sure why oh because I restarted the server so everything redeployed so just a second so we got the um Explorer going with a new project out of the uh position table um but we haven't been able to do anything with a position table yet so let's add a a system so we can move our player um so we will um let's see in our contracts add a move system and I have some code sorry uh I have some code here let's copy this oh oh sorry hang on Okay so I've copied over our our task um system but this is going to be a move system so we going to import our position table um uh call this move system and we'll paste in our code uh sorry function move uh direction direction and I'm realizing actually I forgot to Define our our um Direction so another thing in in mud is um being able to specify enums uh so I'm going to do that now uh Direction and north east south west great and so then we'll import direction from Cen common and again behind the scenes mud is already um generating code for us strongly typed um solidity code so we don't have to worry about that uh this is a public function okay so we have our our move system hooked up um let's see in the Explorer if we've got that in here now so we're going to go interact um app see move no something's oh no demo gods uh so restarting one more time just to see if this um helps uh we've just redeployed to Anvil again with a fresh state so take all these see if the move systems in here no what's going on move system okay so I think it's in here um we'll just uh keep going um so after our move systems all wired up um we need to um render our players and our um our game map so that you can move around on the map so I'm going to open up our app here um I'm going to import our game map component it's not going to do anything yet so we're just we've got a blank um map for now um but we'll start by getting our players uh we have a new State library in mud called stash um with a bunch of react hooks um this one in particular uh is called use record so it will give us a list of Records these are automatically synced for you uh from the chain so all the data that we need is already um available so we're going to use our stash we're going to tell it we need a table and for that we can import from the mud config uh from M config and then just to save some time it um remap this mug do name spaces app do app. tables okay and then tables. position is what we want so we have all of our players and we're going to pass that into oh we got to import this too okay so these aren't doing anything yet um actually let's see if we can open up the Explorer and give something a position oh I think because we don't have our um move system available I can't actually set the position very easy yet easily yet um so we'll just move on to the um the actual game controls which will allow for keyboard movement and tap movement um which you'll be able to play with on your phone in just a second um so for that I'm going to add uh import the world contract um if youve use VM it's essentially a a uh strongly typed uh world or um contract object that represents our world um so we will import um that using this hook which again will be available uh from mud soon and then on here we want on move I sync and then I'm just going to check the world contract because it it needs to load um some data so it's not available right away so we're just gonna uh throw if if it's not ready yet not ready and then we're going to get a transaction back from this so we're await World contract right. app move okay so we can see our move uh our move system calls here so we're going to call move um VM when you're calling a contract takes in a list of arguments so that we want um in our move system we have one argument uh which is the direction and actually the first argument in this um on move uh call back is a direction um you can see NorthEast Southwest so if we try to pass that in here it's actually not going to work because this is expecting an enum um fortunately that's available on our config as well um actually we'll just use it directly here so mud config enum values do direction. Direction so again um all the strong typing is is uh helping me here um it it autoc completed uh this direction enum that we added and I passed in um our Direction string which then mapped it to the the actual enum value um which we want for our contracts uh and then we'll just log transaction is this so we should be able to move around yay we built a game okay so so today um mud templates you can do this um but then there's not a ton of guidance uh for like how you get to the chain um so another big Improvement aside from onboarding is actually like getting getting you on on chain and making it a real app um so next step we'll uh deploy so pray to demo Gods going to deploy to Roto light which is where we have all this new uh Tech running can you show what this script does deploy rot light yes uh let's see deploy rot light it grabs a bunch of stuff from our umv file and right now that's that's pretty basic uh specifies a chain ID in RPC URL uh and then um calls out to this impro file which we don't actually need um we had some more stuff running here but um I'll just show you that's one thing and all it's calling is is mud deploy with an RPC EUR um that's basically it um internally on my system I also have a um environment variable set for my private key um that access my deployer um we are also working on allowing you to deploy with um user operations in the same sort of onboarding flow or the the same rails so basically you will need uh you won't need to um Bridge any funds or or whatever you can just use the the daily gas allowance to to deploy contracts um so we've got a deployment here um we we can now go look at the real life world Explorer uh let's see Explorer dodev enter in oh jeez enter in our contract address explore the world so we I think it's said to Garn it oh yeah thank you yep there we go so we got our um task list up and running and we also have the position table and in here we can should see our move function move yep great and we can move north oh hang on oh I I'm not going to connect here but um we'll show you in the the the live app Okay so we've got our Roto light deploy um now we're going to actually upload a front end here so we're going to build for rotolite this basically just binds the chain ID into the um client application uh and then we'll just do a quick drag and drop into uh netlify they have like this drag and drop um static file uploader um doesn't require any sign up uh you can use it a couple of times for free um I've actually already signed up and set up a uh Workshop uh domain so I'll drop it in here uh let's see open so I want the d file going here uploading I don't know how slow the Wi-Fi is right now and um in the meantime if you want to open this up in your phones um workshop.

mud. deev it should show you the same thing you can ex uh test out this new onboarding flow um create a pass key sign in uh get some free gas and then uh start moving around on the map um you can also check off items if you want to check off items let's see our deploy okay published great so we'll go through that sign in process again since we're on um a new domain it's asking for the pass key again setting up the session wallet or the session account and now we're in oh I see a bunch of people already playing that's great refresh real quick great there we [Music] [Applause] go do you have time for questions is it it's question time um Can a switch to question screen so just like before um scan the C code ask questions um okay so while while while better questions are being asked or not better questions but at least votes are being casted we'll start from the top Fric are the tables relational uh yes and no from the onchain perspective we're still using um Native solidity essentially mapping so you can think about it more as a key value store but the data is modeled in such a way that allows us to then index the data in a relational way so that you can query the data um we have a query API that um isn't demonstrated here but the indexers that are running on our on our chains is a hosted indexer that supp a full SQL API um so you can run relational queries as you'd expect there and and get your data thanks to Ryan from index Supply um the next question here is what is stash in use records yeah so I I kind of breeed through that a little too quickly but um stash is our new uh client store it if you're if you've used mud before it's going to going to replace RS and zustand um but it's a high performance um client store that kind of fuses the functionality of both so you get um all the benefits of each under one one um Library um okay so we we'll we'll skip the trolling questions what is rotolite frolic R that's a question for you rotor light is our um our chain running uh our devet chain uh running all this new query infrastructure um available now but just to caveat that it's likely to be reset restarted go down down as we play with things and stress test yeah so so while Redstone of course is in a production environment Garnet is or teston that is also in a production environment and Redstone sorry rotol light is a Dev net that is not in a production environment so it will break it will be restarted but that's where the the bleeding edge of the stuff we're working on can be found in um I don't think we have any more questions left there's there's more but we need to to can we scroll the questions cuz the top question is bugs and also you guys are not taking off the questions we've answered so we need to remove them oh there go oh my God all right first okay can you use mud as a library and build a meta framework over it like react and next uh I'm not mud so we build a lot of in addition to the the solidity side we build a lot of JavaScript tooling um so it kind of is already doing this it's it's sort of a framework over the top of of JavaScript and we um use internally we use react a lot so we build a lot of react tooling on top of it as well um but you can use it on basically any framework um and I'm sure you could build a meta framework over top of it if you wanted to as well I'd be curious to know what your use case is so um yeah does CCP Games Team build kind of a meta framework on top of M yeah that's true like their their um smart object framework and yeah will we hear about that later today we will hear indeed about this later today so please stick around um so okay here's a new one what are some of the primary reason for us to switch to onchain game development foric I personally love uh building on chain because I don't like running backends so it means that I can write some code put it on the internet and it will run on the world computer forever as long as people are willing to pay to play Within the game so that's my reason sure there's many more and registering uh Securities yeah these are the two reasons I'm joking [Applause] um okay I think we're done um thank you for allik thank you so