Mostrando postagens com marcador Layout. Mostrar todas as postagens
Mostrando postagens com marcador Layout. Mostrar todas as postagens

sábado, 30 de maio de 2015

Primeiros testes no JavaScript


Antes de partirmos para a programação do jogo especificamente, nós fizemos alguns testes avulsos para aprender mais sobre a biblioteca CreateJS e sobre o que poderíamos fazer, tanto em questão de dinâmica como em questão de visual.

Ainda não descobrimos como executar uma aplicação JavaScript direto aqui no blog, por isso disponibilizamos a pasta todos os arquivos necessários. Para executar nossos testes, basta fazer o download da pasta e abrir o arquivo index.html no Firefox.

Testando o menu inicial.
Testando a tela principal do jogo.

sexta-feira, 29 de maio de 2015

Evolução do menu inicial (até o momento)

Uma das nossas dificuldades nesse projeto está sendo criar um menu inicial para o jogo. Em primeiro lugar, foi trabalhoso decidir o que haveria nesse menu; quando isso ficou decidido, partimos para um pequeno teste:

Nosso primeiro teste de menu
Esse menu foi apresentado no segundo checkpoint, mas apenas para mostrar quais itens estariam nele inseridos.

A partir daí, tratamos logo de iniciar testes com posicionamentos, fontes, símbolos, botões, cores, etc. Nesse ponto, a ajuda do professor Andrei foi crucial, orientando e aconselhando da melhor forma possível.

Os primeiros protótipos de menu foram bastante simples. Nele, posicionamos os itens de várias formas e testamos algumas cores sólidas, mas elas não pareciam nunca gerar uma sensação boa. Após várias tentativas, a organização da tela começa a fazer mais sentido:








Embora a tela estivesse muito melhor, não conseguíamos achar que ela estivesse adequada ao jogo. Foi neste momento que decidimos mudar completamente, pois o mapa não dá a ideia de jogo de investigação e não tem uma relação direta com o nome do jogo. No novo modelo, a principal mudança foi a retirada do mapa. Agora, a silhueta de um detetive compõe a tela de menu:



A ideia de ícones simplificando o menu permanece, mas cores, posicionamento de elementos e algumas características do nome do jogo foram alteradas: retirada da lupa e fonte. Tiramos a lupa, pois na silhueta já existe uma, então ficaria estranho outra lupa fazendo parte de "Jovem Detetive". A mudança da fonte também foi necessária, visto que o nome havia ficado muito simples.

Este ainda não é nosso menu finalizado, mas nosso avanço foi colossal. O professor Andrei e o monitor Eduardo Rodrigues já nos deram dicas e observações do que pode ser testado e melhorado. A perspectiva é de que em breve nosso menu esteja à altura de nosso projeto.

sábado, 23 de maio de 2015

Interface



      Os elementos fundamentais da tela são:

  • Bandeira do país em que o jogador se encontra;
  • Capital, país e localização dentro da cidade;
  • Tempo;
  • Caixa de diálogo;
  • Opções de menu;
      Baseado nisso, montamos o primeiro esboço do layout, que foi apresentado em nosso segundo check-point.




     Obs: nessa imagem, usamos o cenário de Phoenix Wright apenas para termos uma ideia de como ficaria a composição.


    Durante a apresentação, recebemos várias críticas e sugestões essenciais para melhorarmos a aparência do jogo. Uma delas foi enxugar a tela, explorando novas formas de distribuição dos elementos. A Julianne, integrante da equipe,  aperfeiçoou a tela de jogo e buscou orientação do grupo de pesquisadores de Game Design, PédeGDD. O resultado foi uma tela muito mais limpa, funcional e bonita.







    Alguns elementos foram adicionados e outros aperfeiçoados.

    A primeira mudança que fez total diferença foi a uniformização dos botões. Antes, os elementos do menu tinham forma retangular e eram agrupados em um retângulo maior, outros eram grandes e arredondados. Neste novo modelo, tudo que for clicável segue o mesmo padrão: botões redondos e brancos.
    Outra mudança significativa foi a disposição dos elementos, que antes eram agrupados na parte superior da tela, enquanto que embaixo ficava somente a caixa de diálogo. 
   Após várias tentativas de distribuição dos ícones, chegamos a melhor solução encontrada: ícones de menu alinhados na vertical à direita da tela, opção de menu menor e separado dos outros, obedecendo a regra de hierarquia, e na parte superior, perfil e localização.
    Além disso, os elementos recebem ícones específicos que, ao passar o mouse sobre eles, o seu respectivo nome aparece:





    A localização do personagem não tem mais tanto destaque e não aparece durante todo o jogo. Ao chegar em determinado lugar ou passar o mouse por cima da bandeira, a localização abre e, após alguns segundos, ela desaparece. 
    Essa localização fica à direita da tela, junto à bandeira. Do outro lado, temos agora o "perfil" do detetive, que informa o seu nome, quantidade de medalhas e qual brasão ele tem no momento. O brasão é clicável, portanto, segue o mesmo padrão de botão do menu.

    Nessa imagem, mostramos também nossa proposta de composição do cenário do fundo. Tudo baseado no visual do jogo Phoenix Wright, temos o ambiente mais trabalhado, enquanto o personagem tem traços definidos.

Brasil - Biblioteca



                                                                  México - Biblioteca 


Chile - Biblioteca




 Chile - Museu




Brasil - Mercado




Chile - Mercado