Artigo criado por Felipe Aron (www.felipearon.com.

br)
1
Todos os direitos reservados ©

SILVER SPRITE
Jogos desenvolvidos em XNA para a Internet

Introdução

Para aqueles que ainda não conhecem, XNA é um Framework gratuito da Microsoft para
o desenvolvimento de jogos, que utiliza o Visual Studio (Professional/Express) como IDE de
desenvolvimento. Por meio do XNA, é possível desenvolver jogos 2D/3D para PC, X-Box 360 e
Zune (Ipod da Microsoft com sistema operacional Windows). Para maiores informações acesse
o site oficial do XNA: http://msdn.microsoft.com/pt-br/xna/default(en-us).aspx.

Num desenvolvimento de um jogo de duas dimensões (2D), o uso de Sprites são de

suma importância. Um Sprite é uma imagem de algo que será usado no cenário do jogo, seja
uma imagem de um personagem, de uma pedra, de uma árvore, uma imagem de fundo
(background), etc. Por meio de técnicas, é possível utilizar vários Sprites para criar uma
animação, por exemplo, a de um personagem andando pelo cenário, trocando o movimento
das pernas conforme ele se move.

Hoje em dia, quando falamos sobre desenvolvimento de jogos para Internet, logo
pensamos em Flash, que é uma ferramenta fantástica para criação de web-sites e também
para desenvolvimento de jogos. Porém, ela tem limitações e, em razão disso, nem sempre
possibilita que o usuário atinja facilmente um resultado esperado. Com a utilização do
Framework XNA, o trabalho de desenvolvimento de um jogo se torna simples pelo fato do XNA
já possuir muitos métodos e recursos prontos, cabendo somente ao usuário valer-se da
criatividade e de linhas de código para criar jogos interessantes.

A Microsoft criou o SilverLight (http://silverlight.net/), uma ferramenta que lembra o

famoso Flash, cujos recursos vão muito além deste, podendo criar páginas ricas, mais
interativas, mais leves, pois inúmeros recursos são processados pelo cliente e não diretamente
no servidor. Uma das grandes vantagens dessa ferramenta é a utilização do Stream sem haver
comprometimento do servidor, por exemplo, a visualização de vídeos sendo transmitidos ao
vivo para milhares de pessoas.

Após o surgimento do SilverLight, apesar de muitos questionaram a possibilidade de

criar jogos valendo-se dessa tecnologia, cabe ressaltar que e possível sim, porém é necessário
um conhecimento da ferramenta (SilverLight, XAML, etc.).

Pelo fato de cada vez mais pessoas usarem o Framework XNA para o desenvolvimento
de jogos para plataforma Windows, Zune e X-Box, pensando em unir SilverLight com XNA,
surgiu, então, uma nova API, o SilverSprite...

O que é SilverSprite?
 Artigo criado por Felipe Aron (www.felipearon.com.br)
2
Todos os direitos reservados ©

SilverSprite é uma API capaz de integrar seus jogos criados com o Framework XNA e
aplicações “Web ricas” por meio do SilverLight, os quais podem ser jogados em qualquer
programa de navegação na Internet (Browser). Esse projeto foi criado por Bill Reiss e está
sendo mantido por José Antonio Farias (http://www.sharpgames.net) e Kevin Wolf.

Para usar essa API, você não irá precisar ter plenos conhecimentos em SilverLight e o
melhor: você praticamente não irá precisar de quase nenhum código do seu jogo. Por
enquanto, o SilverSprite está disponível apenas para jogos de duas dimensões (2D), o que já é
uma evolução em termos de tecnologia e mercado. Para mais detalhes sobre o projeto
SilverSprite acesse: http://www.codeplex.com/silversprite.

Para exemplificar o uso dessa API (SilverSprite), iremos criar um simples projeto em
XNA, e depois, utilizando-se um projeto em SilverLight, iremos executar nosso game por meio
de uma página web.

Criando um exemplo simples em XNA

Vamos criar um projeto simples em XNA para plataforma Windows, na qual iremos
colocar um Sprite (figura) e fazer com que ele se movimente pela tela. Não entraremos em
detalhes sobre os conceitos de desenvolvimento, pois o enfoque é fazer o projeto XNA ser
executado com o SilverSprite.

Para exemplar o acima exposto, inicie um novo projeto, carregue um sprite com uma
Textura 2D qualquer e faça o Sprite se movimentar na tela. Veja o resultado do jogo em
execução:
 Artigo criado por Felipe Aron (www.felipearon.com.br)
3
Todos os direitos reservados ©

Salve o projeto feito em XNA. Agora vamos 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. Entretanto, caso não tenha instalado, ainda, o SilverLight 2,
você poderá baixá-lo em: http://silverlight.net.

Em seguida, 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.
 Artigo criado por Felipe Aron (www.felipearon.com.br)
4
Todos os direitos reservados ©

Após esse procedimento, a primeira coisa que precisamos fazer é adicionar a referência
à 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 referência 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.

Criada 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 projeto todos os fontes do jogo, como mostra a imagem
abaixo:
 Artigo criado por Felipe Aron (www.felipearon.com.br)
5
Todos os direitos reservados ©

Aqui existe um “DETALHE IMPORTANTE”. Quando criamos um projeto XNA, o método

principal que executa o jogo está no arquivo Program.cs. Porém, nesse caso quem irá chamar
o jogo será o Page.xaml, portando não iremos precisar do “Program.cs”. Assim sendo, exclua
esse arquivo do projeto.

Já falando sobre a Page.xaml, vamos, então, adicionar o código que fará a chamada no
nosso game. Precisamos adicionar duas informações: uma é o NameSpace, utilizado no
projeto XNA, e outra, a chama da classe principal do game, que está no arquivo “Game1.cs”.
Altere o código XMAL do Pagem.xaml, de modo que ele fique igual ao 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" diz

respeito ao Namespace utilizado pelo jogo XNA, e a segunda, <game:Game1
x:Name="game"/> ao arquivo que conta a [ou “que se refere à”?] classe principal do jogo.
 Artigo criado por Felipe Aron (www.felipearon.com.br)
6
Todos os direitos reservados ©

Se você der um “Build” na aplicação, verá que aparecerá uma mensagem de erro
dizendo que não foi encontrado o Namespace “XNA”. É aí que entra o SilverSprite. Assim,
vamos trocar toda referência “Microsoft.Xna.Framework” por
“SilverArcade.SilverSprite”. Para tanto, abra o “Game1.cs” e faça essa alteração.

Feita as alterações, execute a aplicação utilizando a tecla F5. Em seguida, irá abrir o
Brownser e carregar o graphics do XNA, porém irá dar erro ao tentar carregar a Textura. Aqui
existe outro pequeno “Detalhe” pelo fato de o SilverSprite utilizar o arquivo .xnb
correspondendo a compilado do projeto XNA. Então precisamos adicionar esse arquivo e
carregá-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”. Será nessa pasta que iremos adicionar o
arquivo .xnb compilado para carregar nossa textura.

Criada a pasta, adicione o arquivo .xnb da textura localizado na pasta do projeto XNA
por meio 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 à imagem abaixo:

Agora falta pouco pra fazer nosso game rodar. Como disse, esse é um “Detalhe” do
SilverSprite, pois ele se utiliza do arquivo compilado .xnb. Além disso, precisamos alterar a
propriedade “Build Action” desse arquivo para “CONTENT” para que ele seja compilado junto
com o projeto SilverLight. Assim, selecione o arquivo, já em “Properties”, e altere sua
propriedade como dito acima.
 Artigo criado por Felipe Aron (www.felipearon.com.br)
7
Todos os direitos reservados ©

Para finalizar, abra o “Game1.cs” no método LoadContent(), que é o qual carrega a

textura [Não inicia com maiúscula? Acima você iniciou], 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 no mercado, porém podemos perceber que essa API, sem dúvida, promete.

Espero que tenham gostado. Entre no site oficial do projeto e obtenha mais detalhes
sobre essa API. Estou à sua disposição, caso queira entrar em contato. É só mandar um e-Mail
para: falecom@felipearon.com.br. O código fonte desse tutorial pode ser encontrado em meu
web-site: http://www.felipearon.com.br/downloads/zip/silversprite.zip.