terça-feira, 3 de agosto de 2010

Not Tetris

Bom dia pessoal, desculpa o atraso para postar coisas novas!
Bom, ontem, ou anteontem, não me lembro, tava tranqüilo na internet, até que meu amigo Marcelo me mandou um link com o título no mínimo curioso: Not Tetris
Como assim???? Não tetris???
Como a gente sabe que, quando um jogo se diz não-alguma coisa, significa que ele tem tudo a ver com essa mesma coisa, demorei um dia, mas fui conferir o que era.
E olha isso, cara!

http://screwattack.com/videos/Not-Tetris-Gameplay-Trailer-2

Tetris com física!!! Admitamos, por mais lindo que seja, Tetris devia ser assim, não do jeito bonitinho que a gente jogava há um tempo atrás (...ontem, né? Porque Tetris não morre!!!)


Olha, o jogo tem 3 megas e meio, pequenininho para os padrões atuais, e você pode baixar ele aqui http://www.baixaki.com.br/download/not-tetris.htm

No mais, não há mais, aproveitem!

terça-feira, 15 de junho de 2010

Agora sim, tutorial FLASH pt. 1

Bom, perdoem-me pela gafe de ontem, quando estava prestes a escrever meu tutorial e flash, tive que sair às pressas do computador. Mas fiquem tranqüilos, tá tudo certo, cá estou eu de novo para ensinar (a quem interessar possa) essa ferra
menta fantástica (e obsoleta? será?) , Adobe Flash!
Eu vou ensinar desde o básico do básico (abrir o programa, usar a seta preta, coisas assim), até a fazer animações desse nível: www.wlideias.com . E, obvio, com treino, superar isso é fichinha.
No decorrer das aulas, posso vir a ensinar outros programas, como o Illustrator e o After Effects, que não serão necessariamente obrigatórios, mas que nos ajudarão bastante (o primeiro, pela maior capacidade na hora dos desenhos, e o segundo, para facilitar as animações).
Mas sim, sem mais delongas, comecemos nossa

AULA 01: Familiarização com a interface, termos técnicos, ferramentas, e desenho básico.

Ok, vamos lá. Como tudo tem que começar de algum lugar, vamos começar abrindo o programa. Nós utilizaremos o Adobe Flash CS4, mas boa parte do que você aprender aqui poderá ser usado no CS3 ou anteriores, e no CS5, que acaba de chegar.
(É, esse tutorial vai ser bem no estilo "for dummies", mas logo isso será desnecessário)

Cá estamos nós, com o programa aberto:
Vamos gerar um arquivo .fla que utilize o action script 2.0 por enquanto (afinal, pra ensinar o AS3.0, primeiro eu tenho que aprendê-lo xD). E cá estamos nós, com o programa inteiro à nossa disposição:
Está é a janela do flash CS4! Tá-rá! Quem conheceu os anteriores, deve ter notado algumas diferenças, mas esta parte do tutorial é voltada para iniciantes, portanto, vamos lá. A barra estranha, cheia de quadradinhos embaixo, é a TIMELINE, ou linha de tempo. É a partir dela que você fará suas futuras animações, e até mesmo a esquematização de sites. apesar do nome sugestivo, não necessariamente você a utilizará como um regulador de tempo. Portanto, abra sua mente desde já. A Timeline é composta por frames (molduras, ou quadros), que alterarão seu formato de acordo com seu conteúdo. Um frame totalmente vazio (branco ou cinza) não está incluso na parte utilizada da timeline AINDA. Um frame com uma bolinha vazia (ou keyframes vazio, explicarei em aulas mais à frente) indica um keyframe utilizado na timeline, mas que está vazio. Um desses com a bolinha cheia, indica a presença de conteúdo. Frames "esticados" indicam a transição entre keyframes. Tudo isso será explicado mais à frente.
No topo, estão os menus. falar sobre todos eles levaria muito tempo, e a algumas informações incorretas, portanto o utilizaremos no decorrer das aulas, e sem perceber, você estará explorando o mesmo sem problemas.
Porém, o mais interessante mesmo está na direita (antigamente, estaria na parte debaixo/esquerda da tela), que são as barras de propriedades, biblioteca, cenas, e barras de ferramentas. O conhecimento delas é essencial para se trabalhar no flash, então a maior parte dessa aula será a sua explicação. Mas primeiro, vamos ampliar nossa janela do flash. Por garantia, clique na área de trabalho (a parte cinza com uma "folha" branca no meio), em qualquer lugar (uma vez que a mesma está vazia). Na aba Proprieties, subseção Proprieties, clique em Edit, e aparecerá a seguinte janela:
Essa é uma janela extremamente simples e útil. Ela informa a frame rate do projeto, a cor do fundo, as dimensões do seu documento, e a unidade de medida deles. Vamos configura-la do seguinte modo:
Em width, ponha 1024, e em height, 768. Essas são, respectivamente, largura e altura do documento. Nos vamos ter agora um documento de tamanho bem avantajado, mas que servirá bem pra aula de hoje. Lembre-se que trabalhos em flash costumam ser pesados, então nem sempre é vantagem uma area muito grande, ainda mais quando você quer fazer apenas um banner.
Em Match, ponha Default.
Em Background color, ponha branco. Lembre-se que a cor do fundo é a mesma em todos os frames e todas as cenas de um mesmo projeto, na hora de alterar essa cor.
Em frame rate, ponha 30. Aqui vale uma pequena explicação: a taxa de Quadros Por Segundo (Frames Per Second, FPS) é a taxa de quadros (ou frames - e sim, me refiro àqueles da timeline logo ali, embaixo) que será reproduzida a cada segundo, quando seu arquivo for posto pra rodar. O olho humano possui uma taxa de assimilação de 24 fps. O que significa que, em taxas abaixo desse valor, já é possível ver os frames separadamente. Isso não é vantagem - acredito que todos aqui já assistiram videos de baixa qualidade na internet que, ao invés de possuir uma movimentação fluída, parece mais um slideshow, de tão travado. Nossos olhos rejeitam esse tipo de coisa, mas consideram transições de imagens com taxa superior à 24 fps uma animação normal.
Isso acontece graças à uma característica dos nossos cérebros/ globos oculares, que se chama persistência da visão. Isso faz com que a gente grave as ultimas imagens reproduzidas enquanto vê as originais, e as mescle em uma coisa só. Baixos FPSs não permitem que isso aconteça, por isso o incomodo. Em contrapartida, câmeras que captem 120 fps são tão impressionantes que, além de reproduzir videos em velocidade normal, elas podem torna-los mais lentos, e ainda assim respeitar a persistência da visão. Incrível, não? Quero uma dessa de aniversário.
Para nossos trabalhos, utilizaremos 30 fps, por questão de garantia.
Em ruler units, deixe pixels mesmo. Umas vez que utilizaremos só imagens RGB*, e não visamos impressão, é desnecessário utilizar outra unidade e medida.

Com tudo isso pronto, o-oh, a area de trabalho ficou maior do que a area exibida!
Na real? isso não é problema nenhum. Você pode usar os comandos ctrl + -, ctrl + + (zoom out, zoom in) para regular isso, ou ntão clicar na barrinha com m valor em pocentagem, no canto superior direito da workspace, e selecionar fit in windows (ajstar na janela)
Pronto, ja chega, né? Isso tudo você fará no automatico a partir de agora, vamos ao que interessa!
A toolbar (barra de ferramentas)!
Essa barra é sua amiga, goste dela! Ou aprenda seus atalhos, e nunca mais olhe pra ela, seu ingrato... As duas coisas são validas! Vamos de ferramenta em ferramenta.
A seta preta (cujo atalho é V), é a ferramente de seleção. Fala sério, dispensa explicações, mas vamos à elas. Você clica. Ela seleciona. TA-DÁ!
Viva a magia... Quando você clica com o botão direito usando ela, um submenu aparece. Se você seleciona algo e o arasta usando ela, vc muda esse objeto de posição. Se você apertar alt e arrastar, você duplicará o objeto. Fala sério, é uma ferramenta muito boba! por que considera-la ferramenta? Muito simples: pra você não sujar todo o seu trabalho só querendo mudar uma imagem de posição, simples assim. Afinal de contas, você precisa do sue mouse.
A seta branca (ferramenta de subsseleção, A) é uma seta preta com esteróides. Você não selecionará objetos com ela. Selecionará PARTES de objetos! Pense nas possibilidades! Não pensou? Cara, você pensa pequeno... Isso significa que você pode manipular cada linha, cada ponto, cada ancora de um objeto, mesmo que eles estejam dentro de um grupo! ...Ah, fala sério, é empolgante. Você usará muito essa aqui, mas ela nunca substituirá a seta preta.
Alguns dirão que a ferramenta de transformação livre (Q) é uma seta preta mais útil. Eles estarão certos. Além de selecionar objetos, ela mostra alças de deformação a esses objetos, para que você possa escaloná-los. E, se você clicar nas linhas entre as alças, você pode deformar um objeto com relação à uma das linhas marginais do mesmo. É muito útil. Se quiser manter a proporção, aperte shift enquanto deforma.
Os mais atentos repararam que muitas ferramentas possuem setinhas pretas no canto inferior direito de seus icones. Isso que dizer que, naquela categoria de ferramentas, existem mais ferramentas! Vamos abrir a da free transform pra ver o que aparece:
Alem da propria free transform, fica evidenciada a Gradient Transform Tool (g). Essa ferramenta permite mais controle nos gradientes das imagens que você gerar. Em tempo, gradiente, ou degradê, é o efeito gerado pela interpolação de cores. Ou seja, você põe amarelo de um lado, vermelho do outro, e vai misturando as cores gradativamente. O laranja resultante estará em degradê.
A 3D rotation e 3D translation não serão abordadas aqui. Quem sabe no futuro. São ferramentas promissoras.
A lasso tool é uma seta branca com esteroides. Enquanto a seta branca te permite selecionar partes de objetos, como nós, ancoras ou linhas, a ferramenta laço seleciona todos os objetos dentro da area desenhada por ela. Muito util no Illustrator e Photohop, aqui, nem tanto.

A pen tool (P) é uma das ferramentas mais legais de todas. Ela te permite desenhar figuras com liberdade, com o entanto que você tenha paciencia e destreza com ela. É, provavelmente, a ferramenta mais versátil de todas (e com o tempo você percebe que a maioria é derivada dela). Vem acompanhada das ferramentas add e delete anchor point tool (+) (-), que criam ou retiram pontos da figura que você desenhar, tenham elas sido feitas com a caneta ou não. Alem da convert archor point tool (C), que torna retas em curvas, e curvas em reta. Ótima para vetorizar.
Logo abaixo, vem a text tool (T), e a line tool (N). Nenhuma das duas possuem grandes segredos. Com a primeira, clique, e digite um texto qualquer. Clique e arraste, e você criará uma caixa d texto. Com a segunda, clique em um ponto. Cliquei em outro. Ta-rá!, uma reta! Sim, é só isso.
Logo abaixo, um dos conjuntos de ferramentas mais simples, porém úteis, para se desenhar no flash (em conjunto com a caneta), que é o conjunto de ferramentas de figuras gemometricas.
Pra começar, a ferramenta retângulo (R). Ela desenha... retangulos! Pressione o mouse em qualquer lugar da workspace, e arraste, para formar sua figura. Aperte o shift para manter a proporção, e fazer um quadrado perfeito. Mesma coisa com a Oval tool (O). Clique + arraste = forma oval, (clique + arraste). shift = circunferência. As ferramentas logo abaixo são bastante interessantes se vc souber usar. A primeira, retangulo primitivo (igualmente R - é simples, se ferramenstas tiverem atalhos iguais, basta você pressiona-lo novamente para mudar a ferramenta. Ou seja, aperte R, vai pra retangulo, aperte R, muda pra primitiva, aperte R mais uma vez, volta pra retangulo, aperte R...), te permite traçar um retangulo normalmente, mas repare nas alças diferentes que ela gera. Use a seta branca (a) para seleciona-las e arrastá-las, e você vai criar um retangulo de formas arredondadas! Tipo, se você, antes de gerar um triangulo normal, alterar os valores em Retangle Options, na barra proprieties, você também pode gerar essas bordas arredondadas, mas elas serão estáticas, e permitem menor mobilidade, coisa e tal. Enfim, com a Oval primitiva (o), o princípio é o mesmo. Porem, ela só cria uma alça na periferia da imagem, e uma no centro. A da borda secciona a circunferencia guiada pelo raio, e te permite diminuir a area exibida. Ná pratica, vc pode desenhar o pac-man!
Já a alça do centro retira a area do centro proporcionalmente ao seu arraste. Ná pratica, você desenha rosquinhas! Ou um pac-man depois de um tiro... Bom, enfim!

E... Bem pessoal, peço-lhes sinceras desculpas, mas vou me retirar por hora. Logo voltarei com a continuarão dessa aula e um exercício simples, e logo depois, a aula nº 2. Mais uma vez, desculpas, e até a próxima!

segunda-feira, 14 de junho de 2010

TUTORIAAAAAL!

"Boa tarde, classe"!
...Acabou meu tempo ==' ia começar um tutorial de flash hoje, mas não deu, me desculpem. Inicia-lo-ei amanhã, sem falta! o/

sábado, 29 de maio de 2010

bem...

Bem, cá estou eu, quase saindo do indigente (MUITA. FOME.). Vim hoje para animar Miúda e suas feições, mas me bati num problema grave: fazer animações frame a frame. CAAAAAAAARA, você não tem noção, é terrível, c tem que calcular tudo! Todas as posições, movimentos, tudo...! por sorte, Miúda tem um estilo mais cartunesco, então não tenho que imaginar alterações musculares... já imaginou? eu não quero fazer isso.
Infelizmente, é um processo lento como um todo.

terça-feira, 18 de maio de 2010

Começo

U-hu, comecei as animações de Miúda!!!!
Tá, não se empolguem tanto, por favor --'
Tive pouco tempo, mas já fiz o básico da animação, q é a mudança de rosto de acordo com cada "emoção", fiz Miúda sorrir quando está feliz.
nada demais.
Lembrei que tinha que perguntar à PC uma questão técnica básica, mas como fiz pouca coisa, da pra alterar rápido.
Infelizmente, a internet é uma rede aberta demais, então não vou disponibilizar os arquivos aqui, mas posso mostrar pra quem quiser, mais tarde.
Sem mais, até a próxima.

Ohayo!

Bom dia a todos! De acordo com as discussões da última reunião do Indigente, ontem ,dia 17/05/2010, agora todos os membros do grupo devem possuir um blog em que mantenham o mundo informado sobre suas atividades. Pois bem, este é o meu!
Deixe que eu me apresente. Sou Fernando Medeiros do Nascimento, cursando o 2º semestre em Ciência da Computação na UFBA (entrei em 2009.2), e entrei no curso com o desejo de produzir games, e por isso logo procurei o Indigente.
Obviamente, não basta só bater na porta do grupo pra ja começar a fazer um Zelda da vida, e isso eu já estou aprendendo à duras penas.
Mas algumas coisas já percebi. Primeiro, que prefiro a parte de design do que a de programação no desenvolvimento de um jogo. Prefiro a animação e o desenho aos códigos em AS, ou C++, e me descobri um apaixonado pelo 3D.
Atualmente, estou evolvido no projeto Miúda e o Guarda-Chuva (Flash). Esse jogo precisa ser concluído até Julho, então... Boa sorte para todos, principalmente pra mim