Desenvolvimento de Games em HTML5

(Uma abordagem com Construct 2)

José Augusto Cintra

Professor da Faculdade Sumaré – SP
Analista de TI da Empresa PRODAM – SP

jose.cintra@html-apps.info
htttp://www.html-apps.info
 Parte I
Introdução

2015, Prof.José Auguso Cintra - Faculdade Sumaré

Definições
Jogar é o ato de resolver situações de desafio variados
apresentados por adversários virtuais ou humanos em um
modelo sistemático bem definido.
Raph Koster

Um jogo é uma série de coisas interessantes

Sid Meier

Um jogo é uma repetição de desafios e recompensas

Aryadi Subagio

2015, Prof.José Auguso Cintra - Faculdade Sumaré

Um pouco de História
1961 - SpaceWar! (MIT) Primeiro videogame
1971 - Odissey 100 - Primeiro aparelho deVideogame para TV
1973 - Pong (Atari)
1980 - Pac man (Puck Man)
1981 - Donkey Kong (Nintendo)
1994 - PlayStation
2000 - PlayStation 2
2005 - XBox
2006 - Wii

2015, Prof.José Auguso Cintra - Faculdade Sumaré

SpaceWar!!
Situação atual
 PlayStation 4
 Wii U
 Xbox One
 PC
 Jogos para dispositivos Móveis (Celulares e Tablets)

Indie Games!

Flappy Bird!
2015, Prof.José Auguso Cintra - Faculdade Sumaré
Principais Plataformas Móveis
 Apple
 Sistema Operacional: IOS
 Linguagem: Objective C

 Android
 Sistema Operacional: Android (Linux)
 Linguagem: Java c/MáquinaVirtual Dalvik

 Windows
 Sistema Operacional:Windows Phone
 Linguagem: C#,VB.NET, ...

 Novas plataformas: Firefox,Tizen, ...

2015, Prof.José Auguso Cintra - Faculdade Sumaré
Características das Plataformas Móveis
 Touch
 Acelerômetro/Sensores
 Multimídia aprimorada
 GPS
 Internet / Social

Novas Experiências de Usuário

2015, Prof.José Auguso Cintra - Faculdade Sumaré

Características das Plataformas Móveis
 Novas formas de monetização:

 Aplicativos pagos
 Premium

 Aplicativos “grátis”

 Advertising
Propagandas
 Freemium
 Compra de itens individuais (in-app)

2015, Prof.José Auguso Cintra - Faculdade Sumaré

Dificuldades de Desenvolvimento
 Diferentes plataformas:

 Maiores oportunidades de vendas

 Maior curva de aprendizado

 Maiores custos

 Manutenção complexa

Como minimizar essas dificuldades ???

2015, Prof.José Auguso Cintra - Faculdade Sumaré

Resposta: Utilizando uma única ferramenta que gere código
nativo para várias plataformas!

2015, Prof.José Auguso Cintra - Faculdade Sumaré

 Por que não HTML?

2015, Prof.José Auguso Cintra - Faculdade Sumaré

 Ou melhor:
WEB APPS

2015, Prof.José Auguso Cintra - Faculdade Sumaré

WEB Apps
 Web Apps ou HTML Apps não diferem muito das aplicações web
tradicionais, a não ser por 3 detalhes:

 Podem ser instaladas no dispositivo local (celular, tablet, desktop);

 Podem ser executadas em modo offline;

 Possuem acesso às APIs e manipulam recursos locais dos dispositivos como

câmera, acelerômetro, GPS, etc.

2015, Prof.José Auguso Cintra - Faculdade Sumaré

WEB Apps
 Web Apps são escritas com tecnologias abertas e responsivas que se baseiam
na tríade HTML5, CSS3 e Javascript. Dessa forma, com ferramentas
apropriadas, é possível, por exemplo, executar uma aplicação web em um
dispositivo Android como se fosse uma aplicação nativa com acesso aos
recursos que a máquina disponibiliza!

2015, Prof.José Auguso Cintra - Faculdade Sumaré

Tecnologias
Essa magia é possível graças aos seguintes fatores:

 Evolução do HTML e CSS  HTML5 e seus novos recursos (Canvas,

áudio, novos controles, etc.).

 Evolução do Javascript e novos frameworks

 Design responsivo

 Frameworks híbridos

2015, Prof.José Auguso Cintra - Faculdade Sumaré

Tecnologias
 HTML5
 Canvas  Elemento usado para desenhar gráficos “on the fly”.

 Audio  Elemento que padroniza a execução de áudio.

 Entrada de dados  Novos controles sofisticados para interação com o

usuário

 GPS  O Recurso de Geolocalização do HTML5 permite determinar a

localização geográfica do usuário em termos de coordenadas

 CSS3
 Novas opções de formatação e recursos como media-queries e design
responsivo permitem construir interfaces próximas do visual dos
2015,dispositivos
Prof.José Augusomobile
Cintra - Faculdade Sumaré
Tecnologias
Armazenamento de Dados
A persistência de dados em webapps pode ser implementada através da API
Web Storage do HTML5 ou através de bancos de dados mobile.

 Web Storage
 sessionStorage  Dados voláteis
 localStorage  Dados que persistem entre as sessões, mesmo após o encerramento
das aplicações com Javascript e SQLite

 Bancos de Dados Mobile

 Existem versões mobile dos principais bancos de dados do mercado que
disponibilizam APIS Javascript para utilização em webapps.

2015, Prof.José Auguso Cintra - Faculdade Sumaré

Tecnologias
Bibliotecas Javascript

 Frameworks Mobile  Facilitam a criação de interfaces responsivas com as

características dos dispositivos móveis
 Jquery Mobile, Zepto.js, Sencha Touch

 Canvas Facilitam o trabalho com o elemento HTML5 Canvas

 oCanvas, KinectiJS (exemplo)

 Audio  Facilitam o trabalho com o elemento HTML5 Audio

 Buzz, SoundJS

 Touch  Oferecem suporte para eventos “Touch”

 Hammer, QuoJS
2015, Prof.José Auguso Cintra - Faculdade Sumaré
Tecnologias
Bibliotecas Javascript para criação de Jogos HTML5

 Ambientes de desenvolvimento completos

 Construct2 , GameMaker, GameSalad, etc.

 Bibliotecas
 Quintus, Crafty, Enchant, etc.

2015, Prof.José Auguso Cintra - Faculdade Sumaré

Tecnologias
Frameworks híbridos
Frameworks que criam uma ponte entre as aplicações nativas e as aplicações
WEB, fornecendo um gateway entre o WebApp e os dispositivos móveis,
permitindo criar uma aplicação que possua acesso aos recursos locais como a
câmera, o acelerômetro, etc.
 PhoneGap, CocoonJS, IntelXDK

Ferramentas dessa natureza é que permitem que o webapp seja vendido

nas lojas e instalado nos diversos dispositivos.
2015, Prof.José Auguso Cintra - Faculdade Sumaré
Web Apps: Prós e Contras
Comparação em relação ao desenvolvimento multiplataforma

WebApp App Nativa

Performance +
-
Acesso a recursos do dispositivo +
-
Facilidade de Desenvolvimento + -
Custo de Desenvolvimento + -
Curva de aprendizado + -
2015, Prof.José Auguso Cintra - Faculdade Sumaré
Estratégias de desenvolvimento
1. Ter uma ideia (Parte mais difícil)
o Aplicativos simples muitas vezes dão melhores resultados
2. Escolher a forma de monetização
o Aplicativos “Grátis” podem ser um bom começo
3. Montar uma equipe de profissionais
o A menos que você possua muito tempo disponível
4. Desenvolver (Parte mais fácil)
o Basta possuir conhecimento de Javacript, HTML e CSS
5. Publicar (Muito trabalhoso)
o Diversas lojas, muita burocracia
6. Divulgar (Pode ser caro)
o As ferramentas gratuitas de marketing podem trazer resultados a
longo prazo
2015, Prof.José Auguso Cintra - Faculdade Sumaré
 Parte II
Conceitos sobre
Jogos Digitais
2015, Prof.José Auguso Cintra - Faculdade Sumaré
Conceitos
Agora vamos relacionar os principais elementos constituintes de
um videogame 2D...

2015, Prof.José Auguso Cintra - Faculdade Sumaré

Layouts, Layers e Viewports
 O Layout é uma área onde serão exibidos os elementos do jogo. Pode
ser comparado ao mapa do jogo. Um jogo pode conter vários layouts,
um para o jogo em si, outro para a tela de configurações, etc.

 Um layer é uma camada do layout. Por exemplo: dentro de um layout

podemos ter um layer para o background, outro para os obstáculos, etc

 O viewport é a área visível do layout naquele momento.

2015, Prof.José Auguso Cintra - Faculdade Sumaré

Sprites
 Os Sprites são os objetos gráficos que formam o jogo e participam
diretamente da ação.
 Além de sua posição e tamanho, podem possuir as seguintes
propriedades:
 Animações
 Transparências
 Invisibilidade
 Áreas de colisão
 Pontos de referência

2015, Prof.José Auguso Cintra - Faculdade Sumaré

User Interfaces (UI)
 São os elementos que vão interagir com o usuário para fornecer e obter
informações
 Podem ser botões, Labels,Textos para entradas de dados, Scores, etc.

2015, Prof.José Auguso Cintra - Faculdade Sumaré

TileMaps e Tiled Backgrounds
 Um TileMap é composto de uma figura dividida em tiles e de
informações sobre como os tiles vão ser exibidos
 Um TiledBackground consiste de uma figura exibida repetidamente em
linhas e colunas formando um fundo homogêneo

2015, Prof.José Auguso Cintra - Faculdade Sumaré

 Parte III
Construct 2

2015, Prof.José Auguso Cintra - Faculdade Sumaré

Interface do Construct 2

2015, Prof.José Auguso Cintra - Faculdade Sumaré

Interface do Construct 2
1. Menu File  Manutenção dos arquivos
2. Layout View  Elementos do jogo são inseridos e configuradas
3. Tab views  Troca entre layout view e event sheets (Programação)
4. Barra de propriedades  Para alterar as propriedades dos objetos
5. Barra de projetos e layers  Seleção e configuração desses elementos
6. Tab de projetos e layers  Permite revezar entre projeto e layer
7. Barra de objetos  Contém todos os objetos do jogo
8. Barra de informações  Informações gerais
9. Botões da Janela  Controles doWindos e About button

2015, Prof.José Auguso Cintra - Faculdade Sumaré

Criando o projeto do jogo
Para criar um novo projeto no Construct precisamos definir algumas
propriedades iniciais, como o nome do jogo, as dimensões do layout, etc.
Fazemos isso na barra de propriedades (4). Procure preencher todas as
informações, pois elas serão usadas quando o projeto for exportado.
Aproveite para dar nomes padronizados aos elementos criados para
facilitar a manutenção.

2015, Prof.José Auguso Cintra - Faculdade Sumaré

Inserindo objetos no layout
Os objetos são inseridos no Layout View (2) com o botão direito do
mouse.
Quando inserimos os objetos no nosso layout, temos que definir suas
propriedades na barra de propriedades (4).
Vejamos os principais elementos:
Tiled BackGround  Usado, entre coisas, para criar o fundo do jogo,
onde se passa a ação. Selecione uma imagem para ser exibida e sua
posição.
Sprites  É o objeto mais utilizado. Para ele podemos definir:
Posição, transparências, Animações, Áreas de colisões, comportamentos,
efeitos, etc.

2015, Prof.José Auguso Cintra - Faculdade Sumaré

Inserindo objetos no layout
Mouse, teclado e touch São as formas como o jogador pode interagir
com os elementos do jogo.
Audio  Para produzir sons e músicas
Text  Para exibir textos com informações sobre o jogo

2015, Prof.José Auguso Cintra - Faculdade Sumaré

Configurando behaviors
Behaviors são comportamentos pré-estabelecidos que podemos definir
para cada objeto, diminuindo assim o esforço de programação.
Vejamos alguns deles:
Bullet  Movimento retilíneo com direção, velocidade, aceleração
parametrizáveis
Car  Movimentos similares a veículos
8 direction  Movimentos pre-configurados para várias direções
Plataform  Pula e corre entre plataformas
Bound to layout, Destroy outside layout, wrap  ao atingir o fim do
layout  Para, destroy ou volta por outro lado

2015, Prof.José Auguso Cintra - Faculdade Sumaré

Trabalhando com eventos
Através dos eventos podemos programar ações para serem executadas
pelos diversos objetos.
Eventos são fatos que se desenvolvem no transcorrer do jogo, como por
exemplo:
 Uma colisão entre 2 objetos
 Uma variável atinge um determinado valor
 Um objeto sai da área visível
 O layout foi iniciado
 O usuário clicou em um objeto
 Etc...

2015, Prof.José Auguso Cintra - Faculdade Sumaré

Eventos e ações
Quando ocorre um evento podemos programar para que o sistema
execute uma ação que pode ser:

 Criar ou destruir um objeto

 Mudar a velocidade de um objeto
 Atribuir um valor para uma variável
 Mudar a posição de um objeto
 Etc...

2015, Prof.José Auguso Cintra - Faculdade Sumaré

2015, Prof.José Auguso Cintra - Faculdade Sumaré