Download as ODP, PPTX
Uploaded byPablo Farías Navarro
HTML5 Mobile Game Development - Brisbane Game Technology Meetup 2015
The document discusses HTML5 mobile game development. It summarizes that Pablo Farias Navarro will give a presentation on HTML5 game development at the Brisbane Game Tech Meetup. The presentation will cover topics like HTML, CSS, JavaScript, Canvas, WebGL, audio, frameworks like Phaser, game distribution, wrappers like Cordova and PhoneGap Build, and how to get started in HTML5 game development. The presentation aims to provide an overview of developing HTML5 games for mobile.
More Related Content
Similar to HTML5 Mobile Game Development - Brisbane Game Technology Meetup 2015
![Getting Started with Apache Spark: Big Data Made Simple [Free Meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/apachesparkgettingstarted-260203175547-8361bcc3-thumbnail.jpg?width=640&height=640&fit=bounds)
HTML5 Mobile Game Development - Brisbane Game Technology Meetup 2015
- 1. HTML5 Mobile Game Development 1/3/2015 BrisbaneGame Tech Meetup Pablo Farias Navarro Founder of ZENVA @ZenvaTweets pablofarias@zenva.com
- 2. HTML5 Game Development New Technology “XYZ” Peoplewill hack games with XYZ XYZ Game Development We are on Kickstarter! http://tiny.cc/html5gamedev
- 3. We are onKickstarter! http://tiny.cc/html5gamedev
- 4. HTML We are onKickstarter! http://tiny.cc/html5gamedev
- 5. CSS We are onKickstarter! http://tiny.cc/html5gamedev
- 6. JavaScript We are onKickstarter! http://tiny.cc/html5gamedev
- 7. We are onKickstarter! http://tiny.cc/html5gamedev
- 8. CANVAS We are onKickstarter! http://tiny.cc/html5gamedev
- 9. http://localhost:8110/js-gamedev-course/game/ We are onKickstarter! http://tiny.cc/html5gamedev
- 10. Audio ● http://mdn.github.io/violent-theremin/ We areon Kickstarter! http://tiny.cc/html5gamedev
- 11. WebGL ● Babylonjs.com We areon Kickstarter! http://tiny.cc/html5gamedev
- 12. HTML5 Games Distribution Weare on Kickstarter! http://tiny.cc/html5gamedev
- 13. Wrappers HTML5 Native wrapper We are onKickstarter! http://tiny.cc/html5gamedev
- 14. Cordova ● Cordova plugins:http://plugins.cordova.io/#/ We are on Kickstarter! http://tiny.cc/html5gamedev
- 15. Phonegap Build ● https://build.phonegap.com Weare on Kickstarter! http://tiny.cc/html5gamedev
- 16. Intel XDK We areon Kickstarter! http://tiny.cc/html5gamedev
- 17. HTML5 game frameworks Weare on Kickstarter! http://tiny.cc/html5gamedev
- 18. Rule #1 We areon Kickstarter! http://tiny.cc/html5gamedev
- 19. Rule #2 We areon Kickstarter! http://tiny.cc/html5gamedev
- 20. Phaser ● Game rendering ●Sounds ● Asset preloading ● Sprites ● World ● Groups ● Input ● Events ● Screen sizes ● Physics - http://phaser.io We are on Kickstarter! http://tiny.cc/html5gamedev
- 21. Basic structure We areon Kickstarter! http://tiny.cc/html5gamedev
- 22. How to getstarted ● Basic to intermediate level of: – HTML – CSS – JavaScript ● Start with a very simple game. Client side. ● Tutorials and courses: – http://www.gamedevacademy.org/category/tutorials/html5-gamedev- phaser/ – https://academy.zenva.com – http://html5hub.com/ We are on Kickstarter! http://tiny.cc/html5gamedev
- 23. Other topics ● Advantagesand disadvantages of HTML5 games ● SVG ● CocoonJS We are on Kickstarter! http://tiny.cc/html5gamedev
- 24. THANK YOU ZENVA.com Support uson Kickstarter! http://tiny.cc/html5gamedev
Editor's Notes
- #3 In human history, every time a new technology has been invented, people have made games with it. HTML5 is of course not the exception.
- #4 What exactly is HTML5? The official definition is simply the latest revision of HTML, the language used to create websites. This latest revision includes the combined use of HTML, CSS and JavaScript, all Open Web technologies, to create rich websites and interactive applications.
- #5 HTML, released in 1993 is the standard language to create websites. It allows you specify the structure and the content of a page.
- #6 CSS, released in 1996 is used to specify the format and style of the page. Think of types of fonts, colors, spacing, layouts.
- #7 JavaScript appeared for the first time in 1995. It was originally used to make websites interactive on the client side (think of a form validation or a date picker), but ever since it's grown so much that it's now also used not just on the client side, but it's used as a full server side language and even as a database language.
- #8 Given the widespread of the web browser, the fragmentation between all the different platforms and the fast development of the Open Web technologies, it was only a matter of time before they were used not just for websites, but also to create desktop applications, mobile apps and of course games!
- #9 I'll begin by talking about the canvas. One of the main elements in HTML5 that allow the creation of games is the Canvas. The canvas is a rectangular area where you can draw anything. It also allows a way to update what's being drawn over time, so we can animate it. We can of course load images in it, read user input and update what's on the screen. That would be the basics of any game.
- #10 All top of the line phones, including iOS, Android, Amazon and Windows Phones, have now implemented hardware accelerate support for the canvas, so you can get good performance in them. This is not the case for low-end Android phones which sadly account for a large piece of the pie. *some examples
- #11 Games need graphics but they also need music and sounds. HTML5 offers two alternatives to play sounds. There is the audio tag which can be used either directly on a website to embed audio, or it can be also accessed via JavaScript. Besides the audio tag there is a more complex API called the Web Audio api, which allows sound file manipulation and creating effects.
- #12 Another technology I want to talk about is WebGL. WebGL is not really part of the HTML5 specification, it's a different specification but it's comes under what people refer to when they talk about HTML5. WebGL is a specification to render 2D and 3D images in the browser using the graphic card or GPU. WebGL renders these images in the canvas, so we are using the same Canvas element I talked about before, but with a different API which is based on Open GL. Before iOS8 arrived, WebGL wasn't supported by Apple. Now, WebGL is officially supported in all main platforms. Again, low-end Android phones lag on this.
- #13 What I talked about so far explains some of what is used to create games in the BROWSER. But you must be thinking, what if I want to publish one of these games directly to the App Store, or to the Playstore. Ok, first of all, for some platforms you can just publish them as webapps, and they will be distributed alongside native applications. This applies for Windows, Amazon, FirefoxOS, Tizen.
- #14 For Android and iOS you need to wrap your HTML5 in native code. Thse two platforms offer an element called a "webview". Think of a webview as an app that is a web browser without the address bar, bookmark buttons or anything else really. it's just a frame where you can render HTML, CSS and JavaScript.
- #15 Cordova is an open source project that allows you to wrap HTML5 games and apps in a native container so that you can publish them alongside native apps But it doesn't stop there. Cordova allows you to access native device features via JavaScript API's. This is done by Cordova plugins. There are plugins for many phone or device specific API's. For example you can access your phone contacts, calendar, make calls, send SMS. You can also code your own Cordova plugins to make use of any native code via JavaScript API's. What about Phonegap? people usually talk about it. What's the different between Phonegap and Cordova? Originally, the project was by a startup and called Phonegap. As it became popular, Adobe bought the startup along with the Phonegap brand. The open source project was passed to the Apache foundation and renamed as Cordova. Phonegap today is the Adobe version of Cordova, which is nothing else but Cordova + some Adobe specific services in the cloud.
- #17 Cordova is a command line tool. In order to use it you have to also install the SDK for all the native platforms you want to target. A really cool tool to make this process easier is the Intel XDK, which is a strange beast that combines an IDE, an Emulator and access to cloud services that use Cordova to build your app to different platforms, all in one place. The Intel XDK also provides some cloud services for app monetization.
- #18 Most games have things in common. Drawing sprites on the screen, making things move, dealing with mobile screen resolutions and responding to player input. These are things most games will use, so people started to make frameworks so that game developer could concentrate on the games themselves and not having to create their own tools each time. There are plenty of game frameworks out there. The most popular at the moment is the Phaser engine which is pretty lightweight, mobile friendly and easy to learn if you know JavaScript. And of course it's free and open source.
- #19 How many of you have used jQuery? how many of you have read the source code of jQuery? The main rule when using this or other HTML5 game frameworks is that you can't treat them as a black box, like you would do with say jQuery. Since we are dealing with cutting edge technologies here, not everything works all the time. Also, by reading the framework you actually learn how to make games. It will save you hours of time to read your game framework. and I suppose reading jQuery as well.
- #21 Lets talk about Phaser. Phaser uses WebGL behind the scenes to render the game, of if webGL is not supported it will use the Canvas API. All of this happens without you having to care which is great.