Jogos para Internet I

Prévia do material em texto

Conteudista: Prof. Dr. Rafael Martins 
Revisão Textual: M.ª Thassiana Reis Félix
Objetivos da Unidade:
Apresentar o contexto introdutório de jogos para Web;
Contextualizar a arquitetura cliente-servidor e sua tecnologia para o
desenvolvimento;
Apresentar modelos de negócio relacionados a jogos para Web;
Demonstrar ferramentas para desenvolvimento de jogos para Web.
📄 Contextualização
📄 Material Teórico
📄 Material Complementar
📄 Referências
Introdução a Jogos para Internet
O estudo do material desta Unidade, como assim se apresenta do ponto de vista
introdutório, pode oferecer ao aluno pontos de vista não só coletados em referências
bibliográficas e literatura geral, mas também do professor conteudista responsável
pela Disciplina.
A área de jogos Web, assim como outras plataformas e dispositivos de
desenvolvimento, faz parte do ecossistema dos jogadores desde o início da Internet.
Desde as tecnologias como Flash (Adobe) até os dias atuais, quando são utilizados
linguagens e frameworks modernos, os jogos Web são desenvolvidos por diversas
empresas para atender ao público que joga nos navegadores. 
Ferramentas como Cocos Creator, Unity e Construct 3 são alguns dos artifícios para se
desenvolver e publicar jogos Web. Outras ferramentas auxiliares, como criadores de
mapa, efeitos e recursos audiovisuais, também oferecem suporte à plataforma Web,
tornando a experiência do jogador tão atrativa quanto a de outras plataformas.
Nesta Unidade, iremos conhecer os princípios que norteiam a chamada Web e,
principalmente, quais são as tecnologias que podemos utilizar, focadas em
programação, para desenvolvermos os nossos jogos, que serão disponibilizados e
executados tendo como meio a Web.
1 / 4
📄 Contextualização
Conceitos Introdutórios
Os jogos Web ou jogos desenvolvidos para navegadores (Internet Explorer, Firefox,
Opera, Safari entre outros) foram introduzidos para o mundo na década de 90, quando
o uso de internet ainda era muito limitado. O desenvolvimento de páginas (sites) para
Internet com tecnologias como HTML, Dynamic HTML e CSS fez com que uma série de
oportunidades fossem criadas para as corporações. Os produtos provenientes dessa
Era da Internet fizeram com que a população se conectasse mais, de modo que a forma
de interação e comportamento virtual definissem novos tipos de consumidores.
Como os navegadores foram feitos para exibir e processar informação on-line, agindo
como um portal entre o mundo real e virtual, o próximo passo seria um meio para
rodar jogos na Web, seja por um link direto com o jogo, seja por um servidor que envia
dados para serem exibidos no navegador. O primeiro registro de jogo Web data de
1996, chamado Earth: 2025, um jogo de estratégia on-line, desenvolvido por Mehul
Patel. 
Os jogos Web, se comparados aos jogos desenvolvidos em linguagens robustas como o
C++, são mais simples sob as óticas de interface e performance. No entanto, com o
passar dos anos, novas tecnologias, engines e métodos foram desenvolvidos para se
criar experiências mais imersivas e robustas em jogos Web (como veremos nas
próximas sessões).
2 / 4
📄 Material Teórico
Figura 1 – Earth: 2025, um dos primeiros jogos para Web 
Fonte: Reprodução
Quando se fala em jogos Web e suas origens, é necessário falar sobre a tecnologia mais
utilizada para o desenvolvimento de jogos on-line: o Flash. O Flash utilizava uma
linguagem de script chamada ActionScript e permitia que desenvolvedores
independentes, de médio e grande porte, criassem jogos para sites. Além de jogos
feitos para navegadores com atuação de servidores, o Flash possibilitou a criação de
diversos portais conhecidos de jogos on-line, como o Kongregate e o Newgrounds, e
jogos como Bejeweled (PopCap) e Meat Boy.
Com a chegada dos smartphones em 2007, o suporte do Flash aos seus navegadores foi
descontinuado por empresas como a Apple, forçando os desenvolvedores de jogos on-
line a utilizar game engines ou desenvolver jogos nativos para as plataformas. O Flash
ainda continuou popular e, somente em 2021, a Adobe, empresa responsável por
manter a tecnologia, descontinuou o produto por definitivo.
Glossário
Game Engine: nomenclatura atribuída às ferramentas de
desenvolvimento de jogos que oferecem diferentes pacotes de
recursos ou funcionalidades que visam facilitar o desenvolvimento
dos jogos. As engines atuais demoraram muito tempo para chegar no
ponto em que estão, foram anos de evolução, o que se traduziu em
ferramentas repletas de recursos, que vão desde a parte visual até a
utilização de inteligência artificial de forma simplificada.
Vídeo
The Complete History of Flash
O Flash foi um dos precursores de jogos Web e, por muito tempo, foi a
tecnologia utilizada para jogos profissionais, acadêmicos e os
Arquitetura Cliente-Servidor
Juntamente com a criação do HTTP e do HTML, Tim Berners-Lee criou uma rede
virtual de hipertexto chamada World Wide Web (WWW), que engloba todos os
servidores de conteúdo multimídia que utilizam o protocolo HTTP.
Para uma página web funcionar, há a necessidade de utilizar um navegador (browser),
como, por exemplo, o Google Chrome, Firefox, Internet Explorer, Safari entre outros. A
comunicação é feita pelo protocolo TCP/IP, no qual é usado um protocolo de alto nível,
o HTTP. Assim, a Web funciona conforme o modelo cliente-servidor (Figura 2).
famosos advergames, jogos que eram feitos para divulgação de
marcas e marketing. Entenda melhor a história do Flash.
The Complete History of FlashThe Complete History of Flash
https://www.youtube.com/watch?v=xBXZtFlIA7c
Figura 2 – Arquitetura Cliente-Servidor
Fonte: Adaptada de Freepik
Nessa arquitetura, existem uma ou mais máquinas que atuam como servidores,
disponibilizando recursos para as demais máquinas, as quais atuam como clientes. Em
geral, os servidores são equipamentos com maior poder de processamento e
armazenamento, e os clientes, geralmente, são microcomputadores ligados em rede.
Basicamente, funciona da seguinte forma: o cliente tem a função de fazer uma
solicitação de, por exemplo, um arquivo HTML ao servidor. Este deve ser capaz de
receber o arquivo e interpretá-lo por meio do navegador. Junto com a solicitação, são
enviadas informações que compõem o arquivo de hipertexto. Dentre as informações, já
vimos que existe a linguagem HTML. Além dela, também são enviadas para o cliente as
folhas de estilo (arquivos CSS) e interatividade do documento (arquivos JavaScript),
que serão comentados ainda nesta aula, entre outros recursos. Desta forma, a função
do servidor, neste cenário, é fornecer os dados e arquivos ao cliente.
Perceba que nosso foco será criar os jogos para serem disponibilizados por servidores
e processados pelas máquinas clientes por meio do seu navegador. No entanto, é
importante ressaltar que o servidor também pode fazer o processamento. Para isso, ele
deve utilizar tecnologias ou linguagens específicas, como PHP, JSP, inclusive com
acesso aos chamados banco de dados, como, por exemplo, o MySQL. Note que
podemos fazer uso de todas essas tecnologias para desenvolver nossos jogos, mas
precisamos partir do início. Assim, novamente, estaremos interessados aqui no lado
cliente dessa arquitetura cliente-servidor.
Na próxima seção, veremos quais as tecnologias que irão nos dar suporte para que
possamos desenvolver nossos jogos para a Web utilizando programação.
Modelos de Negócio para Jogos Web
Olssom e Sidemblom (2010) definem modelos de negócios como um plano, um
sistema ou uma história que explica como um negócio deve funcionar. Existem
definições em que esta questão pode ser elencada:
Saiba Mais
Busque pelos termos Arquitetura Cliente-Servidor em games na
literatura. Existem diversas técnicas, características e problemas
exclusivamente relacionados a jogos, principalmente àqueles que
demandam mais dos servidores.
A relação entre o negócio e seu ambiente (consumidores, aliados,
fornecedores);
Quando se fala em mercado de jogos, pode-se afirmarque ele está entre os negócios
mais lucrativos do globo, superando as indústrias da música e do cinema há anos.
Existem diversos modelos de negócio atrelados a jogos físicos e digitais, e,
dependendo da plataforma, modelos específicos para atender jogadores que utilizam
milhões de dispositivos, seja um PC, um smartphone ou um console. 
Comparado a outros mercados, os jogos de navegadores não geram receita equivalente.
No entanto, não se pode ignorar um mercado que gera bilhões anualmente. A NewZoo,
especialista em dados de mercado para jogos, disponibilizou, em 2020, dados do
mercado de jogos, incluindo jogos para navegadores, que atingiram até 3 bilhões de
dólares, como mostra a Figura a seguir:
Figura 3 – Dados de receita de jogos do mercado (2020)
A descrição de produtos e serviços fornecidos por um negócio;
A forma como um negócio lucra e monetiza – considerada crucial.
Fonte: Adaptada de Freepik
Os jogos para Web são digitais. Portanto, não envolvem um modelo de negócio em que
há distribuição de mídia física. Nesse caso, tais jogos se assemelham em alguns
aspectos com os jogos para dispositivos móveis, trazendo para o jogador mecânicas
como (1) propaganda, (2) vendas e microtransações, (3) planos de assinatura, (4) kits
de expansão/add-ons e (5) receita em plataformas digitais.
Com a análise do modelo de negócio de um jogo, somado ao número de opções de
modelos de negócio, é possível tornar os jogos para navegadores lucrativos,
escolhendo a melhor forma de gerar receita. Na próxima seção, são descritas as
ferramentas e as tecnologias para o desenvolvimento de jogos. Essas tecnologias
possuem integração com diversos recursos que possibilitam a geração de receita para
os jogos. 
Ferramentas e Tecnologias para Desenvolver
Jogos para Web
O desenvolvimento de jogos para Web pode fazer uso de diversos tipos de ferramentas
ou softwares. Aqui, estamos interessados no desenvolvimento por meio da
programação e que esta utilize as tecnologias Web para disponibilização dos nossos
jogos.
Antes do aprimoramento da linguagem HTML para a versão 5, a maioria dos jogos para
a Web era desenvolvido por meio do descontinuado software Adobe Flash, como
contextualizado na seção Conceitos Introdutórios. Com a chegada do HTML5 (2008) e
de APIs, como o Canvas e o Local Storage (conceitos que serão estudados
posteriormente), desenvolver jogos utilizando as linguagens HTML, CSS e JavaScript
tornou-se uma opção para quem deseja desenvolver jogos para a Web.
HTML e CSS
A linguagem HTML é a nossa base. A partir dela, estruturamos nossos documentos de
hipertexto, ou páginas HTML. Porém, ela não trabalha sozinha: temos que conhecer
ainda o CSS (Cascading Style Sheets) e o JavaScript. Assim, teremos as tecnologias
básicas para o desenvolvimento dos jogos.
O código CSS (em português, folhas de estilo em cascata) é uma linguagem separada do
HTML, atualmente na versão 3, utilizada para formatação visual e estilização de uma
página feita em HTML. Dentre os recursos, citamos alguns, como tipo de fonte, cores
de fontes ou fundo, espaçamentos, entre outros.
Figura 4 – Visual Studio Code, IDE que permite programação
de jogos Web
Fonte: Reprodução
Diferentemente do HTML, que é utilizado para estruturar as páginas, definindo
parágrafos, listas, tabelas, cabeçalhos etc., o CSS é utilizado para formatar o visual
desta página. Já o JavaScript é uma linguagem de script que torna a página HTML
dinâmica. 
Mas o que é tornar uma página dinâmica? Se usado somente o HTML e o CSS, nossas
páginas web seriam totalmente estáticas, sem nenhuma interatividade. Adicionando a
linguagem JavaScript a elas, a página ou nosso jogo passa a ter interatividade e, o mais
importante, funcionalidade.
Esses conceitos serão trabalhados posteriormente nesta Disciplina. No momento, você
precisa só saber distinguir as três, ou seja, qual a função de cada uma delas quando
criarmos nossos jogos.
Existem também ferramentas ou softwares no mercado que nos auxiliam no
desenvolvimento de jogos para a Web, inclusive alguns desses softwares trabalham
diretamente com as três linguagens citadas. Nas próximas seções, veremos algumas
opções.
Unity
Fundada em 2004 na Dinamarca com o nome de Over the Edge IS, a Unity 3D se tornou,
em 2009, uma engine de jogos multiplataforma. Seu suporte inclui vinte e cinco
plataformas de desenvolvimento, se tornando a ferramenta líder nesse segmento.
A Unity é uma das principais plataformas de criação de conteúdo de entretenimento da
atualidade. Desde sua primeira versão, a empresa conta com um editor visual orientado
a componentes, os chamados GameObject (e sua principal interface, MonoBehaviour), e
permite o desenvolvimento de jogos multiplataforma com performance e uma série de
módulos integrados.
A Unity foi uma das ferramentas responsáveis pela democratização do
desenvolvimento de jogos, tornando-se uma parceira importante para empresas de
todos os portes e Universidades. Além das soluções corporativas, a Unity conta com
áreas e planos exclusivos para a área acadêmica. 
Dentre os principais módulos estão o (1) Editor, que conta com um container de cenas e
uma área para manipulação dos objetos da cena (Inspector); (2) as áreas de
manipulação dos objetos no plano, como transformação, rotação e gizmos; (3) Física
2D e 3D; (4) engine de Áudio; (5) networking; (6) serviços de jogos como propaganda,
compra (IAP) e Analytics; (7) engine gráfico e outros módulos que estão presentes na
documentação principal da ferramenta.
No Showcase do engine é possível encontrar jogos como AmongUs (Inner Sloth),
Subnautica (Unknown Worlds), Crying Suns (Alt Shift), Goodbye Volcano High (Plastic
SCM) e outros jogos que compõem um ecossistema de quase cinquenta por cento dos
publicados em todas as plataformas existentes. A Unity fornece suporte para quase
trinta plataformas, se tornando uma das melhores opções do mercado, principalmente
pela curva de aprendizado e pelos preços para desenvolvedores independentes.
Figura 5 – Editor da Unity 2022
Fonte: Reprodução
Cocos Creator
A Cocos Creator faz parte da suíte de ferramentas da empresa Cocos. Inicialmente, a
Cocos se baseava em um framework desenvolvido em Objective-C por Ricardo Quesada.
O nome do framework foi uma homenagem à cidade de Los Cocos. Dois anos depois, foi
realizada a conversão do framework para a linguagem C++, dando origem a Cocos2d-X,
framework amplamente utilizado na indústria.
A Cocos Creator foi lançada anos depois, visando desenvolvedores com experiência em
game engines e ferramentas mais orientadas a componentes. Diferente do framework, a
Cocos Creator se baseia em linguagem de script (JavaScript) e é intuitiva mesmo para
equipes sem experiência em programação.
Além de questões de performance e facilidade para criar jogos, a Cocos Creator possui
suporte multiplataforma, o que permite desenvolvedores criarem jogos para Mac OS,
PC, Mobile, entre outras.
Figura 6 – Editor da Cocos Creator
Fonte: Reprodutor
Construct 3
A Construct 3 é uma ferramenta amplamente utilizada na indústria e na área acadêmica.
Sua interface permite a criação de rápidos protótipos e gameplay, tornando a
ferramenta uma das melhores opções para desenvolvedores com experiência em
scripts e pessoas que trabalham em outras vertentes, como, por exemplo, o game
design. 
Um dos pontos fortes da Construct 3 é a possibilidade de se criar jogos sem ou
praticamente sem código, dando um foco maior à lógica de negócio e à experiência do
usuário. Opcionalmente, é possível utilizar JavaScript para se desenvolver código,
principalmente quando há conexão entre cliente e servidor.
Outro ponto diferencial da Construct é que ela é executada em navegadores e de forma
o�-line, tornando possível testar de forma rápida e eficiente o resultado do jogo ou
projeto. Assim como a Cocos Creator, a Construct se baseia em performance e
componentes adicionais para que desenvolvedores possam adicionar funcionalidades
extras para osjogos. As plataformas suportadas pela Construct 3 são Web, Android, iOS,
Mac, Linux, Windows, Steam, Newgrounds e Itch.io. 
Figura 7 – Editor da Construct 3
Fonte: Reprodução
Phaser
Mais uma opção para o desenvolvimento de jogos Web é a Phaser. A engine, que está na
versão 3, é baseada em um framework open source que roda em Canvas e WebGL. 
A Phaser pode ser puramente via código, por meio de um repositório localizado no
Github, ou por um editor 2D chamado Phaser Editor 2D. Dentre as principais
funcionalidades, pode-se citar o (1) Preloader, para rápido carregamento de recursos
audiovisuais; (2) Sistema de física; (3) Sprites; (4) Grupos; (5) Animações; (6)
Partículas; (7) TileMaps; (8) Plugins; (9) Escala de dispositivos entre outras.
A Phaser possui integração com grande parte das principais ferramentas e plugins do
mercado, como o Facebook Instant Games, o que permite a publicação de jogos na
plataforma da Meta; o TexturePacker (contextualizado na próxima seção), para
carregamento de fases e mapas de tiles; e uma série de recursos que podem ser
baixados na seção plugins, no site oficial da Phaser.
Clique no botão para conferir o conteúdo.
ACESSE
Site
Phaser Plugins
https://phaserplugins.com/
Figura 8 – Phaser Editor 2D 
Fonte: Reprodução
TexturePacker
O TexturePacker (CodeAndWeb) é uma ferramenta voltada para a otimização de atlas de
imagens (Sprites) para jogos em qualquer plataforma. Sua interface possui integração
com as principais Game Engines do mercado e pode exportar formatos suportados
pelos processadores gráficos de smartphones do mercado, como ETC, PVR entre
outros.
O processo de otimização de imagens e de criação de atlas são importantes,
principalmente para otimização do carregamento dos recursos gráficos na memória
do aparelho. Plataformas fragmentadas como o Android possuem modelos de
dispositivos com baixa performance e esse tipo de abordagem se prova eficaz,
dispensando o carregamento de imagens 2D e texturas um a um.
Figura 9 – TexturePacker, da CodeandWeb
Fonte: Reprodução
A CodeAndWeb possui outras soluções para simplificar o desenvolvimento de jogos
móveis e ajuda empresas como Popcap e Disney Interactive. 
Site
CodeAndWeb
Clique no botão para conferir o conteúdo.
ACESSE
Tiled
Desenvolver mapas utilizando tiles é uma técnica utilizada desde os jogos 8 bits, como
Super Mario Bros (Nintendo, 1988), e jogos da mesma geração. Dentre as vantagens do
processo de construção de mapas de tiles estão a (1) integração de blocos de repetição;
(2) os algoritmos existentes para renderizar mapas com blocos de mesma dimensão e
(3) a facilidade para alocação de novos objetos no plano cartesiano (dado que a posição
de um tile é representada por números inteiros). 
O Tiled é uma ferramenta gratuita para criação de mapas e níveis para jogos 2D no
formato tile. O editor do Tiled possui suporte para mapas ortogonais (laterais ou top-
down) e isométricos. Algumas games engines possuem módulos exclusivos para a
Glossário
Tiles: imagens representadas geometricamente por um quadrado.
Muitas vezes, as tiles são representadas por estruturas como pisos e
blocos de construção.
https://goo.gl/RAcSKB
criação de níveis, mas a vantagem principal do Tiled é a exportação de mapas em
formatos suportados e conhecidos por desenvolvedores.
Clique no botão para conferir o conteúdo.
ACESSE
Entre as principais características dos editores de mapas como o Tiled estão:
Site
Tiled
Criação de mapas de tiles 2D em diversas perspectivas;
Criação de objetos visuais;
Criação de pontos para restauração de objetos (spawn);
Controle de física e contato dos objetos e tiles.
https://www.mapeditor.org/
Indicações para saber mais sobre os assuntos abordados nesta
Unidade:
  Livros  
Learn HTML5 by Creating Fun Games
SILVEIRA, R. Learn HTML5 by Creating Fun Games. Packt Publishing. 2013.
Cocos2D Cross-Platform Game Development Cookbook
SHEKAR, S. Cocos2D Cross-Platform Game Development Cookbook. 2. ed. Packt
Publishing. 2016.
  Vídeo  
The History of Web Games
3 / 4
📄 Material Complementar
  Leitura  
History of Browser Games
Clique no botão para conferir o conteúdo.
ACESSE
The History of Web GamesThe History of Web Games
https://www.wwgdb.com/articles/history_of_web_browser_games
https://www.youtube.com/watch?v=Jx8qXwdEa7A
CONSTRUCT. Make games with construct 3. c2022. Disponível em:
. Acesso em: 29/08/2022.
CUOFANO, G. Understanding the gaming industry and its business models.
FourWeekMBA, 2020. Disponível em: .
Acesso em: 01/09/2022.
OLSSOM, B.; SIDENBLOM, L. Business models for video games. Lund University, 2010.
Disponível em: . Acesso
em: 29/08/2022.
VANHATUPA, J. Business Model of Long-term Browser-based Games: Income without
Game Packages. International Journal of Computer Information Systems and Industrial
Management Applications, S. l., v. 5, p. 195-202, 2013.
WIJMAN, T. The world’s 2.7 billion gamers will spend $159.3 billion on games in 2020;
the market will surpass $200 billion by 2023. NewZoo, 08/05/2020. Disponível em:
. Acesso em: 29/08/2022.
4 / 4
📄 Referências
Sites Visitados
COCOS. Disponível em: . Acesso em: 29/08/2022.
PHASER. Disponível em: . Acesso em: 29/08/2022.
UNITY. Disponível em: . Acesso em: 29/08/2022.
v1.1