Desenvolvimento de jogos

Introdução ao desenvolvimento de jogos: história, mercado, processo de desenvolvimento, game design, implementação com HTML5.

Slides da primeira aula de um curso de 20 horas sobre desenvolvimento de jogos, oferecido em 2011 e 2013.

Motor desenvolvido durante o curso: https://github.com/rodrigorgs/rodengine2d

Transcript

1. Rodrigo Rocha G. e Souza <rodrigorgs@gmail.com> Desenvolvimento de Jogos 1
2. Sobre mim
3. Formação • Graduação na UFBA, 2007 • Mestrado na UFCG, 2010 • Doutorado em andamento na UFBA. • Área: Engenharia de Software
4. Atuação Profissional • Fapesb, 2009–2010 • Professor da disciplina Aplicações para Dispositivos Móveis (Android), 2012-2013 • RoDen Apps, 2009– • CPD-UFBA, 2012–
5. 1996 Qbasic
6. 1997 C
7. 2004 C++ Jogo em rede 2º lugar no 1º Festival de Jogos Independentes Inteligência Artificial
8. 2005 InGE Indigente Game Engine 3º lugar no Festival de Jogos Independentes (2006) Áudio 3D Física
9. 2009 iOS Top 5 Brasil 150 mil downloads em 5 línguas
10. Jogos não publicados • Protótipos com Qbasic, InGE, iOS SDK, Panda3D (Python), Corona SDK (Lua)
11. E vocês? • Experiência com desenvolvimento de jogos? • Experiência de jogar?
12. A Disciplina
13. • Expectativas
14. Ementa • Este curso apresenta uma visão geral da área de desenvolvimento de jogos digitais, englobando histórico, mercado, processo de desenvolvimento e implementação. No quesito implementação, são exploradas técnicas e tecnologias para o desenvolvimento de jogos casuais em duas dimensões.
15. Perfil do Aluno • Conhecimento básico de HTML e Javascript • Noções de básicas de computação gráfica • Gostar de programar
16. Assuntos • História dos jogos. Mercado de jogos. Fases do desenvolvimento de jogos. Tópicos em design de jogos. • Arquitetura de jogos. Tópicos em computação gráfica. • HTML5 e Javascript para jogos. • Implementação de jogos (controle, animação, áudio, colisão...) • Física para jogos
17. Por que jogos? • Jogos são envolventes, criam respostas emocionais • Preocupação com a experiência do usuário • Multimídia • Bom portfolio
18. Foco • Jogos 2D para a web • Imagem, movimento, áudio • Tecnologia: Javascript e <canvas> (HTML5) • Sucessor do Flash, baseada em padrões
19. História dos Jogos Digitais
22. 1972 1982 1980
23. 1985 1987 1987 1986
24. 1991 1989 1992 1996
25. 1997 1994 1996 2000
26. 1998 2005 2006 2010
27. 2009 2004 2009
28. Plataformas • Arcades (fliperamas) • Consoles: Atari, NES, Playstation, Wii, Nintendo DS, Xbox 360... • Outros: PC, Web, Celular, Tablet
29. Gêneros de Jogos • Adventure • FPS • Luta • Plataforma • RTS / TBS • RPG • MMO • Simulação (corrida, esportes, administração) • Musicais • Quebra-cabeça • Tradicionais (tabuleiro, cartas) • Baseados em física • ...
30. • Casuais • Educativos • Infantis • Sociais • Serious games • Hardcore • Advergames
31. Mercado de Jogos
32. Receita • Bilheteria de cinema
 US$ 27 bilhões (2008) • Venda de música
 US$ 30-40 bilhões (2004) • Venda e assinatura de jogos
 US$ 65 bilhões (2011) No mundo: Nos EUA:
35. h"p://www.theregister.co.uk/2012/12/04/top_25_app_devs_earn_half_of_revenue/>
36. • Brasil responde por 0,5% do consumo de jogos do mundo • Jogo Justo: Iniciativa para reduzir os impostos de jogos e dispositivos importados no Brasil • Intenção de desenvolver o mercado nacional • Dia do Jogo Justo: parceria com lojas para vender jogos com valor promocional
38. • Ideias • Demos jogáveis • Jogos completos
41. Cursos no Brasil • UNEB: Especialização em Game Design
42. Empresas no Brasil • Escritórios de empresas estrangeiras • Blizzard • Ubisoft • Empresas brasileiras • Hoplon Infotainment (SC) - Taikodom • Ignis Games (PR) - Erinia • Southlogic Studios (RS), comprada pela Ubisoft Mais: http://www.slideshare.net/Intentor/o-mercado-de-games-no-brasil-5264302
43. Fonte: Abragames
44. App Store BR
45. Plataformas de Distribuição • Para consoles: em geral, a licença é cara • “App Stores”: iOS App Store, Android Market, Windows Phone Marketplace, Nokia Ovi Store, Chrome Web Store • Kongregate (50% da publicidade) • Steam (Valve) • Autopublicação
46. Processo de Desenvolvimento
47. Design Artes Programação equipe multidisciplinar
48. Artes • Gráfica • Ilustração • Modelos de objetos e personagens • Modelos de cenários • Texturas • Animação • Logotipo, elementos de interface • Videos • Sonora • Efeitos sonoros • Músicas (composição, execução)
49. Programação • Álgebra linear, trigonometria • Física • Estruturas de dados e algoritmos • Redes • IA • Computação gráfica • Engenharia de software • Programação de áudio • Linguagens de script
50. Design • Psicologia • Literatura • Senso estético • Visão de mercado • Noções de programação • Designer da mecânica • Level designer • Roteirista
51. Outros profissionais • Publisher • Produtor • Testador • Web designer • Administrador de redes
52. Fases do Desenvolvimento • Concepção • Arte Conceitual • Mock-up • Implementação • Balanceamento e ajustes • Playtest/QA • Publicação e Distribuição • Pós venda
53. Noções de Game Design Leitura: A Theory of Fun for Game Design (livro) Leitura: The Art of Game Design: A Book of Lenses (livro) Leitura: www.lostgarden.com (blog)
54. O que é um jogo? • Brincadeira estruturada, normalmente realizada por prazer e por vezes utilizada como uma ferramenta educacional. • Tem a ver com diversão, interação, resolução de problemas de forma lúdica. • Comparar: brinquedos, arte
55. O que é diversão? • “Diversão é apenas outra palavra para aprendizado.” (sob condições ótimas) – Raph Koster • “Diversão em jogos surge do domínio. Ela surge da compreensão. É o ato de solucionar quebra-cabeças que torna os jogos divertidos.” – Raph Koster
57. Jogos vs. Trabalho • Jogo: você escolheu jogar. • Trabalho: você é obrigado a trabalhar. Consequências sérias.
58. Gamification • Incluir dinâmica de jogos em um site, serviço, comunidade, campanha etc. a fim de estimular a participação. • Ex.: Nike+, Foursquare, programas de fidelidade, funcionário do mês... • Motivação intrínseca vs. extrínseca • Ver curso em https://www.coursera.org/
59. Os 4 Elementos do Game Design Estética Tecnologia Mecânica História
60. Exemplo: Space Invaders
61. Tecnologia e Mecânica • Tecnologia: placa mãe criada especialmente para rodar. • Mecânica: interessante e balanceada. Jogador atira nos aliens e vice-versa. Aliens vão se aproximando do jogador. Jogador pode se esconder atrás de escudos que vão sendo destruídos pelos tiros. Pontos extras se atingir um disco voador. Fim de jogo: ser acertado pelos aliens, ou os aliens chegam ao planeta do jogador. Aliens mais distantes valem mais pontos. Quanto mais aliens você destrói, mais rápido eles se aproximam.
62. História • Poderia não ter, mas ter uma história é mais empolgante e torna o jogo mais fácil de entender. Originalmente, eram soldados se aproximando, mas decidiram que isso passava uma mensagem ruim. A nova história (de invasão alienígena) é melhor: • Novidade na época • Algumas pessoas não gostam de videogames violentos de atirar em pessoas • O tema futurista combinava com os gráficos “high tech”
63. Estética • Há três tipos de aliens. A tela não tinha cor, mas isso foi resolvido ao se colar plástico translúcido na tela: em baixo, jogador e escudos; no meio, aliens; em cima, o disco voador. • Sons lembravam batimentos cardíacos que iam se acelerando. • O gabinete do fliperama era chamativo e ajudava a contar a história.
64. Outros tópicos • Tipos de personalidade (Bartle): explorador, socializador, matador, realizador • Game Ontology Project: http:// www.gameontology.com • Mineração de dados de jogos
65. Documento de Game Design • Orienta o desenvolvimento, e é atualizado com ele • História, controles, gráficos, áudio, tecnologia usada, mecânica, regras, pontuação, estrutura do jogo, personagens, cenários...
66. Mecânica • Espaço • Objetos, atributos e estados • Ações • Regras • Habilidades do jogador • Eventos aleatórios
67. Arquitetura de um jogo Leitura: Game Development – Harder than You Think
72. Game Loop inicializar terminar processar entradas atualizar o mundo desenhar game loop movimentar jogador rodar IA movimentar inimigos detectar colisões rodar simulação física
73. HTML5
74. HTML5 • Versão anterior: HTML4 (1997). • Padrão em desenvolvimento (WHATWG e W3C). • Suporte parcial nos navegadores modernos. • Novidades: <canvas>, <video>, <audio>, Web Storage, juntamente com novas APIs para Javascript. • Outras especificações: Web Sockets, WebGL, Web Workers...
75. HTML5 - Demos • http://www.playtankworld.com/ • https://demos.mozilla.org/ • http://www.chromeexperiments.com/ • http://www.apple.com/html5/ • http://chrome.angrybirds.com/ • http://code.google.com/p/quake2-gwt-port/
76. <canvas> • Área retangular que pode ser desenhada através de Javascript. • API para desenhar formas geométricas, imagens, aplicar transformações...
77. <canvas>
78. Gráficos • Bitmap vs. vetorial • Modo imediato vs. modo retido • Responsabilidade de redesenhar: sistema ou aplicação?
79. var canvas = document.getElementById(“surface”);
 var ctx = canvas.getContext(“2d”);
 
 ctx.strokeStyle = “#000000”;
 ctx.strokeRect(30, 30, 50, 50);
 ctx.fillStyle = “rgba(0, 0, 200, 0.5)”;
 ctx.fillRect(30, 30, 50, 50); // x, y, w, h x y (0,0)
80. var img = new Image();
 img.src = “imagem.png”;
 
 ctx.drawImage(sprite, 0, 0); // sprite, x, y
82. Coordenadas e Transformações
85. <canvas> • Mais informações: http://www.whatwg.org/ specs/web-apps/current-work/multipage/ the-canvas-element.html
86. <audio> <audio id=“a1” src=“click.wav”>
 var a1 = document.getElementById(“a1”);
 a1.play();
 a1.pause();
 a1.volume = 0.75;
 a1.currentTime = 20.0; // segundos
 var d = a1.duration;

87. <audio> • Suporte limitado (ex.: Safari), latência • Biblioteca SoundManager 2: http:// www.schillmania.com/projects/ soundmanager2/
88. Sound Manager 2
89. Performance • https://github.com/mrdoob/stats.js
90. Exemplo 1: Planetário • Desenho • Animação • Game loop
91. OO em Javascript
92. Revisão • Objetos em Javascript são hashes/dicionários; novas propriedades podem ser adicionadas a qualquer momento • Métodos são apenas propriedades que fazem referência a uma função. • Funções são objetos (portanto, podem conter propriedades) do tipo Function, que possuem uma operação especial: a chamada. • Javascript é uma linguagem orientada a objetos, mas não é baseada em classes, e sim em em protótipos.
93. Biblioteca OO • http://ejohn.org/blog/simple-javascript- inheritance/
94. Tópicos extras • Otimização gráfica: • múltiplas camadas. • caching pra evitar rotações a cada quadro. • sprite sheet - http://www.codeandweb.com/what-is-a-sprite- sheet • Jogo em rede: Web Sockets • Física: box2d • Local Storage / Offline cache