Your SlideShare is downloading. ×
Desenvolvimento de Jogos com HTML5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Desenvolvimento de Jogos com HTML5

7,102

Published on

Palestra apresentada na USC durante a 3ª Jornada de Informática

Palestra apresentada na USC durante a 3ª Jornada de Informática

Published in: Technology
5 Comments
20 Likes
Statistics
Notes
No Downloads
Views
Total Views
7,102
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
233
Comments
5
Likes
20
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. DESENVOLVIMENTO DE JOGOS COM <HTML5 /> Talita Pagani - @talitapagani
  • 2. SOBRE Formação Atuação Profissional Comunidade
  • 3. HTML5 E SUA PARAFERNÁLIA*... * sim, é assim que se escreve. “Parafernalha” é outra coisa.
  • 4. Canvas Audio & Video Offline Applications HTML5 Media Capture Seletores e Validadores Web Sockets e Web Storage
  • 5. PORQUÊ? • Ubiquidade: mobile, web, TV, geladeira (?) • Independência de plataforma • Facebook • Acessibilidade
  • 6. Jogos em HTML5: HTML5 + JAVASCRIPT + CSS + SVG + ...?
  • 7. Lógica Assets Gráficos Anatomia de jogos Input Multiplayer Áudio
  • 8. JS Gráficos, cenários (vetoriais), animações SVG CSS <canvas>, <audio>, <video>, conteúdo textual Comportamentos, eventos, lógica, mecânica HTML5 Transições, controles, formatação e apresentação
  • 9. Ll VIESES
  • 10. FAMILIARIDADE Você já conhece a tecnologia
  • 11. COMPLEXIDADE JavaScript é uma linguagem de propósito geral
  • 12. CROSS-PLATFORM Um único código, múltiplos dispositivos
  • 13. SUPORTE Diferentes features, diferentes navegadores
  • 14. (IN)CONSISTÊNCIA Implementações distintas
  • 15. SOCIAL Possibilidade de integração com APIs e features de redes sociais
  • 16. SEGURANÇA Proteção de código
  • 17. PERFORMANCE Aceleração de hardware, GPU e etc.
  • 18. Você sabia que... O INTERNET EXPLORER (9 E 10) POSSUI UMA BOA ACELERAÇÃO DE HARDWARE?
  • 19. ≠ HATERS GONNA HATE
  • 20. % CÓDIGOS E MELHORES PRÁTICAS
  • 21. Tudo começa aqui... <canvas id=“canvas" width="150" height="150"> Desculpe, seu navegador não suporta canvas. </canvas> <script type="text/javascript"> function gameloop() { var canvas = document.getElementById(canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); } } </script>
  • 22. PRIMITIVAS function draw(){ var ctx = document.getElementById('canvas').getContext('2d'); ctx.fillRect(25,25,100,100); ctx.clearRect(45,45,60,60); ctx.strokeRect(50,50,50,50); }
  • 23. PRIMITIVAS + IMAGENS function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var img = new Image(); img.onload = function(){ ctx.drawImage(img,0,0); ctx.beginPath(); ctx.moveTo(30,96); ctx.lineTo(70,66); ctx.lineTo(103,76); ctx.lineTo(170,15); ctx.stroke(); }; img.src = '/files/4531/backdrop.png'; }
  • 24. MAIS FUNÇÕES... • save(); • translate(x, y); • rotate(d); • scale(x, y); • restore(); • bezierCurve, quadraticCurve, rect, fillText, strokeText, beginPath/closePath
  • 25. GRÁFICOS COM SPRITE SHEETS var sprites = new Image(); sprites.src = “sprites.png”; ctx.drawImage( sprites, sx, sy, início do recorte sw, sh, tamanho do recorte dx, dy, coord. de destino dw, dh tamanho de destino ); sx = 25 sy = 50 sw = 25 sh = 25
  • 26. “ 1 Game != 1 Canvas http://www.slideshare.net/ernesto.jimenez/5-tips-for-your-html5-games #ficadica ”
  • 27. USING MULTIPLE HTML5 CANVASES AS LAYERS http://html5.litten.com/laye rs/canvaslayers.html http://html5.litten.com/usin g-multiple-html5-canvasesas-layers/
  • 28. Canvas
  • 29. DOM
  • 30. Múltiplos canvas permitem CAMADAS DRAW REGIONS MELHOR MANIPULAÇÃO DE ELEMENTOS DO JOGO
  • 31. Tudo isso pra DESENVOLVER UM JOGO em HTML5???
  • 32. CALMA Tá tudo bem agora
  • 33. http://impactjs.com/
  • 34. http://www.limejs.com
  • 35. http://www.gameclosure.com/
  • 36. http://craftyjs.com/
  • 37. http://melonjs.org/
  • 38. http://joyjs.org/
  • 39. http://threejs.org/
  • 40. http://phonegap.com/
  • 41. http://html5gameengine.com/
  • 42. > DEMOS
  • 43. http://talitapagani.github.io/DamnAliens/
  • 44. http://phoboslab.org/ztype/
  • 45. http://www.currantcat.com/convergence/
  • 46. http://canvasdefense.appspot.com/
  • 47. http://wordsquared.com/
  • 48. http://playtankworld.com/level/air_strike
  • 49. BÔNUS http://html5games.com/
  • 50. BÔNUS http://www.html5games.net/
  • 51. B ONDE APRENDER
  • 52. http://www.html5gamedevelopment.com/
  • 53. http://www.html5canvastutorials.com/
  • 54. https://developer.mozilla.org/pt-BR/demos/?menu
  • 55. http://www.html5rocks.com/en/tutorials/canvas/notearsgame/?redirect_from_locale=pt
  • 56. ! CONCLUSÕES
  • 57. USAR OU NÃO USAR HTML5 PARA JOGOS? • JS: linguagem robusta • Frameworks para auxiliar no desenvolvimento • Independente de plataforma, dependente de suporte do navegador • Manutenção e disponibilidade em diferentes dispositivos
  • 58. CADA COISA EM SEU LUGAR • JS para lógica / mecânica • Controles, inputs, textos, transições: CSS • SVG: pode ser usado para algumas animações e cenários vetoriais • Você precisa mesmo desenhar tudo no canvas?
  • 59. 7 ARQUITETURAS HÍBRIDAS DE JOGOS
  • 60. come to the dark Web side
  • 61. REFERÊNCIAS • Gil Megidish. Game Development With HTML5. http://www.slideshare.net/gawd/game-development-with-html5 • LimeJS. Is HTML5 the future of (mobile) gaming? http://www.limejs.com/2011/03/18/is-html5-the-future-of-mobile-gaming • Facebook Developers. Making a Speedy HTML5 Game. https://developers.facebook.com/blog/post/2012/04/17/making-a-speedyhtml5-game/ • Ernesto Jiménez. 5 tips for your HTML5 games. http://www.slideshare.net/ernesto.jimenez/5-tips-for-your-html5-games • MDN. Canvas Tutorial. https://developer.mozilla.org/enUS/docs/HTML/Canvas/Tutorial
  • 62. FRAMEWORKS • http://www.limejs.com/ • http://impactjs.com/ • http://www.gameclosure.com/ • http://craftyjs.com/ • http://www.melonjs.org/ • http://phonegap.com/ • http://joyjs.org/
  • 63. IMAGENS • http://rawkes.com/articles/mashing-up-the-html5-logo • http://crieseumeme.com/media/created/o5lmld.jpg • http://fc03.deviantart.net/fs70/i/2010/005/2/0/Sonic_Sprite_ Sheet_WIP_by_Derek_the_Hedgehog87.png • http://fc02.deviantart.net/fs71/i/2011/086/9/b/darth_vader_ by_sila92-d3cmlgq.png • https://www.dropbox.com/sh/m5efumhdr4quhqv/zXDKgTnrOg #/
  • 64. Obrigada! twitter.com/talitapagani | facebook.com/talitapagani | github.com/talitapagani
  • 65. Perguntas?

×