Modern Web Game Development (Google I/O'19)

Video Statistics and Information

Video
Captions Word Cloud
Reddit Comments
Captions
[MUSIC PLAYING] TOM GREENAWAY: Good afternoon, everyone. My name is Tom Greenaway. And I'm the games 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 "Duet," 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 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've 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, Tom, of course you need a functioning game. But to clarify, by 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 ticks all of 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. 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 ecosystem problem. And that's why these next two points-- 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. As someone who created games 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 strength and its greatest weakness. So business models, ads, subscriptions, or microtransactions-- 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. And discovering 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's the reason why we have things like search engines in the first place. That's why Google exists. And yet, at the same time, there's no platform that is actually more viral 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 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 by sharing it. And so that cycle of being linked and then linking others is really the power of the web, really. 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. Every device has a web browser now. Even smartwatches can render web pages. And with new feature phone platforms coming out that 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? 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, 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 as we all know, all businesses and business opportunities are governed by risk versus reward. And the reward for building native games is a well-known factor. So I think it would 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. OK, so a functioning game-- as I said earlier, HTML5 has matured a lot. So, what are the requirements for a 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 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 latter and you're using an existing off-the-shelf engine, I imagine 99% of you are using either Unity, Unreal, or Cocos. 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 going to save that for a bit later in the talk. But if we flip to that other bucket-- OK, you've got your own engine. Well, firstly, that's amazing. That's really great. And the reason why I say that is because in my own company we had our own C++ engine. And it was kind of completely ridiculous. But it was also completely awesome at the same time. So if you want to bring your own engine to the web, how do you do it? Well, if you do have your own engine, I imagine that 99% of you have written it in C, C++, or some other language that compiles through LLVM to machine code. And if that's, the case go check out Emscripten. So Emscripten is basically a compilation tool chain that takes any language that compiles through LLVM and can provide bindings for a bunch of standard platform features, like file system, graphics, and sound, and OpenGL bindings, for example. And as we know, all this sounds-- well, actually, no, I know what you're thinking. You're probably thinking this sounds a bit like I'm cheating, like I'm not going really in-depth on each of these topics. But the reason why is because, at I/O, we have other sessions on web assembly, and CPU, and graphics, and audio. So I recommend you go and check out those talks. And I'll highlight them in a few seconds. But I'll go just briefly at a high level on each of these topics. So here's a quick summary. So, CPU-- there's a cool new portable binary instruction set called WebAssembly that's available in all the major browsers. So it's safe. It runs really fast. It's actually close to native performance. And it also loads really, really quickly, too. Can you do threading in WebAssembly or in Chrome? You can. And in other browsers, it's coming. And you don't need to write your entire game or engine in WebAssembly, actually. You can mix it with JavaScript, as well. So Construct is a web-based game editor and engine. It's super simple to use. And they used WebAssembly actually to optimize their physics. Originally, it was just Box2D ported to JavaScript. But they've replaced it with a Box3D to WebAssembly port now for even better performance. If you want to learn more about WebAssembly, we have another talk called "Web Assembly for Web Developers," which ran earlier today. So I recommend checking out a recording of that on YouTube. OK, what about graphics? Well, there are two parts of this. If you're using OpenGL, you should really check out WebGL. The most prevalent version of WebGL in the wild is WebGL 1.0, which is sort of equivalent to OpenGL ES 2. And I know that's not at parity with what native mobile platforms provide. But we all know that good graphics-- it's not just about raw fidelity. It's also about style. And in the future, what about other modern graphics pipelines, like Vulkan, or Metal, or DX12? Well, there's a new standard in development called WebGPU. And it's a fully programmatic graphics pipeline that gives you full control. So all the major browsers are experimenting on WebGPU. But here's a little demo of Unity's engine running the tanks demo with WebGL on HTML5. And that Bitly link will take you there. If you want to learn more about WebGL and WebGPU, check out the "Next Generation 3D Graphics on the Web" talk, which is on tomorrow at 3:30 PM. Or check the recording on YouTube. OK, but what about audio? Well, this is super important, as well. I remember, whenever I made a game, I would probably end up adding audio late in the stage of the development. But as soon as I added it, I really realized, how did I ever play this game without it? Well, you might be wondering, what is most common audio API on the web? Well, it's aptly named the Web Audio API. And it's a versatile API that can handle sound and music loops. And you can also write your own programmatic effects, as well. But if you need to run effects and ensure your audio never glitches, I'd recommend checking out the AudioWorklet API. It's available in Chrome and supports effects in either JavaScript or WebAssembly, actually. And because it runs in its own thread, it doesn't cause any glitching or any jank. And if you want to learn more about audio with the web, check out the "Sonic Boom Audio Programming on Android and Chrome" talk. That was given yesterday evening. So that will definitely need to be checked on YouTube. So those are the key technologies, in my opinion, to get a functioning game up and running. Are there more things you can do with the web when it comes to games? For sure. You can have things like the Full Screen API, or the Gamepad API, or Gyroscope for inputs. And there's a long list. But I don't want to just tell you that web games can match the user experience, and the fidelity, and the features of native games. I want to show you. So here's a quick example of "Crossy Road." It's an excellent indie game from a few years ago running on native mobile but also on the web, actually. As you can see, they're pretty similar. So, which one is which? Well, the one on the right is the web version. There are some clues like the navigation bar at the bottom, the branding from the web portal, Poki. But as you can see, the overall graphical fidelity of the two versions, the native and the web, especially in terms of frame rate, is basically on par between native and web. And how successful was "Crossy Road" in the first place? Well, on iPhone and Android, it actually got 200 million downloads. So it was a very, very successful game. Was it pushing the limits of mobile devices? Did it really need high-end graphics or Super realistic visuals, or physics simulations to achieve those download numbers? No, it didn't. It just needed to run well, look good, and sound good. But actually, it also needed to have one other thing, really. It also really needed to be fun. That's not something I've brought up before in this talk. But it's actually the most important things about games. It needs to be fun. So why didn't I mentioned it earlier? Well, I didn't mention earlier, because I think it ties in really well to my next topic, which is how to get users. So there's an old saying that a great product sells itself. It's sort of the foundation of product marketing. And honestly, I think it's true. So in a funny story-- in my company, while I was running it, we made five games. And I'd like to talk about two of them briefly today. Out of the two of them, one of them was featured really heavily at launch. And it got a big burst of eyeballs looking at it when it came out. And then the other one, it launched, but it didn't get anywhere near the same level of featuring. So if you're wondering what I mean by featuring, what I mean is, of course, when the mobile platforms highlight your game on their stores. In other words, it drives a lot of eyeballs to your game all at once. It's really awesome. It's like free marketing. And as an indie game developer, that's gold. Now, one of those games actually went on to become the most-financially successful game that we ever made by a big margin. And the other one was the least successful. So which one do you think made the most money, the one that got the big spotlight of featuring at launch? Actually, no, it was "Duet" that was the more financially successful game-- the one on the right. And it only got basic featuring at launch. Yet, its daily revenue was really great from the start, and it just grew over time. And we did sales. And that sparked things, as well. And actually, the other game, "Time Surfer"-- it plummeted in the download ranks when it wasn't featured, while "Duet" just sort of glided every time it got featured or had sales. And it just had this slow gliding effect in terms of the download ranks. The question of why-- well, because "Duet" 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, and talked about it. And that made it 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 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 duck bill 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 encountering these green pipes-- which is 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 movie sound effect. It's a 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 users 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 our talk about web games? Because that's the cycle of the web. That's what web users 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 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 seamless, and the frictionlessness 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? Well, users aren't going to wait longer just because you have a web page that's loading a game. So you need to design your web games to load within that sort of time frame 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 engaged, and hooked as fast as possible. So let's summarize that viral feedback loop. We want to build our game so it loads fast and gets the user playing it really fast. And then we want to make sure that the user is pulled in and engaged. So you want something to be interesting and innovative. And then you want to give the user a reason to share the game with someone else, ideally beyond just the fact that it's an interesting game. So, how do we make it fast? What are good examples of games or technologies that get users into a game quickly? Well, remember I mentioned Unity's 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 1 megabyte. This gives you the power of Unity's editor with a much smaller file size. And additionally, C# support is coming soon in the future. And from the tech side, that's really an interesting example of how to make sure our 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 visually pleasing but actually also very simple at the same time. In other words, they're sort of minimalist in style. And what does this mean? It means that the overall download size of my game and the actual content or assets that we need doesn't need to be as big. Because we're just rendering games with 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 "Proxx." And game design wise, it's basically like "Minesweeper." It's super lightweight. And it's less than 100 kilobytes in total over the wire. So it really demonstrates the fidelity and the athletically 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 "Slither.io." This is a game that went super viral on the web. And how have they actually designed the first-time-user experience? Well, when a user arrives, they're asked to pick a nickname and press play. And it loads very quickly, this login page. And then as soon as they press play, it just throws them straight into the game. And I would even advocate that you can take that further. You could 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 "Slither.io" recognizing that getting the user engaged and into their game as fast as possible is really important. And here is an animation of another game, "TypeShift." So this is from a game designer and game developer, Zack Gage, 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 that, visually, at a distance, it can be understood-- like, what your game is all about, what the game design and 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 the game explains itself. And all the elements of the game, the mechanics and the visuals, come together so that your game is instantly graspable. But how do we create a compelling game, one that pulls the 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 game play 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 just go in the straight path, which is the most important movement you can do in the game. And then they made it endless and then also added in this slow-moving camera that adds a tension to the game. Because if you're too slow, then you get left behind, and you lose. And another example is "A Dark Room." So "A Dark Room" is a web game that went really viral. And it starts out as just a simple clicker genre, in which you're just stoking this fire in a mysterious room. And while you're stoking this fire, eventually a stranger walks in. And you speak to them. And then basically, the game just evolves over time. You get more actions to do, which is normal in clickers. 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 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 power of mystery that a game can have. Something as simple as just the mysterious narrative and the 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 artisan game designer, Cassie McQuater. And it recently won the prestigious Nuovo award at the Independent Games Festival at GDC this year. And the Nuovo award 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 were submitted to 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 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 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, I mentioned that we want to give users a reason to share. We want the URL to be really compelling. So there's a few different ways you can do this. You can do it in competitive, or collaborative, or maybe exploitative ways. Here's a competitive example, which "Shellshock" at I/O. It's an arena first-person shooter, similar to "Quake" or something like that. So it's a competitive multiplayer game. And using URLs, you can deep link another player into a room to compete with you. So whenever you create a room in the game to play, it generates a URL that's unique. And so then there are all other kinds of examples you could do. Think of all the possibilities. You could create a game where you have the ability to create a puzzle or a level in a game, and then that URL is playable link to that level. Or you could speed run a game or a level, and then have a player ghost or a player trail that is left behind. Or you could challenge other people to beat your score, to beat your ghost. Or you could have a game that's like a big, open, rogue-like style game with a really large, huge, open world. And you explore different rooms, but you're able to copy and paste the URL of the current room you're in and share it with a friend to teleport them into that part of the game world. So here's a little game I actually made called "Space Board." And I built it using Construct, which I mentioned earlier. And I made it actually in less than a day to just see how fast Construct on the web could be as a game development platform. But not only that, I designed the game to demonstrate how URLs can be used to transmit data, as well. And so I put a little level editor into the game. And when you play the game, you can then send a link to your level. And all of the game data of the actual level is transmitting that URL. It's hard to see that full URL in the browser. But it's literally representing each of the tiles of the game as characters in the URL. So if you try that out, you can play it on either desktop on mobile. But why am I also showing a QR code? Because QR codes also are URLs. And so I think that can be a really interesting marketing tool for promoting content in the physical world. If you access the URL in this QR code, it's another level I generated or created. And it's actually a lot more challenging. It has a lot of enemies. So you can have some fun trying out that one. But you could also imagine that "Space Board" itself could generate QR codes of levels right there on the mobile device. And then other users could scan the QR code and share it in person, not just as links that are shared in chat apps or anything like that. But once you've got users, what are the best practices for monetizing them on the web? Well, the landscape has been changing gradually. Banners are still a form of web advertising that's really important for web games. For example, Agar.io, their web version shows a banner every time the game loads or the player dies. But we also have more modern forms of advertising now on the web, like video interstitials. And several companies, including Google, have solutions for inserting videos in the middle of your web games. And ideally, you should experiment with how frequently you show these ads to your users. And meanwhile, some companies have experimented with the rewarded video ads and web games, as well. If you aren't familiar with rewarded ads, it's a very popular ad format that native mobile games have adopted in the last few years. Say, you're playing a game, and maybe there's a currency in that game. What you would do, as a game developer, if you want to display reward ads, is you would make it so that you can watch a rewarded ad to then get more of the currency in your game. And so that's why we call it rewarded ads. Because when you watch this video ad by choice instead of having it pop in for you like an interstitial, by opting in, you're getting a reward as part of that process. And when it comes to microtransactions, there are quite a few different options now, as well. So Google Pay, of course, is a JavaScript library which gives you access the credit card details that are stored in the user's Google account. But also, Chrome supports the Payment Request API, which is a open web platform feature. And this streamlines the payment flow, as well, by making it easier or quicker to access the credit card details of your users, say, stored in the browser. But also, on a native platform like Android, using Payment Request, it actually will access the credit card details that are stored in Android Pay, as well. So those are two ways of quickly getting the credit card details. But it doesn't really help you with the payment processing and payment back ends. But nowadays, there are a lot of companies that are operating in this space. And it's really never been easier to set up a payment back end for processing microtransactions. And what about web portals, as well? Well, remember "Crossy Road"? I mentioned it earlier. They published their game via Poki. And Poki is a web portal which has quite a few different games available. Another example is the "Subway Surfers," which has come out recently on poki.com, 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-- say, 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 are they perhaps searching for your game on the web and finding web alternatives built by other companies? Game design isn't patentable nor is it a copyrightable. So it's important to ensure you have parity with your competitors and your offerings. If your game is hugely successful, you should consider whether you are losing traffic to other websites, which may be ripping off your game and leveraging your product's name on search engines. And if you do build a web version of your existing native game, it doesn't have to be the full experience. It can just be a taste of the gameplay. And then up-sell the user to your native app for stronger monetization. So you can think of it as like a teaser trailer for your game. And on that topic, if you weren't aware, playable ads are a 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 Android 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 they increase the day seven retention of the users you acquire versus other formats. So what I'm saying here is that, 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 in on the open web, and direct users to your native game from the open web? Another interesting element that's appeared recently is Trusted Web Activities. So this is sort of like the best way to deploy a website as an Android app on Google Play. It's similar to Cordoba, 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 app or your game. And so, with Google Play, you can actually pull off Google Play billing transactions via Android Intents. The only downside is that, when you come back to the web app after the transaction, it refreshes the web page. And technically, a Trusted Web Activity is slightly faster than web view, as it avoids some Android rendering overheads, as well. So just with these last few minutes, I'd like to talk about some of my thoughts on 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 or 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 HTML5 similar to Flash. Maybe we could use the new web packaging 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 new metadata formats for discoverability. Like, you 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 game's ecosystem. So if you're a game developer, an engine developer, an ad network, or a digital payments platform, please reach out to me. I want to learn more about what you think the web game's ecosystem needs to succeed and what Chrome and Google can do to enable and stimulate 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. [MUSIC PLAYING]
Info
Channel: Google Developers
Views: 36,296
Rating: undefined out of 5
Keywords: type: Conference Talk (Full production);, pr_pr: Google I/O, campaign: Games, purpose: Educate
Id: aVTYxHL45SA
Channel Id: undefined
Length: 33min 52sec (2032 seconds)
Published: Thu May 09 2019
Related Videos
Note
Please note that this website is currently a work in progress! Lots of interesting data and statistics to come.