 So yeah, like Adam said, my name is Daniel Cohen. I work here in San Francisco for 50 Cubes. We are a company that makes primarily social games targeted towards women. Yeah, so that could be a whole nother talk right there, but that's not what I'm here to talk about. So yeah, what I'm here to talk about is, we just made this game called Fashion Tail. It's in the app store right now. So go make me some money, I guess. So it was, why it's interesting to you guys is that it was developed in jQuery. The front end is entirely in jQuery and HTML5. And it took us about eight months or so to put together. And so I'm gonna kind of just talk about what worked and what didn't. And some of the lessons we learned and kind of the difference, because the difference between doing a, sorry, you're gonna be seeing a lot of Kirk as the iPad turns up. So just kind of the difference between like a web application development, which I did previously, and then the mobile game development, which I do now. So, right. So the first thing I'm gonna do is just quickly show you what the game looks like. Hopefully it'll load. It's gonna take kind of a minute. This is not the version that's on the app store right now. So it's kind of like my development version. So like I said, this is, it's targeted towards women. So it's about fashion. That's good stuff, right? Yeah, I feel comfortable. So, right. So this is, oh, come back. Ah, it's more for my anger than yours, I'm sure. So this is the daily update modal, right? This is probably where the whole business aside mostly mimics what the game is doing. Like you have this sort of feed over here so you can see what other people are doing. You know, you have like the coins you get and that sort of thing. So on the next page here, it's a similar thing you can challenge your friends. The game is actually a hidden object game, which I'll show you the board here in a minute. But I wanted to show you these pages because I do talk about them in a little bit. So, ooh, play screen, exciting. So I did want to put the sound on. Right, okay, just so you can see it. So yeah, we got this, you know, oh man, come on. It's also the name of the iPad. Okay, cool. So I'll try to hold it up here. This is the first time I'm trying to give a talk with an iPad. It's pretty fun. So, yeah, so we have this episode selection screen. This is probably pretty normal. You've seen this before. There's a lot of little transitions and stuff like that happening. I don't know why I have to look up here. It's right here. So it's pretty good. If I press play, then it comes to this sort of star screen like you've probably seen in your Angry Birds and whatnot. So I'm gonna play this challenge three and we come to a loading screen. This guy is also all in CSS. Whoa, music change. Oh, so seamless. So that's it. Like I said, it's a hidden object game. You find stuff that you see in the bottom and then it goes into your little inventory. Pretty simple, right? I know how to play really well. So, right. So also while we're here, if you notice when I drag around, you've got this cool little parallax effect. So yeah, that was a month in the making. And yeah, so once you found all of the objects, then you drag them back up onto the top. Ooh, yeah. Exciting. So, oh, not so good. Yeah, so then we're gonna pull to that one and then we're done with the board. Scene complete, ooh. So yeah, you see it's, oh, thank you, yeah. So yeah, these are my two favorite effects was the star and then, well, this cut scene, by the way, was done in Edge, the new Adobe Flash option. So it's possible, it is. You can do it. So yeah, that's it. And then you get the leaderboard and you can continue or whatever. So that's the game. Basically in a nutshell, yeah, thanks. So yeah, this was done. The front end was coded entirely by like two people, me and one other guy, Mark Messy, and it took about, like I said, about eight months to do. So let's get back to the presentation and talk a bit more about it. Oh, the music's gone. It was really relaxing. So when you're coding a game for the iPad as opposed to anything else, if you do it in HTML5, simplicity is really fine. You can concentrate on just having something that's short and you can replay. The reason why is that, you know, mobile devices, people don't play for very long. There's really no reason to commit yourself to being like, I need half an hour of gameplay every time they're on a bus. I mean, just doesn't happen. So yeah, so that's why, for example, that board you see is really short and that's kind of repeated all the way through. So I'll talk a little bit about the structure and what worked and why that sort of helped coming up here. So the good part about HTML5, why, if anybody's like, hey, build me a game. And they're like, I want native. You can be, there's a lot of advantages actually to HTML5, not least of which is for Apple, you can change stuff without resubmitting and waiting when we equal. You're just like, please go through, please go through. And they're like, you forgot a variable. And you're like, oh, you know. So that's happened, it has. So yeah, you can change things on the fly like that and kind of sneak it through their approval process. So yeah, I don't use it for anything bad, but. So yeah, if you're designing the game as from the technical standpoint, not like the game design portion, but just from the technical point, just keep these bottom three things in mind. You're going to need to share it, virality is so important. So for us, we're using Game Center and Facebook and that should be in your mind like right after, hey, I've got an idea for a game, blank, Facebook, right? On Facebook, it should be very early. Plan for ads because you're going to want to pay for it at some point even if you're like, no, that's lame. Yeah, you're still like, oh, I want a house. So like, you know, just to plan for it. So it'll be in there. And then also plan for stats. Like unit testing is one of those things that I hate to do and getting stats is also one that I'm like, oh, really? But like, yeah, every click that they make, how long it takes them to do things, how many stars they got, did they find those shoes or whatever, you know, like. It's all got to be in there because you can, it's no good to be able to update the levels if you don't really know why. And the complaints are never really a real good indication of anything that's happening in any of your apps because you know, there's just always one person who's really, really loud who doesn't know which direction left is, you know, on the screen and you're like, you know, and they're like, oh, maybe we have to redefine left. Anyway, so this is the basic structure of what we were doing and this is, I feel kind of bad because like, I was learning a lot today about, you know, how to do stuff the right way. And there's a lot of things that we had to kind of do to make it work well on the iPad one and iPad two. And later the iPad three. Oh, and that showed up, the iPad three. That was a good day. Yeah, we were really excited. It was, it was better than Robocop. Just super happy. So this is the basic structure. The index, the index.html you only see in between, it's that blue screen that says loading. Everything else is in iFrame. So that was really confusing when we proposed doing that because people were like in iFrame, I thought it was cutting edge. You know, but I did that in middle school. What are you thinking? But there's some very good reasons why we ended up doing it, not least of which was the iPad one. So basically the main reason is this goes back to like the difference between a business application and a game. With a business application, you kind of, in my experience anyway, you kind of, you may have a lot of records and stuff like that, but you're kind of going between three views and sort of changing stuff and moving stuff. And you know, like it's all, but it's all the same stuff, you know, for the, for the most part. You know, but in a game, you know, like you get far enough in a level and like 300 goblins attack. You know, and like, and like, so like there's a lot of stuff that happens and it's kind of all, it's kind of all variable. And so the main reason for the, this iFrame, this iFrame version was because of garbage collection. I know there's a lot of people, I talked to a lot of people about it while we were having problems with the iPad one. You know, after a certain number of levels, it would just crash. And that's really depressing. It's just like, what did I do? What do we do guys? Come on. So the solution that we came up with was this iPad solution, which is basically like you put all your garbage in the iPad and then you sort of just like, when you're done, you just like nuke it from space, you know, cause like, and it's gone, you get all your memory back. And it was like the only efficient way, you know, to really get rid of stuff consistently. It was, I'm not even kidding. I mean, like no matter how much of a Nazi you are with garbage collection or, well, as much of a garbage collector you are, I suppose, you know, like it's still, there's still always some that's left. And with the repetition that you get in gaming of constantly like making the game board and then taking it away and making it again cause they died, you know, and that sort of thing. That's a, it's a weird, it's a weird sort of edge case for the HTML5 that it's not always that great at. So that's why we set it up that way. Yeah. Okay. I think I'm doing okay on time. Okay. So now about the game board in specific. That was pretty cool, right? There was the parallaxing stuff. I think we're the, we're the only hidden object game that I've seen at all where you can find stuff on those multiple layers like that. So that's pretty good. Even if, you know, the game style is not really your cup of tea, you know. I was looking around today and I was like, yeah, maybe there's a couple of people in the room who are like, oh yeah, that game is freaking sweet. So like I said, it's in the app store now and you can just go down. So yeah, the, how that worked. This is the actual canvas element. I think I'm okay. I'll just be careful. Oh, that's a good idea. Sorry. Well, technical difficulties aside. Okay. Well, this is good. I was worried that I didn't have enough material. So it was, so now I think we're doing pretty good. Right back on track. No? Really? Oh, come on. Okay, back to Khan. No? There he is. Okay. Here we are. So the game board, this is the actual canvas portion. So like if you're really into HTML5, you know that when that canvas thing came out and you're like, yes. Particularly if you programmed in Flash before that. And we still have that at our company. Like I said, we're social games so there are a lot of Flash developers and they see canvas and they say, oh good, the canvas. Now I feel comfortable. That's my touch point. Here I am. No, don't think like that. Just don't. It's not like that at all. It's like a PNG with like function calls. That's all it is. And so yeah, that's a big change. Everything that is dynamic about that, the moving side to side, that's all done with WebKit transforms. And then there were animations, if you noticed, like the water spout on the fountain and stuff like that. That's done with divs on top of it that are just changing the background position through a sprite sheet. So don't try to make the canvas do acrobatics because it won't. It's just, it will laugh at you and that's sad. So yeah. So that's that part. Let's see, anything else on this that I need? Yeah, and then there was the drag events that were going up also. So like I said, that is all WebKit transforms. So you just had to pull the transform out of the, you know, out of the WebKit transform using JavaScript to get the offset for where you're clicking and everything like that. So like I said, it took a little bit of time, but I think the, you know, the end is smooth enough so that it's not, people aren't like, ah, that's HTML5. I can tell because it's slow. Okay, so like I said, we use the iframes for views. Very important difference. We tried originally to do just the one web page, you know, the one web page version. That would have been great for phone gap, you know, but obviously it just, it just didn't work. What we have is a super minimal HTML skeleton in all of those pages. So like, I mean, some of them originally were just like, people were like, can you send me the, you know, that's a cool HTML page. Can you send it to me? I was like, if you want the source and they're like, no, just the page. And so it's just like, HTML body, empty. That's it, you know. So you wanted load times to be fast enough. So like everything's just written with the JavaScript on the fly when it comes up. So that was like, like I showed you with the feeds and everything like that, but even some of those modals and stuff like that, all of that has to be dynamically made. And you'd be really surprised actually how few images are actually in the game because the CSS as opposed to just like a PNG or Canvas is just a lot faster. So yeah, so we have the Ajax calls to our server for the game state, like what has the user accomplished so far, you know, where is there, you know, how many levels and what's their scores and stuff like that. And then also for the message feeds, we pull from, you know, right now it's just from one place, but we've tested it with other stuff, like Facebook posts and stuff like that, which is good. And then the purchasing options, which again is really, really good. If you're pulling your purchasing options from the server, then you can change them. They're too expensive or not expensive enough. I mean, obviously we just make it cheaper. You know, for you, the customer. Kidding, so yeah. So yeah, and so we didn't use PhoneGap. We have an in-house wrapper. We have some people who are very good at Objective C, so we have that luxury. Also we have the content team. So when I show you like the demo that you guys get to see, you can laugh at how bad the art is for that. But yeah, it's very similar to PhoneGap. It's just set up just slightly different so that we can handle the, you know, like the iFrame calls and store a lot of stuff in the wrapper because that wrapper storage and the Ajax calls turned out to be just much faster than using the HTML5 local storage. Yeah, so a lot of this was also because like, you know, Apple needs wants you to run on the iPad one. And so a lot of times we were like testing on like this guy, oh no. Why do I touch it? I thought I learned. I was so proud. Okay, so, right. You know, I was testing on this guy and then you go back to the iPad one and you're like, why is it broken? This is pretty good. This is a good reason to bring tape. Some duct tape would really be nice. Yeah, where are we? Okay, oh, this is what I'm talking about. So yeah, beyond just the front end and the HTML5 stuff that I mostly worked on, like I said, there was a wrapper that was built to just kind of hold all the data and you know, which is really handy for offline play. And then the database connection, which was not written in Node, but probably should have been at some point because you know, that would have looked better on the resume. So yeah, let me talk just a little bit more now about the difference between the DOM elements and the canvas. Like I said, don't treat the canvas like that's your magic out, you know, like animating stuff on it and stuff like that. Just don't think that way, don't, just don't. So the iPad has some great advantages if you're just targeting that first because for example, yeah, there's only one CSS prefix. Cool, like I said, I worked on those major business apps and stuff like that and that browser fragmentation, I hadn't heard that term before and then like flash forward a week and be like jumping out of a window, like why are you, why does it exist, you know, all of that, I don't understand. And I had worked for Microsoft before and I totally like changed my, anyway. So yeah, if you're targeting the iPad first, obviously you may have to go back and change it later but like just having the one prefix is really important for the things like the webkit transitions and stuff like that because unfortunately jQuery animate is not gonna get you there right now and like that other person had mentioned, I tried that library to make, just switch over from jQuery animate into using webkit transitions and it's not gonna work. So I'll show you some of the things that kind of helped in that area. So that's it, dumb elements move them around, they're much easier than trying to move stuff on the canvas and you can really do a lot with them. I mean once you get into that CSS stuff you'd be surprised. Repeating calls on the canvas is actually super fast. I don't know if you noticed but when I drag stuff up onto the screen like it faded into that rainbow color kind of stuff and that worked pretty well. That was like 20 draw calls onto the canvas but it's only the one image repeated on top of itself. So yeah, that works. So good, if you wanna do that. That's right and then the other advantage to doing everything in CSS and not say in the canvas is that CSS resizes really well to different resolutions, obviously that's what it's for. So yeah, like the iPad 3 showed up on our doorstep and we're like yay and other people looked at what they were doing and they're like oh shoot. And then we looked at what we had done which was mostly in CSS and we're like wow it's still really crisp and it looks really right. So I mean that's what you want from your HTML5 app is that confidence that it'll move from screen to screen and to screen and still look nice. So yeah, so now to the HTML5. I have a really bad looking demo. So I went to go see my, yeah, ooh, look at the ugly. I went to go see my mom up in Minnesota a week before my last, oh I'm from Minnesota. Oh how does he hide the accent? So yeah, if you have a mom from Minnesota then you're probably gonna go to an Indian casino. So we did and so instead of doing the demo that I was going to do last weekend I did this one for you guys. So it's on GitHub and so you'll have the link. So you notice that flip is really fast, no problem. Even on the iPad 1 that'll be fine. So all the WebKit transforms are hardware accelerated. So you get a lot from that. This is all dynamically generated selection screen. Oh and this has gotta go the other way. Can you flip orientation? Okay, wow and it stayed plugged in. So yeah, this is just a quick example of a slot machine guy, right? So again everything's moving around with the WebKit transforms. So you'll notice, it's not a font, no I'm scared. So you'll notice if in the URL up there it's actually two different web pages. If I was doing this exactly like fashion tail there would be one web page and these would both just be eye frames. But you kinda get the idea this way. So the CSS here, there are no images except for those little guys on the bottom and the planets obviously are kind of images. But there's a lot going on. All the movement, all of everything else is just with CSS. If you look very carefully, I don't know if you can see but there's stars behind the planets that are all moving independently just with multiple background position. So again, if you're programming for the iPad you get to use all of these cutting edge CSS three things that people tweet about and then you're like why am I gonna use that? Like I need to support, I, whatever. Or yeah, so that's the cool part about that. And so again you can kind of look at that to see some of the things I'm talking about at that point. So let's look at all of that a little bit more in detail. So whoa, it's hot, kinda hot. So the CSS, this was the big thing. It's different again working in more professional apps. What makes you feel like you're doing your job really well there is like after months and months of preparing and your client looks at it and just says, oh, that's okay. Yes, I'm gonna treat myself to steak. You know, but like if you're in gaming what makes you feel like you've had a good day at the office is like you do something and somebody goes whoa, you're like yeah, now I get a paycheck. So and that comes from the CSS more often than not when you have HTML5 stuff. So some interesting things again like there were curved pads, if you notice like the stars exploding that stuff that came out of it. Those were curved pads where the element doesn't move. I'll show you how to do that here in a second. Some of the bad points on the other hand are opacity and box shadow for whatever reason, for whatever reason all of the Apple tablets are really bad at that, all of the iPad versions. So yeah, you can shrink things down to nothing. You can move them really fast around the screen. You can spin them around in 3D space but if you try to make it slightly see through it's like, I can't. So don't do that. Same thing with box shadow. I mean like it's so common to be using it that you kind of forget sometimes because it makes everything look so good. But if you can avoid animating it is the only problem. You can have it on the page just don't animate anything. Don't animate it and don't animate anything over it because it's that same opacity problem. Use WebKit Transforms first, top and left. Again, like ever since I've been programming in CSS I'm like, that's how you move stuff. But now it's not. In my brain now it goes to Transforms first which is great because it's more versatile and there's also like a 3D element to it which you can pull off pretty easily and you can scale it and if you know how to do all those matrixes and whatnot, dig in. That's all available to you. And the last one on this is that pseudo elements was another thing that I've really gotten comfortable with over the course of this. Both of those guys standing on the skip button those aren't DOM elements. Those are just pseudo elements on the skip button. It doesn't add any extra space because again we were running into the problem of having just too many DOM elements. So this is how you do curved pads in CSS. It's, I can show you just a quick example here of another game that I was working on. This one? No, this one? So I'll check this out. Like these are originally password dots. I don't think they are anymore. But I was working on a game that was like bees that fight each other. And so yeah, this is the swarm, right? So you can see this is all done in, you know all done basically in CSS. Just when the CSS ends, you know it starts a new one to give it those different curves. So I gotta speed this up. I thought I was, you know all of this following around with a cord. The events. So like you saw with that, you know the bees there. You can bind in jQuery just bind, you know WebKit animation end or WebKit transition end. And just in general, I think it's probably a good idea to start using those whenever possible. They're just so much, they were just so much more convenient. And I think that the things that are coming out in jQuery, they'll probably just start using them anyway. But for now it's not, it doesn't hurt to, you know, get used to it. The second one here is click and touch start. This is, there's a huge difference between the two. If you click on the iPad, if you bind to click it waits like 800 milliseconds before doing anything. Which is usually fine if you're, you know like on just a, you know like a normal mobile app or whatever. But on a game, that could just like kill the whole experience cause you're like die, die, wait 800 milliseconds. You know, you're just, you're so surprised. So we're using a mix of them because like for buttons people like to see the button move down before something happens. So you can just add an active state in CSS and voila, you know, it goes down. But for like things that need to respond quickly, touch it and then there you go. Another thing that we found out that worked really well is this e.original event when you bind to things like touch start. So this will give you on, this will give you, you know like the touch, the array of actual touches when you're on the iPad, which is so important for like that dragging and that sort of thing because it's, there are so many great libraries that I wish I knew about like six months ago. You know, hammer.js, that's fantastic. So you can, but if you wanted to, you know do it yourself for whatever reason because they're, especially with games there's a lot of like weird edge cases that you have to program for. So it's good to know that stuff. And then like on orientation change was another one that we don't use anymore. But when I figured out that I could do that that was pretty cool. So for now, now a little bit of jQuery finally since we're at that conference. So I use this plugin building like they said, you know like it's a great, it's great to know how to do it. And I use it mostly for like building for building DOM elements and stuff like that like make the social buttons and stuff like that. So it'll just kind of like ask what social networks are available and build the appropriate buttons on purpose. And then I can just chain that into one big append call and that's good. The other one that really came in handy was dot data which I didn't even know about, you know I'm ashamed, I'm ashamed to say I didn't know. But yeah, it's so great like with those feeds and stuff like that, if you wanna challenge somebody you can just put all of the data into the button and it'll just hold onto it in case they click it and that's just so easy. And the code looks so clean. So that made me happy. And that's it. And then like I said, put it in an iFrame use it and toss it, you know they're really old technologies. So you might as well treat them like Kleenex, right? I mean like, that's totally good. Okay, so but in HTML5, I mean the big mission obviously is to try to make it run on every screen, you know. So with WebKit, obviously we found it very easy to move pretty easy to move at least to the phone, the iPhone and that sort of thing. And Android we're really pleasantly surprised when we're like, let's see if it runs on my phone. It does, you know it does guys, wow. You know, so that was very happy day also. So the only difference there is that we did we should have thought more about responsive design originally just so that it would change to the right sizes for the most part it did but there was still a lot of stuff that had to change. And then the big gap, especially for this kind of stuff that's really sensitive, we're transferring a lot of sensitive data, not only things like are they paying which obviously is probably the big one but you know in games it's also just like, what did they score? It's very dangerous because like on the desktop you can just right click and you know take Gandalf's life right off, you know, or whatever. So that's still kind of a problem. People are really good at that. They're probably all in this room now that I think about it. So yeah, that's still a problem that we're kind of facing. For the next stuff that, you know, like now that we've done this first example and it works and it's making money. Yeah, thank you, thank you. The next stuff, you know, this was what's been sort of inspiring me recently. I don't know what I was thinking with this slide exactly but yeah, this is the next stuff I want to learn. So if anybody wants to do a project, you know, I'm right here. So yeah, and then I'm wrapping it down now. So I wanted to just thank, you know, the community who has helped so much. JS Fiddle is fantastic. I wish that the jQuery was just selected by default instead of MooTools. You guys use JS Fiddle? Yeah, it's so good, right? Yeah, I would say, yeah. I would say boo them for the MooTools but boo sounds like moo and so. Might get confusing. So yeah, there's a lot of CSS3 generators which not only save time but also just, you know, taught me a lot through that stuff. Stack overflow, obviously. Now if you see me on there, you can read what I write in my accent. So thanks. And there's a lot of people I follow on Twitter. So you can follow me, I've only got eight people right now so that's sad. And the jQuery team has also been pretty helpful. So yeah, that was my sort of Oscar bit. So okay, good. So in summary, keep the scope really, really simple. There's no shame in it, you know, like a lot of game designers are like, or game developers are like, I want it to be awesome. And you know, like it'll change the world and stuff like that. Like why not make tic-tac-toe? You know, just try it out. It's really no problem. It's a good learning experience. It really is if you get the chance and it's good reason to use phone gap and that sort of thing. So if you are a game designer, you know, you pretty much do the same thing every time. Find a little psychological problem in humanity and exploit. So that's good. Disposable iframes. I know that probably if anything is gonna get me in trouble, it's this thought. But you know, it just worked. It worked so well for what we were doing. You know, just occasionally throw it away, pop up an ad or whatever, you know. It really did just work fantastically. Draw with the DOM. The canvas is not as much of your friend as, you know, people try to tell you. So yeah, move stuff around. Save data in data. You know, that should be fine, but I didn't know, so maybe I'm helping someone. That's it. And don't favor a single technique. The biggest thing with all of this is that like the CSS transforms, instead of using animate was a big change. The data was a big change. There was a lot of things that just changed, you know. And a lot of things that changed depending on what iframe I was in, you know. So it's like, you have to, people say HTML5, you know, is not ready for games yet. You know, and they're right, except, you know, we're making money. But you know, the big thing is that don't become too concentrated on specific ways of doing stuff. You have to, like I said, it's a great learning experience because you're not sharpening just one blade when you go at it, you know. So that's that. That's it. Oh, good. On time. Thank you, everybody. Thanks. But. All right.