André Barreto
Laila Sant’Anna
24/08/2011

Browser Games (PBBG)
 O que é?
 Características
 Mercado de jogos
 Mais conhecidos

Projeto System Crash










Linguagem
Arquitetura
Framework
IDE
Outras tecnologias de desenvolvimento
Servidor web
Banco de dados
Ferramenta de apoio
Controle de versão
Ciclo de desenvolvimento

System Crash – O Jogo
 Conceito e definição
 Gameplay (ou Mecânica do jogo)
 Arte conceitual
 Referências do jogo

É um tipo de jogo que se caracteriza por
utilizar um navegador de internet para ser
executado.

PBBG - Persistent Browser-Based Game
(refere-se à característica de estado que
sobreviva ao processo que o criou).

Pouca ou falta absoluta de gráficos
(geralmente apenas imagens e algumas
animações).

Tecnologias de Interface gráfica: Flash,
JQuery, AJAX, HTML5, dentre outras.

Presente em redes sociais, principalmente no
Facebook (mais conhecidos: FarmVille, Rune
Scape, Mafia Wars, Café World).

Gêneros de MMO (Massively Multiplayer Online
game):







MMORPG (MMO Role-Playing Game)
MMORTS (MMO RealTime Strategy)
MMOFPS (MMO First Person Shooter)
MMOSG (MMO Social Game)
MMOEG (MMO Erotic Game)
MMOBG (MMO Browser Game) – System Crash
Destaque: estratégia.









The Crims - http://www.thecrims.com/
The West - http://www.the-west.com.br/
Tribal Wars - http://www.tribalwars.com.br/
Travian - http://travian.com.br/
Dragon Fable - http://www.dragonfable.com/
Grepolis - http://pt.grepolis.com/
Knight Fight - http://www.knightfight.com.pt/
Loreaon - http://www.loreaon.com/
Origins Return - http://www.origins-return.com/

PHP (um acrônimo
Preprocessor)
recursivo
para
PHP:
Hypertext
 “PHP é uma linguagem de script amplamente utilizada de uso geral
que é especialmente adequado para o desenvolvimento Web e pode
ser incorporado em HTML.”

Linguagem extremamente simples

O código é executado no servidor, gerando HTML que é
então enviado para o cliente. O cliente recebe os resultados
da execução desse script, mas não sabe como é o códigofonte. É possível configurar o servidor para processar todos
os arquivos HTML como PHP, e então não haverá nenhum
modo dos usuários descobrirem o uso da linguagem PHP.

MVC (Model-View-Controller)
 Visão: É a camada de visualização da sua aplicação, onde ela apenas
apresenta o que foi obtido através do controle. É o que chega ao usuário final,
a parte visual, de interface. A visão não deve ter nenhuma lógica de código,
apenas a exibição dos dados.
 Controle: É onde serão processadas todas as requisições feitas através da
interface (Visão). O controle também acessa o Modelo afim de obter
determinadas informações. Toda lógica da aplicação (validações, atribuições,
etc) é feita no Controle. O controle é o gerenciador da aplicação.
 Modelo: É o modelo da aplicação, onde são definidos propriedades e
atributos dos personagens. Pode existir ainda uma camada de persistência de
dados (DAO), mas a persistência também pode ser feita no Modelo.

Diagrama MVC

CodeIgniter v2.0
 CodeIgniter
é um Framework de Desenvolvimento de
Aplicações - um kit de ferramentas - para as pessoas que
constroem sites usando PHP.
 Seu objetivo é dar a possibilidade de desenvolver projetos
muitos mais rapidamente do que se estivesse escrevendo o
código do zero, provendo de um rico conjunto de bibliotecas
para tarefas comuns, com uma interface e estrutura lógica
simples de acessos àquelas bibliotecas.
 Code Igniter permite que você mantenha o foco em seu projeto
minimizando a quantidade de código necessário para uma dada
tarefa.

CodeIgniter com certeza é para você se:
 Você quer um framework leve e que não ocupe espaço.
 Você precisa de uma performance excepcional.
 Você precisa de compatibilidade vasta com empresas de hospedagem que







rodam uma variedade de versões e configurações do PHP.
Você quer um framework que precise de quase nenhuma configuração.
Você quer um framework que não precise que você use a linha de comando.
Você quer um framework que não lhe deixe preso a regras restritivas de
codificação.
Você não está interessado em monolíticas bibliotecas em larga-escala como a
PEAR.
Você não quer ser forçado a aprender uma linguagem de template (no
entanto, um parser de template está opcionalmente disponível se você desejar
um).
Você evita a complexidade, preferindo soluções simples.
Você precisa de uma clara e completa documentação.

IDE (Integrated Development Environment) –
um
ambiente
integrado
para
desenvolvimento de software.

Para o desenvolvimento do browser game
System Crash, foi utilizado o NetBeans com
PHP.

xDebug – necessita de
configuração da dll no IDE.
instalação
e

JQuery: É uma biblioteca JavaScript crossbrowser
desenvolvida
para
simplificar
os scripts client side que interagem com o HTML.

Código aberto

A sintaxe do jQuery foi desenvolvida para tornar
mais simples a navegação do documento HTML,
a seleção de elementos DOM, criar animações,
manipular eventos e desenvolver aplicações
AJAX. A biblioteca também oferece a
possibilidade de criação de plugins sobre ela.

AJAX (Asynchronous Javascript and XML) – é o uso
metodológico de tecnologias como JavaScript e XML,
providas
por
navegadores,
para
tornar
páginas Web mais interativas com o usuário,
utilizando-se de solicitações assíncronas de
informações.

Tem estimulado a construção de aplicações Web mais
dinâmicas e criativas.

AJAX não é uma tecnologia, mas um conjunto de
tecnologias conhecidas trabalhando juntas, cada uma
fazendo sua parte, oferecendo novas funcionalidades.

AJAX incorpora em seu modelo:
 Exposição e interação dinâmica usando o DOM;
 Intercâmbio e manipulação de dados usando XML e XSLT;
 Recuperação
assíncrona
de
dados
usando
objeto XMLHttpRequest e XMLHttpResponse;
 JavaScript fazendo a junção entre os elementos.
o

O modelo clássico de aplicação web trabalha assim: a maioria das
ações do usuário na interface dispara uma solicitação HTTP para
o servidor web. O servidor processa, recuperando dados,
realizando cálculos, conversando com vários sistemas legados, e
então, retorna uma página HTML para o cliente.

É um modelo adaptado do uso original da Web como um agente
de hipertexto, porém o que faz a web boa para hipertexto não
necessariamente a faz boa para aplicações de software.

JSON (JavaScript Object Notation) – é um formato leve para
intercâmbio de dados computacionais. JSON é um subconjunto da
notação de objeto de JavaScript, mas seu uso não requer
Javascript exclusivamente.

A simplicidade de JSON tem resultado em seu uso difundido,
especialmente como uma alternativa para XML em AJAX.

Uma das vantagens reivindicadas de JSON sobre XML como um
formato para intercâmbio de dados neste contexto, é o fato de ser
muito mais fácil escrever um analisador JSON. Em JavaScript
mesmo, JSON pode ser analisado trivialmente usando a função
eval(). Isto foi importante para a aceitação de JSON dentro da
comunidade AJAX devido a presença deste recurso de JavaScript
em todos os navegadores web atuais.

HTML (HyperText Mark-up Language)
 HTML é uma linguagem que possibilita apresentar informações
na Internet. Aquilo que é visualizado ao abrir uma página na
Internet é a interpretação que o navegador faz do HTML.

CSS (Cascading Style Sheets)
 CSS é uma linguagem para estilos que define o layout de
documentos HTML. Por exemplo, CSS controla fontes, cores,
margens, linhas, alturas, larguras, imagens de fundo,
posicionamentos e muito mais.

HTML é usado para estruturar conteúdos. CSS é
usado para formatar conteúdos estruturados.

XAMPP (Apache) – pacote completo de servidores
web.

Na versão atual do XAMPP para Windows contém:
 Apache 2.2.17 (servidor HTTP mais bem sucedido





atualmente)
MySQL 5.5.8
PHP 5.3.5
phpMyAdmin 3.3.9
FileZilla FTP Server 0.9.37
Tomcat 7.0.3 (with mod_proxy_ajp as connector)

Sistema de gerenciamento de banco de dados utilizado: MySQL
(atualmente um dos BDs mais populares). Características:
 Portabilidade (suporta praticamente qualquer plataforma atual);
 Compatibilidade (existem drivers ODBC, JDBC e .NET e módulos de interface








para diversas linguagens de programação,
como Delphi, Java, C/C++, C#, Visual Basic, Python, Perl, PHP, ASP e Ruby)
Excelente desempenho e estabilidade;
Pouco exigente quanto a recursos de hardware;
Facilidade de uso;
É um Software Livre com base na GPL;
Contempla a utilização de vários Storage Engines como MyISAM, InnoDB,
Falcon, BDB, Archive, Federated, CSV, Solid…
Suporta controle transacional, Triggers, Cursors (Non-Scrollable e NonUpdatable), Stored Procedures e Functions;
Replicação facilmente configurável;
Interfaces gráficas (MySQL Toolkit) de fácil utilização cedidos pela MySQL Inc.

phpMyAdmin é uma ferramenta de software
livre escrito em PHP destinado a lidar com a
administração do MySQL sobre o World Wide
Web.

phpMyAdmin suporta uma ampla gama de
operações com MySQL. As operações mais
utilizadas são suportados pela interface do
usuário (bancos de dados de gestão, tabelas,
campos, relações, índices, usuários, permissões,
etc), enquanto você ainda tem a capacidade de
executar diretamente qualquer declaração SQL.

MySQL Workbench é uma ferramenta de
design visual de banco de dados multiplataforma, desenvolvido pela MySQL.

É a aplicação altamente antecipada sucessora
do projeto DBDesigner4.

MySQL Workbench está disponível como
uma ferramenta nativa GUI no Windows,
Linux e OS X em diferentes edições.



SVN (Subversion) – controle de versão
utilizado no jogo System Crash.
Integrado ao IDE NetBeans.
Basta configurar o repositório, usuário e
senha para a submissão e atualização de
versão.

Modelo Espiral
 Foi originalmente proposto por Boehm em 1988.
 Uma maneira simplista de analisar este modelo é
considerá-lo como um modelo cascata onde cada
fase é precedida por uma análise de risco e sua
execução é feita evolucionariamente (ou
incrementalmente).

Fluxograma de Tarefa

Fluxograma de Arte

Cultura cyberpunk
 Definição de “cyberpunk”: [1] Por um lado é um gênero de ficção
literária / ciência [2], por outro lado é uma subcultura de estar e um
movimento social baseado originalmente na ficção científica.

As obras de escritores de ficção da cultura cyberpunk são o berço do
conceito de "cyberespaço". Este conceito foi introduzido pela
primeira vez ao mundo pelo escritor William Gibson em seu romance
"Neuromancer", provavelmente o mais famoso livro cyberpunk de
todos os tempos.

Filmes conhecidos da cultura cyberpunk: Robocop, Tron, Matrix, Mad
Max, Alien, Blade Runner, Cyborg, dentre outros.

System Crash (SC) é um PBBG, e MMO, no qual o
jogador assume o papel de hacker no ano de 2351
quando a tecnologia domina, por meio da HyperNET
(interliga tudo e todos).

Há 4 organizações para se filiar:
 Consortium: formada por várias mega-corporações;
 Guerreiros do Caos: grupo terrorista cuja o principal
objetivo é eliminar qualquer forma de controle;
 Filhos de Gaia: trabalha para todas as entidades
ambientais;
 G.I.A - Global Intelligence Agency: agência secreta de
informação do Governo global.

Para desenvolver seu personagem existem as
seguintes ações:
 Invasão de redes de computadores.
 Realização de trabalhos para sua organização.
 Criação e utilização de vírus de computador e
programas diversos.
 Criação e utilização de dispositivo eletrônicos e
implantes cibernético.
 Combates contra o sistema do jogo e outros
jogadores.
 Criação de alianças através da interação com outros
jogadores.

Duração do jogo:
 O jogo será divido em turnos de 100 dias. Ao final
de cada turno, o placar do jogo será computado e
os melhores jogadores serão premiados.

Pontuação:
 Os pontos no jogo são conseguidos através de
pontos de respeito, que o jogador ganha ao ser
bem sucedido em suas ações.

Gameplay (ou Mecânica do Jogo): Esta parte
descreve todos os mecanismos e sub-sistemas
referentes ao gameplay em si, ou seja, define a
jogabilidade do SC.

Sistema de Personagem
 Atributos
primários: Velocidade de raciocínio,
Percepção, Inteligência, Lábia.
 Atributos dinâmicos: Stamina, Pontos de Experiência,
Pontos de Atributos, GeD$, Respeito, Nível do
personagem.











Recuperação da Stamina
Aprimoramento do nível do personagem
Sistema de Habilidades
Sistema de Testes de Ação
Sistema de Itens
Organizações
Sistema de Tarefas
Computador do jogador: VirtualDeck (V-Dek)
HyperNet
Programas
Combate PvP (Jogador contra jogador)

























http://ez.mygames.pt/pc/noticia/top-25-free-browser-games-13156/
http://www.facebook.com
http://browsermmorpg.com/
http://www.rpgonline.com.br/games.asp?id=823
http://ptrealms.com/browser/conteudos.php?id=481
http://www.tecmundo.com.br/835-o-que-e-mmorpg-.htm
http://www.php.net/
http://www.revistaphp.com.br/artigo.php?id=50
http://www.codeigniter.com.br/manual/
http://docs.jquery.com/Main_Page
http://www.xul.fr/en-xml-ajax.html
http://pt-br.html.net/
http://www.mysql.com/
http://pt.wikipedia.org/wiki/MySQL
http://www.phpmyadmin.net/home_page/index.php
http://wb.mysql.com/
http://www.apachefriends.org/pt_br/xampp.html
http://www.apache.org/
http://subversion.tigris.org/
http://netbeans.org/kb/index.html
http://www2.dem.inpe.br/ijar/CicoloVidaSoftPrado.html
http://project.cyberpunk.ru/idb/definition.html
http://project.cyberpunk.ru/idb/scifi.html
http://www.json.org/
http://pt.wikipedia.org/wiki/JSON
Obrigado!
Acesse: www.systemcrash.com.br
http://systemcr4sh.wordpress.com