Compiling PGE For Web Browsers!

hello and in this video i'd like to introduce a new technology that's been developed for the pixel game engine a new platform has been added that allows us to compile pixel game engine applications without much change to web assembly this allows us to run them in an internet browser and before i demonstrate how this is done it's imperative that i must thank the community for putting this together so in no particular order i wish to thank magetsub dandisteen morris1138 slavka gorbet and bispoo who have all played a role at some point during the life cycle of this project personally i think the ability to run pixel game engine applications in the browser is game changing for the pixel game engine project and so this video is just to show you how to set up the environment required to compile your applications before we can get compiling in the browser we're going to need a project that compiles on the desktop and so i'm going to very quickly create one here i'm creating a new blank c plus plus project in visual studio to this project i'm going to check its properties and for all configurations and all platforms under the general tab i'm going to set the c plus language standard to c plus 17. then i'm going to add a new source file to our project and i'll call this one starfield.cpp using a file explorer to navigate to the project directory i'm going to paste in a copy of my pixel game engine header file how you connect the header file to your project is entirely up to you and different people have different ways of doing it to get things working for an internet browser though you will need a pixel game engine 2.15 or above since this video isn't about creating a project specifically i've prepared some code in advance but you know this is a programming youtube channel let's have a quick look at it anyway i'm going to start by simply displaying a star field like the old windows screensavers and in my pixel game engine derived class i've created a structure star stars travel at a speed they have a distance away from the center of the screen and they have an angle it's going to look as if we're flying through space all of my stars are stored in this vector of stars i'm going to be creating lots of random floating point numbers so i've created a convenience function to allow me to do just that i can specify range in on user create which is called at the start of the application i resize my vector of stars to the number of stars i want it to hold and then i go and create a whole bunch of randomly positioned stars before we start the application i quickly cache the center point of the screen in the on user update function which is called every frame the first thing i do is clear everything to black because space is pretty dark i then use a little auto for loop to iterate through all of the stars and i update the distance of the star depending on its speed and how much time has elapsed since the previous frame i also introduce a small non-linearity and we need that to get the pseudo 3d effect of the stars in principle when they are further away they look like they're traveling slower if a star reaches a certain threshold in this case 200 then the star is completely randomly generated again finally i use the angle of the star to create a unit vector i change the length of that unit vector by multiplying by its distance and i offset that position by adding it to the origin which is the middle of the screen finally i take the star's initial color and i also add a small non-linearity to that too in principle this will make the stars look a little bit darker as they're further away and that's it the only thing left is our int main where i create an instance of our star field class i construct a window of 256 by 240 pixels and each in-game pixel is going to be 4x4 screen pixels by default and i start the application very short very simple let's take a look and here we have a rather satisfying star field simulation it's as if we're traveling through space it's nice and it has a compelling pseudo 3d effect we could change the colors around and use exactly the same setup to make it look like we're traveling underwater or through other mediums that has dust particles floating about within however today it's space starting with pixel game engine version 2.15 the header file is now sensitive to an additional platform and compilation environment it's called inscriptan the encrypt and platform implementation currently resides at the end of the header file and it looks a little different to some of the others the first thing that looks a little strange is the presence of some javascript inside the header file yes i know but it's necessary to make sure that the pixel game engine can handle the environment changing size the inscription api is a little bit strange but the community have gone to great efforts to make sure that it does accurately reflect the behavior of a desktop pixel game engine application as with all things pge we simply don't care how these things are implemented it should just work so how do we compile our application now and run it in a browser well firstly you need to head on over to mscripton.org and click on this download and install the sdk button now a word of warning typically output on the one lone coder channel and the pixel game engine applications are aimed at a beginner to intermediate level of capability amongst programmers as much as possible i've tried to design the platform in such a way that you don't really need to be familiar with compiler tool chains in order to use it successfully however at the moment there's no getting away from this for m scriptin i'm sure the community will put together certain build files and as we'll see at the end of this video i too have created some utilities to help us build web applications a little more smoothly this installation page for inscripton is actually very well written and if you're reasonably competent at following instructions you'll have no problem getting it running the instructions show two ways of installing the software development kit the first is via git but the route i chose because i'm not a big fan of git was to download the sdk and run the commands in a command prompt and their instructions even cater for people like me in order to install in scriptin in the first place you're going to need python installed as well so head on over now to python.org and download and install python if you don't have it already inscripton uses python as well sort of an install management tool there aren't actually a great many instructions to follow so once it's set up i recommend that you head over to the emsdk directory that you've created which is where you've installed in scripted in the first place and on windows at least i like to click on em command prompt.bat this sets up a command line interface that's ready to go compiling in script and applications if you are familiar with compiling on linux then a lot of this will be second nature to you instead of g plus plus it's em plus plus and we can see it behaves just like a regular c plus plus compiler i'm going to navigate to the project directory here we can see the cpp file we've just created in visual studio let's have a go at compiling the star field it's quite a long command to type out by hand firstly we need to specify that we're using c plus 17 and i'm not debugging because the inscription compiler is going to be compiling code for a guest environment within a guest environment there are restrictions on what it is allowed to do and we can hint to the compiler what rules we'd like it to follow the first rule is i want it to allow memory growth this means our pixel game engine application is actually allowed to allocate memory next we need to tell it which version of webgl it should be using and we do this with the max webgl version parameter and the min webgl version parameter the inscripton installation comes pre-loaded with lots of libraries that have been ported to work in the inscripton environment this is very useful for things like sound and networking but the pixel game engine specifically requires that something can load sprites and images and on the pixel game engine we use png files and on linux by default we use lib.png so i can tell the inscription compiler that in fact if you have libpng lying around please use it now i want to specify the name of our source file and finally i'm going to specify the output name which rather bizarrely is an html file i'm going to call this one pge.html let's try that one of the things in scriptin will do is automatically make sure all of its libraries are up to date when you start a compile task it will then compile and cache things as necessary for this project so subsequent compiles can happen a lot more quickly if you think it's frozen on your first compile don't worry it does just take a little bit of time well we didn't get any error messages and maybe that's to be expected because our visual studio solution compiled flawlessly anyway now if we go and interrogate our starfield project folder we can see it's created some files one of these files is called pge.html that was our output file and two additional files one that contains some javascript and one that contains the web assembly now at this point it's very tempting to just go and double click on the pge.html file but it's not going to work as you can see here i just double clicked on it and nothing is happening it stalls that's because my computer doesn't have a server serving me these html files fortunately inscriptant comes with a utility called em run which will sort of virtually create a server environment for you so let's try this and straight away there we go there is our star field running in one of the tabs of my browser it has a template provided by in scriptin at the bottom here this is console output so if we did something like standard c out the results would appear down here we've also got some buttons at the top so if i uncheck lock and hide the mouse pointer and click the full screen button we can see it's done exactly what we expected it to do it's gone full screen press escape and we can go back to a normal size in fact the pixel game engine for inscriptan is sensitive to sizing and just because i thought it would be neat here is the desktop version of the star field and the browser version of the star field running simultaneously in the pixel game engine repo on github you'll see a new folder which is dedicated to the utilities required for the wasm compilations one of these is an html file called basic template by default this file is pre-configured to look for pge.js and so if i use em run to run this basic template html file instead we can see the star field is now the only thing in our browser window it still changes size too which is pretty neat the dot wasm file contains all of the web assembly code in fact you can go and have a look at it it doesn't make much sense but it's there what isn't there is any additional assets that our project might use things such as images and sounds emscripton behaves slightly differently in this regard in fact it behaves quite similarly to the olc resource pack if you've used those as part of our compilation process we will instruct inscripton to create a single file which is in effect a virtual file system and this is quite a neat way of doing things because it means we don't have to change our code when we're running on the desktop or in the browser but to make our lives simpler from the very beginning what i'm going to do is create a new folder and simply call it assets this folder will now effectively be the root of our virtual file system so for example in this folder i'm going to create another folder called graphics and into this folder i'm going to add this image going back to our original program i'm now going to load that image i'm going to load it as a renderable we'll do our loading in on user create remembering that we're now relative to this assets folder after i've drawn the star field i'm going to draw this logo at the location of my mouse cursor and i'm going to draw the logo as a decal so let's take a look on the desktop nice that's working in fact i'm also going to change its size a little bit make it a bit smaller and i want to make it a little bit transparent i'm going to use the floating point pixel format for this we'll keep it tinted white but i'm going to set the alpha component to well not 0.6 let's take another look on the desktop very nice we can see that's working just fine this time when we're compiling within scriptin we also want to get it to create this virtual file system so here is the command from before also specify the starfield cpp file again set our output to pge.html and this is the important bit we have another argument called preload file conveniently split across two lines there and to that we pass in the root of our file system in this case it's our asset subfolder press enter to compile and it should compile a lot more quickly this time in fact that was it rather disappointingly you don't get any output but what we can see in our project folder now is we also have a pge.data file just as before i'm going to use the basic template to run our application with em run and we can see it's loaded the graphic and it behaves in just the same way as before it may be very tempting to think that you should now just go and convert all of your pixel game engine applications to work in the browser and i would encourage you to at least have a go but there are some things the platform can't do just yet and that's because myself and the community haven't gotten around to making sure that all of the extensions to the pixel game engine are compatible with this inscript and platform so things like the networking series currently going on that's not going to work directly nor is anything that's going to use pegex sound however there has been work performed on using the game pads and so like most of this project it's currently very much a work in progress and i will emphasize that if you have any problems setting this up or getting started with it don't complain on youtube or on github come to the discord and talk to the people that can genuinely answer your questions using inscripton isn't trivial and it does have some caveats but now that we can create inscription-based web applications there's one last cool thing we can do back in the project folder i'm going to select my basic template my data my js file and my wasm file and i'm going to compress all of those into a zipped folder pg.zip a popular game jam platform is itch.io we've used it many times on this channel and one of the nice things about itch.io is it allows you to use webassembly based projects so let's create a new project we shall call this one test wasm and the kind of project we're going to choose an html you have a zip or html file that will be played in the browser because this is the one lone coder channel no payments are required and i'll upload the file there's our zip it's uploading and i'm going to select this file will be played in the browser under embed options i'm going to specify a viewport dimension now i have to be a bit careful here to make sure that i kind of match the aspect ratio i'm expecting the application to run it currently it's a 4x3 aspect ratio so i'm going to change my viewport to match that aspect ratio 512 by 480 then i'll choose automatically start on page load and i'll try this mobile friendly option there is a limited degree of touch support provided by the inscripton platform finally let's save and view the page oh dear we've made a mistake it says it's looking for an index.html file so we'll need to change that let's take our basic template and rename it to index.html i'm then going to add that to our zip file and re-upload well you can't get everything right let's try that again saved and going to view the page loading game for the first time and there we go on the h dot io page we've got our web application running just fine this means we can now use the one lone coder pixel game engine in-game jams quite happily and people don't have to download a dodgy executable which your anti-virus is going to scare them about and in fact here is magetsub's entry to a jam last year burb attack this is actually written in the pixel game engine and don't assume just because it's running in the browser that it's going to run with terrible performance here is the spyro the dragon level i created as part of the code it yourself 3d engine except now it's rendered at 720p in the browser now this final bit is for the visual studio users only i don't particularly like using the command line each time i want to compile so i've created a small utility which you can integrate into visual studio which will specifically compile pixel game engine projects using inscripton i can go up to tools and i can choose inscription compile target i've got my cpp file selected and we can see it does some inscript and stuff at the bottom in fact it'll go through all of that compilation phase again and produce the same output as before once it has finished building you can then go to tools and in script and run it will automatically launch the browser and launch the application very convenient for debugging without going out of visual studio the way this works is through a small batch file utility called pge2 wasm that i have created this bat file needs to be primed with some information such as where have you installed in scriptin and where do you keep your pixel game engine header file just so happens that on my machine i keep it in this particular development directory because that's where i build and work on the pixel game engine file typically though if like in our staff field application it's in your project folder you could just set its location to be there like with all batch files you download off the internet do have a look at it to make sure it's not doing anything nasty before you run it but in principle it will search to make sure that those two folder locations are legitimate and the plant file takes some additional parameters one is build another is run and the file one is clean it works in a similar way to a make file build will start the inscription environment and set all of the environment variables for the compiler it will then go and grab the c plus plus files that it can find in that folder or a specific file that depends on whether you're compiling everything or compiling a specific cpp file it then checks to see if an assets folder exists in that environment if it does it will compile it with the command we saw before that includes this preload file argument if not it doesn't bother with doing anything with virtual file systems if you choose the run option well all this does is call em run and links to our pixel game engine html file all of the web assembly stuff is created in a sub directory called wasm if i now go back to our project folder we can see this wasm folder has been created this is the output of my tool for visual studio don't confuse it with the output we created by hand before to integrate the bat file with visual studio go to tools and select external tools this brings up a menu where you can create the four tools that i'm using the compile tool well we'll give it the title inscript and compile and the command that we're passing to it is the path to our bat file wherever you've decided to put that the only argument i need to provide to this is build because that's exactly what this compile function should do and we'll tell it to work in the project directory so that's the same folder as our visual studio environment for compile target which compiles a specific cpp file only the command is exactly the same but this time our arguments are build and the properties of the target file we've selected in this case starfield and dot cpp again the project directory is set for run we just call exactly the same bat file but we specify the run argument and for clean same again but the clean argument i like to see what the output is because if you do have errors they will pop up in the visual studio output window and when you're done click apply and ok and this puts the tools there ready for you to use and that's really all i want to show for this video again i really want to thank the community for developing this platform i think it is game changing for the pixel game engine the ability to now use this engine in online competitions and distribute the end results to your friends and family and whoever without requiring them to install things first i think is really important and a fantastic achievement by the guys that have made this as with all new software and particularly all new one loan coder software there will be some bugs and as it's now revealed to the community no doubt these bugs will start coming in thick and fast and we will do our best to try and fix them but if you do have problems i urge you to come to the discord server to discuss them i probably won't pay any attention to github comments or youtube comments specifically about problems setting up in scriptin now finally in a few weeks time i've not yet settled on a specific date i think i'm going to have a one loan coder jam where you have to use the inscription version of the pixel game engine let me know what your thoughts are about that on the comments below if you've enjoyed this video give me a big thumbs up please have a think about subscribing come and have a chat on the discord server and i urge you to have a go at compiling your pixel game engine applications for your web browser take care

Channel: javidx9

Views: 26,419

Keywords: one lone coder, onelonecoder, learning, programming, tutorial, c++, beginner, olcconsolegameengine, command prompt, ascii, game, game engine, pixelgameengine, olc::pixelgameengine

Id: MrI5kkVY6zk

Length: 23min 13sec (1393 seconds)

Published: Sun Mar 21 2021