André Barreto Laila Sant’Anna

1. André Barreto Laila Sant’Anna 24/08/2011

2. Sumário • Browser Games (PBBG) • O que é? • Características • Mercado de jogos • Mais conhecidos

3. Sumário • 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

4. Sumário • System Crash – O Jogo • Conceito e definição • Gameplay (ou Mecânica do jogo) • Arte conceitual • Referências do jogo

5. Browser Games (PBBG) - O que é? • É 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).

6. Browser Games (PBPG) – Características • 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, RuneScape, MafiaWars, Café World).

7. Browser Games (PBPG) - Mercado de Jogos • Gêneros de MMO (MassivelyMultiplayerOnline game): • MMORPG (MMO Role-Playing Game) • MMORTS (MMO Real Time Strategy) • MMOFPS (MMO FirstPersonShooter) • MMOSG (MMO Social Game) • MMOEG (MMO Erotic Game) • MMOBG (MMO Browser Game) – System Crash • Destaque: estratégia.

8. Browser Games (PBPG) – Mais Conhecidos • TheCrims - http://www.thecrims.com/ • The West - http://www.the-west.com.br/ • Tribal Wars - http://www.tribalwars.com.br/ • Travian - http://travian.com.br/ • DragonFable - http://www.dragonfable.com/ • Grepolis - http://pt.grepolis.com/ • Knight Fight - http://www.knightfight.com.pt/ • Loreaon - http://www.loreaon.com/ • OriginsReturn - http://www.origins-return.com/

9. Projeto System Crash - Linguagem • PHP (um acrônimo recursivo para PHP: Hypertext Preprocessor) • “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ódigo-fonte. É 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.

10. Projeto System Crash - Arquitetura • 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.

11. Projeto System Crash - Arquitetura • Diagrama MVC

12. Projeto System Crash - Framework • 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. • CodeIgniter permite que você mantenha o foco em seu projeto minimizando a quantidade de código necessário para uma dada tarefa.

13. Projeto System Crash - Framework • 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.

14. Projeto System Crash - IDE • IDE (IntegratedDevelopmentEnvironment) – um ambiente integrado para desenvolvimento de software. • Para o desenvolvimento do browser game System Crash, foi utilizado o NetBeans com PHP. • xDebug – necessita de instalação e configuração da dll no IDE.

15. Projeto System Crash – Outras Tecnologias de Desenvolvimento • JQuery: É uma biblioteca JavaScript cross-browser desenvolvida para simplificar os scripts clientside 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.

16. Projeto System Crash – Outras Tecnologias de Desenvolvimento • AJAX (AsynchronousJavascriptandXML) – é 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.

17. Projeto System Crash – Outras Tecnologias de Desenvolvimento • 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 o objeto XMLHttpRequest e XMLHttpResponse; • JavaScript fazendo a junção entre os elementos. • 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.

18. Projeto System Crash – Outras Tecnologias de Desenvolvimento • JSON (JavaScript ObjectNotation) – é 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.

19. Projeto System Crash – Outras Tecnologias de Desenvolvimento • HTML (HyperTextMark-upLanguage) • 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 (CascadingStyle 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.

20. Servidor Web • 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 (withmod_proxy_ajp as connector)

21. Banco de Dados • 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 StorageEngines como MyISAM, InnoDB, Falcon, BDB, Archive, Federated, CSV, Solid… • Suporta controle transacional, Triggers, Cursors (Non-Scrollable e Non-Updatable), StoredProcedures e Functions; • Replicação facilmente configurável; • Interfaces gráficas (MySQL Toolkit) de fácil utilização cedidos pela MySQL Inc.

22. Banco de Dados • 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.

23. Ferramenta de Apoio • MySQL Workbenché uma ferramenta de design visual de banco de dados multi-plataforma, 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.

24. Controle de Versão • 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.

25. Ciclo de Desenvolvimento • 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).

26. Ciclo de Desenvolvimento

27. Ciclo de Desenvolvimento • Fluxograma de Tarefa

28. Ciclo de Desenvolvimento • Fluxograma de Arte

29. System Crash – Referências do Jogo • 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.

30. System Crash – O Jogo • 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 IntelligenceAgency: agência secreta de informação do Governo global.

31. System Crash – O Jogo • 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.

32. System Crash – O Jogo • 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.

33. System Crash – Gameplay • 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.

34. System Crash – Gameplay • 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)

35. System Crash – Arte Conceitual

36. Webliografia • 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

37. Agradecimento Obrigado! Acesse: www.systemcrash.com.br http://systemcr4sh.wordpress.com