MC 06: Interação em Jogos Eletrônicos

(1)

XI ERBASE

MC06:

Interação em Jogos eletrônicos

(2)

XI ERBASE MC 06: Interação em Jogos Eletrônicos

2 Roteiro

●

Parte I: Interface Homem Computador e jogos

eletrônicos

●

Parte II: Como o Wiimote funciona

●

Parte III: Projetos

(3)

3 Objetivo geral

●

Capacitar o público a utilizar o Wiimote como

(4)

4 Objetivos específicos

●

Apresentar conceitos de IHC e programação

●

Descrever a evolução da interação na indústria

de jogos

●

Mostrar os detalhes de funcionamento e

utilização do Wiimote

●

Implementar um projeto de exemplo

●

Exibir possibilidades de projetos baseados no

(5)

5 Sobre os autores

●

Pedro Neves

●

Aluno do curso de Ciência da Computação (UFAL)

●

Membro do LAMP

●

Bolsista de Iniciação Tecnológica

●

Wellington Batalha

●

Aluno do curso de Ciência da Computação (UFAL)

●

Membro do LAMP

(6)

6 Sobre os autores

●

Alexandre Barbosa

●

Bacharel em Ciência da Computação (UFAL)

●

Mestre em Ciência da Computação (UFCG)

●

Professor Assistente I na UFAL Arapiraca

–

_{Coordenador do L.A.M.P, L.E.C.C e G.E.D.A.I}

●

Áreas de atuação:

–

_{Engenharia de Software}

(7)

7 Sobre os autores

(8)

8 Sobre os autores

●

E...

(9)

9 Sobre vocês...

●

IES...?

●

Programação...?

(10)

10 Parte I

Interface Homem

Computador (IHC)

e

(11)

11 IHC e Jogos

O sistema ideal

“The ideal system so buries the technology that the user

is not even aware of its presence. The goal is to let

people get on their activities, with the technology

enhancing their productivity, their power, and their

enjoyment, ever the more so because it is invisible, out of

sight, out of mind. ”

(12)

12 IHC e Jogos

(13)

13 IHC e Jogos

O que é interface?

“uma interface é uma superfície de contato que reflete as

propriedades físicas das partes que interagem, as funções a

serem executadas e o balanço entre poder e controle”

(14)

14 IHC e Jogos

O que é interface?

(15)

15 IHC e Jogos

(16)

16 IHC e Jogos

O que é IHC?

“IHC é a disciplina preocupada com o design, avaliação e

implementação de sistemas computacionais interativos para

uso humano e com o estudo dos principais fenômenos ao redor

deles”

(17)

17 IHC e Jogos

O que é IHC?

IHC

Computação Engenharias Sociologia Psicologia Design Inteligência artificial Ergonomia Linguística

(18)

18 IHC e Jogos

IHC e a computação

●

Desenvolvimento de software

●

explorar maneiras para melhorar a representação

da informação e a captura de dados

●

Desenvolvimento de hardware

●

buscar alternativas de dispositivos de interação (ex.

(19)

19 IHC e Jogos

●

Disciplina de IHC na computação:

●

apenas uma disciplina obrigatória na área de IHC;

●

apenas uma disciplina eletiva na área de IHC;

●

tópicos de IHC em disciplinas de Engenharia de

Software;

●

uma disciplina básica obrigatória de IHC seguida

por disciplinas eletivas na área;

●

disciplinas da área a serem efetuadas pelos alunos

que escolherem ênfase em IHC.

(20)

20 IHC e Jogos

(21)

21 IHC e Jogos

(22)

22 IHC e Jogos

Engenheiro de software Engenheiro de civil

(23)

23 IHC e Jogos

Engenheiro de software Engenheiro de civil

- Preocupa-se com estrutura - Preocupa-se com manutenção

- Preocupa-se com qualidade do código - ...

- Preocupa-se com estrutura - Preocupa-se com manutenção

- Preocupa-se com qualidade de materiais - ...

Engenheiro de interação Arquiteto

- Preocupa-se com design

- Preocupa-se com o modo como as pessoas utilizarão o sistema

- ...

- Preocupa-se com design

- Preocupa-se com o modo como as pessoas utilizarão o ambiente

(24)

24 IHC e Jogos

●

Por que IHC é importante para computação?

●

Para poupar tempo...

●

Por que o que o usuário usa é a interface...

●

Mudanças custam caro...

(25)

25 IHC e Jogos

(26)

26 IHC e Jogos

Por que o que o usuário usa é a interface

(27)

27 IHC e Jogos

(28)

28 IHC e Jogos

IHC – Processo de design de interface

●

Projeto de interface com o usuário é parte do

projeto de software

●

O processo de design da interface passa

tipicamente por três atividades:

●

Análise de usuário

●

Prototipação de sistema

(29)

29 IHC e Jogos

●

Análise de usuário

●

listar tarefas e as interações com o usuário

●

Prototipação de sistema

●

Especificar protótipos para facilitar a compreensão

do usuário sobre como executará as tarefas

●

Avaliação de interface

●

coletar informações sobre a experiência do usuário

(30)

30 IHC e Jogos

●

Para o projeto de UI devem ser considerados:

●

Fatores humanos (Ergonomia)

●

Princípios de projeto de interface

(31)

31 IHC e Jogos

IHC – Fatores humanos

●

Características do homem como processador

de informações:

●

Memória;

●

Resolução de problemas;

●

Percepção;

(32)

32 IHC e Jogos

●

Memória:

●

Pessoas tem memória limitada. Não podemos

lembrar instantaneamente de 7 (+ou- 2) itens de

informação

●

Recomendação: Não apresente ao usuário grandes

(33)

33 IHC e Jogos

●

Resolução de problemas:

●

Pessoas cometem erros. Eventualmente um

usuário irá cometer um erro, e esta taxa tende a

aumentar sob estresse

●

Recomendações:

–

_{Forneça mensagens de erro úteis ao usuário;}

–

Possibilite retorno a um estado correto;

(34)

34 IHC e Jogos

(35)

35 IHC e Jogos

(36)

36 IHC e Jogos

(37)

37 IHC e Jogos

●

Percepção e Habilidades motoras:

●

Pessoas possuem diferentes níveis de percepção

(cor, profundidade, som, …) e diferentes

capacidades motoras.

●

Recomendações:

–

_{Projete considerando a média geral dos}

usuários

_;

–

Não projete para você;

(38)

38 IHC e Jogos

IHC – Princípios de projeto de interface

●

Ergomonia é a base para os princípios de projeto

de interface

●

Estes princípios são gerais e servem para

diversos tipos de interface

●

Alguns dos princípios de projeto de interface são:

●

Familiaridade com o usuário

●

Consistência

●

Mínimo de surpresa

(39)

39 IHC e Jogos

●

Familiaridade com o usuário

●

Devem ser utilizados termos e representações

(40)

40 IHC e Jogos

(41)

41 IHC e Jogos

●

Consistência

●

Operações semelhantes devem ser ativadas da

mesma maneira

Consistência: clique vira a carta em qualquer um dos estados Verso

Frente Clique

(42)

42 IHC e Jogos

●

Mínimo de surpresa

●

Ações semelhantes devem ter efeitos equivalentes

Ganhar e perder pontos.

(43)

43

+1

IHC e Jogos

●

Facilidade de recuperação

●

Deve-se incluir mecanismos que permitam ao

usuário recuperação a partir de erros.

+1

-2

(44)

44 IHC e Jogos

IHC – Meios de interação do usuário

●

Duas questões aparecem ao se projetar uma

interface com o usuário:

●

Como as informações podem, a partir do usuário,

ser fornecidas ao sistema de computador?

●

Como as informações do computador podem ser

(45)

45 IHC e Jogos

●

Estilos de interação:

●

Manipulação direta;

●

Seleção de menu;

●

Preenchimento de formulários;

●

Linguagens de comandos;

●

Linguagem natural.

(46)

46 IHC e Jogos

(47)

47 IHC e Jogos

(48)

48 IHC e Jogos

(49)

49 IHC e Jogos

(50)

50 IHC e Jogos

Usabilidade

Atributos de aceitabilidade de um sistema (Adaptado de Nielsen, 1993)

Aceitabilidade do sistema Aceitabilidade prática Aceitabilidade social

Custo, confiabilidade, compatibilidade, ... Utilidade

Usabilidade

Fácil de aprender Eficiente

(51)

51 IHC e Jogos

Usabilidade

●

Qualidade de software

●

Normas ISO 9126 / NBR 13596

–

_{Funcionalidade (satisfaz as necessidades?)}

–

_{Confiabilidade ( é imune a falhas?)}

–

Usabilidade ( é fácil de usar?)

–

_{Eficiência (é rápido e “enxuto”?)}

–

_{Manutenibilidade (é fácil de modificar?)}

(52)

52 IHC e Jogos

(53)

53 IHC e Jogos

●

Um ou alguns minicursos seriam necessários

para descrever detalhadamente as atividades

de design de interface

●

Como bibliografia sobre

(54)

54 IHC e Jogos

(55)

55 IHC e Jogos

Consoles

●

1ª e 2ª Geração(?) - Atari

●

3ª Geração(8 bits) - Nintendo e MasterSystem

●

4ª Geração(16 bits) - SNes e MegaDrive

●

5ª Geração(32/64 bits) - PlayStation (PS)

●

6ª Geração(128 bits) - PS2, Xbox e GameCube

(56)

56 IHC e Jogos

Usabilidade em jogos eletrônicos

a) apertando botões

b) movendo o volante

c) n. d. a

(57)

57 IHC e Jogos

a)

apertando botões

b) movendo o volante

c) n. d. a

(58)

58 IHC e Jogos

a) apertando botões

b) movendo o volante

c) n. d. a

(59)

59 IHC e Jogos

a) apertando botões

b)

movendo o volante

c) n. d. a

(60)

60 IHC e Jogos

a) apertando botões

b) movendo os braços

c) n. d. a

(61)

61 IHC e Jogos

a)

apertando botões

b) movendo os braços

c) n. d. a

(62)

62 IHC e Jogos

a) apertando botões

b) movendo os braços

c) n. d. a

(63)

63 IHC e Jogos

a) apertando botões

b)

movendo os braços

c) n. d. a

(64)

64 IHC e Jogos

a) apertando botões

b) movendo os braços

c) n. d. a

(65)

65 IHC e Jogos

a)

apertando botões

b) movendo os braços

c) n. d. a

(66)

66 IHC e Jogos

a) apertando botões

b) movendo os braços

c) n. d. a

(67)

67 IHC e Jogos

a)

Melhor que o Guga

b) Não sei jogar

c) n. d. a

(68)

68 IHC e Jogos

a)

Melhor que o Nadal

b) Não sei jogar

c) n. d. a

(69)

69 IHC e Jogos

a)

apertando botões

b)

movendo os braços

c)

n. d. a

(70)

70 IHC e Jogos

(71)

71 IHC e Jogos

Controle e jogo do Atari (1977)

(72)

72 IHC e Jogos

(73)

73 IHC e Jogos

Controle e jogo do Playstation

(74)

74 IHC e Jogos

Controle e jogo do Playstation

(75)

75 IHC e Jogos

(76)

76 IHC e Jogos

(77)

77 IHC e Jogos

(78)

78 IHC e Jogos

Apertando

ψ

ele pulava... por que agora ele escalou???

(79)

79 IHC e Jogos

(80)

80 IHC e Jogos

(81)

81 IHC e Jogos

Para usar o dragon puch super paper cut use …

◄▼► + ■

(82)

82 IHC e Jogos

Para usar o dragon puch super paper cut use …

◄▼► + ■

Calcule ∫ ∂x/∂y

♫ ¥

(83)

83 IHC e Jogos

7ª Geração - Interação

(84)

84 IHC e Jogos

(85)

85 IHC e Jogos

A Sony aderiu a revolução...

(86)

86 IHC e Jogos

(87)

87 IHC e Jogos

Microsoft aderiu a revolução...

(88)

88 IHC e Jogos

(89)

89 Parte II

(90)

90 Como o Wiimote funciona

O Wiimote

(91)

91 Como o Wiimote funciona

O Wiimote

Wiimote ou Wii Remote

(92)

92 Como o Wiimote funciona

O Wiimote

Wiimote ou Wii Remote

(93)

93 Como o Wiimote funciona

O Wiimote

(94)

94 Como o Wiimote funciona

O Wiimote

(95)

95 Como o Wiimote funciona

O Wiimote

(96)

96 Como o Wiimote funciona

O Wiimote

●

O Wiimote é o controle principal do console Wii

●

Controle auxiliar é chamado de “Nunchuck”

●

O Wiimote possui:

●

Câmera infravermelha, Acelerômetro e

Botões de ação

●

O Nunchuck possui um sensor:

(97)

97 Como o Wiimote funciona

O Wiimote

Wiimote por dentro

(98)

98 Como o Wiimote funciona

O Wiimote

(99)

99 Como o Wiimote funciona

O Wiimote

(100)

100 Como o Wiimote funciona

O Wiimote

(101)

101 Como o Wiimote funciona

O Wiimote

(102)

102 Como o Wiimote funciona

O Wiimote

(103)

103 Como o Wiimote funciona

O Wiimote

(104)

104 Como o Wiimote funciona

WmGUI

(105)

105 Como o Wiimote funciona

WmGUI

(106)

106 Como o Wiimote funciona

WmGUI

●

Instalando: WmGUI

(107)

107 Como o Wiimote funciona

Wiimote – Câmera infravermelha

●

Câmera

●

captura a luz infravermelha emitida por algum

(108)

108 Como o Wiimote funciona

Wiimote – Acelerômetro

●

Acelerômetro

●

permite obter

aceleração

em três eixos:

–

_{vertical (z)}

–

_{horizontal (x)}

(109)

109 Como o Wiimote funciona

Wiimote – Botões de ação

●

Botões de ação

●

ao pressionar um botão a identificação do botão é

enviada via bluetooth

●

Nossos projetos utilizarão:

●

Botões de ação

(110)

110 Como o Wiimote funciona

Ferramentas: Linguagem Java

(111)

111 Como o Wiimote funciona

// ...

public class WiiApp { // …

if (b.isButtonAJustReleased()) { System.out.println("A"); } // … } JVM JVM JVM JVM ?

(112)

112 Como o Wiimote funciona

●

Instalando: Java Developmente Kit (JDK)

$ sudo add-apt-repository ppa:sun-java-community-team/sun-java6

$ sudo add-apt-repository "deb http://archive.canonical.com/ maverick partner"

$ sudo apt-get update

$ sudo apt-get install sun-java6-bin sun-java6-jdk

(113)

113 Como o Wiimote funciona

Ferramentas: IDE Eclipse

●

Instalando: Eclipse

(114)

114 Como o Wiimote funciona

Preparando o ambiente

●

Criando um novo projeto

Utilizem os mesmos nomes dos exemplos, isso irá facilitar as

configurações posteriores.

(115)

115 Como o Wiimote funciona

Preparando o ambiente

(116)

116 Como o Wiimote funciona

Programação orientada a objetos com Java – Primeiro programa

●

Criando uma classe

Primeiro.java

package wiimoteapp.linguagemjava;

public class Primeiro {

public static void main(String[] args) {

System.out.println("Meu primeiro programa Java!"); }

(117)

117 Como o Wiimote funciona

Programação orientada a objetos com Java – Primeiro programa

●

Executando a classe no Eclipse

●

Saída esperada

Primeiro.java

Run > Run as... > Java Application

(118)

118 Como o Wiimote funciona

(119)

119 Como o Wiimote funciona

Programação orientada a objetos com Java – Classes e objetos

WiimoteApp

MemoriaApp TiroApp

(120)

120 Como o Wiimote funciona

Programação orientada a objetos com Java – WiimoteApp

WiimoteApp.java

package erbase;

public class WiimoteApp

extends JFrame implements WiimoteListener {

(121)

121 Como o Wiimote funciona

Programação orientada a objetos com Java – Eventos

●

Um evento pode ser descrito como qualquer

ação que ocorre entre o usuário e a aplicação

●

Pressionar teclas no teclado

●

Pressionar um botão na interface gráfica

●

Clicar o mouse

●

Java possui “

Listeners

” para capturar eventos

(122)

122 Como o Wiimote funciona

Programação orientada a objetos com Java – Eventos

Botão

Botão Me apertaram... Ouvinte 1...

(123)

123 Como o Wiimote funciona

Programação orientada a objetos com Java – WiimoteApp

IdentificartarWiimoteListener.java

package erbase;

public class ConectarWiimoteListener implements ActionListener {

}

package erbase;

public class IdentificartarWiimoteListener implements ActionListener {

}

(124)

124 Como o Wiimote funciona

Programação orientada a objetos com Java – API

(125)

125 Como o Wiimote funciona

Programação orientada a objetos com Java – API

●

“Componentes” são classes com funções

específicas que são utilizados em outros

programas (em Java são arquivos JAR)

●

Alguns exemplos de “componentes”:

●

iText – gerar pdf

●

Jfreechart – gerar gráficos

(126)

126 Como o Wiimote funciona

Preparando o ambiente – Hardware

(127)

127 Como o Wiimote funciona

Preparando o ambiente – Software

Software necessário: Eclipse e API WiiUseJ

(128)

128 Como o Wiimote funciona

Preparando o ambiente – Configurando a execução

1º Passo – Adicionar a API WiiUseJ

1.Copie o arquivo

wiiusej.jar

para pasta

lib

2.Clique direito sobre o arquivo

wiiusej.jar

3.Selecione no menu:

(129)

129 Como o Wiimote funciona

2º Passo – Copiar arquivos de sistema

1.Copie para raiz do projeto os arquivos:

●

libwiiuse.so

(130)

130 Como o Wiimote funciona

3º Passo - Configurar parâmetros de execução

1.No menu

2. Na aba

3. Adicione o parâmetro para JVM no projeto

Run > Run configurations

Arguments > VM Arguments

-Djava.library.path=/home/alexandre/workspace/ensino/ErbaseGame Os trechos em azul devem ser

(131)

131 Como o Wiimote funciona

(132)

132 Como o Wiimote funciona

3º Passo - Configurar parâmetros de execução

1. Na aba

2. Selecione o botão

3. Crie a variável

Environment (… ainda na tela “Run configurations...”)

Name: LD_LIBRARY_PATH

Value: /home/alexandre/workspace/ensino/ErbaseGame

(133)

133 Como o Wiimote funciona

(134)

134 Como o Wiimote funciona

4º Passo – Link de arquivos com a aplicação

1.No terminal execute

$ ln -s /usr/lib/libbluetooth.so.3

/home/alexandre/workspace/ensino/ErbaseGame/libbluetooth.so.2

Todo o comando na mesma linha...

No projeto fornecido execute

(135)

135 Como o Wiimote funciona

Todas as classes que precisam se comunicar com o Wiimote devem passar por esta configuração

(136)

136 Como o Wiimote funciona

●

Para capturar eventos dos botões

●

Para capturar eventos do acelerômetro

●

Outros eventos não serão citados...

public void onButtonsEvent(WiimoteButtonsEvent b)

(137)

137 Como o Wiimote funciona

●

Para cada botão são fornecidos métodos

isButton?JustPressed()

isButton?JustReleased()

isButton?Held()

isButton?Pressed()

Onde “?” Representa o nome do botão.

(138)

138 Como o Wiimote funciona

Projetos – Jogo da memória

(139)

139 Como o Wiimote funciona

Projetos – Jogo da memória

(140)

140 Parte III

(141)

141 Projetos

(142)

142 Projetos

Memória

0 1 2 3

4 5 6 7

8 9 10 11

12 13 14 15

(143)

143 Projetos

Memória

Movimentação

0 1 2 3

4 5 6 7

8 9 10 11

12 13 14 15 Posição + 4

Posição - 4

(144)

144 Projetos

Memória

Primeiro clique (jogada1) e segundo clique (jogada2)

Verso Frente

(145)

145 Projetos

Memória

Posicionamento aleatório

[ ] [ ]...[ ]

0 1 7 8 9 15

[ ] [ ]...[ ]

0 1 2 3

4 5 6 7

8 9 10 11

(146)

146 Projetos

Memória

Posicionamento aleatório

[ ] [ ]...[ ]

0 1 7 8 9 15

[ ] [ ]...[ ]

0 1 2 3

4 5 6 7

8 9 10 11

12 13 14 15

(147)

147

[ ] ...[ ]

Projetos

Memória Posicionamento aleatório

[ ] [ ]...[ ]

0 1 7 8 14

0 1 2 3

4 5 6 7

10

9 11

(148)

148 Projetos

(149)

149 Projetos

(150)

150 Projetos

Tiro ao alvo

(151)

151 Projetos

Tiro ao alvo

(152)

152 Projetos

Tiro ao alvo

(153)

153 Projetos

Tiro ao alvo

(154)

154 Projetos

Tiro ao alvo

Robot

0 10 20 30 40 50

(155)

155 Projetos

Tiro ao alvo

Robot

0 10 20 30 40 50

(156)

156 Projetos

Tiro ao alvo

Robot

0 10 20 30 40 50

(157)

157 Projetos

Tiro ao alvo

Calibrar

0 10 20 30 40 50

(158)

158 Projetos

(159)

159 Parte IV

(160)

160 Inspire-se...

Wii WhiteBoard

(161)

161 Inspire-se...

Air Hockey

(162)

162 Inspire-se...

Outros projetos

●

Na web existem muitos outros projetos

●

Wii Projects

de Jonnhy Chung Lee (Referências)

●

Vídeos em:

Wiimote Hack

(Referências)

●

Projeto para substituir o mouse em:

HOWTO: Use

the Wii-Mote In Windows as your Mouse

(163)

163 Agradecimentos

(164)

164 Referências

●

Heloísa da Rocha & Mª Cecília Baranauskas

Design e Avaliação de Interfaces

1ª ed., Nied-UNICAMP, 2003.

●

SOMMERVILLE, I..

Engenharia de Software.

(165)

165 Referências

●

Roger S. PRESSMAN,

Engenharia de Software

.

6ª ed., McGraw-Hill, 2006.

●

Jacob Nielsen,

Usability Engineering

.

(166)

166 Referências

●

Shneiderman, B.

Designing the user interface

.

(167)

167 Referências

●

Guilhem Duche

Wiiusej - Java API for Wiimotes

Disponível em: http://code.google.com/p/wiiusej/

●

Luiz Gustavo

Jogo da Memória em Java

(168)

168 Referências

●

Johnny Chung Lee

Wii Projects

Disponível em: johnnylee.net/projects/wii/

●

Artur Miglio

Wiimote Hack

Disponível em: blog.seteoitavos.com/2008_01_01_archive.html

●

LiquidIce

Use the Wii-Mote In Windows as your Mouse

(169)

XI ERBASE

MC 06: Interação em Jogos Eletrônicos

Obrigado pela

atenção!

CONTATO