GDG DevFest - HTML5 Game Development

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

Ralph Vincent Regalado • Co-founder and CEO of Senti • Assistant Professor at De La Salle University, Manila • Member of DLSU Net-Centric Computing Laboratory • Teaches Mobile and Web Development, Technopreneurship and Startup Engineering Course

Slide 3

Slide 3 text

What to expect? HTML5 Introduction HTML5 Canvas Create games using HTML5 So?

Slide 4

Slide 4 text

What “I” expect? Listen attentively. Don’t be shy!

Slide 5

Slide 5 text

HTML5 Introduction

Slide 6

Slide 6 text

History HTML 4.0 HTML 4.01 XHTML 1.0 Web Applications 1.0 HTML 5

Slide 7

Slide 7 text

Why is HTML5 needed?

Slide 8

Slide 8 text

The Itch HTML 4.0/4.01

Slide 9

Slide 9 text

The Solution

Slide 10

Slide 10 text

Semantics Offline & Storage Device Access Connectivity Multimedia 3D, Graphics, Effects Performance & Integration CSS3

Slide 11

Slide 11 text

HTML5 Elements Structure Elements Content Elements section hgroup footer article aside figure figcaption mark time Media Elements audio video canvas Form Input types Input attributes

Slide 12

Slide 12 text

Creating Games using HTML5

Slide 13

Slide 13 text

HTML5 Game Demo

Slide 14

Slide 14 text

HTML5 Canvas

Slide 15

Slide 15 text

HTML5 Canvas My favorite feature of HTML. Allows you to manipulate graphics or create them from scratch. Used with together Javascript to create dynamic graphics and animations.

Slide 16

Slide 16 text

2d Rendering Context Provides all the necessary methods and functionality to draw on. You draw on the 2d rendering context and you access and display it through the canvas.

Slide 17

Slide 17 text

2d Rendering Context Follows a coordinate system

Slide 18

Slide 18 text

Let’s draw some objects Note We will be using Jquery Javascript Library in all of our examples.

Slide 19

Slide 19 text

Let’s put some animation! Note We will be using the sprites created by Team Excelsior for their game Squishy Tales

Slide 20

Slide 20 text

So?

Slide 21

Slide 21 text

What to do after? Rejoice! Port your apps! Use PhoneGap or other cross-mobile platforms. READ and LEARN MORE!