Developing Games with HTML5

Sobre este curso

hello everyone thanks for joining us today we’re gonna be having a nice little discussion and showing you how to build a cross-platform RPG today in html5 and JavaScript it’s gonna be the

languages and formats so we’re gonna be dealing with that’s very cool so let’s get right into the introductions so first off my name is Mickey McDonald I am an indie game

developer and Technical Evangelist with Microsoft so in my day-to-day work I basically get to go out and chat with other indie developers I get to you know show them off cool tech see what they’re

working on as well as I get to go out and do a lot of speaking engagements and stuff like that around the yeah community and my name is Brian Griffith I’m a software engineer and game

developer I’ve worked on various projects triple-a and indie and everywhere in between mobile PC all the consoles and as well I’m an instructor for tras College up in Canada doing

video game design and development teaching calculus and physics and all those fun topics as well as all the different languages and utilities and engines that we deal with in a day to

day basis so I can speak from experience he’s a quite a good teacher he actually taught me a lot of what I know so former student of mine yes so let’s take a look at what we’re gonna be working with

today so today like Brian said we’re gonna be building an html5 JavaScript RPG so these are basically a breakdown of what we’re gonna be looking at so first we’re gonna go through getting

started so our setup getting everything in place and getting our project up and going we’re gonna take a look at installing Cordova which is the framework we’re going to be using we’re

gonna take a look at you know importing our our libraries that we’re gonna be using today as well and then yeah we’ll jump right into you know creating a player adding collisions and status

screens all those fun from all the fun things that you need in an RPG so by the end of it you’ll pretty much have a fully working RPG that you’ll be able to play with them in case there’s anybody

really new RPGs role-playing yes thank you for pointing that yes too many acronyms early in the morning you know sometimes not exactly well you know and we basically chose an RPG because like I

was saying with Brian I got into game design to basically tell my story right I had like I had a story in mind of what I really wanted and I wanted to be able to tell this story and

one of the best genres for telling a story is an RPG so that’s kind of why we picked this is you know there’s a lot of us out there that have got these these ideas in the back of our heads really

want to bring them you know out to the public but you know maybe don’t have the the framework in place so by the end of the day we’ll have that framework yeah role-playing games I mean you get a lot

of depth to the character development if that’s what you want to focus on you can have a lot of exploration if that’s what you want to focus on battle mechanics combat whatever really you want to

expertise or show off or play around with or just learn a little bit more there’s there’s so much to do in a role-playing game it stretches beyond you know just simple mechanics like a

first-person shooter or something like that so that’s why we sort of picked it as a good base to work with and to look at so that anybody can then go from there and take it in whatever direction

they feels you know sits it fits the story they want to tell or develop themselves and play around with yeah very cool so our target our audience and basically

what we’re expecting from you is we’re looking to basically target the beginner to advanced developers those that have had a little bit of experience maybe with JavaScript or other languages kind

of know a little bit about programming and we’re looking to basically build a cross-platform RPG right very important part nowadays is getting it out getting it visible across as many platforms as

possible so you know you can make the biggest splash that is possible as soon as possible sometimes you can only focus on developing it on one thing and then you know it does okay and you spend even

more time to push it to the next platform in the next platform in the next platform and it just extends the life of the project you burn out a little bit you never really get that big

splash and if you do on one platform on the next it doesn’t bleed over and and sort of you know snowball into that critical mass of users that you really want in a game so trying to get a nice

cross-platform system right off the go means that you can launch quickly you know whatever advertising you put behind it or social media that you do it it works across all the platforms because

you’re ready to go you don’t have to do the same thing three or four times or come up with a new way to advertise it yeah crawled out the reason why very very important nowadays definitely

that’s right um so you know we expect a little bit of game design knowledge so at least you know kind of know the core concepts behind building a game and what’s involved in that again like I

mentioned so a little bit of experience with JavaScript wouldn’t hurt as well as if you’re looking for supporting material a really good book that we we highly recommend is the web game

developers cookbook this book is really it’s structured more towards the beginners and the advanced it’s set up as like kind of like recipes right it has pieces that you could take and just

include into whatever you’re doing small demonstrations that work with it and it’s not just for RPGs there’s multiple genres in there so you can take a look at it and play around with things in

different ways but it is very you know put forward very straightforward Li and you can go ahead and take a little piece take a little piece build up with it into whatever you want then then branch

out whenever you feel comfortable in whatever direction so it’s a nice book to have you know to utilize and to refer to and that’s why it’s a recipe book you can just snipe little pieces of it and

drop it in yep yeah he does he targets a lot of the different genres right there’s like a RTS in there which is real time strategy he’s got you know the shooters like you’re you know Call of

Duty’s or whatever it might be and but in html5 yes not saying triple-a yeah exactly so it’s definitely a good book to check out highly recommend it yeah okay so a little bit about the MVA

community hopefully you know what the NBA’s are considering you’re watching this as an MA so but a little bit of news around that is um so it for those of that don’t

really know what the MBAs are they’re basically online tailored courses for IT and developers basically to show off cool technology and how to implement it and it’s a really cool thing I’ve

learned a lot just from watching some of the NBA s and and stuff that I’m not you know first in right because I spent a lot of my time in the gaming world it’s nice to branch out and see what’s going

on in you know big data or cloud or yeah there’s a lot of breadth of topics which is nice too yeah a lot lots of good stuff there so while you’re watching this you can actually earn 50 MV a

points for just watching this event as well as we have a voucher if you see here down at the bottom if you go and enter this code you can use that as your MVA voucher

okay so good intro let’s let’s dive in and take actual look at you know getting started with all this so for this module we’re gonna do a quick overview of how to set up your environment we’ll take a

look at installing cordova as well as installing our game libraries and your plugins that we’re gonna be using as well so what you need to get started alright first off Visual Studio 2013 now

we’re using the ultimate version yes but Pro or premium even Express will work I I tend to suggest using ultimate especially if you’re new to Visual Studio it’s got all the bells and

whistles in it so it kind of gives you a chance to get your feet wet with the with the IDE and kind of learn all of us in zones and it does provide you with some visual

assistance a little bit easier just to help you with the you know the details and things like that so there are definitely features that Express doesn’t highlight or have right away that

ultimate and that can be very useful for a beginner yeah I tend to always go for the highest skew of something and then work my way down as I don’t need things yeah what you don’t want it like trying

to help you then you know you can roll back maybe if you really want to just you know Express be like using command line yeah exactly so after you got Visual Studio installed the next thing

you’re gonna need is Apache Cordova in this case we’re using three point five point zero so for those that don’t know what Cordova is basically the best way to explain it is it’s a platform that

allows you to do cross device development and basically abstract away all the heavy hardware stuff so for the phones and stuff like that it gives you access to the phone camera to the memory

to sensors and stuff like that without having to write platform-specific code right so the way I usually explain it to it is we’re going to build a website and Cordova is going to sit on top of that

and serve it up for us alright so after we have of Cordova we’re gonna use a chance so enchant is the game library that we’re going to use right it’s a very simple very easy to use

library very feature-rich actually yeah there’s a lot in there that you can take advantage of to build uh specifically this type of game as well yeah so it’s gets geared more towards the RPGs you

could build any game that you want with it it seems to be a little bit more geared towards the RPGs I liked it because it was very intuitive and easy to get up and run tell that by the name

and chance enchant yes exactly sounds very you know very RPG it’s okay because we’re going to be building for the Windows Phone today that’s the device that we’re gonna actually be targeting

we’re gonna need to have the Windows Phone SDK installed so if you don’t have ultimate or premium and you just use Express you’re probably gonna want to go out and download the phone SDK install

that as well if you do have either ultimate or premium it comes out already built in so you won’t need that and of course Windows 8 right that’s what we’re using to build everything

it’s pretty much the standard OS for us now and how we do all these demos so that’s basically you know yeah 8.1 is fine we’re actually using 8.1 on our devices to show you this and you’re

gonna need a Windows developer account because at the end of the day the goal is to get this like restore publish it right important yeah it seems to be the throw it off you got to publish it get

it out there let play people play with it gets a feedback expand it you know I know from personal experience that tends to be the hardest part is to actually push it out and let other people see it

everybody wants to make the game but then I don’t want to you know have to like put it in there type a small description about what it is you you know just play my game it’s great I

don’t want to I don’t want to have to work with do all that last-minute stuff you should do it I mean it it’s rewarding once it’s out there and you get to see it in somebody else’s phone

or on the store or something or that you hear conversation about it I mean the first time I’ve ever heard somebody talk about a game that I have worked on it just you you peek up and it makes it

feel worthwhile and things like that so it is a great experience and you can only have that really if you publish it and get it out there because otherwise it’s just you know you’re giving it to

your friends or your mom or whatever and it’s not the same thing but when you have you here stranger talk about your one of your games that you made or worked on or helped with it just it’s a

whole different experience that you you know it really really hit you in the I’m getting teary-eyed it’s great it’s a great feeling very really is then that’s one of the major pieces of advice that I

give new developers right when they come up to me they’re like you know what’s the number-one thing that I should do before I go out and try to find a job in the industry and I always say to them

publish a game yeah it’s one thing to have a portfolio it’s another thing to actually have something in the store right I mean there’s not a lot of difference between you and me when we

entered the industry and stuff like that but that that has been a critical turning point and that’s why we’re doing these kinds of MBAs to get people started so they can get something

published and get it out there because just having a portfolio or a couple of prototypes or whatever you did in college or university and things like that it just doesn’t cut it anymore

the game developers they want to see you know published and ship titles if you have that that’s what they that’s the first number or the first stat that you know we’re all gamers the first stat

that they’re most inclined to look at and if you can show them three or four things on their device that they got right when you met them wherever you met them then that’s that’s a huge boost

they know you’re competent they know you can go through all the steps from beginning to end they know you’ve had experience with all the different stores that you’ve showed it on right and

there’s that’s a lot of training that’s a lot of exercises and work that they don’t have to worry about imparting on you now you have it you have that information and it’s something that a

lot of programs University schools colleges all that kind of stuff don’t dive into there’s no course about publishing on this platform that platform whatever it’s sort of left to

you to go do it yourself so again publishing is very important nowadays it is relatively easy nowadays you’ve got lots of devices and stores to choose from and there’s no reason why not to go

that extra couple steps I know it feels tiresome by that point because you’ve been working on all these bugs and crushing out this game but you just got to get it done and it is very very

helpful to your career if that’s what you’re looking to do you want to get into into that point publish on everything right at the end of the day everything that you can get it out on

it’s just it’s better publicity more people see it you know well how do you know when you’re applying what that person is gonna have right exactly people at conferences you meet people at

game events there’s tons of game jams going on now and even triple-a companies they will send their you know employees to game jams just to watch people playing and

building a game on the fly under crunch time and those people will get interviews after the the event and things like that is a great way to get in and right away they’ll be like oh you

want to see something else I’ve worked on while you’re just talking to them here just what kind of phone do you have let me fire up something that works on that what kind of tablet you have let me

fire one up on that for you right if you can just pump out one two three different examples that’s pretty impressive you’re going to the next level right there so you you want to

have that presence in all my students while you know this I even say if you know people search for you on the internet and you’re not the top three links then you don’t have enough of a

presence yet for some companies they just won’t even you know they’ll just move along and look for the next guy now it’s unfortunate because some of us have famous names of other people and so on

and you got to work that extra mile but and some of us get really lucky and there’s no combination out there and you’re good you’re the only guys but or a girl and that doesn’t matter but that

that’s always something another thing to look for so publishing is important and doing this I’m thinking of a certain dog when people go to search for your name yeah Peter Griffin brian Griffin yeah my

wife also gets that cuz she’s a redhead yes we call you Lois so very cool great advice though it really is okay so that’s what the course is going to be about this is the things that you’re

going to need so let’s go right in and take a look at actually in store installing the Cordova framework into our visual studio step one so obviously first thing you need to do is download

Apache Cordova um they put up the link here and obviously this link will be available for you to download from like I said again we’re using 3.5 so we’re basically looking for

this specific file once you have it downloaded we’re gonna go ahead and extract it to a folder that you can find and I always say that you can find cuz a lot of people have tracked it and they

don’t know where it goes then they spend ten minutes trying to find it so try to extract it somewhere you’re gonna actually be able to find it and then afterwards you’re gonna navigate to your

folder where Cordova is extracted we’re going to create some templates that we’re actually going to use to pull in a visual studio and basically I’m gonna

walk you through that step by step it’ll be a little easier than reading it off of the slides here so let’s go ahead and jump over to my desktop and you’ll notice on my desktop here that I’ve got

my folder somewhere where I can find it if I go ahead and open this up you’ll notice down in here just about halfway down I’ve got a I want to zoom in there cuz vile names and stuff yeah I don’t

know if we can zoom in on this right now I don’t have Snagit sob yeah unfortunately don’t have a setup so I can zoom in but yeah how about halfway down you’ll see a file a batch file

called create templates so we double click this it’s going to go ahead and open up our command line and basically it’s going to build out some template files for us that we can then import

individual studio and it just drops them right in that folder it drops them right there in that folder so we have one for WP seven which is Windows Phone 7 and we also have one for

Windows Phone 8 so we’re gonna actually use the Windows Phone 8 one but if you did want to build for Windows Phone 7 as well you could copy this over and it’d be the same process so once we have that

we’re gonna go ahead and I’m going to copy this and now I’m going to go into My Documents folder and inside my Documents folder I have Visual Studio 2013 ok if I go inside there you’ll

notice that the very bottom here I have templates yep so I double click that I go into project templates and I’m just going to paste my Cordova compressed files right so now we can see them so

now we from Visual Studio that’s basically the steps that we’ve taken to go ahead and install the the template inside of Visual Studio good old dragon trip yeah very simple right so that was

pretty easy pretty painless yep so our next step that’s the demo of showing it let’s go ahead and take a look at now we’re gonna build the project so we’ll create the original project our template

right and then we’ll take a look at actually bringing in our game files so our game library and chance and any plugins that we need is one or else lat ok

so I’m going to jump back into my desktop yet again and here I have Visual Studio open up and ready to go so I’m going to go up to the top here to file I’m going to go down to new select

project now this might seem a little confusing because we said we’re building in JavaScript right why are we in Visual Studio well you can still write in JavaScript of Visual Studio not

everybody knows that it is there are a lot of it’s a good point right web development spin around Java scripts been around for a long time yeah they might not even be aware of that yeah so

we there is an option here so you can build JavaScript so you could build native JavaScript applications right inside here using the wind j/s library right but what we’re doing is we’re

actually using Cordova so that we can have this cross-platform built okay so Cordova is templates actually visual see so if we go down to visual c sharp and we select our drop-down we can

actually scroll down here and if we scroll down far enough we’ll come to Cordova wp8 underscore three underscore five underscore zero right so that’s the one we dragged in just a minute ago yeah

exactly so if we select that you notice now that we have Cordova highlighted over here and logo is under cool little logo gamers definitely made that yes definitely and we’re gonna give this a

name so in our case I’ve just been calling it our whoops RPG so what’s called RPG apparently I’ve hit caps lock somehow so that to auto come on there we go so just create a RPG hit okay is

going to actually build our bomb project so let’s give it a couple of seconds here make some sound effects cuz that’s what we do kind of feel like we should have the cooked turkey type thing here

right so yeah the correct turkey magically TV we have dinner so there we go it built out our basically default project so you’ll notice here most of this is in sam’l and CD sharp but we’re

programming in JavaScript so it might seem a little odd but if we open up the you folder so the world wide web folder yes yeah um you’ll notice that we now have

JavaScript and it’s pretty much laid out like how you would lay out a web app all right so what happens if we open up that J’s file there we open up the chord images this is Cordova’s library so it’s

gonna have a lot of stuff in it right but as you can see we can see it we can edit it right inside a visual studio not recommended in this case don’t play around with cordovan yes don’t play

around with the specific file you might break something and then have a lot of troubles down the road but yeah basically you know we can open it up edit it inside work on all the files we

know it’s been set up right at this point exactly by verifying that it’s there why don’t we actually verify that one step further and I’ll fire up the emulator okay we can actually see what

Cordova like a basic Cordova template looks like this is connecting to our emulator so you know we were talking about cross-platform and stuff right so what would be why would we want to do it

this way as opposed to say just building in when j/s or you know building it without Cordova well I mean you there’s multiple reasons if you do win j/s I mean some again some people might not be

comfortable with that because they came from a background of HTML previous versions in JavaScript all the way back and and when Jas is slightly you know has slight differences so targeting more

the web developer style right so so they could move forward with this and feel a little more comfortable but still reach all the platforms again yeah and like we said before it abstracts the hardware as

well right so we can access things like the camera or the gyroscopes and all that without having to do purely native code which wouldn’t make this very portable if we wanted to say take it to

a different device we’d have to rewrite all that code right so that’s the big thing about Cordova for me is it’s really abstract alot of that heavy lifting for me and making it easy you

know to get things up and running and and being able to just take this like literally and drop it onto another device or even into the web as it will see later you could just drop this right

into the web and it works right there’s nothing that’s right there’s no underpinnings or rewriting or death out you know special code and so on you just it’s ported automatically

basically because it’s not ported it’s just ready to work on everything anyways and yeah forward yeah I wouldn’t even I don’t even know if I call this porting really whose you’re building it on the

platform and the platform’s taking care of the rest it’s like building something in you know Java or something else basically that runs on everything it’s meant to do that it’s already a platform

that you’re standing on that you know abstracts the hardware away from your worries yeah that you move forward yeah very cool so as you can see we’ve got it up on the screen now it’s not really

doing much it’s kind of pulsing devices ready but it shows that we’ve got Cordova up and running inside of our emulator so still look sweet for doing it does look pretty sweet for doing

pretty much nothing register linking I think they’re actually using the blinking tag for that as well so it’s very funny so yeah that’s a Cordova up and running pretty pretty simple right

so if we see this we we’re good we know we have the template there we can move forward yes exactly so that’s that up step number one is taken care of all right all right now in chant now yes now

we’re gonna move on to a chance right so I’m going to slide back into my slides just because we spent so much time making them I might as well use them so again we were talking about a chance a

simple framework that we’re gonna be using very flexible has a lot of plugins I was digging through the plug is I didn’t even realize how many plugins they had there are a lot now one thing

we should preface Before we jump into enchant is if you go online and start looking for documentation on enchant be warned it’s overseas development so there’s some English support they’ve

been doing a lot it’s it’s it’s starting to be spread around and again we’re picking it up I’m sure so that’ll help a little bit of a spotlight on it and and build that development but there a lot

of it is again asian-influenced and so on and you know it’s built for the JRPG it is they really that could really feel that that was the idea behind it you can feel that and therefore most of the

documentation is not necessarily readable to North Americans and so on but they’re working on that yeah exactly the the main like meat potatoes if you will is there right it’s when you start

getting into like the the more obscure plugins and features of it like that you might have a little bit of issue but like the forms were really well moderated yes

and there are some other good examples out there of doing various different things exactly yeah if you do a quick Bing search I’m sure you’ll find a lot about in chance so definitely cool so um

to get started we need to download and chant so the version that we’ve decided to use on this one is the newest version that they had available at the time which is version 0.8.1 so you can

actually download that directly from the enchant website and again we need to extract it put it in a folder where you can find it at the end of the day it makes things a lot easier on us okay so

once we’ve got it downloaded we’re gonna extract it and now what we’re gonna do is we’re gonna go into visual studio and we’re gonna take a look at how we’re going to bring this file in and this is

the same for every file so I thought it would be kind of neat to to kind of show it to you this way as opposed to you know dragging and dropping in writing right so we’ll do it this way so I’m

gonna go back into visual studio and I’m going to go to my j/s folder which is nice they’ve got the hierarchy already set up for us right so that’s already again in the template yeah pretty you

have to look for it it should be there under your WW folder should be your JavaScript exactly so once we select that we’re gonna right-click on it we’re going to go to add existing item sorry

correct and when we pop this up we’re gonna go to that place where we stuck it so for me it was on the desktop for those who love shortcut commands I believe it’s shift alt a once you have

the thrown up the pro tips look at the those keyboard warriors I support yeah awesome so inside of the enchant folder we’re going to go into our build which is basically the already compiled

versions that we’re going to need and you’ll see here we have in chance there’s a chant dot min which is actually a minimized version so if you’re worried about you know the size

of your binary at the end you might and you’re not using all the features of a chance you might get get away with using the minimum version right but in our case we just opted to use the vanilla

version of enchant so we select that we click Add and there we go and chant is now part of our our system and anything we call an will now show up okay pretty simple a

that wasn’t too bad no that’s your heart so what do you say we do that again for a plugin sure it’s not good much wonder we want to bring in what we’re gonna bring in our UI plugins

so that we can use some cool stuff and get some new changes every game has UI yeah it’s very important and the cool thing about enchants UI is it has a lot of necessary features for if you’re

building mobile games like on screen buttons directional pad which we actually use as well as there’s some things like a health bar is included in there they have oh okay yes there’s a

lot of very good things that fit for an RPG and what you’re looking at will be basically in here for you to utilize so we’re not we’re not using any of the specific stuff like that we’re using the

direction iPad and some some buttons and stuff like that but overall we’re not using like the life bars and stuff but the documentation around it’s pretty next time next next time yeah yeah so

we’re gonna go back here I right clicked on my JavaScript folder I’m going into existing item shift alt a and this time I’m still in my build folder but this time I’m gonna go into my plugins folder

and look at all those plugins it might be hard to read but there are yeah there is I’m yeah I’m sure it’s kind of hard to read on the screen right now but like we’ve got things like the box 2d physics

engine okay very nice right we’ve got special things for you know doing sockets so networking okay it’s got some networking in there there’s even Twitter oh right you have a Twitter plug-in

right there so if you want to add some social media down the road just thinking of a comment all right but the one we’re gonna select is you i dot enchant so this is the one that’s gonna give us all

of our UI features perfect so go ahead and click Add and we’re done that’s it that’s pretty simple analyze that and again what is in there well you’d have to look we’re gonna look it up or a

while we’re gonna utilize it but you can also look up the extra features in any of those plugins that are in there online exactly to get an idea of at least what’s there and then start

experimenting and I actually I opened up the file here the enchant jess or UI dot enchant you can zoom that code in there I did yeah actually a bottom node zoom oh there we go that’s okay

so this basically just lists some of the features alright so this is our UI so we got empty pads like you said analog pot pads buttons okay oh three built-in themes so I don’t

have to do art that’s great programmer art is not pretty so that’s you know you got mutable text which is awesome yeah score labels which is you know very useful for a videogame you know the bar

you’re talking about yeah you got your life label your bar and virtual map so if you want to have a goal yeah yeah so you’re gonna have a map up in the corner let you know where you’re walking it’s

all set up pretty cool every good that’d be good and they do have some pretty good documentation actually in the file – on how to use it all in English all in English well that’s a very handy for us

English speakers anyway alright great so let’s go back over here I showed you all that so I guess the next step since we’ve got everything kind of imported is we want to start modifying the template

right right so I guess our first step in modifying the template is we got a rip out the stuff that we don’t need sure right sometimes there’s always some pruning to be done I mean they are

working with very general case this will help everybody do whatever so we might have to take out little bits and pieces we don’t need exactly so what we’re gonna do is we’re going to go in and

we’re gonna remove some of the files that come pre stubbed in so in our case we want to remove the index dot CSS which is a cascading style sheet so for any web devs out there you’ll know what

I’m talking about game devs might not know but don’t worry we’re don’t worry what we’ll cover a little bit we’ll cover a little bit about it we’re not gonna go too in depth in that because it

doesn’t have too much usage in our in our example 8 but yeah definitely worth reading up on in the future and then we’re gonna remove the index J s files because we’re gonna be replacing it with

our own anyway so we’re just gonna remove that for the time being and then after that we’re gonna open up the HTML file and replace it with some text inside ok so I’ve got the text in the

code but I think it would be a little bit better if we just jumped into visual studio and took a look yeah so how about I show them how to rip out the code and then you show them what we got to put it

in the HTML that sounds good sound good alright so I’m gonna jump back over in the visual studio and like I said the first thing we want to do is start to remove a couple of the files we’ll start

with the CSS files so all I’m gonna do is I’m gonna select the index CSS and I’m just going to hit the Delete it warns you it warns you are you sure you want to delete this in this case I’m

pretty sure so I’m gonna go ahead and hit okay and then we’re gonna want to remove one more file and that is the index.js file so inside of our j/s so yeah I have my drop-down already open

there so inside ww yeah so inside of WW inside of our j/s folder you’ll see the folder error of the file index j s okay click on that and i’m gonna nuke that as well

all right and gone so that’s getting rid of the stub code right what we don’t necessarily need because we’re gonna replace it with some other stuff anyways yeah so why don’t you fire up the html5

the in or the index.html file and we’ll walk through basically what we’re gonna add to that file it’s basically a brand new file so I’ll do this I’ll show them the original sure you can show them the

original yeah so this is just the original a lot of stub in code it up in a little bit to do it on every file unfortunately but that’s okay I don’t mind so there’s a lot of licensing at

the very beginning you know but then we just have you know your your basic setup for an html5 or HTML application so what we’re gonna do is actually a lot of this is content that will reuse again but

we’re basically going to remove all the divs and some of their scripts and we’re gonna go ahead and add our own okay okay yep so go ahead and fire that up and show them or anyone looks a little

remind and we’ve got different color coding going on here so you know who you’re looking at so this is the modified file we’ve just taken out the the license part just really does save a

room for what we want to show I can pretty much almost fit it on one screen here now I did my best yeah and again it’s nice to not remove licensing when it’s somebody else’s

licensing rules removed in this case for more of showing you more Swiss file this is really the parts we need in the file so nobody wants to hear us to go through really bellezza no no that’s right

that’s the different scope of a different topic okay so here we’ve just we you know we got our RPG template as a title and you can change that to whatever you wanted and of course

because it’s a title in your head tag it’ll appear in your browser bar if your browser still has a browser bar nowadays some browsers are phasing that out and making it disappear I won’t

mention any and then we got our body tag and inside our body tag that’s where we’re going to include the files that we need to build our game and you can already see that here is enchant and

Cordova j/s files which we’ve brought in here we have our UI enchant IAS which is that plugin we brought in and then we’re gonna add a game and a map j/s eventually again this is the finished

production code that we’re looking at here for this little it’s we’re adding those files pretty much right off the hop right you could pretty much get away with going ahead and coding that in yeah

just write them in I mean they if it can’t find a JavaScript file it’ll just it’ll throw an error and I mean it won’t stop your website from working source because the browser’s are pretty

resilient that way it’ll just move on and warn you that hey I don’t know what this is or where it is so you want to talk a little bit about what the metadata is up there at the top so we

have sure you know obviously our content type is HTML and we’re using a character set of ut8 which is basically just setting it up letting it know how to render and what

were brought to percent and on top of that this doctype definition just allows other websites and the browser’s and other tools that you use to know what version you’re using now we’re using

html5 mm-hmm but hTML is actually the default now the default for meaning html5 now because of when this doctype tag came in and all the other kinds of stuff so really if

you were using something before html5 you’d be more specific but yeah in this case hTML is is fine for what we’re putting there the metadata itself meta tags again they’re not tags that any

viewer would see of a website or any the content in case again you are a game developer but not a web developer now we’re switching sides here we’re going to talk to you for a bit the meta tags

is is for information for things like web crawlers to figure out what’s on this site and why it would what keywords to give to it you could also do things like that and what we’ve done in here is

we’ve done some things to let the browser’s know how to react to this website yeah so I see some scaling in there right for example we have an scale and maximum scale equalled the one

over here now I’m sure if you if you have a phone and you’ve played around or a tablet you’ve played around on the Internet you can double tap or triple tap or pinch to zoom or whatever and the

website basically would you know just pulse in like that on you and you can see the content and then it would pulse back out if you undid the action what happens is sometimes those devices have

a default scale set to them so it might start already zoomed in or already zoomed out three times trying to get the whole normal website that you would have been viewing on a computer onto your

phone so that you can then zoom into the area you want and we we want to make sure our game always looks the same every time across all browsers so that is sort of what we are trying to enforce

here is to let the browser you know what you know can configure how the user can scale or if you can yeah so we’re saying don’t let them scale right the initial scale the one yeah the maximum scale is

only gonna be one so no pinch-to-zoom based right that’s what we’re trying to stop no double tap to zoom no pinch to zoom anything like that so that you will see the game and it’s interface and what

you should and not accidentally lose track of it or double click thinking you can kill a guy and it pops in there and now you can’t see what’s going on right it’s those game features that get

frustrating in in a browser because browsers weren’t necessarily designed for game development they were for playing games and they were designed to view documents mhm and so yeah double

tap zoom great and I can read the words I couldn’t see her I could drag and highlight or I could drag just a pan around and we want to disable a lot of those features in a game environment

because we have control of the camera we’re feeding you the UI all the visuals of the right-sized real freaks well yeah there’s that too I mean everybody wants their character customized just as they

see fit right so that’s what we’re doing that’s really what we’re using the metaphor the meta tags for and that’s why that one’s label does viewport and we’ve listed all of those options there

and then the one with the MS application tap highlight we’re basically saying don’t highlight the where the person’s pressed on the screen right because that obstructs their view again of what

they’re trying to play or interact with or whatever we do we know they’re tapping screen they know they’re tapping the screen and we’re trying to clean the visuals a bit cuz we’re probably

gonna add our own visuals like oh you selected the guy and we’d highlight them mm-hmm right so we don’t want that postal to ring or the wavy pulse on some other devices and so on to be there and

that’s what we’re trying to disable in this case specifically for Microsoft so but depending on your application you might want to modify this a little bit right and play around with it yeah

depending on who you’re aiming for and things like that there are some specialty meta tags that you’ll be looking for the ones that we put in here are generally we’re trying to target a

lot of different a wider range of devices so we tried to go pretty default with everything and again if you find one like there are we new devices released every day right incoming future

and you find one that suddenly has some new behavior or works slightly different because they’ve got an OS upgrade or something you just have to go out dig around search for the meta tags that

configure or block out whatever feature it is that you’re suffering from in your game right trying to suppress or trying to ad right so that that’s what you’re looking for you’re basically saying you

know html5 meta tag that suppresses bla whatever the feature is on this device this phone this OS and then hopefully you’ll find the information you need and you can just pop it in there it’s

awesome so underneath of that we were talking about where we’re actually loading in our scripts right so we have our Cordova we have our chant we have UI our game and our map right and basically

all we’re saying here is we’re just writing language that tells the the interpreter hey by the way that this file that you’re looking for is going to be of type JavaScript that’s right so

it’s a script tag you tell it the type of script in this case JavaScript written in plain text it’s not encoded or zipped up or something like that and then what the name of the file is and

then you close your script tag and you’re good to go and this one up here we haven’t talked about this one yet it’s a stylesheet again that CSS that cascading style sheet it’s written in

plain text in that language CSS and it what its gonna do for us is it’s gonna allow us to state how some of the visuals are gonna be for our game I might as well show that off I’m actually

yeah it’s a good segue so what we need to do is we need to actually add our own CSS because we remove the one that came with the default template right so what we’re gonna do and Brian’s already got

this done so I’ll tell you what I’ll jump on to mine since I don’t have it and I’ll actually show you the step it’s very very simple but might as well show it yep yep so what I’m gonna do is I’m

gonna go into my WWF older again I’m gonna select my CSS right now there’s nothing inside of it if I right-click and go to add new item so instead of existing item we’re gonna add a new item

right um and it’s gonna pop up now this is the one quick about using Cordova that I really wanted to highlight when you’re using Cordova and you’re writing a JavaScript because Cordova’s written

primarily like the the overlaying wrapper is written in c-sharp right automatically my IDE Visual Studio thinks well you want a visual or you want to see sharp same on it when the

template ended up in that exactly right so I’m gonna show you a very neat little trick and very simple little trick so what I’m gonna do is I’m just gonna go down here and we want to call our CSS

game dot CSS right so I’m gonna type game dot CSS misteni what did I miss any so I should be looking at my screen or not the screen that’s projecting so yeah I got game dot CSS and if I click Add

we’ve now created a CSS oh you know what I did that wrong let’s try that again shall we it’s always good to see it wrong once yeah you know what it’s nice to see

someone else make mistakes right on live television that’s great I’m gonna go to add new item but this time I forgot the the very important step I got a click a code file okay right so that way it

doesn’t stub in the saml and everything else before it thought I was trying to add a page right so this time I’m actually just gonna add a code file so by default it would be a blank c-sharp

code file right but in our case we don’t want that and actually this kind of helps it a little guys gotta add an S to the end and now we have a CSS file there we go now we have our game dot CSS and

you’ll notice that it’s actually highlighted as a CSS file right and if you open it up yeah I got nothing in there right yet so let’s go back over to Brian’s computer and see all the fun

stuff that we want to stick in there all right so here is what we’re putting in our game CSS file now again some of you may be familiar with doing CSS work and some of you may not these are basically

again the tags from HTML file right over here right here’s our body tag I never got an HTML tag so basically what we’re doing in our CSS file is we are giving the style and the color or

the shape or the background color or features like that the text size the width and height you want for though anything that has that tag name and I mean we could go into more depth we

don’t need to for that so things like we want a width and height of a certain size for our game window and you know some of these other features there’s again a mess content zooming so we’re

trying to suppress the the fact that you can zoom and Panchen and stuff like that because when our game file we don’t want you moving around the game board we want you focused on the game we don’t want

you’re pinching and zooming and and changing the dimensions right and then some games I mean might be able to mighty you yes I mean if you’re looking for Where’s Waldo or some crazy thing

like that you can find little guys I could think that would be bad and like a real-time strategy right where you can see the entire board now you can see the whole army come up no fog of war just

the entire armies right so and then things like our background color for our game and this is again is written in hexadecimal so it’s a number system yeah it’s from but you can write in our GB or

anything we can write it in other forms and that’s just the one we’ve picked because a lot of html5 developers are just used to that color color code you can go to photoshop and just spin around

in the field oh yeah that’s right and it spits out which one and it will show you those so people have probably seen this if they there’s a lot of websites out there too that do the same thing there

are color picker websites that will let you do the same thing so you know what the code is and you just type it in for whatever color you want and of course margin is basically the outside area

around these tags and by default it’s usually not zero mm-hmm because most things shouldn’t be crammed up against something else exactly and but we actually want that

border to go away as much as possible because we want to use all of the devices screen space exact so that that’s why we’ve set margin to zero and there’s again that’ll help with that and

we set our width and our height to default sizes and the reason for this is there’s a lot of different devices out there right and we were concerned that if we didn’t set this we would end up

with scaling issues on different devices right so if we set this we have a deep scale and it’ll be presented in that format on every device so yeah you might have a bigger screen and it only takes

up a portion of your your device screen or whatever for simple simplification basically we just chose to go with a fixed screen and we can always talk about scalability and all that kind of

stuff later on a different thing that can take a couple you might take a few days yes with all these with all the finesse of every single device and everything will screen format then you

got you know sixteen by nine four by three you got five by four all those as well not just different pixel densities yes right as well you have a lot of different form factors and so and in

gaming I mean that fact affects your control it affects your your precise and especially if you’re touching the the the device and system if you’ve got on-screen controls all of a sudden that

becomes an issue because if you’ve got it set at a certain spot on there and you change the format maybe you go from 4:3 to 16:9 that’s gonna actually move the controls or stretch them if you’re

not and if you’ve done probably one of the worst things that you could do in hard code values into it oh it’s you you’re gonna have some fun the bane of every junior program every time I go to

hard-code something I hear the little voice of Brian in the back of my head saying don’t do that that’s not right you know this will bite you later yeah exactly so we just picked a screen size

in the format that we were happy with it was big enough to show off it worked well in the emulators we were playing around with it and on the devices we were playing around with and that’s

really how we just came up with it for now as a demonstration purpose yeah and but that’s pretty much it for this file well what about the top there we had though we had some Zeus Olympics sorry

so we had a electric around yeah so this is a Microsoft specific for a viewport and basically all we’re trying to do again is we’re trying to suppress the zooming right right so what we’ve done

here is we’ve actually changed the zoom from one to two because on the Animus device like the Microsoft devices it tends to have a 1.5 scale I believe is the issue so we just said okay you know

what scale everything to two and it’ll it’ll fit properly and you won’t get any pixel you want to actually yeah and things like that so we can pixel perfect art so if you were to target another

device there might be specific tags that you want for that device correct right so that’s where you you might have to do a little bit of coding when you’re putting it on different

just to make it fit in and enact normally right again it allows you that flexibility of oh I found an edge case on this one device that was built one year sometime along that somebody

important of me bones or something you can just you know fix that problem exactly but you know at the end of the day Cordova is cross-platform for that reason and you are gonna bump into the

little odd cases where that didn’t work on a certain device but it did work on another device and you know it’s it’s the the problem that every cross-platform developer has right

there’s always little things that you have to take care of at the end we can do as much as we can to abstract that but you know you have to do a little legwork every once in a while that’s

right yeah okay so that’s basically our CSS we’ve done a set up we’ve got our Cordova template installed so we can fire up that now we’ve got our Visual Studio project together

we’ve got enchant imported we’ve got the UI plug-in imported we’ve set up our HTML we’ve covered a lot and that’s what period of time that’s that’s a lot of content to go

through so I think it’s about time for a break yeah so let’s take a ten-minute break and when we come back we’ll well dive in actually building the game that’s the best part