SilverSprite – Seu game XNA agora na web !!

Uma introdução de como integrar seu game na web usando o SilverSprite.

O que é SilverSprite?

Após o surgimento do SilverLight, muitos questionaram a possibilidade de criar jogos utilizando essa tecnologia. É possível porém é necessário um conhecimento da ferramenta (SilverLight, XAML, etc).

Cada vez mais pessoas estão usando o Framework XNA para o desenvolvimento de jogos para plataforma Windows, Zune e X-Box. Com isso fez surgir então a nova API SilverSprite, capaz de integrar seus jogos criados com o XNA e aplicações “Web ricas” através do SilverLight. Esse projeto foi criado por Bill Reiss e está sendo mantido por José Antonio Farias e Kevin Wolf.

Através dessa API, você não irá precisar ter plenos conhecimentos em SilverLight, e o melhor, você praticamente não irá precisar alterar nenhum código do seu jogo. Por enquanto o SilverSprite está disponível apenas para jogos 2D, mas isso já é uma evolução em termos de tecnologia e mercado.

Para mais detalhes sobre o projeto SilverSprite acesse:

http://www.codeplex.com/silversprite

Criando um exemplo simples em XNA

Irei criar um projeto simples em XNA para plataforma Windows, onde irei colocar um Sprite e fazer com que ele se movimente pela tela. Não irei entrar em detalhes sobre os conceitos de desenvolvimento, pois o enfoque é fazer ele ser executado com o SilverSprite.

Inicie um novo projeto, carregue um sprite com uma Textura 2D qualquer e faça o sprite se movimentar na tela. (Se quizer baixe o exemplo aqui)

Veja o resultado do jogo em execução:

Salve o projeto feito em XNA. Agora iremos criar a aplicação SilverLight...

Adicionando nosso exemplo numa aplicação SilverLight

Antes de criarmos o aplicativo usando o SilverLight, primeiro baixe as DLLs da API SilverSprite no link: http://www.codeplex.com/silversprite. Após baixar o arquivo, extraia numa pasta qualquer de sua escolha.

Caso não tenha instalado o SilverLight 2, você poderá baixa-lo em: http://silverlight.net.

Inicie um novo projeto SilverLight Application no Visual Studio e escolha um Web Application para rodar o site. Uma vez feito isso, será carregado a tela principal do projeto SilverLight.

A primeira coisa que precisamos fazer é adicionar a referencia à DLL do SilverSprite. Para isso clique com o botão direito sobre a aplicação SilverLight no Solution Explorer, e escolha a opção “Add Reference...”. Ao abrir a tela, escolha a aba “Browse”, e encontre a pasta que descompactamos as DLLs do SilverSprite. Selecione a DLL “SilverArcade.SilverSprite.dll”.

Agora que fizemos a referencia ao SilverSprite, vamos adicionar nosso game na aplicação. Primeiro adicione uma nova pasta chamada “Game” na aplicação. Clique com o botão direito, selecione Add à New Folder. Será nessa pasta que iremos jogar os fontes do nosso game.

Criado a pasta, clique com o botão direito sobre ela, selecione a opção Add à Existing Item... Encontre os fontes do seu game, selecione tudo (Ctrl+A) e clique em “Add”. Você irá perceber que foram adicionados ao projetos todo o fonte do jogo, como mostra a imagem abaixo:

Aqui existe um “DETALHE”. Quando criamos um projeto XNA, o método principal que executa o jogo está no arquivo Program.cs. Porém aqui quem irá chamar o jogo será o Page.xaml, portando não iremos precisar o “Program.cs”. Exclua esse arquivo do projeto.

Já falando sobre a Page.xaml, vamos então adicionar o código que ferá a chamada no nosso game. Precisamos adicionar duas informações, uma é o NameSpace utilizado no projeto XNA, e a chama da classe principal do game, que está no arquivo “Game1.cs”. Altere o código XMAL do Pagem.xaml de modo que fique igual descrito abaixo:

<UserControl x:Class="SilverlightGameApplication.Page"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Width="400" Height="300" xmlns:game="clr-namespace:GameSilverSprite">

    <Grid x:Name="LayoutRoot" Background="White">

        <game:Game1 x:Name="game"/>

    </Grid>

</UserControl>

A primeira informação xmlns:game="clr-namespace:GameSilverSprite" se diz respeito ao Namespace utilizado pelo jogo XNA e a segunda informação <game:Game1 x:Name="game"/> se diz respeito ao arquivo que conta a classe principal do jogo.

Se você der um “Build” na aplicação verá que dá erro dizendo que não foi encontrado o Namespace “XNA”. É ai que entra o SilverSprite. Iremos trocar toda referencia “Microsoft.Xna.Framework” por “SilverArcade.SilverSprite”. Abra o “Game1.cs” e faça essa alteração.

Feita as alterações execute a aplicação (F5). Ele irá abrir o Brownser carregar o graphics do XNA, porém irá dar erro ao tentar carregar a Textura. Aqui existe outro pequeno “Detalhe”. O SilverSprite utiliza o arquivo .xnb correspondendo a compilado do projeto XNA. Então precisamos adicionar esse arquivo e carrega-lo. Clique com o botão direito sobre a aplicação SilverLight, e da mesma forma que criamos a pasta “Game” crie a pasta “Content”. Sera nessa pasta que iremos adicionar o arquivo .xnb compilado para carregar nossa textura.

Criado a pasta, adicione o arquivo .xnb da textura localizado na pasta do projeto xna através do caminho: “./bin/x86/Debug/Content/<Nome_Do_Arquivo>.xnb”. No meu exemplo o arquivo se chama “MainStone.xnb”. Feito isso o resultado deverá ficar igual a imagem abaixo:

Agora falta pouco pra fazer nosso game rodar. Como disse, esse é um “Detalhe” do SilverSprite. Ele se utiliza do arquivo compilado .xnb. Além disso precisamos alterar a propriedade “Build Action” desse arquivo para “CONTENT” para que o mesmo seja compilado junto com o projeto SilverLight. Então selecione o arquivo, já em “Properties” e altere sua propriedade como dito acima.

Pra finalizar abra o “Game1.cs”, no método LoadContent(), que é onde carrego a textura, mude o método Content.Load<> para Content.LoadXnb<> como mostra o código abaixo:

    protected override void LoadContent()

        {

            spriteBatch = new SpriteBatch(GraphicsDevice);

            // TODO: use this.Content to load your game content here

            ball = Content.LoadXnb<Texture2D>("MainStone");

            position = new Vector2(0, 0);

    }

Feito isso só compilar o projeto e executar. O Brownser irá se abrir e carregar o nosso game. Veja a imagem abaixo:

Essa foi apenas uma introdução da utilização do SilverSprite. Ele é um projeto recém-chegado, porém podemos ver que essa API promete !!

Espero que tenham gostado. Entre no site oficial do projeto e tenha mais detalhes sobre essa API. Estou a dispocição caso queira entrar em contato só mandar um e-Mail para: falecom@felipearon.com.br.

Abraços !!