Html5 (games)

Html5 (games)

• 1.
  HTML5 (Games) Facebook - Buildday
• 2.
  Intro To HTML5(Games) ● Simple Concepts ● Easy integration ● Flexibility ● Powerful Api (canvas) ● Cross-Platform ● Lightweight ● No dependencies
• 3.
  <canvas> ● canvas isa rectangular area on an HTML page. ● Interactivity — any events listeners that can be used in JavaScript can be incorporated with canvas drawings ● Fast — because canvas uses immediate mode, the generation of graphics is quicker then methods that use retained mode which bogs down browser memory ● Support—it can be used with virtually any modern browsers Code Sample : <canvas id="myCanvas" width="200" height="100"></canvas>
• 4.
  2D API ● 2DAPI has the possibility of creating basic shapes, so-called primitives. exemple:
• 5.
  3D API (WebGL ) ● WebGL is an API for 3D rendering in an HTML canvas in browsers that support it without the use of plug-ins.
• 6.
  Physics engine ● Natureof cause , ● Velocity, ● acceleration ● make your Environment ready It’s all about vectors !
• 7.
  3D components ● Setthe Scene : camera and a renderer ● Making a Mesh : Spheres, Planes, Cubes, Cylinders ... ● Materials : Basic, Lambert , Phong , textures — applied to meshes ● Lights ● Render ● Common Object Properties : geometry (which contains the vertices and faces) — materials ● Polygons (faces, vertices, edge)
• 8.
  Technologies Local storage : ●Cache or store data on a user’s local device Web Assembly : ● low-level bytecode for the web that works alongside with javascript WebGPU : ● Not implemented, still a future standard ● Will enable modern 3D graphics and computation capabilities in web browsers Gamepad API : ● Allow controller input in web games (e.g.Xbox controller) PhoneGap : ● Allow (HTML5) to be converted to an android app
• 9.
  Tools Full games engines: Useful JavaScript Libraries : 2D Rendering 3D Rendering JavaScript module bundler : JavaScript checking library :
• 11.
  Ressources Games https://www.webfx.com/blog/web-design/examples-html5-canvas/ Simple racinggame https://github.com/alchemist107/JavaScript_Racing_Game Coding train (youtube) https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw HTML5Rocks https://www.html5rocks.com