quinta-feira, 13 de maio de 2010

Jogar, jogar...programar

Jogos. Sempre gostei deles. Gosto de jogar (e jogo) desde os 12 anos. O que me dá dez anos de experiência. A cerca de dois anos (desde que desenvolvo software profissionalmente) me interessei pela área de desenvolvimento de jogos. Como tudo começa do início, eu acabei aprendendo os princípios básicos dessa área tão interessante do desenvolvimento de software. Eu já desenvolví um jogo da velha em Delphi (eu sei, todo mundo já fez um), já fiz um jogo das bolhas no meu palm. Foi legal aproveitar o touch screen. Tentei desenvolver algo pro Ipod Touch (é, já tive um), mas a empresa da maçã e seu proprietarismo monárquico não me deixaram prosseguir. É possível criar algo em J2ME também. No futuro eu vou mostrar como, mas hoje, vamos nos ater aos princípios básicos.

Programação de jogos é algo extremamente complexo. Sem entender alguns conceitos básicos é impossível programar.
Primeiro conceito:
Sua tela é uma matriz. A tela do computador é constituída de uma série de pontos. Cada um desses pontos é localizada por um ponto XY, como num plano cartesiano. Então, para movermos um objeto na tela para frente ou para trás basta incrementar (aumentar) o valor de X desse objeto. Para fazê-lo voltar basta decrementar X. O mesmo  princípio vale para o Y.
Segundo conceito:
Orientação a Objetos. Esse modo de pensar é usado desde que mundo é mundo. Como este não é um artigo sobre OO, apenas tenham em mente que é necessário para desenvolver jogos.
Terceiro conceito:
Sprite. Não. Não é o refrigerante! Sprites são pequenas animações repetidas que são acionadas quando o usuário envia um comando. Por exemplo, quando você clica no mouse e a arma que você está segurando dá um disparo (nós não estamos falando de jogos 3d, ok. É só um exemplo). A animação que faz a arma emitir uma luz na ponta é um sprite. Esta animação é sempre a mesma e sempre vai ser disparada pelo mesmo evento. Isso é um sprite.
Quarto conceito:
Double Buffering. Essa técnica é antiga e praticamente obrigatória. Na maioria das vezes a própria linguagem já implementa automaticamente. Double buffering resolve um problema de atualização da tela. Toda vez que um objeto mudar de posição na tela é necessário redesenhar tudo com as novas posições. Imagine que sua tela é como um quadro de pintura e que os objetos são pintados sobre este quadro. Porém, ao repintar o quadro para atualizar a posição de um objeto, você verá um pequeno delay dessa atualização. É pequeno, mas quando se junta tudo fica extremamente incômodo. Para resolver este problema, basta colocar um quadro sobre o quadro. Quando for atualizar a tela, você desenhará sobre este segundo quadro. Quando terminar de atualizar o quadro com todas as novas posições dos objetos, você pinta ele sobre o quadro principal. Isso acaba com o delay de atualização da tela.
Quinto conceito:
Algoritmo de detecção de colisões. Tá bom. Esse é difícil. Honestamente, não conseguí implementar nenhum que seja 100% eficiente. Existem diversas técnicas diferenciadas e a que eu mais gostei foi a quadtree. Ela consiste em utilizar a estrutura de dados árvore para mapear a tela. Cada parte da tela é representada por um dos nós da árvore e esses nós possuem mais quatro nós e assim por diante. Com uso dessa técnica é possível reduzir drásticamente a quantidade de cálculos necessária para detectar que um objeto colidiu com outro. Isso porque a verificação ficaria restrita ao setor (nó da árvore) em que os objetos estão. Tem um artigo na sharpgames de um cara que implementou o mesmo: http://www.sharpgames.net/Artigos/Artigo/tabid/58/selectmoduleid/376/ArticleID/1603/reftab/54/Default.aspx.

Ok. Com isso aí já dá pra fazer um joguinho 2D básico (quase um Mário Bros!!!). Em outro post eu posto um exemplo usando Java.

terça-feira, 11 de maio de 2010

ExtJS. RIA em javascript

No meu último post sobre RIA eu falei um pouquinho sobre extjs (na verdade só citei o nome). Vamos falar um pouquinho sobre esta tecnologia. Primeiro, o que é. Extjs é uma framework totalmente javascript cross-browser. Ou seja, tudo que você precisa pra rodar uma app construída com ele é um browser. Ele pode ser obtido em:
-http://www.extjs.com/products/js/download.php
Exemplos:
-http://www.extjs.com/deploy/dev/examples/
Documentação:
http://www.extjs.com/deploy/dev/docs/

Como começar? Fácil. Faça download. Crie uma nova pasta no seu web-server (chame-a de "teste", se desejar). Descompacte o extjs nesta pasta. Pra ficar mais fácil referenciar, mude o nome da pasta do extjs para ext. Crie um arquivo dentro da pasta "teste" chamado index.html. Insira o código abaixo neste arquivo:

<html>
    <head>
    <title>Teste Extjs</title>
    <meta content="charset=utf-8" equiv="content-type"></meta>
    <link href="ext/resources/css/ext-all.css" rel="stylesheet"></link>
    <script src="ext/adapter/ext/ext-base.js">
    </script>
    <script src="ext/ext-all.js">
    </script>
    <script src="ext/src/locale/ext-lang-pt.js">
    </script>
   
    <script>
        Ext.onReady(function(){
            var win = new Ext.Window({
                title : "Login",
                height : 130,
                width : 300,
                layout : 'form',
                closable : true,
                modal : true
            });
            edtLogin = new Ext.form.TextField({
                emptyText: 'Digite seu Login',
                fieldLabel: 'Login',
                width:210,
                id: 'edtLogin'
            });
            edtSenha = new Ext.form.TextField({
                emptyText: 'Digite sua senha',
                fieldLabel: 'Senha',
                width:210,
                id: 'edtSenha'
            });
            btnEntrar = new Ext.Button({
                text: 'Entrar',
                handler: function(){
                    login = Ext.getCmp('edtLogin').getValue();
                    senha = Ext.getCmp('edtSenha').getValue();
                    Ext.Msg.alert('teste', 'Login: ' + login + ' Senha: ' + senha);
                }
            });
            btnLimpar = new Ext.Button({
                text: 'Limpar',
                handler: function(){
                    Ext.getCmp('edtLogin').setValue('');
                    Ext.getCmp('edtSenha').setValue('');
                }
            });
            pnlCentral = new Ext.form.FormPanel({
                region: 'center',
                frame: true,
                labelWidth: 50,
                items: [
                    edtLogin,
                    edtSenha
                ],
                buttons:[ btnEntrar, btnLimpar ]
            });
            win.add(this.pnlCentral);
            win.show();
        });
    </script>
    </head>
    <body>
        </span>
        <div id="body">
        <span style="font-weight: bold;">
        </span></div>
        <noscript><font style="font-weight: bold;">Sé funciona com javascript habilitado!</font></noscript><span style="font-weight: bold;">
    </body>
</html>

Esse pequenino código gera uma telinha de login:
Bem simples. Vale a pena destacar que esta framework é toda orientada a objetos. Dá até pra utilizar conceitos como herança ou polimorfismo. Quem conhece javascript sabe que esta não é uma linguagem OO. É isso. No futuro eu falo novamente sobre esta plataforma.

segunda-feira, 10 de maio de 2010

PSP, eu ouço música no meu video game ou jogo video game com o som do meu carro?

Quem me segue no buzz já sabe que eu me amarro em trecos (ou gadgets pro's mais tecnológicos). O alternativo sempre me atrai. Já usei um palm como controle remoto de TV, conprei outro palm e usei como notebook, Uso notebook como caderno, ou seja, onde eu acho a chance de fazer um gatinho eu faço. É certo que nem sempre minhas gambis (modo carinhoso de dizer gambiarra) dão certo, mas eu tenho que dizer que a última gambi deu muito certo. Transformei meu PSP em um som de carro. "Oh My God. Você quebrou um PSP?". Nops. Nem relei nele. Vou explicar aqui como eu fiz. Primeiro, os materiais necessários:
-1 PSP (dã);








-1 cabo p2/rca;

-1 módulo;

-1 mecânico;

-1 suporte para GPS que caiba o PSP;

Eu comprei um módulo de 480w por R$ 140,00. O cabo e o mecânico vieram de brinde. O suporte foi dérreau no feirante mais próximo. O PSP eu já tinha. O som do meu carro custou R$ 150,00 e não fica chiando feito uma caixa de abelhas. E o melhor é que funciona com qualquer aparelho que tenha saída de aúdio P2 (aquela saída igual aos fones de ouvido mais comuns)

Como instalar?
Chame o mecânico e mande ele instalar o módulo. Essa é a parte legal. Geralmente, quando você compra um módulo pro seu carro, eles já oferecem a instalação com o cabo p2/rca. O cabo ele mesmo passa também. O trabalho que você vai ter é somente fixar o suporte de gps em algum lugar do carro. Eu fixei no lugar que deveria ficar o som do carro. Nada que uma furadeira e uns parafusos não resolvam. Mais tarde eu tiro uma foto e posto aqui. Ligue seu PSP, escolha a música ou faça uma playlist e seja feliz!!!

Tudo começa do início + RIA

Este é o primeiro blog que eu possuo. No começo é meio complicado falar sobre coisas porque temos muito o que falar, mas é difícil organizar tanta coisa em palavras. Como eu não sei por onde começar, então comaçarei por algo que eu conheço. Vamos falar de RIA:
RIA significa Rich Internet Application. Em outras palavras, são aplicações ricas para a web. Com este tipo de tecnologia é possível emular diversas funcionalidades presentes em um desktop (imaginemos o Windows pra ficar mais fácil) dentro do browser (tenham em mente o firefox). Poxa, não entendí. No problem. Vou dar um exemplo prático de algumas aplicações:

-http://qwikioffice.com/desktop-demo/login.html
-http://opensource.adobe.com/wiki/display/blazeds/BlazeDS
-http://www.wynapse.com/Silverlight/Tutor/Silverlight_Code_Samples.aspx

Este tipo de aplicação tem crescido na web. Com este crescimento, surgiram também ferramentas especializadas em construir esse tipo de aplicativo. O primeiro exemplo foi feito utilizando uma framework escrita em javascript chamada Extjs (mais informaçoes em www.extjs.com). O segundo exemplo foi feito utilizando o Adobe Flex. O terceiro foi utilizado o Micro$oftiano Silverlight. Ambos demonstram um visual muito chamativo e moderno.
Porém, RIA não se restringe a isso. Se você é desenvolvedor de sistemas, deve estar se perguntando: "Beleza. É tudo muito bonito, mas e quanto ao lado servidor? Como é que fica?". Ter uma tecnologia tão chamativa e não poder contar com um banco de dados seria puro desperdício. Mas existem bytes no fim do pacote. As duas primeiras que eu lhes apresentei possuem integração com as principais linguagens server-side. A terceira eu desconheço integração que vá além do .NET. Podemos integrar com o parrudo e nem sempre performático Java, o PHP e seus bugs, o propritaríssimo .NET e por aí vai.
Acredito que RIA tem muito a crescer ainda. Nos meus próximos posts eu vou falar um pouco mais sobre Extjs que eu já estudei profundamente.

E assim fecha meu primeiro post. Bye buddy's. See you!!!