Games development on Smart TV

Agenda:

• What is Canvas and WebGL?
• History of Canvas and WebGL.
• Everything we need to build a game is HTML 5.
• Games on Browsers.
• TV and Games?
• Support of HTML 5 in Smart TV.
• Frameworks and examples.

What is Canvas?

Canvas element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images. It is a low level, procedural model that updates a bitmap and does not have a built-in scene graph.

Usage of Canvas.

		// html
                <canvas id="example" width="200" height="200"></canvas>
		// javascript
                var example = document.getElementById('example');
                var context = example.getContext('2d');
		context.fillStyle = "rgb(255,0,0)";
		context.fillRect(30, 30, 50, 50);
            

What is WebGL?

WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D graphics and 2D graphics within any compatible web browser without the use of plug-ins. WebGL is integrated completely into all the web standards of the browser allowing GPU accelerated usage of physics and image processing and effects as part of the web page canvas. WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background.

History of WebGL

• 2006 - Vladimir Vukićević create prototype of canvas.
• 2007 - Mozilla and Opera implement canvas.
• 2009 - Khronos Group started the WebGL Working Group.
• 2013 - Start working on WebGL 2 spec.

Everything we need to build a game.

• Game Engine.
• Graphic.
• Audio.
• Storage.
• Inputs.
• Internet connection.

                init();
                animate();
                
		function init() {
		// game bootstrap
		}
                function animate() {
		    requestAnimationFrame( animate );
		    // game update 
		}
            

Graphics.

• Three.js
• ImpactJS
• EaselJS
• pixi.js
• ... and many more.

We have audio tag in HTML 5!

                <audio controls>
                    <source src="Horse.ogg" type="audio/ogg">
                    <source src="Horse.mp3" type="audio/mpeg">
		</audio>
            

Storage is also in HTML 5!

		// getting from storage.
                var foo = localStorage.getItem("bar");
		// save to storage.
                localStorage.setItem("bar", foo);
            

emm... Events?

                el.addEventListener("click", function () { 
		   // some actions.
                });
            

Internet Connection.

• WebSockets
• WebRTC

Games on Browser.

• Fun to develop.
• Fast deplyoment.
• Great library like Three.js, Kinetic.js, Physics.js, Impact.js.
• Great debugging tools.
• Many resources and examples.
• Wide support.

TV and Games?

Browser vs Smart TV.

Browser advantages:

• Debugging.
• Performance.
• Tutorials.
• Controllers.
• Users.

Browser vs Smart TV.

Smart TV advantages:

• Convergence.
• Big Screen.
• Gestures recognition.
• Voice recognition.

Why not TV and mobile Games?

Support of HTML 5 in Smart TV.

• HTML5 The canvas element (Partial)
• HTML Canvas 2D Context (Partial)
• HTML5 SVG
• HTML5 The video element (Partial)
• HTML5 The audio element (Partial)
• File API
• ... and many more.