Entendendo o User Input no Windows Phone 7 com XNA

Agora falaremos de inputs do usuário. Como este interage com nosso game feito em XNA rodando no Windows Phone 7.

Para começar, vamos ter em mente que devices com Windows Phone 7 possuem telas sensíveis ao toque (touchscreen).

Quando você encosta seu dedo na tela do device, você não toca somente em um pixel certo? Você normalmente toca dezenas deles, e é importante ter isto em mente também, principalmente se não estiver trabalhando com controles comuns (já utilizados regulamente em formulários para input de dados)

Desenvolvimento de games exige extrema importância na questão de design, e é justamente na interface homem máquina no momento de interação  que este ponto torna-se mais evidente.

O acelerômetro, assim como outros sensores, também são meios de input, mas neste blogpost focaremos principalmente na tela do device, pois este sempre será o meio mais comum de interagir com os dispositivos desta geração.

Basicamente, uma tela sensível ao toque comporta-se como uma interface que recebe interações com um mouse, com a diferença que o cursor não está visível. Lembrando que em devices com Windows Phone 7 podemos ter (no mínimo) até 4 toques simultâneos, o que aumenta drasticamente nossas possibilidades de interação.

Um pouco de conceito é sempre bem vindo mas vamos por a mão na massa!

A chave para interação com telas sensíveis ao toque com WP7 utilizando o XNA é uma classe chamada TouchPanel.

A classe TouchPanel possui uma propriedade muito interessante chamada MaximumTouchCount que representa o número de toques que a interface irá gerenciar.

Uma segunda classe chamada TouchCollection trata-se de uma coleção que será preenchida enquanto o TouchPanel estiver recebendo interações durante a execução do nosso game.

O TouchCollection possui uma propriedade State similar ao MouseState com valores para Pressed, Moved e Released.

Vamos testar, mas antes uma observação. A partir de agora não repetirei etapas como "abra o Visual Studio" , "crie um novo projeto escolhendo o template.." pois você já deve estar familiar a todo este processo ok? Somente citarei o que precisamos.

Aqui, precisamos que crie um projeto que faça um print na tela com qualquer texto. Utilizarei meu nome: Fernando Martin (sim, não me chamo Caverna)

 

 Public class Game1 : Microsoft.XNA.Framework.Game
{
GraphicsDeviceManager graphics;
SpriteBatch spriteBatch;
SpriteFont MoireBold24;
Vector2 position;
Vector2 size;
String text = “Fernando Martin”;

 

Já em LoadContent, inicialize nossa fonte e variáveis:

 protected override void LoadContent()
{
spriteBatch = new SpriteBatch(GraphicsDevice);
MoireBold24 = Content.Load<spriteFont>(“MoireBold24”);
Size = MoireBold24.MeasureString(text);
Viewport screen = GraphicsDevice.Viewport;
Position = new Vector2((screen.Width – size.x) / 2,
(screen.Height – size.Y / 2);

TouchPanel.EnabledGestures = GestureType.Tap | GestureType.Flick;

}

Simples, não? Não se preocupe tanto com a sintaxe. Procure principalmente entender a lógica e principalmente a responsabilidade do nosso código. Principalmente definimos uma fonte, carregamos na memória dentro do método apropriado do XNA e posicionamos o Sprite.

Agora, já que o assunto é Input, vamos instanciar nossa classe TouchCollection definindo um novo touchInput.

 protected override void Update(GameTime gameTime)
        {
            // Allows the game to exit
            if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
                this.Exit();

            //get state of touch inputs
            TouchCollection touchInput = TouchPanel.GetState();

            foreach (TouchLocation touch in touchInput)
            {
                position = new Vector2(touch.Position.X - size.X / 2, touch.Position.Y - size.Y / 2);

                base.Update(gameTime);

            }

 

Por fim, vamos usar o método Draw para "imprimir" nossa mensagem na tela.

 protected override void Draw(GameTime gameTime)

        {

            GraphicsDevice.Clear(Color.CornflowerBlue);
            spriteBatch.Begin();
            spriteBatch.DrawString(MoireBold24, text, position, Color.White);
            spriteBatch.End();
            base.Draw(gameTime);

        }

 

Fique atento ao detalhe de que você está usando um asset (item dentro do projeto Content) que é justamente um spritefont.

Sendo assim, não se esqueça de criar o MoireBold24.spritefont dentro do seu projeto Content.

 

Obviamente com as configurações apropriadas para o tipo de fonte que estamos utilizando em nosso projeto, a Moire Bold 24


 <?xml version="1.0" encoding="utf-8"?><br><!--<br>This file contains an xml description of a font, and will be read by the XNA<br>Framework Content Pipeline. Follow the comments to customize the appearance<br>of the font in your game, and to change the characters which are available to draw<br>with.<br>--><br><XnaContent xmlns:Graphics="Microsoft.Xna.Framework.Content.Pipeline.Graphics"><br>  <Asset Type="Graphics:FontDescription"><br>    <!--<br>    Modify this string to change the font that will be imported.<br>    --><br>    <FontName>moire</FontName><br>    <!--<br>    Size is a float value, measured in points. Modify this value to change<br>    the size of the font.<br>    --><br>    <Size>24</Size><br>    <!--<br>    Spacing is a float value, measured in pixels. Modify this value to change<br>    the amount of spacing in between characters.<br>    --><br>    <Spacing>0</Spacing><br>    <!--<br>    UseKerning controls the layout of the font. If this value is true, kerning information<br>    will be used when placing characters.<br>    --><br>    <UseKerning>true</UseKerning><br>    <!--<br>    Style controls the style of the font. Valid entries are "Regular", "Bold", "Italic",<br>    and "Bold, Italic", and are case sensitive.<br>    --><br>    <Style>Bold</Style><br>    <!--<br>    If you uncomment this line, the default character will be substituted if you draw<br>    or measure text that contains characters which were not included in the font.<br>    --><br>    <!-- <DefaultCharacter>*</DefaultCharacter> --><br>    <!--<br>    CharacterRegions control what letters are available in the font. Every<br>    character from Start to End will be built and made available for drawing. The<br>    default range is from 32, (ASCII space), to 126, ('~'), covering the basic Latin<br>    character set. The characters are ordered according to the Unicode standard.<br>    See the documentation for more information.<br>    --><br>    <CharacterRegions><br>      <CharacterRegion><br>        <Start>&#32;</Start><br>        <End>&#126;</End><br>      </CharacterRegion><br>    </CharacterRegions><br>  </Asset><br></XnaContent>

 

Agora nos resta rodar a aplicação e fazer alguns inputs em nosso TouchPanel e veja como na aplicação se comporta.

Como fazer inputs? Você ja sabe, através da tela sensível ao toque do Windows Phone 7

 

Dominar uma linguagem como C#, uma ferramenta como o Visual Studio (ou XNA Game Studio) ou um framework não acontecerá da noite para o dia ou após ler um post.

O importante aqui é permitir que com interesse e força de vontade você comece a dar seus passos no mundo do desenvolvimento de APPs e Games, e que sempre veja resultados mesmo em um prazo curto, o que nos tráz motivação Smiley

Se estiver se sentindo um pouco "perdido" em relação ao Windows Phone 7, também não se preocupe, mas acesse os posts abaixo, eles podem ser úteis Wink

 

Outros posts

Visão geral do MVA - entendendo o roteiro de Windows Phone

O Windows Mobile e o Windows Phone

Visão geral do Windows Phone 7.5 (codinome Mango)

Visão geral do conceito Metro

Visão geral do SDK do Windows Phone

Visão geral das ferramentas de desenvolvimento para Windows Phone

Visão geral do Emulador

Testando sua app no device

Criando Protótipos

O que é o Windows Phone Marketplace parte 1 - Publicando sua app no Marketplace

O que é o Windows Phone Marketplace parte 2 - Publicando sua app no Marketplace

Marketplace Test Kit

 

[]'s!