[XNA] Animação de Sprites – Parte 1

Olá galera, vamos dar início ao tutorial de animação de sprites, mas para isso vamos ver alguns conceitos básicos necessários para que todos possam entender do que estamos falando.

O que são Sprites ?

Antes que alguém pense em uma piadinha, sprite não é a marca de refrigerante e sim um elemento básico visual dos jogos bidimensionais que pode ser representado por um conjunto de imagens estáticas. Uma animação de um jogo em duas dimensões, por exemplo, é representada por uma seqüência de sprites sendo exibidos em sucessão. Sua principal função atualmente é economizar recursos ao tornar desnecessária a representação de objetos utilizando objetos complexos em três dimensões. Um exemplo de aprite para animação do personagem Mario e Luigi, pode ser visto na figura 1.

Figura 1. Sprite Sheet do Mario e Luigi

 

As imagens 1 a 3 definem o movimento de caminhada do Luigi, enquanto a imagem 4 a 5 o de pulo. Perceba que ao trocar a imagem você pode posicionar o objeto em outra posição dando realmente a impressão que ele esta caminhando.  Um detalhe importante é que só existe imagens para um lado, pois para ele andar para o outro lado você deve simplesmente fazer um giro horizontal na imagem.

Logo iremos começar a ver códigos, mas por hoje é só.

SBGames 2010

Aconteceu nos dias 8 a 10 de Novembro de 2010 a 9ª (nona) edição do Simpósio Brasileiro de Jogos e Entretenimento Digital (SBGames 2010) e, Florianópolis – SC, que é considerado o maior evento de Entretenimento Digital da América Latina. Promovido pela Sociedade Brasileira de Computação (SBC) e Associação Brasileira dos Desenvolvedores de Games (ABRAGames), o SBGames 2010 foi organizado pela Universidade do Vale do Itajaí (Univali) com patrocínio da  Hoplon (criadora do Taikodom), Intel Software, Sony Computa Entertainment, SENAC, Aiyra e Nokia, no Hotel Bristol Castelmar no centro de Florianópolis. O grande objetivo do evento, que segue com o tema “Games na Rede”, é promover a troca de conhecimento entre os mais de mil participantes, entre profissionais da área (incluindo nomes conhecidos mundialmente), professores e alunos de todo o país.

Sendo este o primeiro SBGames que participo de muitos outros que viram, o primeiro dia do evento foi marcado com uma grande euforia, muitas atividades em paralela, negócios a serem tratados, intercâmbio, novos contatos e na minha opinião a melhor de todas as palestra (keynotes) do evento. Dom Marinelli é professor de teatro e artes e produtor executivo do centro de entretenimento e tecnologia do Carnegie Mellon, nos EUA. disse que os jogos ainda não são reconhecidos como formas de expressão artística por grande parte da sociedade, mas que isso pode mudar no futuro.

Desse modo, Marinelli defende que os estudantes de desenvolvimento de games, em qualquer área que seja, devem viver experiências reais. “Eu tento ensinar artes para estes alunos, para que eles sejam atores. Quero que eles sintam emoções reais como perigo, tristeza e felicidade. Somente assim eles criarão bons jogos”, conta. “Eu não procuro por um desenvolvedor de jogos, eu procuro por um artista”.

Marinelli também disse que os estudantes poderão criar games em diversas áreas, principalmente na educação, no entretenimento adulto e, no que ele acredita ser o próximo passo dos jogos eletrônicos, em títulos voltados para idosos. “Eu estou ficando velho e quero que vocês façam jogos para eu me divertir”. Ele comentou também que espera que os videogames sejam reconhecidos no futuro como arte – algo como o cinema é visto atualmente, por exemplo. “Quero que os videogames tenham o mesmo impacto de ‘Hamlet’”.

Durante o primeiro dia também assisti alguns papers, fiz alguns contatos e depois saímos para comer e beber um pouco com os novos amigos de Recibe, Brasilia, Rio de Janeiro e outros lugares.

Já no segundo dia, tive que acordar cedo pois a apresentação do paper do meu grupo eram as 9:00 da manhã, paper apresentado, novos contatos e novas atividades além do Plenário e cerimônia de premiação. Durante a cerimônia de premiação foi anunciado que o prêmio Abragames ao melhor profissional do ano, chamado de “Contribuição à Indústria Brasileira de Jogos”, mudará de nome, a partir de 2011, ele será chamado Prêmio Marcelo Carvalho, em homenagem ao primeiro presidente da Abragames, que faleceu este ano.

No último dia do evento conforme previsto aconteceu a palestra mais relevante com Jonathan Blow, criador de Braid,

Crédito da foto: Mario Oliveira

considerado um dos melhores títulos independentes dos anos anteriores quando saiu para Xbox 360 (2008), PC e PS3 (2009). Contemplado por um público de mais de 500 pessoas na plateia, o programador e designer que reside nos EUA abordou temas relacionados a como os desenvolvedores devem se relacionar com o público, e afirmou que nem sempre dar ao jogador o que ele quer é o correto a se fazer. ”O que é recompensador? Os game designers podem dar aos jogadores o que eles querem, mas às vezes isso não é saudável para as pessoas. Jogos como Farmville são do mal. Como designer, eu quero dizer que levo a magnitude destas consequências a sério“, afirmou Blow.

O profissional também fez uma analogia com relação à preocupação que os produtores devem ter com relação a magnitude de seus trabalhos, comparando como uma pessoa que pode sair para tomar uma cerveja com os amigos depois do trabalho, mas o efeito será nocivo à saúde se ela se embebedar todos os dias. Da mesma forma, se um game ruim fosse usado por uma única pessoa o efeito não seria impactante, mas na realidade o que acontece é que centenas de pessoas gastam milhares de horas de suas vidas com coisas que as tornam mais burras. ”Nós temos responsabilidade proporcional ao número de pessoas que afetamos. E este número é cada vez maior. Por isso eu não gosto de manipular jogadores. Quero ser o mais ético que puder. Tento criar a maior liberdade possível na mente do jogador.“

Por fim, Blow disse que o objetivo dos profissionais dessa área não deve ser preocupar-se em criar o jogo mais divertido, mas respeitar os jogadores ainda que se tenha pretensão de ganhar dinheiro com o game. Para atingir esse objetivo ele aconselha muita pesquisa e usar formas honestas de conversar com os jogadores, como se faz nas novelas.

Junto com a SBGames acontece o Festival de Jogos Independentes, oportunidade para pessoas e empresas mostrarem suas criações. Dentre os 34 títulos participantes, destacaram-se “Krimson”, game 3D no qual o jogador controla um dragão; “Painting Rage”, um puzzle que brinca com cores, e “Star Triad”, um típico game de nave para celular. Foram os jogos ganhadores deste festival.

Para aqueles que buscaram negócios, podia candidatar-se a vagas de empregos disponíveis em algumas produtoras como a Hoplon, que tem cerca de 110 funcionários, cujo jogo principal, o MMO “Taikodom”, custou US$ 15 milhões. No estande da empresa, os estudantes podiam deixar seus currículos e até mesmo conversar com funcionários do departamento de RH. Também tivemos a chance de visitar a empresa e conversar com os programadores, artistas, músico e outros membros da equipe.

Entre as atividades de lazer a Hoplon realizou um grande campeonato de Taikodom: Livind Universe no qual durante os 3 dias do evento aconteceram combates com patidades de 40 minutos cada em 50 máquinas. Os 3 vencedors foram premiados com placas de vídeo da última geração.

Empresas e instituições francesas de games também marcaram presença no evento, que teve iniciativa de integrar o 1° Encontro Franco-Brasileiro sobre Videogames. Foi discutido o desenvolvimento de parcerias comerciais e co-produções, além de colaborações entre universidades e laboratórios de pesquisa e pólos de competência.

Infelizmente eventos desse tipo ocorrem uma unica vez por ano, mas se eu sou você não ficaria fora da próxima edição que será em Salvador, que tal conhecer o que a baiana tem ? Fico por aqui galera, espero que tenham gostado, até a próxima e alias abraços a todos os amigos que fiz neste evento e até Salvador.

[XNA] Desenvolvendo um Breakout (Source Code)

Galera, segue o código do jogo Breakout para vocês estudarem. Estou colocando para download duas versões de código, uma reduzida (a que fizemos no curso de 4 horas) e outra versão um pouco mais extendida, com 4 fases (arquivos .txt) e sistema de telas usando nosso tutorial, além de todos objetos serem componentes nesse jogo (isso é só para complicar e vocês aprenderem a utiliza-los)

Breakout ou Arkanoid é um jogo simples, que começou em máquinas arcade e que se tornou popular por causa da sua facilidade de jogo e gráficos simples. A empresa que comercializou este jogo foi a Taito. O jogo é formado por uma bola, uma raquete e blocos coloridos. Uma bola começava a andar pelo ecrã. Com a “raquete” tentava-se bater na bola, movimentando-se para os lados. A bola batia nos blocos e você ganhava pontos.

• Código de um mini-breakout desenvolvido nos mini-cursos que ministrei (clique aqui)
• Código de um breakout completo desenvolvido usando diversas técnicas (clique aqui)

Existem alguns bugs em ambas versões que não fique corrigindo, e também o código do jogo completo foi um teste que fiz sobre o uso de Components em XNA, então pode ser que a maioria ache meio confuso o código, até eu mesmo achei.

Abraços, espero que gostem.

[XNA] Desenvolvendo um Space Invaders (Source Code)

Galera, segue o código do jogo Space Invaders para vocês estudarem. Esse código é baseado no nosso sistema de telas e em todas as aulas realizadas neste blog. Este jogo também foi desenvolvido durante a Semana de Computação da Uniderp-Anhanguera de Campo Grande – MS (Abraços a todos de lá, ao professor Robson, Leonardo e os outros professores que não lembro o  nome no momento, além dos alunos que fizeram o mini-curso comigo).

Veja o vídeo do clássico jogo Space Invaders

Veja o nosso remake desenvolvido

Como funciona o jogo, o que o usuário pode fazer ? veja o diagrama de caso de uso abaixo

Diagrama de Caso de Uso do Jogo

O sistema de Telas é o mesmo do nosso tutorial, veja a maquina de estado do jogo abaixo.

Maquina de Estados Finitos do jogo

E o nosso diagrama de classes ficaria dessa forma.

Diagrama de Classes do Jogo

Vale lembrar que esse jogo foi criado em um curso de 20 horas sem restrição de conhecimento inicial, então seu código esta criado de maneira a ser cumprida nessas horas de curso. Ou seja, você pode pensar em diversas melhorias para esse código com certeza. Outro detalhe, a tela de créditos foi eliminada do código para reduzir o tempo de programação do curso, porém a mesma se encontra em todos os diagramas.

Pegue o código aqui do jogo clicando aqui.

Abraços galera, até a próxima.

Próximo Tutorial de XNA [Somente final de 2010]

Olá galera, entre ontem e hoje (02/11 e 03/11) publiquei dois dos artigos mais esperados e que eu sempre prometia em publica que eram o Sistema de Partículas 2D e o Sistema de Troca de Telas completo com menu de opções. Agora o próximo tutorial será animando sprites, mas esse só vai ser publicado final do ano, veja o que aguarda vocês no vídeo abaixo.

Abraços, até a próxima.

[XNA] Criando um Sistema de Troca de Telas 3 (Tela de Opções)

Olá galera tudo bem ?  este tutorial de telas continua sendo de nível intermediário e dedico ele a galera que estava doida para que este tutorial ficasse pronto. Continuo supondo que o leitor tenha alguns conhecimentos de Orientação a Objetos, C# e de XNA também.

Para aqueles que estão vendo este artigo devem primeiro ter lido os artigo anteriores (parte 1 e parte 2) no qual criamos a estrutura da nossa cena assim como os estados do jogo. Desta vez iremos fazer algumas mudanças de nomes, ou seja tudo que era Scene, passa a ser Screen. Nosso ScreenManager então vai herdar DrawableGameComponent que não será explicado neste tutorial, mas basicamente estamos dizendo para o XNA que nosso gerente é um componente de jogo e o XNA deve tomar conta dele para nós. Veja o diagrama abaixo da estrutura que vamos montar.

Diagrama de Classes

O que esta de verde na figura é o que o XNA fornece, vermelho são classes reaproveitadas da maneira que esta e branco as classes que poderão sofrer modificações dependendo do projeto de cada um.

Vale lembrar que nosso jogo funcionará como uma Maquina de Estados Finitos como no diagrama abaixo.

Maquina de Estados Finitos do Jogo

Neste tutorial não vou colocar os códigos no post, pois são vários e ficaria cansativo. Os códigos dos projeto estão todos comentados e gostaria que o caro leitor pelo seu nível de entendimento tentasse entender estes por conta, tirando possíveis dúvidas comigo no futuro. Segue o projeto para estudo e uso de todos clicando aqui.

Veja o resultado neste vídeo.

Abraços pessoal e até a próxima, espero que tenho gostado recebendo algum feed back de vocês.

[XNA] Sistema de Partículas 2D

Para o pessoal não ficar preocupado com os tutoriais em XNA, hoje tirei algumas horinhas do meu feriado para escrever sobre este sistema que para mim é muito importante nos jogos. Então este tutorial eu considero sendo de nível intermediário e continuo supondo que o leitor tenha alguns conhecimentos de Orientação a Objetos, C# e de XNA também.

Um sistema de partículas é um técnica muito utilizada para simular algum tipo de efeito, como: fogo, chuva, neve, furação, água corrente, poeira, feitiços e etc. A maioria das vezes esses efeitos são realizados em jogos 3D principalmente utilizando linguagem de Shaders (Gc, HLSL, GLSL), mas para este tutorial veremos como implementar um em 2D usando imagens.

Um sistema de partículas tem componentes principais: as partículas é claro, um emissor de partículas e o gerenciador das partículas.

Uma partícula é um pequeno ponto em seu jogo que será desenhado com uma imagem, ela ainda possui posição, velocidade, ângulo, velocidade angular que indica o quão rápido ela ira girar, velocidade linear e tempo de vida.

O emissor de partículas é essencialmente o local de origem das partículas, muitas vezes o emissor também é responsável por determinar quantas partículas serão criadas a qualquer momento.

O gerenciador de partículas é responsável pelo estado dos dois componentes anteriores, e é responsável pela remoção de partículas para que não encha a memória.

1º passo: Crie um novo projeto e de um nome, no meu caso dei o nome de ParticleSystem.

2º passo: Faça o download das imagens necessárias clicando aqui. Crie um pasta Textures dentro da pasta Content do seu projeto e adicione as imagens la como sempre fizemos nos outros tutoriais.

3º passo: Crie uma classe para representar a nossa partícula, eu a chamarei de Particle. Veja o código abaixo comentado da nossa classe.

///
/// Representa uma única particula
///
public class Particle
{
    #region [ Fields ]
    ///
    /// Imagem da partícula
    ///
    public Texture2D Texture { get; set; }
    ///
    /// Posição da partícula no plano X,Y
    ///
    public Vector2 Position { get; set; }
    ///
    /// Velocidade linear da partícula
    ///
    public Vector2 Velocity { get; set; }
    ///
    /// Velocidade angular da partícula
    ///
    public float AngularVelocity { get; set; }
    ///
    /// Angulo atual de desenho partícula
    ///
    public float Angle { get; set; }
    ///
    /// Cor da partícula
    ///
    public Color Color { get; set; }
    ///
    /// Tamanho da partícula
    ///
    public float Size { get; set; }
    ///
    /// Tempo de vida da partícula
    ///
    public float LifeTime { get; set; }
    #endregion

    #region [ Constructor ]
    ///
    /// Construtor
    ///
    public Particle(Texture2D texture, Vector2 position, Vector2 velocity,
        float angle, float angularVelocity, Color color, float size, float lifeTime)
    {
        Texture = texture;
        Position = position;
        Velocity = velocity;
        Angle = angle;
        AngularVelocity = angularVelocity;
        Color = color;
        Size = size;
        LifeTime = lifeTime;
    }
    #endregion

    #region [ Update ]
    ///
    /// Atualiza as informações da partícula
    ///
    ///
Tempo de jogo
    public void Update(GameTime gameTime)
    {
        LifeTime--;
        Position += Velocity;
        Angle += AngularVelocity;
    }
    #endregion

    #region [ Draw ]
    ///
    /// Desenha a partícula
    ///
    ///
SpriteBatch do jogo
    public void Draw(SpriteBatch spriteBatch)
    {
        // Define o retângulo de recorte da imagem,
        Rectangle sourceRectangle = new Rectangle(0, 0, Texture.Width, Texture.Height);
        // Define a origem da imagem
        Vector2 origin = new Vector2(Texture.Width / 2, Texture.Height / 2);
        // Desenha a imagem
        spriteBatch.Draw(Texture,   // Imagem
            Position,               // Posição
            sourceRectangle,        // Retangulo de recorte
            Color,                  // Cor
            Angle,                  // Angulo
            origin,                 // Origem de desenho
            Size,                   // Tamanho
            SpriteEffects.None,     // Efeito de imagens (flip horizontal ou vertical)
            0.0f);                  // Layer de pronfundidade
    }
    #endregion
}

4º passo: Crie uma classe para representar o nosso gerenciador de partículas, eu a chamarei de ParticleManager. Veja o código abaixo comentado da nossa classe.

/// <summary>
/// Gerenciador de Particulas
/// </summary>
public class ParticleManager
{
    #region [ Fields ]
    /// <summary>
    /// Valor randomico
    /// </summary>
    private Random random;
    /// <summary>
    /// Posição X,Y do emissor de partículas
    /// </summary>
    public Vector2 EmitterLocation { get; set; }
    /// <summary>
    /// Lista de partículas
    /// </summary>
    private List<Particle> particles;
    /// <summary>
    /// Lista de imagens para as partículas
    /// </summary>
    private List<Texture2D> textures;
    /// <summary>
    /// Total de partículas
    /// </summary>
    private int TotalParticles { get; set; }
    #endregion

    #region [ Constructor ]
    /// <summary>
    /// Construtor do Gerenciador de Partículas
    /// </summary>
    /// <param name="textures">Lista de imagens</param>
    /// <param name="location">Localização do emissor de partículas</param>
    public ParticleManager(List<Texture2D> textures, Vector2 location)
    {
        EmitterLocation = location;
        this.textures = textures;
        TotalParticles = 10;
        this.particles = new List<Particle>();
        random = new Random();
    }
    #endregion

    #region [ Update ]
    /// <summary>
    /// Atualização do gerenciador de partículas
    /// </summary>
    /// <param name="gameTime">Tempo de jogo</param>
    public void Update(GameTime gameTime)
    {
        // Verifica se pode ou não adicionar partículas,
        // conforme o total indicado pelo usuário
        for (int i = 0; i < TotalParticles; i++)
            particles.Add(CreateParticleRandomly());

        // Verifica se acabou o tempo de vida da partícula,
        // se acabou, elimina a partícula dando espaço para novas
        // partículas serem adicionadas
        for (int particle = 0; particle < particles.Count; particle++)
        {
            particles[particle].Update(gameTime);
            if (particles[particle].LifeTime <= 0)
            {
                particles.RemoveAt(particle);
                particle--;
            }
        }
    }
    #endregion

    #region [ Draw ]
    /// <summary>
    /// Desenha todas as partículas gerenciadas
    /// </summary>
    /// <param name="spriteBatch">SpriteBatch do jogo</param>
    public void Draw(SpriteBatch spriteBatch)
    {
        foreach (Particle p in particles)
            p.Draw(spriteBatch);
    }
    #endregion

    #region [ Create new particle ]
    /// <summary>
    /// Cria uma nova partícula randomica, se você quiser criar outro
    /// tipos de partículas, você deve mudar este método ou criar outros
    /// métodos próprios para o movimento de sua partícula
    /// </summary>
    /// <returns>Retorna a partícula criada</returns>
    private Particle CreateParticleRandomly()
    {
        // Seleciona uma imagem aleatória da lista
        Texture2D texture = textures[random.Next(textures.Count)];
        // Posição do emissor de partículas
        Vector2 position = EmitterLocation;
        // Velocidade aleatória da partícula
        Vector2 velocity = new Vector2(
                                1f * (float)(random.NextDouble() * 2 - 1),
                                1f * (float)(random.NextDouble() * 2 - 1));
        // Angulo de rotação da partícula
        float angle = 0;
        // Velocidade randomica angular da partícula
        float angularVelocity = 0.1f * (float)(random.NextDouble() * 2 - 1);
        // Cor randomica da partícula
        Color color = new Color(
                    (float)random.NextDouble(),
                    (float)random.NextDouble(),
                    (float)random.NextDouble());
        // Tamanho randomico da partícula
        float size = (float)random.NextDouble();
        // Tempo de vida da partícula
        int lifeTime = 20 + random.Next(40);

        return new Particle(texture, position, velocity, angle, angularVelocity, color, size, lifeTime);
    }
    #endregion
}

5º passo: Para adicionar o sistema de partículas em seu projeto siga este código.

public class Game1 : Microsoft.Xna.Framework.Game
{
    GraphicsDeviceManager graphics;
    SpriteBatch spriteBatch;
    /// <summary>
    /// Gerenciador de particulas
    /// </summary>
    ParticleManager particleManager;

    public Game1()
    {
        graphics = new GraphicsDeviceManager(this);
        Content.RootDirectory = "Content";
    }

    protected override void Initialize()
    {
        base.Initialize();
    }

    protected override void LoadContent()
    {
        spriteBatch = new SpriteBatch(GraphicsDevice);

        // Lista de imagens
        List<Texture2D> textures = new List<Texture2D>();
        // Adicionando imagens a lista
        textures.Add(Content.Load<Texture2D>(@"Textures\star"));
        textures.Add(Content.Load<Texture2D>(@"Textures\diamond"));
        textures.Add(Content.Load<Texture2D>(@"Textures\circle"));
        // Construindo o sistema de partículas com a lista de imagens
        particleManager = new ParticleManager(textures, new Vector2(400, 300));
    }

    protected override void UnloadContent()
    {
    }

    protected override void Update(GameTime gameTime)
    {
        // O emissor de particulas recebe a posição do mouse
        particleManager.EmitterLocation = new Vector2(Mouse.GetState().X, Mouse.GetState().Y);
        // Atualizando o gerente de partículas
        particleManager.Update(gameTime);

        base.Update(gameTime);
    }

    protected override void Draw(GameTime gameTime)
    {
        GraphicsDevice.Clear(Color.Black);

        spriteBatch.Begin();
        // Chamando o método de desenho do gerenciador de partículas
        particleManager.Draw(spriteBatch);
        spriteBatch.End();

        base.Draw(gameTime);
    }
}

Após compilar (F5) seu código sem erro é para você obter o seguinte resultado.

Para fazer download do projeto clique aqui.

Abraços e até a próxima