Godot 3.2: Let's Build a 2D Platformer!: Part 17 (Exporting to HTML 5 and itch.io!)

hello and welcome part 17 of let's create a 2d platformer in the keto game engine my name is colin and this tutorial not so many series we're creating this 2d platformer video game of course in this game you control the player on screen using keys on your keyboard of course you can walk run jump and fall you can jump on enemies to squash them you can get hurt by enemies and lose lives you can collect coins to win the game you can shoot fireballs do wall jumps you know how 2d platformer games work as it stands at our project right now we have a fairly complete development build of our game project that means our game works as a game we have a character that can explore a fairly large level we can collect coins to win the game we can squash enemies of course and at this point in our game project in tutorial number 17 this one i'm going to be showing you how to take your game from godot the kettle game engine and export it into an html file a web page file and how to share it on the internet so people can actually play it and test it out on a well-known indie game website called itch.io if you have not seen ish.i o i'll be showing you it a little bit later in this video but let's go ahead and jump into the godot editor of course if you like this video or if you've done something in it please go ahead and click on that like button below this video it really helps out me and my channel and if you want to see more videos like this one in the go game engine or in blender or other technology click on that subscribe button as well and click that bell icon to be notified whenever i upload a new tutorial so as it stands in our project right now if i press the play button the game as it stands will play there is now music as of the last video in the title menu screen this one as well as the game level and in the game itself when you do certain actions like jump or land on an enemy to squash it or collect a coin you also hear a sound effect so i'm gonna press the play button now i'll stop talking and you'll be able to hear the music and the sound effects all at the same time [Music] okay so that is the game as it stands let's get to exporting our game if i want to export this project i'm going to go up to a project and export and it brings up this very blank looking export dialog box now godot itself is a fairly small and manageable program i believe if you go to godotengine.org which is this website right here hopefully this is maybe one of the options that you went to to get godot in the first place godot is only about a 45 megabyte download and that is true that is all you need to make a game but when it comes time to actually export your game you need to download and install what's called an export templates file and that gives you all the files where coudo all the files it needs to have in order to export godot into different platforms so right now this export dialog box doesn't exactly give me everything i need so i'm going to press close and i'm going to go up to this time the editor window where i have an option called manage export templates if i click this a new dialog box the smaller one will pop up where it says the current version of the export templates and i'm using godot 3.2.2 right now there is a different version of these export templates it's a big file you have to download for every different slight version of godot so if you're using 3.2.3 in the future you'll need to re-download these export templates okay so i could press download right here and that would work it would actually you know connect to the internet and it would find the version that i would need to download i can click on that and it would start downloading in my case i've actually gone on to kudos website so i'm going to press close because you have the option to install from a file so if you go to godot's website godotengine.org and you go to the downloads page i find this download is quicker if you go to this website and you go down and you scroll down on the downloads page by the way i'm using the windows standard 64-bit version of godot i'm not using the mono version because i don't need i'm not programming in c sharp i'm using gd script of course in this project if you scroll down there is the export templates standard and the export templates mono c-sharp versions of this so i'm going to click on this link and it will download into my downloads folder but in my case i actually already have the export templates file here on my desktop how big is it it ends with dot t p z and if i right click on it or just hover over it it is 440 megabytes so it might take you a little while to download it is a zipped file in a tpz file format and that's specific to godot so now in godot that i have that on my desktop i'm going to click install from file i'm going to go to my desktop i'm going to navigate to my c drive user folder and desktop and there it is godot version 3.2.2 stable export templates dot tpz i will press when it's selected to open and it will bring it into godot and then i get it says it's green right here so i can press close here now that i have the export templates installed i can go to project and export and now i can press this add button and it will present me with all the different platforms i can export to from godot i'm going to be exporting in this video to an html5 document an html file if not aware is a website file it usually is coded in html that's a coding language and html5 is the newest version of that oh you know what i just got a notification on my screen you can't see it but it just popped up that a vast antivirus on my computer the free version of the vast antivirus has detected that my export templates contain a generic piece of malware i don't believe that to be the case of course you can be your own judge i got these godot export templates from the official godot website so i went into my avast anti-malware software and i restored that file that it identified as part of the export templates back out of avast's vault so that i can use it again you might have to do that if you're also using a malware software that recognizes or thinks that these export templates are part of a piece of malware okay so now i'm going to click on add and i'm going to add an html5 option to export this game so i'll click on html5 and it'll load it right here of course on the right hand side when i have this selected we see the options for exporting to an html5 website so i can go through these tabs i don't think there is anything here that i'm going to actually change you can kind of look these up on the internet if you like all i'm going to do is i'm going to choose an export path where i want to save my web page to so i'm going to press this little folder icon i'm going to go out to my desktop so right now i'm inside of my project folder i'm going to press the up button i'm going to make a new folder on my desktop called exported platformer game and i'll correct that capital x right there and i'll press ok and as you can see now i am inside of that exported platform or game folder that's empty that i just created and in this empty folder i'm going to create a file that ends with dot html and i'm going to suggest that you name this exactly the same as me which is required for a future step you're going to name this file index index dot html and you're going to type that exactly including the dot html that is a requirement you'll see in a few minutes for each dot io so with that name i will press save and is it exported yet well if i go out to my desktop i have this folder called exporter platform our game does it have anything in it no it does not so i'm going to go back into godot i believe i now actually need to press export project and it's going to bring the same dialog box up and confirm index.html this is a little bit redundant but i'll now press save and that time that i press save after export project it actually put the index.html as well as other files like a favicon picture a javascript file a pac file and the largest file in here is called a dot w-a-s-m-n this is a compiled web assembly file that will run in your web browser it is a compiled program for the internet it's a web assembly file now you might be thinking to yourself hey this is an index.html file it's a web page file if i double click on it at least on my computer it defaults to opening in google chrome and it should just be able to run in google chrome and i should be able to play my game well yes this index.html file is just a normal html file but it has embedded inside of it a web executable file that can only run from a web server and not locally from your computer so if i double click on this index.html file depending on your computer and what the default file type association is for html files it should or it might open up in a web browser that's great but as you can see in google chrome on my computer which should support games in a wasm format it does not and again this is because it's running locally off my computer if you have access to a web server you could drag all of these files into a folder on that web server on the internet and it might likely run from there but now in the second part of this video i'm gonna be showing you how to get this game to work and be accessible by other people if you like on itch.io so i'll open up my web browser again and here is itch.io if you're not aware h.i.o is a major player in the indie game space it's a website where you can distribute and share and even sell indie games you create and of course find any games other people have made you can create an account here there will be on the top bar a place for you to log in or register i've already gone ahead and done that please know that h dot io nor any of the games that you see on screen right now are sponsoring me in any way for this video i don't receive a dime from it dot io for saying their name and using them in this video it's just a solution that i found for you and i to share our games on the internet for free so once you have an account at itch.io you'll go up to your dashboard and this is where you can see your game projects as you can see i have access to my bourne cg godot tutorial platformer this is my demo project that i posted at the beginning of this tutorial mini series and i've talked about it and showed you it at the beginning of all of these videos so you can go ahead and check that out at bournecg.h.i.o but right now i'm going to create a new project and show you how this works well i'll press create new project i'm going to call this godot platformer part demo and as i spell platformer right yes i did although i don't know that's a proper english word the project url if i just click in this box it'll kind of fill out the rest of the web address that will be the active of adjust for this game just based on what i named the title of this project short description or tagline i'm gonna write in this is the state of my platt former game in tutorial number 17. okay i believe that's okay classification what am i uploading i'm uploading a game not game assets or mods or anything like that so i'll leave that at the default downloadable no i'm going to make this game playable right in the web browser for somebody who finds this game online maybe you so i'm going to change this to html which means i'm going to provide each.io with a zip file or html file that will be played right in the browser so i'll select html release status is this a game that's released or in development or a prototype i'm going to select prototype for this do i want people to have to pay for this game yes you can sell games right on install io in this case i'm going to select no payments my demo game that i have on my website that you've seen at the beginning of all of these tutorials that's already semi-complete with all of the kind of bonus features that we'll be talking about later in this mini series well it is a zero dollar or donate option if you select that you can suggest a price and that's what i've put two dollars as a suggested donation price to play that game although for this i'll just say no payments uploads now i need to upload a zip file containing my game so i'm going to quickly pause this upload and setting up the game process because i need to create a zip file of all of these files now on my computer i happen to have a program for creating zip files it is called 7zip and i believe it is available at 7zip.org so if you go there you can install and i have installed the 64-bit windows version of 7-zip and i've restarted my computer and once you do that you can right-click on files that you select and you get a context menu right here 7-zip and i'm going to say 7-zip hey add it to an archive that means make a zip file or a similar file on your computer right in this location so it's going to name this the name of the containing folder so i'm right in the folder i've selected all of these files it's important that you don't just zip the folder on your desktop you want to zip all the individual files so that all the files are directly in the zip file it's going to name it the name of the folder though that they are all in it's going to maybe default to a dot 7z file for 7zip you don't want that that's a proprietary kind of a file you want a normal.zip other than that i'm going to press ok and when i do that it'll create the zip file and now i can go back into h dot io and i can upload that file that file on my computer is a little over five megabytes about five and a half megabytes so let's go ahead and upload that i'll click the upload button i'll go into my exported platformer game folder on my desktop i'll select the zip file i'll press open it's going to upload it and there's a few options to choose is this an executable that means is it a program yes it is is it for one of these platforms no it is not it is a web page file so i'm gonna select this file will be played in the browser yes now a little bit below that section is embed options and this is how the game will actually be sized and appear in itch.ios webpage for your game you need to know the dimensions of your game in our case if i go back into the godot editor and i close this export dialog box and i go to project and project settings if i go into project settings under the first general tab of course the size of the window of my game is what i'm looking for here so i'm going to go down to display this display section and window and the width and height are right here they are the defaults for godot which is 1024 pixels wide by 600 pixels tall so now i'll go back into each.io and i'll type that in 1020 by 600 and do i want to select any of these mobile friendly probably not because my game requires a keyboard with arrow keys and a space bar so probably not full screen button i think i'll leave that off enable scroll bars probably not automatically start page on load that one is up to you if you want the game to actually uh start when the page loads maybe i'll select that but i'll leave that off actually details genre well you can pick whatever you like that suits your game tags you can go through here and pick keywords that match your game theme or your game genre i'll keep going i'm going to skip some of these options just to save the time of this tutorial i believe now i will press save and view page so now my game is loading for the first time it i o has to kind of process it but hey it says run game now because i didn't select that auto run option a moment ago if i press run game it'll load okay something was off there and i'm going to go back to the page and show you in just a moment the sizing of my game was off and i left that the way that it is on purpose because i want to show you how to update your game if you make changes or updates and you want to change your game so that people who follow you on h.i.o they can actually get notified when you make updates and fixes to your game so if i go back to the godot platformer demo that i just created and press run game you're going to see that on the title screens and on the you win or you lose or game over screens the menu size is wrong or the screen size is wrong even though i looked up the size of my game in godot and i'm not sure why this is and i typed in 1024 by 600 and that is correct when i press run game the menu screens are off and the game is actually showing me when i'm in the game level it's showing me more of the level than i'm supposed to see so i'll show you that now [Music] okay so as you can see on the game over on the title screen and on you win as well you have this gray area we don't want that so i'm going to go back into godot and i'm going to re-export my game to fix that or after i fix that i'll re-export it and re-upload it so let's go back into the godot editor but as you can see this is not a complicated thing to do to export your game into a website file that you can then upload it's not too hard so how do we fix that problem where you see outside of the game window well we're going to change the scaling settings for our window of our game i'm going to go back up to that project settings dialog box and back down in the first tab general down to display and window where we have these two dimensions and i'm going to perhaps turn resizable uh off but if i have it on and i press just the play button right inside of godot preview you can see that i can make my game bigger just like it's happening in the web browser and uh you can see gray that's what i want you to see i could hear music uh under my voice there hopefully you could hear me during that so i'm gonna go into project settings and down to display window under the general tab i'm going to turn resizable off but more importantly here i'm going to go down to this section called stretch and the stretching for your game when the game window is resized is set to disabled and we're going to change that there are three options disabled which means no stretching which means that you see more of your game which maybe you don't want like the gray there is 2d which is a nicer way of scaling a game up that will actually make the quality more high resolution or use the materials and textures and and fonts that you have in your game and make them bigger and make it kind of look nice there is also this option called viewport scaling or stretching and that means that is actually making the pixels uh kind of interpolate out so that when you make your game window larger your game will kind of uniformly look more pixelated and if that's the look of your gaming your game is a very pixely looking game maybe that's the effect that you're going for in my case i'm going to choose 2d which will basically just scale my game a little bit nicer you might find that with 2d this option the fonts of your game might look a little bit funny depending on how much you've scaled your game but generally this is the better option to choose you can make sure that your game keeps its aspect ratio that means how wide it is versus how tall it is that means that if each dot io decides to place your game in a perfectly square container or viewport on the screen it might stretch and kind of look squashed inside of a square instead of a wide landscape rectangle so i'm going to actually say ignore and that means my game could be stretched you might want to change this option depending on what you want okay but i'm going to choose ignore and i'll press close so 2d and ignore it and i believe i have resizable not turned on so disabled okay i'm going to press close and just so that i know that i've updated my game and i'm playing the newer version i'm going to on my title menu go to the background color it is a color rectangle and i'm going to change my color rectangle the background's color a little bit i'll just change it to a kind of a bluey color just so i know i'm playing a different version of the game i'm gonna do a ctrl s to save i'm gonna go back up to project and export i'm going to go back into my project exported platformer game folder and actually delete all of the files in there because i'm going to replace them when i re-export right now so i delete those files i'll go back into godot i'm going to press export project i have the same export path uh still export project and press save so now inside of that folder i have new versions i'm going to select them all again this is the same process i'm going to right click with 7-zip i'm going to add to archive i'm going to leave it at the default name of the containing folder it's a dot zip i'll press ok now inside of itch.io i'll go back there i'm going to click edit game or i could just go back to my dashboard where i can see a list of all of my games and click on edit here by the way if you don't have a cover image for your game it's very hard to make your game findable on h2io so you can take a screenshot of your game or make some graphics for your game in a program like blender or inkscape or krita you can find a way of making a graphic that represents your game in my case though i'm just going to go down to upload files again i already have exported platformergame.zip but if i upload a file with the exact same name it will replace that old file and it will make that the game itself okay so i'm going to press upload files i'll go back to that exported game folder i'll select the zip file i'll press open it's going to erase the old version it's going to upload the new one and i have all of my old settings still the right dimensions in this case i'm going to say automatically start on page load i like that i'll scroll down to the bottom i'll press save and now i'll go up to the top where i can actually click on the name of my game up here that's how i can get to my game itself and now my game will load for the first time and hopefully it'll run [Music] okay so now as you can see the game is larger the amount that you can see in the game level itself is a little bit less so it's not scaling everything down and now the menus work properly i don't see that gray around the screen and this is the updated version we know that because again it is working and scaling properly but also because when i go back to the game menu you can see there is no gray and of course there is that new background color on the title screen so you'll see that right now when i go back there [Music] okay i think that is just about it i did gloss over one important point and that is if i go into edit my game project there are privacy settings so if i scroll down i'll take a moment to find it here it is at the bottom in a section called visibility and access if you want everyone to be able to find your game project even in this sort of beta stage or even alpha stage of your game development process well you can make your game project public you can make it restricted or draft which means only you can see it i believe or people who edit the project probably you can see it so i will press save and i'll go back to my dashboard but that will be it for this video i will leave this godot platformer part 17 demo up on my itch.io page at bournecg.h.i.o so you can actually go ahead and see this exact project i'll leave it exactly as it is there uh forever i suppose but that'll be it for this video of course if you like this video or if you're enjoying it please go ahead and click on that like button below this video it really helps with me and my channel and if you want to see more videos like this one in the godoto game engine or in blender or other technology click on that subscribe button as well and click the bell icon to be notified whenever i upload a new tutorial if you haven't checked out my facebook and instagram pages that's where i post sneak peeks and previews of what i'm working on next it's where i post most except for here on youtube it's where you can find out what i'm working on before it actually comes out but that'll be it for this video thanks for watching we'll see you in the next one bye [Music] you

Channel: BornCG

Views: 20,998

Keywords: tutorial, lesson, beginner, godot, game, engine, code, coding, program, programming, gdscript, learn, teach, sprite, platform, platformer, export, html, html5, wasm, itch, itch.io, web assembly, web, website

Id: eMGxxwOA-6g

Length: 25min 33sec (1533 seconds)

Published: Thu Aug 27 2020

Reddit Comments

[u/dodo3211]

BornCG u the best!!!!

[u/VRbandwagon]

That was really satisfying. Can't wait to make my own project and publish it, no matter how crappy it is! I'm really motivated now.