Modern Web Game Development (Google I/O'19)
Oh. Good. Afternoon everyone my, name is Tom Greenaway and I'm the game's lead for the chrome and web developer, relations team at Google. Before. Joining Google I ran my own independent. Game development studio, and I. Created a native mobile game called Joette, which. Was downloaded, nearly 20, million times so. I have a lot of experience, in game design and, production, but, also in running a business I. Joined. The web team a little over six months ago and I've, been researching the web game space during, that time and. I'll admit that when I joined I was a little bit skeptical about the. At. The success, of web games and whether it's a truly viable place for a game developer, to build a business. But. Today I'd like to share with you some of my thoughts and discoveries, in this area and I hope by the end of the session I'll have opened your eyes a little bit to some of the new, opportunities that exist out there because. The truth is is that I think, the best way I can describe the, web and the potential, of web games is that it's an opportunity in. Fact I think it's a huge opportunity that with some effort and some determination, can. Be incredibly, valuable for game developers, to consider. But. Let's start by facing some facts as game. Developers what, do we need to succeed as a business. Well. Really we need three things a functioning. Game. Users. And a. Way to monetize them, the. First topic probably sounds really obvious you're, thinking like Tom. Of course you need a functioning game but. To clarify it by a functioning, game what, I mean is a game that runs well on devices looks. Good and sounds, good does. The web provide us with these things can. We build a web game that takes all these boxes well, the answer is yes, html5. Has matured a lot in the last 10 years and there. Is a long laundry list of technologies that I could tell you about but. And I'll touch on some of them later in this talk but to be brutally honest the, viability, of web games it, really has nothing to do with the tech this. Isn't really a technological. Problem anymore it's, a business and eCos problem, and, that's why these next two points you. Know getting. Users and monetization, are so much more important, because if you don't have users, and if you can't make money then.
You're Toast. Now. I'm not saying that the web is 100%, equipped. Right now to solve both of those problems and, someone, who created games you, know for platforms like Google Play, and, the App Store I know how valuable it is to have a platform provide, you with users. And eyeballs that are looking at your product and also, to, have credit card details and payment options readily available to be able to transact, with your users. So. Does the web have these things built in well, no not to the same degree that the native, platforms, like mobile, platforms, have or even desktop, stores actually but. At the same time we should recognize, that the web is basically. The, most open, platform, that has ever been created that. Is both its greatest strengths and its, greatest weakness. So. Business, models ads subscriptions. Or micro transactions, on the web you can literally, do anything you, want but at the same time it also means that users aren't always familiar, with what you're proposing and that, means there can be less trust and, less trust means more friction to pay right and. Discovery. And getting users now. This is where things get really interesting actually, for the web because the web, is totally, decentralized. And when it comes to discovery. That means that's, the reason why we have things like search engines in the first place I mean. That's why Google exists, and yet. At the same time there's, no platform that is actually more viral, than the rebbe than the web when. Users see a URL they know what it means they know it means that they can tap it and they can be whisked away to something, that could be well. It could be anything and yet. They trust it completely to tap that link and to. Jump into something completely unknown. So. There is an enormous trust, in web browsers, to keep users safe and, we don't take that lightly and that's. Sort of the beauty of the web browser is that as easily as you are linked to, a piece of content you can now link another user, to. That same content, you know by sharing, it and so, that cycle, of being linked and then linking others is really. The power of the web really I. Mean. We all know it it's not just a series of tubes it's actually a series of links and not. Only is the web the most open platform, that, has ever been created it's, also the, biggest platform, ever I mean. Every. Device is a web browser now even, smartwatches, can, render web pages and, you. Know with new feature phone platforms, coming out there, with html5 as their primary app platform, it. Really means that there are just billions of devices out there that's the size of the opportunity, the user base is literally, billions of users on browsers. On all sorts of devices, so. Why do we focus so much on native platforms, I mean. As game developers I think we do it because it tends to be easier because. A lot of the work has been done for us and especially. When it comes to things like discovery, and monetization, but. That doesn't mean that we should ignore the potential of the web and the opportunity, that the web brings. For. Sure continue, making native games I'm not saying that you should stop but you. Know as, we all know all business is and business, opportunities, are governed by risk and versus reward and the, reward for building native games is a well-known factor, so. I think it'd be great to try. Tackling. Those three requirements I outlined earlier and look, at them from the perspective of web games to. Measure the potential of that web gaming reward. So. Let's look at building, a functioning, game on the web, finding. Users on the web and monetizing. On the web. Okay. So a functioning, game as I said earlier html5. Has been true at a lot so what are the requirements for functioning, game I mentioned, that earlier too you need to have it run well on your device you want it to look good you want it to sound good so that means we're talking about things like CPU, graphics. And audio. So. A quick very, quick way to break this down is by, just grouping all game developers in the world into two simple buckets, those, who have their own engine and those, who don't so. If you're in the ladder and you're using an existing off-the-shelf. Engine. I imagine, 99%. Of you are using either unity. Unreal, or Coco's and so. The reality is that all these engines actually support html5 and they've supported html5. For a long time in fact. Unity, has a special, new html5, runtime, called project tiny which. I'd like to highlight to you but I'm gonna save that for a bit later in the talk.
Actually The other game time surfer, it, plummeted, in the downloads ranks when it wasn't featured, while Joette just sort of glided, every time it got featured or had sales and it, just had this sort of like slow. Gliding, effect in terms of the download ranks the. Question of why, well. Because Joette had an interesting narrative it had really innovative, gameplay and an excellent soundtrack and for all of those reasons users, really loved. It and shared it with their friends who talked about and that made it go wrong maybe, go viral. It's. The same sort of story for Crossy road it's the same for all great games that take off they take off because they're great now. I know some of you in the audience might be thinking but what about games like flappy, bird that. Took off and it was viral but it wasn't great but. Actually I disagree I completely disagree I think flappy bird is really great it's, so simple and also challenging but. Also very importantly, it's hilarious, it's, actually sort of pure comedy gold if you think about it look, at the face of that bird and tell me it's not funny if you look at the proportion, of his like duckbill to his tiny, little wings I find, it just adorable, and the. Sound effect when you crash in the game it's sort of like the sound effect of someone being punched in the face so. You've got this ridiculous. Bird flying through space and, you know encountering, these green pipes which is sort of another really great video game reference, and when they smack into it your reward for your frustration, is the sound of like a martial. Arts movies, effect it's. The combination of just how funny and how challenging flappy, bird was that made it so interesting for users to share it. And. So what am I getting at here what, am I saying I'm saying that the, best way to get uses is to make something really fun and innovative and interesting and that, way it's likely to be shared in other words I'm saying you want to make it viral and additionally. You want to make that sharing process that viral, loop to be as fast as possible and why. Do I think this is particularly important, for a talk about web games, because. That's the cycle of the web that's. What use the web uses expect they expect, web content to load really fast and good, game developers, know that to capitalize on a particular platform, whether at a software or a hardware level it's. Important, to embrace the unique characteristics. Of that platform if you're building a game say for a console, with motion controls you should probably think about the best way to embrace those motion controls in your game so. Ultimately what I'm saying is that you must respect, the expectations.
Of The users of the platform, you're building for and in. The case of making. Web games what, do you need to respect the, speed the seamlessness and the friction looseness of, the web and. I. Mentioned earlier that the, URL and that sharing, loop and everything, on the web being a tap away is really important, well. Have you heard this stat before that. For each additional second, of load time you lose 20% of your users while, users aren't going to wait longer just because you're building, your app you have a webpage that's loading a game right. So. You need to design your web games to load within. That sort of timeframe to download the minimum viable game, that. Your users expect, web content, download within and you want to get that user into your game and engage and hooked as fast as possible. So. Let's summarize that loop that viral, feedback, loop we. Want to build a game so it loads fast and gets the user playing it really fast and then we want to get. Make sure that the user is pulled in and engaged so you want something to be interesting, and innovative, and, they, want to give the user a reason, to, share the game with someone else ideally. Beyond just the fact that it's an interest game. So. How do we make it fast what are good examples of games or technologies, that get uses into a game quickly. Well. Remember I mentioned unities project, tiny html5. Runtime. So. Unity is previewing, a new runtime which, provides a new modular design for their engine and that keeps the core engine under one megabyte this. Gives you the power of unities editor and glue. Them with a much smaller file, size and, additionally. C-sharp, support is coming soon in the future and from. The tech side that's really an interesting example of, how to make it make sure I game loads quickly you want to use tools that ensure, that the game is as small as possible. But. Let's also look from the game production side as well what do these games have in common well. They all have interesting. Art styles, that are you, know kind of visually, pleasing, but, actually also very simple at the same time in other way it's this sort of minimalist in style. And. What does this mean it means that the overall download, size of our game and, like the actual content, or assets that we need doesn't, need to be as big because we're just rendering, games, with, sort of an abstract, or minimalist art style in, other words I'm saying you can do more with less. Here's. Actually a great example of that so, some of my other team members in the web developer relations team, have made this game called procs and it's. Sort of like having. A game design wise it's, basically in like minesweeper, it's. Super lightweight and it's, less than 100 kilobytes, in total, over the wire so it really demonstrates the kind of fidelity, and the aesthetically. Pleasing nature. Of graphics, that you can achieve in, a web game with just a really small amount of file, size. And. What about making a game as fast to start as possible, let's, take a look at still arroyo this is a game that went super viral on the web and. What. Did they how, would they actually design the you, know first time user experience. Well, when a user arrives they're asked to pick, a nickname and press play and it looks very quickly this login page and then as soon as they press play it just throws them straight into the game and. I could even say that you. Can I would even advocate that you can take that further you can actually maybe make it so that the, first time the user arrives and if they've never played before then. Just throw them straight into the game and then when they die for the first time then, you could ask them if they want to pick a nickname. So. This, is like Slavia, recognizing. That giving the user engaged, into their game as fast as possible is really important. And. Here's, an animation, of another game type. Shift so this is from a game design and game developer Zack gauge based in New York he. Did a talk at GDC, last year called, designing games that are understandable, at a glance, the. Idea behind this is that he, advocates for designing, your game so visually, at a distance, it can be understood like. What what your game is all about what the game design the mechanics, are because, if you design your game at a distance, to be understandable, in that way then. It's, very likely that when your game is being played by a player directly, in front of them that they're going to be able to understand, it even faster it's, when like the game explains, itself and all the elements of the game the mechanics, and the visuals come, together so the okk game is instantly, graspable.
But. How do we come how, do we create a compelling, game one, that pulls a user into the experience, after they've loved the interface, and the mechanics well. Here are a few thoughts. Going. Back to Crossy Road again I. Guess. One way of thinking about engagement, or engaging a user is to think about the fun factor. So. In, Crossy it has a swipe, based gameplay that's sort of like an evolution, of the original Frogger. Game, but. They also streamlined, it so you can just tap the screen really easily to progress, further and sort of just go in a straight path which is the most important, sort of movement you can do in the game and then, they made it endless, and then also added in this like slow-moving camera, that adds, attention, to the game because if you're too slow then, you get left behind and you lose. Then. Another example, is a darkroom so a darkroom is a web game that went really viral, and it. Starts out it's just so the simple clicker kind of genre in which you're just stoking, this fire in a super mysterious, room. And while your uh your, stoking this fire eventually a stranger walks in and and like, you speak to them and then basically. The game kind of just evolves over time you get more actions, to do which is normal and clickers you think, the gameplay expands, but on top of that then the whole nature. Of the game and the game genre changes, as well it opens up to be sort of like a have, an overworld, and you're then exploring, a larger game world and I, think what's clever about this is that it really highlights the the power of mystery that a game can have as something. As simple as just this loaf like mysterious, narrative. And the, that, sort of thrill of not knowing what you don't know can. Really pull you in and keep you in a game, and. Then. There's the innovation, side of things so there's, a web game called black room which was from a web artist and game designer casting the quarter and it. Recently won the prestigious Nouveau, award at the independent Games Festival at, GDC this year and the. Nouveau Ward is specifically. For innovation, and this wasn't only, in the web category, or anything like that they don't have categories. For the web it was across all the games that was submitted at the IGF and so. The key with black room is it's got some really, funny ideas, about how to embrace, specific. Features of the web platform so. When you're playing the game there are some levels where you need to find something, that's actually, not. On the screen at the moment and so, traditionally, you might think that you need to pan, the camera around or scroll the camera to to find these objects but actually in black. Room what you need to do is you actually. Resize. The browser window, and reveal more of the room so, it really highlights, how you can use. The. Unique features, of the platform in your game design such, that that, game could not be achieved on other platforms. Additionally. She also, incorporated, ideas like being. Into. Like intentionally, linked, out from the game to the open web and exploring, parts of the open web and then, needing, to explore the open web to solve, puzzles back in the real game. And, lastly. That. We want to give used as a reason to share right we want the URL to be really compelling. So. There's a few different ways you can do this you can do it in sort of competitive or collaborative, or maybe explorative, ways.
A Payment. Back-end for processing, micro transactions. And. What about web portals as well well. Remember, Crossy Road I mentioned, it earlier they, published their game via pokey and. Pokey, is a web, portal which has quite a few different games. Available. Another. Another, example is the subway surface, which has come out recently on pokey comm as well and I. Guess what I'm getting across here is that you, should recognize that web portals can probably assist you in monetization, best practices, and help, you with that user reach because they, have their own discovery, ecosystems, of users as well. But. Also let's think from a totally different perspective as well even. If you've already, launched. A game saying a native game on a mobile, platform have, you actually considered, whether all your potential users who, are interested in your brand are finding your game or. They perhaps searching, for your game on the, web and finding, web alternatives, built by other companies, game. Design isn't patentable, nor is a copyright, law so it's important to ensure you have parity, with your competitors in your offerings. If. Your game is hugely successful you, should consider whether you're losing traffic to other websites which. Are maybe ripping off your game and leveraging a products name on search engines and if, you do build a web version of your existing native game doesn't have to be the full experience. It, can just be a taste of the gameplay and then upsell the user to your native app for, stronger monetization, so, you can sort of think of it as like a teaser, trailer for your game, and. On. That topic if you weren't aware playable, ads. Growing source of advertising that as an ad buyer you might want to support as well so, these playable ad networks need to be cross-platform on hand troy'd and iOS and so they actually leverage html5, as a portable content, format and, these ad units are known to have higher conversion, rates compared to other ad formats, when you acquire users and increase. The de7 retention, to users you acquire versus other formats. So. What I'm saying here is that if, you're already building a game, that is a playable ad if you're already building a playable if, you're already building a playable, ad and it's an html5 game then, why don't you leverage. That advert and also. Place on the open web and direct users to your native game from the open web. Another. Another. Interesting, element that's that's appeared recently as trusted web activities, so this, is of like the best way to deploy, a website as an Android app arm on Google Play it's, sort of similar to Cordova, but it doesn't package the resources, inside the apk they're fetched from your server and. Trusted web activities, one, of the cool features is that it shares cookies, and local data and. Indexeddb. Or anything you can think of between, the native and the web versions. Of your your, app or your game and so. With Google Play you can actually sort of pull off Google Play billing transactions, via Android, intents the, only downside, is that when your web when you come back to the web app after a transaction, it refreshes.
The The web page and. Technically. A trusted, web activity is slightly faster, than webview as avoid some Android rendering overheads as well. So. Just with these last few minutes I'd like to talk we'r about. Some. Of my thoughts on like the future of the web games ecosystem. Because. It's not just web games that are powered with html5 nowadays. There. Are a growing number of ecosystems. Which leverage, html5, as a portable content, format for games typically. These ecosystems. Live in messaging platforms, are other walled gardens. So. I think it's really interesting and I think we should look at what ideas we can borrow from these ecosystems. Maybe. We could define a portable. Content, format specification. For five similar, to flash maybe. We could use the new web packaging, a standard. That's in development to distribute these games as well. And. Maybe we could have more consistent, monetization, options, as, well to increase the users trusts. Additionally. We could have you metadata formats, for, discoverability. Like you, could do declare, the genre. Of your game or you could declare what, inputs, are necessary, for your game to be played. So. I think as an industry and, a community there's a lot that we can do to, reignite the web games in Coe system. So. If you're a game developer an, engine developer and ad network or a digital, payments platform please reach out to me I want to learn more about what you think the web games ecosystem, needs to succeed in what you, know chrome and Google can do to enable and stimulate this this, ecosystem. I hope. You found this talk interesting, and that. I've challenged some of your assumptions about the web we. Have a few demos in the web game sandbox, so, please come by and say hi tomorrow thanks. Very much.