Blog Post

Entendendo o User Input no Windows Phone 7 com XNA

Sign in to queue

Description

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.

Generic Episode Image

 

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"?>
<!--
This file contains an xml description of a font, and will be read by the XNA
Framework Content Pipeline. Follow the comments to customize the appearance
of the font in your game, and to change the characters which are available to draw
with.
-->
<XnaContent xmlns:Graphics="Microsoft.Xna.Framework.Content.Pipeline.Graphics">
  <Asset Type="Graphics:FontDescription">

    <!--
    Modify this string to change the font that will be imported.
    -->
    <FontName>moire</FontName>

    <!--
    Size is a float value, measured in points. Modify this value to change
    the size of the font.
    -->
    <Size>24</Size>

    <!--
    Spacing is a float value, measured in pixels. Modify this value to change
    the amount of spacing in between characters.
    -->
    <Spacing>0</Spacing>

    <!--
    UseKerning controls the layout of the font. If this value is true, kerning information
    will be used when placing characters.
    -->
    <UseKerning>true</UseKerning>

    <!--
    Style controls the style of the font. Valid entries are "Regular", "Bold", "Italic",
    and "Bold, Italic", and are case sensitive.
    -->
    <Style>Bold</Style>

    <!--
    If you uncomment this line, the default character will be substituted if you draw
    or measure text that contains characters which were not included in the font.
    -->
    <!-- <DefaultCharacter>*</DefaultCharacter> -->

    <!--
    CharacterRegions control what letters are available in the font. Every
    character from Start to End will be built and made available for drawing. The
    default range is from 32, (ASCII space), to 126, ('~'), covering the basic Latin
    character set. The characters are ordered according to the Unicode standard.
    See the documentation for more information.
    -->
    <CharacterRegions>
      <CharacterRegion>
        <Start>&#32;</Start>
        <End>&#126;</End>
      </CharacterRegion>
    </CharacterRegions>
  </Asset>
</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

Generic Episode Image

 

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!

The Discussion

  • User profile image
    Felipe Rafael

    Bom Dia Caverna; tem como disponibilizar o arquivo para download? Por que não sei onde estou errando , aparentemente estou fazendo tudo certo mais não consigo compilar o projeto, sempre acontece um erro.
    Valeu, Estou gostando muito da academia "Windows Phone 7 Game Programming" do MVA ;Parabéns.
    Desde já Obrigado.

  • User profile image
    Adilson Carvalho

    Ta rodando suave até o momento!

  • User profile image
    Terra Jr

    Poste aqui o erro, pra gente ver! :)

    Possivelmente você deve ter colocado algum fragmento (parte) de um código proposto em local errado, ou informou algum nome errado o próprio arquivo (SpriteFont) que nesse caso chama-se MoireBold24....

  • User profile image
    wendel tade

    estou com o problema que o vs aponta um erro em na linha abaixo no sinal de - :

    Position = new Vector2((screen.width – Size.X) / 2,(screen.Height – Size.Y / 2));

    status do erro:

    Unexpected charater ' - '
    Invalid Expression Term

  • User profile image
    Ademilson

    Opa Wendel. Não sei se já resolveu o problema, mas caso ainda não, seguinte:
    Provavelmente vc copiou e colou o código desta página, pois fiz isto e tive os erros que vc mencionou. O problema é no método LoadContent, pois saiu variáveis ali com a letra inicial maiúscula, sendo que é minúscula. Além de problemas com as aspas "", que no meu PC está diferente destas do site.
    Neste trecho que vc postou, eu tive problemas com size.x (o certo é size.X), a variável Position (que na verdade é position) e o sinal de "-" que aqui era um hífen. Basta trocar isso e deverá funcionar.

  • User profile image
    Guilhermerba

    Ao inves de colocar o codigo no Load eu coloquei no Unload, Mas ja ta tudo certo rsrs

  • User profile image
    Rodrigo

    Gostaria de saber para que realmente serve a linha "TouchPanel.EnabledGestures = GestureType.Tap | GestureType.Flick;"
    Pois pensando que ela fosse responsável pelo jeito do toque, porém sem ela nada interfere na aplicação.

  • User profile image
    Kira

    Oie, bem legal o resultado final, mas eu conheço pouco de linguagem C#, pois ja ive um pouco na facul, mas não entendi pq se usa 2 sprite fonte com nomes diferentes. Qual a diferença do SpriteFont1 pro MoireBold24??

Add Your 2 Cents