Conteúdo principal
Curso: Programação > Unidade 4
Lição 2: Gerenciamento de cenaCenas animadas
Vimos como criar várias cenas simples – mas nossas cenas eram o que chamamos de "estáticas" – elas não eram animadas, nem tinham qualquer resposta à interação do usuário. Como vamos ver, é preciso um pouco mais de sutileza para lidar com cenas mais sofisticadas. Mas, vamos lá!
Vamos falar primeiro sobre animação. E se quiséssemos mostrar o Winston em sua fase como astro de rock, arrebentando na bateria? Normalmente faríamos isso definindo a função
draw para que ela contenha um código que desenha as formas que mudam um pouco de posição a cada quadro. Aqui está um exemplo, no qual a posição das mãos na bateria é baseada no valor atual de millis(), o número de milissegundos passados:E se adicionássemos essa cena como a quarta do nosso exemplo anterior? Vamos mover o código para uma função
drawScene4() e modificar a lógica de mouseClicked.var drawScene4 = function() {
currentScene = 4;
background(194, 255, 222);
var x = cos(millis()*1);
var y = cos(millis()+98);
...
};
mouseClicked = function() {
if (currentScene === 1) {
drawScene2();
} else if (currentScene === 2) {
drawScene3();
} else if (currentScene === 3) {
drawScene4();
} else if (currentScene === 4) {
drawScene1();
}
};Experimente - clique algumas vezes:
Percebeu alguma coisa? Funcionou, mas não perfeitamente. Pudemos ver Winston e sua bateria, mas suas baquetas não estavam se movendo. Que triste! É difícil tocar quando você está parado no tempo. Talvez você já tenha percebido o problema: não estamos mais chamando o código de desenho das baquetas de dentro da função
draw(), então ela só é chamado uma vez – não repetidamente – e, portanto, renderizando as baquetas somente no momento em que o código é chamado primeiro. Talvez você já tenha pensado na solução: definir uma função draw() e chamar drawScene4() no momento oportuno.draw = function() {
if (currentScene === 4) {
drawScene4();
}
};Vamos pensar um pouco: sempre que definirmos uma função
draw() em nosso código, ela vai ser chamada repetidamente (em 60 quadros por segundo como padrão), e sempre que ela for chamada, quando a cena atual já estiver definida como a cena 4, ela vai chamar a função para desenhar a cena 4. Quando for qualquer outro valor, ela não vai tentar desenhar nada – mantendo o que já estava na tela. Ainda precisamos desenhar a cena inicial em mouseClicked, essa lógica cuida de animar todos os quadros posteriores.Alguns de vocês devem estar pensando: por que simplesmente não temos uma lógica que chama todas as funções de desenhar cenas dentro de
draw()? Bem, isso com certeza poderia ser feito, e significaria que se você adicionasse animação para as outras cenas, então elas iriam funcionar imediatamente. Mas considerando que você não vai animar as outras cenas, isso significa que você vai fazer o computador redesenhar todas essas cenas repetidamente sem razão alguma. Da perspectiva do desempenho, isso não é bom. Se nós sabemos como evitar que o computador trabalhe desnecessariamente, devemos fazer isso. Isso irá deixar nossos programas mais rápidos e nossos usuários mais felizes.Certo, agora que já discutimos tudo isso, aqui está a história em toda sua glória animada e clicável. Você quase pode ouvir as batidas vindas da cena 4!
Quer participar da conversa?
alguém sabe como baixar a biblioteca processing JV?(2 votos)
Algumas funções podem ter parametros diferentes daqui pois o khan academy utiliza uma versão mais antiga do processing eu acredito.
http://processingjs.org(4 votos)
pessoal não consigo terminar a segunda etapa do desafio contador de historias(2 votos)
Qual sua duvida?
Revise o código, eu estava com problema no começo, e percebi que simplesmente não estava incrementando as cenas no começo do código ...(3 votos)
Na introdução ao JavaScript tudo era tão bem explicado, o método de ensino facilitava muito, eles jogaram esse millis() e nem explicaram como funciona, e cade os desafios para usar esse millis? não foi ensinado como ele funciona... A não ser que eles não queiram que aprendamos agora, não sei, vou continuar o curso para ver o que vem pela frente.(3 votos)- no desafio contador de historias
as imagem nao conrrespodem coloquei tudo certo e tal
ate mesmo coloquei getImage para procurar a muda e as outras que estavam pedindo e nada(2 votos)
//images of Leafers
var seed= getImage("avatars/leafers-seed");
var seedling= getImage("avatars/leafers-seedling");
var sapling= getImage("avatars/leafers-sapling");
var tree= getImage("avatars/leafers-tree");
var ultimate = getImage("avatars/leafers-ultimate");
seed, seedling, sapling , tree, ultimate, usou essas cindo imagens e não deu certo?(2 votos)
estou com uma duvida, porque, por exemplo, há variáveis que se eu colocar dentro da função "draw", não deixarão a animação funcionar corretamente, porém eu quero que elas estejam dentro da mesma cena do que essa animação.
como vou fazer para que uma parte fique dentro da função "draw" e outra parte não de uma mesma cena? Considerando que se eu colocar botões dentro da função "draw" não irão funcionar ao chamar a função "mouseClicked", ou algo do tipo.(2 votos)
Tá tudo em inglês.Como boto o texto em português?(1 voto)
o que e isso na tela do meu computador(0 votos)
Não conseguia mudar as images no desafio contador de historias.Sempre aparecia a mesma semente, como soluciono o problema?(0 votos)