 Hello? Hello? Ah. Hola, ¿Cómo estás? Me llamo Jesse, and that's about four years of high school Spanish, so I Tried. Thanks for sticking around. I know I'm the only thing that's keeping you guys from lunch So I'm gonna make this really quick, but there's a lot of good stuff that you know I've learned over the past year from building all these games that I wanted to share them with you So I kind of summed this talk up in this idea of the five keys to success when building HTML5 games There's kind of like a little play on that HTML5 and five thing so my background on I had an introduction I like to go a little too deep into it, but I Put up my information up here, especially my email because my job at Amazon is to help developers be successful So that's from either writing blog posts doing talks like this or just talking to you individually So, you know, if you guys are building anything cool If it's in the HTML5 space if it's a native space, please feel free to email me directly I always like to see what people are doing and I'm always quick to try to you know offer feedback and help I mean, I spend a lot of time working with developers and I've seen a lot of stuff being built So there's a lot of advice that I can help offer you guys and you know being an evangelist means that I wind up going to a lot of these conferences and You know, I get to see where technology is going and You know a while ago I want to say about four years ago is when we started seeing kind of like the death spiral of flash and I started Trying to move away from that and figuring out where I was going and on the way to HTML5 You know, it wasn't until Canvas really became a little bit more stable and working across different platforms I started falling in love with it and going back to my roots of just doing regular JavaScript and HTML and One of the things that actually is great now about building games in HTML5 is the fact that there's a huge community That has all kinds of frameworks and these frameworks are getting more and more powerful I think the joke goes something like there are more HTML5 game frameworks and there are HTML5 game developers So it's really hard to kind of figure out which one to use So I started out using impact.js and I think this round in flash I built so many game engines and I built game engines in native languages, too And I didn't want to go back and do that again So I decided to pick some of the best frameworks because I wanted to focus on making games And I think if there's anything you can learn from this talk, it's the idea that Don't reinvent the wheel. Don't go out and build a framework Go find the framework that works and make a game focus on making games That's the hardest part as developers. We like to you know reinvent the wheel all the time So go pick something out So impact is a really good one a new one that's coming up and when I did a workshop on yesterday is is phaser and phaser is written by Richard Davey who was a very well-known flash developer and This one's a really awesome framework and it's open source And then there's a bunch of other interesting ones easel.js is a popular one that mirrors some of the flash API's and Then game maker which is interesting because it's a standalone IDE that I'll publish to native and it'll also export to HTML5 And then there's constructs for people who don't like to code and just want to do more drag and drop So there's a whole bunch of options out there Oh So and really, you know the reason why I build a lot of my games in HTML5 is because I can actually play them on desktop browsers and on mobile browsers and to really kind of put this point at home I Guess I'll put these stats out that the so at Microsoft one of the fun things is that I was rated on my on my stats for my blog and One of the things I did is I had a lot of my games on my blog So my blog stats went up really quick But a really strange thing is as I was going through the stats and noticing most of the people who are coming to play my games We're actually coming from iPads and I was seeing like 90% of the people playing my games were on mobile devices And I think that really speaks to the power of why you would choose HTML5 to build games If you're looking to target mobile browsers, which is a very big market You're gonna get a you know, it's the only game in town really There's nothing else that'll let you play games in the browser So and then all my games I have the URL up there This is a new staging ground I'm putting for all my games as a clean them up but if you just go to games.jesseframing.com you can play most of my games and A lot of this started last year at this game jam called one game a month So I came in at third place, which is pretty hard to do one to build 12 games in a year and then also to come in third place out of hundreds of other developers and There's a lot of things that I learned from this process One is how to quickly explore and prototype out ideas like you know, how many people build games now? Anyone oh come on you guys should build more games or a lot of fun. I did enterprise development for years It was the most boring soul-sucking thing ever And I always made games at night to like so I wouldn't go in like postal on people so Okay, well, hopefully I can change you guys into making a few more games so The idea behind is a you know a lot of us do have ideas and this even you know transpires outside of games is that You know you have ideas, but how do you build them quickly? How do you prototype them? And how do you move on to actually building it? Also, it helps teach you how to focus on the core mechanics So a lot of the times when we're building something We keep adding on and piling on features and features and scope creep and all that stuff But in the essence if you're gonna make a game in a month Which really means if you work at a full-time job that you have about a week That you want to have just the core concept of that game up and running quickly Also how to work under pressure so before I got into evangelism I did consulting and I work on some very large websites under some really awful timelines So I was always very good at working under pressure But building a game is very tough as you're building it for yourself It's a labor of love and you're your own worst critic So you have to learn how to speed up that development process and get going Also finding the motivation to complete a game I mean just making a game is easy a lot of people start them But not many people actually finish them and then finally, you know every time you publish a game or release something for other people to use You get an incredible amount of experience by just completing a task So the worst thing you can do is start something and abandon it and move on So forcing yourself every month to actually release that game in whatever state it is And there's some games that I just released like it sort of works It's important because it's enough of an idea out there to say, you know what? Well, I did it and now I can take that and go back and fix it later so a Lot of this comes down to the idea and I love this quote by Stephen King where it's a talent is Cheaper than table salt and that what separates talented individuals from successful ones is a lot of hard work And that really is what it is at the end of the day I don't even think my games are that great Over the years over the year they've gotten a lot better But it's really because I put in a huge amount of work to making each one better and better and learning from what I what my mistakes were to improve So the first lesson is the idea of Create refine and iterate and what that means is that there's no way that you can build 12 games 12 unique games in a year and Actually, you know finish it So the idea is that I'll build a game and then I'll take that game and I'll refine it I'll tweak it and then the next game is sort of based either using the same code base Or I go back and I will take the same idea, but I'll just remix it and do something different with it And then I keep iterating and I keep going building this foundation of from good code for one game Moving on to another to a lot of concepts. So you'll see a lot of my games They have the same start screens. They have the same credit screens all the stuff that I try to reuse from one game to the next and Making a game is a never-ending process. So I'm very big on using these like to-do lists I have tons and tons of to-do list of all my bugs or features I want to add and some I'll break out into like the next version So you wind up in these places where it never really has to end. So Part of the one game a month made me say, well, this is the feature set I need for this game and if I like the game a lot or I see that there's a good interest I'll move on and I'll try it again, or I'll go back and I'll revisit that game at another time So a good idea or a good example of this is this is a game God, I've been trying to build this game for like ten years So I finally built it about four years ago or three years ago when I did my book on impact.js And it's really basic. It's modeled after this game called super crate box And it's a mix between that game, which was a spin-off of Mario the original Mario Brothers arcade game and elevator action And it was okay, and I wrote it really quick and I used it as the example in my book But then over the year I made two new versions of it for one game a month And I refined it a lot because I learned that it just wasn't fun to play And that's a very hard thing for you to accept because games are like art and my background is in art I'm a self-taught programmer and you know I really equate making games and even indie game developers are now like the new struggling artist Like everyone's trying to make this thing that they love so much So I went through and I cut everything out and I just refined the game to something that was its core essence And wound up being a really good game in a very popular game that people like to play see you shouldn't really be afraid to experiment and That's a really big thing in any anything you do in life, right? You shouldn't be afraid to just put an idea out there tweak it refine it and keep messing with it until it works So and the other big thing about especially when it comes to game development is the idea that you should never give up I mean, I guess this guy's like, you know sweeping this parking lot and forever But the idea is it, you know, you can't build one game and then imagine you're gonna be successful It's just it just doesn't happen like no even, you know angry birds was like their 15th game, right? You know flappy birds. He was building issue of five games He had like six or seven issue of five games before flappy birds became popular, right? So the idea is that you have to keep building games and keep trying new ideas because one day You'll hit the lottery and someone will like it and then it blows up and everything is good And you're making a lot of money and then you get to retire from whatever it is you do and make games all day long At least that's what I keep telling myself, right? So the second lesson I learned was to design for mobile first I mean, you know, there's a huge debate on whether you're using web or you're gonna go to native or whatever it is And for me it was always I wanted my games to be playable on the web browser so I had to think mobile first and And When you think about mobile first you especially in gaming you want to do mobile resolutions and as we talk about resolution You know people kind of get hung up on this idea of like Oh, well I need this to be this exact resolution or I need to support whatever like the billions of resolutions that Android devices have these days But it really comes down to the notion of aspect ratio So you can solve the equation really easily in gaming if you just think well my game support 16 by 9 and 4 by 3 and in any other situation I'm gonna get black bars, but I can minimize the amount of black bars I get and You know, especially when you're building one game a month You don't really care about how perfect it looks on every screen But you want to get it as close as possible and also you want to simplify the UI So one thing that mobile games have taught us is that you can build very very basic UIs and have them scale very well to the different aspect ratios So this is an example of a template I put together when I was working at Microsoft building sort of Windows 8 games and it still applies to kind of everything I do today and it's the idea that the middle Square represents an 800 by 480 resolution and that's my web resolution and from there I basically scale it up. So that's a 4 by 3 aspect ratio I can go to 800 by 600 and here's the trick So at 800 by 600 I actually wind up scaling the canvas up from that size to 1024 by 768 And the reasoning behind it is that you can't always run canvas at the full resolution of a device If you try to it'll completely die You know the best example is the highest resolution my game will go natively is up to 1076 by 600 Which winds up being kind of like the native resolution of a widescreen laptop But when I was running this on a 27 inch monitor If I ran it a full resolution it would be completely it would be like three frames a second so I go to a certain resolution that I feel comfortable at that aspect ratio and then I scale the canvas up from there and Browsers are very difficult because somebody could open a browser that looks like this like this little weird rectangle And you have no idea what to do with it when you start moving towards mobile You're like well, I know that there's gonna be set aspect ratios and the game isn't gonna be resized weird So that's the kind of thing you do and so when I resize I always constrain to these aspect ratios The other thing that's important is to optimize and compress all your images your scripts in your CSS I can't stress this enough. I mean if you're building for mobile you want this to be the lightest smallest game possible and a good way to actually optimize your artwork is by creating what we call texture atlases so a texture Atlas is very similar to a sprite sheet where you take a bunch of images that are in a grid But what's great about texture atlases is that the artwork doesn't have to be in a grid It doesn't have to be uniform. It could just be any sizes and we generate this one gigantic image And from there it outputs an atlas and the atlas represents coordinates on how to actually cut out each of the images in your game What's great about this is that One we can keep textures in memory correct So for WebGL we want to use power of two for when we're dealing with textures, so we optimize for the GPU Also because we generate out a JSON file I can actually inject that JSON file into my code So I cut down on an additional load and I can minimize the JSON file so that the game is a little bit more optimized And I wrote an article about this. I mean I took a game that was having about 200 Loads and got it down to 176 loads, which doesn't sound all that impressive But I actually shaved off about two or three megs off the game So once you have this PNG you can actually go through and compress it use like a PNG An 8-bit PNG or you can take a 24-bit PNG convert it to an 8-bit PNG and still retain the alpha By using some certain tools The other thing is automate everything so because I come from enterprise and agency background I've taken everything I've learned from enterprise development and I apply it to my games and that means automation So when I did Java, I was using ant and Whatever other build tools you have out there So and I use this quote every time I talk about automation if you're not automating you're kind of insane and the definition of Insanity is doing the same thing over and over again expecting different results now as humans. We kind of suck at You know doing the same thing over and over again. We don't produce that That's why we have computers computers can do the same thing over and over again for you so make the computer work for you and The best thing that we can do with this automation is that we can optimize and package up our game We can also deploy it to multiple platforms So while I use the same code base for every one of my Distributions, I still have to package it up differently. So if I'm doing it to web, it's one way if I'm doing it to my blog I might have to change Relative to absolute paths if I'm publishing into the Chrome store I need to zip it up and put a manifest file in I don't want to do all that by hand I let my code do it for me and then I can reproduce this so every game that I do I don't have to worry about how I'm gonna publish it. I just simply worry about making the game So I rely a lot on node.js. It's really great as a back-end, you know server-ish thing if you you know are comfortable with having You know lots of JavaScript running on a server I don't I come from more of the Java side of the world So it's I'm still like you know on the fence about it But for as a local tool and on the command line, it's really awesome And there's a lot of great stuff you can do when you pair it up with something like grunt So with grunt, I'm able to reproduce everything I did with ant and I have complete automation And what's even better about this is because all my automation now is in JavaScript I'm using the same language to write my games as I am my automation tools So I don't actually have to you know, oh god I don't know if everyone's ever used ant before but doing that XML structuring is like all I think some people are laughing It's like awful. It makes no sense trying to do an conditional inside of ant was like the worst thing ever so I Have some simple rules around what my grunt file needs to do and a lot of these aren't very complicated The first thing is that I always take a copy of the source code. I'm working with so don't don't ever ever Manipulate a build script on the code that you're writing or if you want to lose that code That's a good way to do it So I take all the code and I copy it to like a temporary directory and then from there I take all the JavaScript files they turn them into one JavaScript file and I can minimize it and then if I have Jason files or additional calls I'll take those Jason files and inject it into there and minify those as well So this way I get the smallest most compact JavaScript file I could possibly get Then I aglify it or I do some sort of obscuring, you know, especially if we're in games I mean, it's impossible to keep people from hacking games But I try to make it a little bit difficult to get all the source code out and then I perform each of my builds So I'll have a deploy folder that has my web build my blog build my app store build my native whatever rapper build And it does everything for me So the other thing is Analyze your game. So how many people Use analytics in their own apps for their games. Well, there's not a lot of game people, but how many use analytics, right? Yeah, another enterprise thing that I learned I Put tracking and everything. Sorry if you're playing my games I track everything you do because why wouldn't I like I don't I can't sit with every single person who plays my games And see how they play it and since we're using web the best part about building HTML five games that you can use web Any web library to help you build your game. So why not add analytics to it? And the idea is that you should always know what's going on in your game You should know every aspect of how many people are playing it When do they stop where they going even down to like in the stores? What are people buying and when are they buying it so I can tell what levels that people are buying certain guns And I can see if there's balancing issues So the most basic thing that I always take analytics on are going to be the game screens so I can go through and see at each part of the game who starts the game who gets to the end of the game and You know from one month of data what I was able to learn on just one of my games was that 19,000 or so unique people played it now to give you perspective This is one month of a game that I don't really promote that just sits on my website to get 19,000 downloads in a native store It's very difficult without any promotion, right? So this is third is 19,000 unique So it's not even how many people are really playing the game, but I'm only seeing 7.5,000 are actually finishing the game and Strange enough because I do design it from mobile So I have a quit button even in the browser people are still hitting the quit button instead of closing the tab So I'm getting 634 people hitting the quit button But it's telling me that only 38% of the people are actually completing the game So I'm getting a huge drop-off and because of that I'm able to actually go back and say all right Well, what's really going on in my game? Okay, there we go So a lot of this is about finding balancing issues everyone take a deep breath There we go Okay, so Trying to find balancing issues so I can see from level to level where people are leaving the game Or if a level is too hard early on we're getting a huge drop-off in that actual game So we can go through even deeper and see where the real drop-offs are and also Inside you the lower stuff is the categories of what people are buying in the store And I can see how that relates to what level they're on and whether people are actually making enough money early on in the game To buy the weapons they need to get to the next level or if that's the disconnect The other thing that's incredibly interesting is that I can find bugs in my game based on the analytic data So whenever I see really weird analytic data like this I Something wrong every fourth level they're supposed to be a bad guy and Only 11 people out of a couple of thousand and make it to level four are seeing the bad guy And then they don't ever see the bad guy at any other level after that So right away I'm able to say up I found the bug and when you're building one game a month They are riddled with bugs Absolutely riddled with bugs But because I have such a good system in place to find where these bugs are due to the analytics and I can deploy it Very quickly with the automation stuff. I can go and fix these problems whenever I get a chance So then the last thing is most important is the idea of release early and release often Right, you don't want to hold on to a game You don't want to hold on to anything for so long because the more you look at it You know the more you're gonna hate it or the more you're gonna think you need to refine it or improve it Or whatever and come up with a million different excuses before you actually launch it or publish it So I just believe in you know just do it live Get it out there and let's just see what happens and you learn a lot by that because you'll learn immediately people's gut reactions Because people will play really crappy games if they get hooked They don't care if the graphics are perfect or if the story is there They just want to see that the game is fun and it kills a little bit of time for them So just keep publishing these games as fast as you can Because the more games you make the better you get at it and this applies to anything Especially if you're going into like an app store the idea is you won't be found unless you have lots and lots of games The best thing you can do inside of like a native app store is that related area where it says Also made by this publisher and you have all the other things you've made and you get so much experience by just making each new game So just keep making new ones and putting them out there You know and the other thing is that we we want to talk a lot about the idea of How do you keep people playing your game and we call this the long tail and there's you know really long boring this definition But you know the idea behind the long tail is that every time you release something There's a huge amount of interest and then it drops off and you don't want the drop-off to be immediate You want the drop-off to happen over time and there's a lot of things we can do as game developers to Increase that tail and make it go on for you know ever Theoretically so this is just kind of one example Every time you update a game people come back and play it So this is just one cycle for me pushing out other updates And I keep that long tail going and getting spikes and getting interest so in my games I build in mechanics to let me actually update or add levels or add new players or modify the games quickly So I'm always thinking whenever I start a game great I have my idea, but how do I maintain this idea over time? How do I keep people coming back for more? So this is I guess the the part where you're like, yes, I want to make an HTML5 game How do I get it out there and the real answer is that it's still a little tough to publish HTML5 games So naturally they work really well on the web, right? That's their native home And like I said mobile gaming is growing a lot especially in other countries in the US We're not so big on mobile gaming, but in Europe and in Asia. There's a lot of mobile game portals So that's a really great place to put your game obviously right out the gate But then when I talk about like putting him into into native stores, it gets a little tricky So cocoon.js is a really interesting piece of technology where what it does is it it literally renders all of your It renders all your graphics into a OpenGL layer inside of a native wrapper and then it just interprets the JavaScript Your game actually runs like a native game inside of this wrapper, but it's still kind of finicky and once you get it to run It's amazing and even on Android. It's I mean, it's blazing fast Phone gap is also a nice solution But the problem with phone gap is since audio support, which we just sort of talked about is so kind of erratic and mobile devices That it's one thing for you and if someone plays your game in the browser, they're like, okay Well, it doesn't play audio. I'm just here to play a free game But if they're playing in a native wrapper or they're playing it in a store They're gonna expect it to be just like every other game And if you're relying on the web view of that device and it doesn't support audio very well Your game is gonna appear broken and I've seen this time and time again for people published games with very bad audio Support the native store people comment like games broken games unfinished doesn't have sound What is this blah blah blah lots of F words and all that stuff So the last option Is something that we've been working on at Amazon Which is being able to publish in a web app that's live on a website into our store natively And this is actually kind of interesting and one of the reasons why I joined up with Amazon and I love this quote by Tim Tay from Kano apps and I did a talk with him at GDC about building HTML5 games and The idea, you know, I called him up and I'm like, hey, I really love your guys games I want to get him on our device. What can we do? And he says he went out he bought a Kindle He turned it on loaded up the game and immediately it worked and that's like the kind of stories I like to hear I don't want to hear from emails that I tried this and had to rewrite all my code and your platform sucks And I don't know what to do and blah like so The way that we've designed this really is that we want you to keep, you know Your game where it is which is online like I want to put all my games online leave them online because the best Way to update and publish web games is to keep them online You don't have to go back through a submission process Especially if you're moving as agile as I am where I'm just trying to publish games and do updates as fast as possible so When you get we have this app called the web app tester and you download it on a Kindle fire and the idea is that you simply just put in your URL and then you test it out and We show you what it looks like optimized in the Amazon web view And what it'll look like when it just is running in the native Android browser. It's just kind of like and Then it loads up your game It's low loading live from the website here You can see I have my touch controls because I'm detecting that it's a mobile game So I show touch controls where I need them and I hide them when I don't And then once you're happy with it all you do is fill out everything you would on a normal app store So you put in your picture as your description, but instead of uploading an APK you just put in a URL and hit submit and you're done So and we've done a lot to really optimize this process So the biggest thing is that we have a custom version of Chromium Called Amazon WebView that's built into our devices in our OS and it even supports WebGL There's a lot of work that we're doing to accelerate it so it feels faster than anything you've seen on Android Also, you know, you can actually charge for your games So you can sell them in the store and this works for web apps, too I mean, we support HTML, JavaScript, everything you'd have is just a web browser. It's just been optimized for our device And you can also use our in-app purchase API So we give a JavaScript bridge to allow you to do in-app purchases and everything you do like a native app store And then you can also qualify for a lot of the features that we do where we try to promote developers I mean, we're really big on trying to promote developers in our store So and as a wrap up, I'll just leave you guys with this quote And You know, this really sums up kind of any project that you build and it's a perfection is achieved you know, not when there's nothing more to add but when there's nothing left to take away and I spend an incredible amount of time going through my games and really thinking do I need this? Is this going to make it a better experience or is this going to add two more months of me coding and no one's gonna like it and Richard Davy who Who wrote phaser? Really drilled this into me early on when I was getting back into making games and he's like nah That's stupid. Just drop it build the simplest game possible move on build it move on and a lot of the games I've built I've Actually, some of the best games I've built I've I've done in game jams in six hours or ten hours And I just built this core little concept that was really neat and tight and then I released it and now I get to spend the rest of this year going back through all the games I built last year and finding the ones that I like the ones that are popular and Cleaning them up and making them even better so Thanks for listening to me talk. I know everyone's probably starving by now The big thing is that you know we have a lot of content about just how to publish to our platform that you can get from our developer portal and I'm sort of prolific with writing outside of like the books I've done I also write a lot of blog posts so you could see my blog posts there and Please I'll hang out outside for a little bit if anyone wants to ask me any questions or talk But I always like to see whatever anyone's working on even if it's not for our platform You just want to share because this is a very It should be a collaborative environment one of the things that I like about the web community And what I always loved about the flash community is that everyone's shared and the notion that we open-source a lot of what we do Most of my games are open-sourced We all collaborate and the only way that we can learn is by learning from each other So feel free to reach out to me and you know There's a bunch of people I've been starting to follow seeing who's tweeting here that I want to follow and see what you guys are doing So thanks for having me