3D Game Programming - Episode 17.5 - Creating an Applet

Key Takeaways

what is up guys my name is Hoshino welcome to episode 17.5 or express episode 2 of 3d game programming in Java alrighty so our last time we took a look at how to actually export our our project our game as and as a runnable jar so that we could actually run it on different computers and tested and stuff like that and actually play it without having to open eclipse and have our code there umm this time what we're gonna do is actually basically export our game so that we can actually run it inside a web browser alrighty so let's go okay first of all we actually have to add some code in that tells Java to run this as an applet ok and and an applet is basically a java application that can be run within a web browser already let's just jump in ok so we've got our got a game right here and same - it seems to be working fine um let's go ahead and go and make a new class so we're gonna make it in the in the core like fold up package whatever you want to call it it's technically called a package but in this scene out in the graphics or input just in the normal one right click hit new and class ok right clicking here and hitting new just makes makes sure that you're actually in that package and let's just call it mine front outlet and hit finish alright so now we've got a new class and if you actually remember from like the second tutorial I believe the second episode I went over how this start and stop thing is very is like is basically imperative to use when you're making an applet and yeah I'll sort of show you guys that now first of all stop if you notice stop is it's never used locally it's never used like we've never actually all this code right here we could delete it and the game would still run because we haven't actually used this code at all we've just written it there so now we're actually going to use it alrighty so let's go into mine from applet and all we're gonna do first of all is actually extends well we want it to actually extend the applet class so it's sends applet and you'll have to import it so just hit import and a Java just wants you to add a default serial version ID don't worry about that just add it to remove that warning already so what we actually want to do now is make an object out of this display class because this is our main class right we want to make an object out of this in this class so let's just go ahead and say private display and I don't know we'll just call it display equals new display so we're basically creating the display class object within this applet class and now I'm going to sort of go through a few a few of the things that we need to do for the applet to run so first of all let's make a public void and make sure that you call it in it has an initialize and we're gonna set the layout to new boarder layout all righty and also we're gonna add display so what's that what this is doing is basically and we go to import portal app basically what this is doing is actually I better be recording this by the way yeah I'm good okay right what this is doing is just basically setting a layout to our frame and actually adding so this is kind of like because we're replacing the jframe right instead of using this code to actually start up the jframe wishes what brings me to another problem our cursor blank thing is within this J frame so it wouldn't be effective for our applet we will still see the cursor in the output alrighty or at least I think we will because that class is affected to the jframe we're not using a jframe anymore because we're actually going to be embedding it into a browser so that's why I'm that's why we need to sort of do the jframe code but with the applet code so we need to add display here so over here you see that we added the game and game was an object of display I don't know I just called display here you could call it game here we're doing the same thing we're just adding display already and we also need to make okay is important public void is start okay this is what this is what code will run when we want to start the applet so when we load the page with the output containing in it and what we actually need to do here is read our start and stop classes now two things first of all let's make this public because it's currently private I just noticed that and obviously we can't read it we can't actually read this method in this plot in a different class if it's set to private so that's why you need to make it public the other thing I want to do is that it's just synchronized now synchronized I'm not going to go ahead and explain it and I'm gonna also copy and paste into here synchronized basically on a glance it helps with with threading okay so it helps the threads to run properly basically it's better it's like a safety precaution a precaution what am i doing precaution it's like a safety precaution when you're when you're using threads okay so put public synchronized for it mate but make sure it's public yeah most more thing alrighty so and now when our applet starts what do we want to do we want to we want to initiate we want to run this method so it's called start so display dot start alrighty and similarly when we when we want to stop our applet then you know we do the exact same thing we just read display don't stop and that's it that is literally it so if you're on the code you won't notice anything different at all it's still the same old thing but we've got our aplicar now this is the most important thing alrighty so now we're actually up to the stage well we're gonna export our code so let's go ahead file export now last time we exported as a runnable jar file now we don't need to do that we need to export it as a jar file okay so this is not a runnable file that you can double click this is just like a what's the best way to explain this it's it's just a fire it's just like an archive of all of our classes alright so jar file the Java Java I'll hit next right now I'm under here just hit source and resources we don't need to export all these class path and project settings don't worry about that just make sure that you're exporting all of your source code obviously and all of your resources like the textures if you want because you need the textures to obviously appear otherwise it'll crash okay so that all of this should be fine um I'm just gonna name it mine from applet it's already here hit save and hit finish and that's it it's exported alrighty so what I should have done is let me just minimize this is created a jar file now this isn't honourable like you can't you can't open it with this it fell closed main class you can't like you can't okay you can't actually want this this is this isn't a runnable char file this is just basically a an archive so if you open it you'll see you know you got your comm and you got all of our classes here including our mind front upper class which we just wrote and the textures okay now our resources folder so our source and resources folder are all here now what we actually need to do is I'm just gonna show you guys quickly how to write a HTML file now this isn't really an HTML tutorial so I'm just gonna write the the most basic file and I'm just gonna call it mine front mine from what's called my front and let's go ahead and open this text so I've just created just open notepad right open notepad and start typing this okay if you know HTML off obviously you can you can you can actually improve on this but for the time being you know I'm not gonna I'm gonna go through all this so first of all it's HTML so let's just go ahead and say that as well as HTML and we'll close out HTML text right away I'm actually don't think you have to do that anymore you used to have to but I'd just bear with me well it's quick let's go ahead and quit quickly give it a head in a title so the title is just go on mine from from applet this is better done in Dreamweaver actually but I know that a lot of you guys might not have Dreamweaver is not free let's set the background color to a nice grey that's what I usually do so we'll set it this is just the hex of the color make sure that's six twos one two three four five six yep look and let's make it in the center and okay now this is important okay so guys if you don't know HTML I don't know a lot of you probably do know HTML because hTML is well it's not gel verts it's just a markup language it's really easy to learn I'm not gonna go through that I'm sure you could find an HTML tutorial or if you don't know what any of these tags mean just google them but this is important okay now basically we've just created a basic layout and actually I know that I actually want to leave paragraphs and breaks so this is just aesthetical things right so this BR is a break that's just like a lot that's just like hitting Enter and paragraph P is just like a paragraphs that leaves a bigger space this is just this will just aesthetically make it look good that's all okay so and also you guys wanted a launch Toria laughter that's a really short one on sunday because it was my birthday so hey here it is um alrighty so let's go ahead and say okay so applet code equals now this applet code is okay this is important by the way that was all just HTML this is obviously still HTML but this is how we actually tell our web browser to actually run what's over here so our applet code basically is asking for the location of the class that we want to run so in this case it's calm my mind front mind front applet or class okay that's what we want to run so we need to tell it okay this is how you find it now remember this is even though it's in folders this is still like a Java so what we actually need to do is put dots instead of four slash as a backslide or whatever that's okay that indicates another folder calm don't mind mine France dot my in front applet now you don't have to put doc class I think it might actually no I I haven't tried it actually you don't put your class just my Ron output that's all and now we have specified okay well what archive is it in right so this is this is how to get there once you're in this archive but like what's the where's location of this of this file so we just need to put archive equals and mine front ones are called mine front output mine front applet jar alrighty so this is bit malice will change by the way according to where this is located right so obviously this is a HTML file and this is our archive they're in the same folder they're both on the desktop which is why this will work if it would be in another folder called I don't know Java then you'd have to go obviously Java slash might run applet or if it was in the previous folder you have to do that etc etc but it's it's in the same just keep that in mind if this doesn't work for you of some reason make sure the both of these files are in the same directory that's all now also what we need to do is actually set a width and a and a height to this thing so we'll set the width equal to 800 because that's worth of our frame and height equal to 600 because that's the heart of our frame and that's that's all we need to do it let's just close the upper tag and that's it alright umm that's actually it okay I'm pretty sure we close everything we didn't close our body it's one thing in the we need to close all right hit ctrl s um oh you know file save and this sit should run okay so first of all let's actually rename this and instead of text no I should probably explain this shouldn't I okay if you don't have extensions already here I think you need to go tools turn into a windows tutorial view and make sure that you are that hide extensions for known file types is not on otherwise we'll just see it as this and you'll be like okay well how do I change this to an HTML file because it's currently a text document as you can see so make sure that this uncheck that and here we go so now we've got dot text so right click rename and let's change this to HTML and hit yes so now this will open with your default web browser for me it's Chrome so don't click on this to open it and hopefully this will work I'll give us an error that we can quickly diagnose at least alrighty you complete my computer's being slow today okay so Java the Java plug-in needs to your permission to run run this time whatever doesn't matter it's loading and here it is radio it worked and as you can see the frame rate is pretty much the same as if we run it it was 42 yep that's the same as if we run it in a jar in a runnable jar file you sit at our java is happily working here alrighty and we it's playable game it's in it's in our web browser as you can see I just the reason is well I didn't really explain this but the reason I actually left so many spaces here as well was because like this stuff was because you know I didn't want the applet to be at the very top of the screen I just left a few spaces here that's all this - it says esthetical don't worry about that you don't nee that um but yeah that's how you put an applet and I put it into the center obviously by using this send attack and added a nice background color so that it wouldn't be white no there's anything wrong with white it's just that well it has your eyes um already so that's our game in a web browser and obviously you can upload this to web site do whatever you want with it that's I guess that's it for this tutorial umm one quick thing also hit the like button if you like this because well it helps me out and the other thing was yeah on Sunday we're gonna be studying walls and obstacles hopefully we'll definitely actually so um that'll be a huge tutorial don't want to miss that but the other thing is like I've actually run out of ideas for what to do in these midweek episodes so because my original plan was to show you guys how to export it as a runnable jar file and how to you know export it as an applet but yeah so if you guys have any requests which don't modify the source code I know you guys are probably gonna be saying or next midweek apposite episode had a gun to the game like that's that's huge like that's for the actual Sunday night episodes well this is some they're not in Australia when I upload it probably Sunday morning in the US or whatever but yeah so something that doesn't really okay yeah so you could say that occurs is here but can't really do anything about it now there's probably a way to fix it I'm not gonna deal with that now that it works which is what's important something that doesn't modify our code that much like we just added a new applicant class that didn't change our game it's just um you know it was just like a like a quick tip to a 16 minute 42nd and Counting tip on how to actually run this as you know how's it now put in our web browser so if you guys have any requests for next week's midweek episode then drop a comment below and be sure to LIKE the video if you liked it and uh yeah I'll see you guys on Sunday goodbye