[ SIGI-TUTO ] SPRITES TEXTURIZADAS!!

por **SIGILOSO** Qua 01 Dez 2010, 00:40

Pipolho: Eu não sei mecher no Photoshop!! Eu não mereço ser spriter!!!
SIGI: Calma, não pessa pra sair ainda. Eu posso lhe ajudar, meu caro...

Hey! Acharam que eu ia largar a vida de tutor em Game Maker?? Claro que não, estou aqui com um novo tuto que poderá ser muito útil pra vocês na hora de criar cenários ou aquela sprite de chefão tão detalhada...

Sem mais delongas, vamos aprender a criar sprites texturizadas!!

Nome: SPRITES TEXTURIZADAS!!
Descrição: Tutorial passo-a-passo de como criar sprites de grande resolução e detalhada.
Nível de dificuldade: Mediano
Requerimentos: GM 8 - PRO!

COMO COMEÇASTES, SIGILOSO?
Iremos primeiramente [b]planejar nossa sprite. Antes de mais nada, pense exatamente no que quer fazer. Pra este tutorial, vamos criar esta sprite aqui:
[ SIGI-TUTO ] SPRITES TEXTURIZADAS!! 28771089

[ SIGI-TUTO ] SPRITES TEXTURIZADAS!! 28771089

Parece terrivelmente difícil criá-la, mas não é! Laughing

Vendo assim, a gente percebe que a sprite é didivida em três partes:
O bloco amarelo central...
... as bordas roxas...
... e os pequenos blocos dos cantos!
Então o que faremos? Vamos criar cada parte separadamente.
Abriremos o editor de imagens do GM, e como neste caso vamos começar a criar as bordas roxas, criaremos uma sprite do tamanho de que a queremos. 400x64.
Agora... Vamos rabiscar!! Desenhe vários riscos misturados (não tão bagunçados pra mantêr a textura). Mais ou menos assim:
[ SIGI-TUTO ] SPRITES TEXTURIZADAS!! 28435613

[ SIGI-TUTO ] SPRITES TEXTURIZADAS!! 28435613

Pipolho: Haha!! Isso eu sei fazer tio!
SIGI: Sabe ficar quieto também? Se souber, essa é a hora... $--\'$

Logo após de rabiscar, chega a hora de ver uma pequena mágica. Vá até a aba images e depois clique em blur. Aparecerá esta janela:
[ SIGI-TUTO ] SPRITES TEXTURIZADAS!! 63002481

[ SIGI-TUTO ] SPRITES TEXTURIZADAS!! 63002481

Viu como estão as opções? Como não queremos que fique tãaaoo misturado e nem tão fraco, selecionamos a opção Medium, e como não queremos uma borda transparente em volta da sprite, desmarcaremos a caixa Blur Transparency, pra que o GM não misture a transparência com as cores da sprite.
Viu como ficou? Agora, deixe essa sprite guardada no canto dela. Vamos mecher em outra parte do trabalho, o grande bloco amarelo central. Pra ela, crie uma sprite de 400x400.
Como a sprite é maior e esta é outra parte da sprite, iremos rabiscar de forma diferente. Assim, iremos tirar qualquer impressão de "mesmisse". Assim:
[ SIGI-TUTO ] SPRITES TEXTURIZADAS!! 32959379

[ SIGI-TUTO ] SPRITES TEXTURIZADAS!! 32959379

Usando o blur, conseguiremos um efeito parecido com aquele que fizemos antes. Mas espere!! Aplicar este efeito apenas uma vez não basta! Em casos como este, temos que usar o mesmo efeito de blur mais do que uma vez, até que as cores fiquem mescladas direito. No caso dessa sprite, eu usei umas 7 ou 8 vezes...

Agora, repita estas mesmas etapas numa sprite de 100x100, pros blocos que ficarão nos cantos do "blocão".

Agora, já que temos as super sprites super mescladas para o nosso super "blocão", iremos para uma nova super etapa deste super tutorial! Iremos usar a super função Glow, na super aba Images!!

Esta função dará o efeito de profundidade nas sprites. Vamos pegar as bordas roxas e aplicar esta função nelas:
[ SIGI-TUTO ] SPRITES TEXTURIZADAS!! 40069265

[ SIGI-TUTO ] SPRITES TEXTURIZADAS!! 40069265

Vistes? Para dar um efeito neutro, vamos dar preferência a cor preta. Pra não ficar tão escuro e nem tão despercebido, 136 é um bom valor pra transparência (Opacity (Alpha)). E em Thickness, 10 também fica sendo um bom valor, já que esse efeito não ficaria muito grande (este é o tamanho do efeito Glow). E claro, marcaremos a caixa Place inside image, pra que isso se torne realmente um efeito de profundidade. Se não, seria apenas um contorno na sprite, já que ele ficaria em volta da imagem.

Agora, faremos a mesma coisa com as outras partes do "blocão". Claro, sendo de tamanhos diferentes a gente vai precisar mudar os valores da janela Glow!

Pipolho: Ooh!! Já temos todas as partes!! Já podemos enfim montar o "blocão"!!
SIGI:
[...]Tampouco turva-se a lágrima nordestina
Apenas a matéria vida era tão fina
E éramos olharmo-nos intacta retina
A cajuína cristalina em Teresina
Pipolho: anh!

??
SIGI: Não enche... Deu vontade de cantar u.u

Agora, vamos enfim montar o "blocão". Crie uma sprite grande, pra poder montar sossegado, mais ou menos uns... 1500x1500... Agora, iremos simplismente colocar uma sprite encima da outra. Não ô palhaço, isto não é tetris...
Começando a juntar as sprites, eu creio que a sprite esteja maaaais ou meeeenos.... assim:
[ SIGI-TUTO ] SPRITES TEXTURIZADAS!! 55236068

[ SIGI-TUTO ] SPRITES TEXTURIZADAS!! 55236068

OPAA!! A borda roxa é na horizontal! Como fazer ela girar pra que fique na vertical e assim colocá-la nos outros lados do blocão??
LEMBRANDO QUE EXISTEM VÁRIAS FORMAS DE SE FAZER ISTO, ESTOU COLOCANDO AQUI ESTA SÓ PRA MOSTRAR QUE AS VEZES A GENTE PRECISA IMPROVISAR!!

Muito fácil, abra a sprite da borda roxa, e na aba Transform você irá clicar em Resize Canvas... Irá também desmarcar a opção Keep aspect ratio, pois se não o valor de whidth irá mudar assim como o do Height, sendo que só vamos mecher com Height. Neste, coloque no campo da direita o mesmo valor de Widht, ou seja, 64. Depois, novamente na aba Transform, clique em Rotate....
[ SIGI-TUTO ] SPRITES TEXTURIZADAS!! 19201108

[ SIGI-TUTO ] SPRITES TEXTURIZADAS!! 19201108

Já que a imagem foi rotacionada do jeito que a gente queria, copie-a e cole-a no blocão, seja feliz.

E calmamente, termine de colocar os bloquinhos nos cantos do blocão. Deve ter ficado mais ou menos assim...
[ SIGI-TUTO ] SPRITES TEXTURIZADAS!! 86607696

[ SIGI-TUTO ] SPRITES TEXTURIZADAS!! 86607696

Pipolho: Que porcaria!! Chama isso de sprite??

...Mas claro que não está pronto, aplique mais uns efeitos de Glow e Blur, deve ficar assim:
[ SIGI-TUTO ] SPRITES TEXTURIZADAS!! 28771089

Pipolho: .....eu sabia que ainda não tinha acabado. :oops:

E pronto meus amigos! Não foi tão difícil, né?? Haha!!
Dá pra fazer muita coisa legal usando esses métodos, ainda mais se você não sabe lidar com esses editores de imagens grandões! Laughing

Issaí... Até a próxima. E corre que o Rio tá queimando!! kkkkkkk
afro

por **Mr. Kaleb** Qua 01 Dez 2010, 09:11

Nossa SIGI, muito bom mesmo, tava até pensando se tu tinha largado de fazer tutos... ótimo tutorial, tava precisando de um desses pro meu jogo.
Realmente o GM tem muitas opções para criar sprites e com você, essas opções estão sendo desvendadas XD. Continue assim!
FLW

por CLS Qua 01 Dez 2010, 09:40

Parabéns!
Ficou muito bom este tutorial!
Eu sabia que o poder do editor de sprites do GM era grande,já criei váriostítulos dessa forma!
Eu já sabia usar essas ferramentas,mas não desse método dos rabiscos! Laughing

Uma função boa para se usar nesses tipos de trabalhos é o sharpen,muito legal,teste e caso você goste,faça um tutorial de como usá-la melhor!

Até! Happy

por victor_aco Qua 01 Dez 2010, 09:52

Fala Super SIGILOSO!
Com certeza esse foi um super tutorial! Valeu por posta-lo aqui.
O editor do GM realmente é um Super Editor com essas funções que pra mim pareciam meio sem super sentido.
Tenha um Super dia.
Ate +

por **Super Games** Qua 01 Dez 2010, 10:35

Finalmente!
Mais um tutorial do SIGILOSO!
Que bom que voltou a fazer tutoriais, pensei que havia injuado do Pipolho.
Ah... e voltou com um tutorial muito bom, pensei que ia ser feito em outro progama e não no GameMaker.
Tutorial Nota 10!

Até!

por **SIGILOSO** Qui 02 Dez 2010, 16:47

Obrigado pelos coments! =D
Quanto a demora pra sair um novo tuto, foi por causa da falta de tempo. Projeto Mirfo, escola, namorada... Mal sobrava tempo pra mim XD
CLS, essa é uma das funções que eu nao costumo usar mto, hehe...
Mas vou dar uma olhada nela, pode deixar Happy

por **dharrison** Qui 02 Dez 2010, 17:35

belo tuto sigi-master u_u/
quando crescer quero ser igual vc *-*

só uma adição:
talvez num próximo tuto, mostre um pouco sobre as opções de opacity tbm para nós, da pra fazer umas coisas legais.

por **SIGILOSO** Sex 03 Dez 2010, 09:57

dharrison says:
belo tuto sigi-master u_u/
quando crescer quero ser igual vc *-*

só uma adição:
talvez num próximo tuto, mostre um pouco sobre as opções de opacity tbm para nós, da pra fazer umas coisas legais.

Obrigado! =D
Essa é uma função bem legal do editor do GM, ainda mais quando é pra se fazer cenários. Dá pra fazer janelas, peças de gelo... tudo o que tiver trasnparência!
afro

por **Mystery_boy_maker** Ter 07 Dez 2010, 00:25

[...]Eu tava cantando e o soldado disse:
"Rapaz, tu canta muito, bora cantá na cadeia?"
Chego lá me empurrou, aí tinha
um loirão muito doido lá dentro,
o loiro olhô pra mim efalou:
"Qual é? Qual foi? Porque que é que tu tá nessa?"
Eu disse não só porque eu tava cantando:
Florentina, Florentina
Florentina de Jesus
Não sei se tu me amas,
Pra que tu me seduz
[...]

tambem me deu vontade de cantar

Bom vamos ao que interessa , cara você faz ótimos tutoriais, eles são muito
faceis de entender, e com um toque de humor que é impagavel kk
Muito bom mesmo , eu ja havia tambem explorado o blur , o Glow e outros mas
apenas em Sprites nunca em cenarios ou algo como texturas assim.
Acho que a unica coisa que senti realmente falta foi mais imagens quero dizer
de onde fica cada efeito e teclas de atalho para os iniciantes se acharem nao apenas
na hora de configurar o efeito mas tambem na hora de achalos. Continue assim
Nota 10 !

por **SIGILOSO** Ter 07 Dez 2010, 07:29

Mystery_boy_maker says:
Bom vamos ao que interessa , cara você faz ótimos tutoriais, eles são muito
faceis de entender, e com um toque de humor que é impagavel kk
Muito bom mesmo , eu ja havia tambem explorado o blur , o Glow e outros mas
apenas em Sprites nunca em cenarios ou algo como texturas assim.
Acho que a unica coisa que senti realmente falta foi mais imagens quero dizer
de onde fica cada efeito e teclas de atalho para os iniciantes se acharem nao apenas
na hora de configurar o efeito mas tambem na hora de achalos. Continue assim
Nota 10 !

Obrigado! Acho que o toque de humor pode fazer alguma diferença Laughing

Quanto as imagens, foi por causa da internet, levou quase uma hora pra upar apenas essas que eu usei... Eu tinha tirado bem mais screens, inclusive de onde fica cada opção usada no efeito, mas no final tive que escolher apenas as mais relevantes :|

...Florentina, Florentina
Florentina de Jesus
Não sei se tu me amas,
Pra que tu me seduz
[...]

A música que vai bombar no senado em 2011! XD
afro

por lukbebalduke2 Qua 05 Jan 2011, 22:36

Cara podia fazer mais, e ensinar as outras funções tb Very Happy

Como sou nb de 0 a 10 dou 11

por correiajoao Sex 07 Jan 2011, 20:52

Como sempre o SENHOR SIGILIOSO, continua a fazer dos seus tutorias que fazem todos ficar de boca aberta! feliz2

Continue como sempre melhorando suas abilidades!

por Conteúdo patrocinado

[ SIGI-TUTO ] SPRITES TEXTURIZADAS!!

[ SIGI-TUTO ] SPRITES TEXTURIZADAS!!

Re: [ SIGI-TUTO ] SPRITES TEXTURIZADAS!!

Re: [ SIGI-TUTO ] SPRITES TEXTURIZADAS!!

Re: [ SIGI-TUTO ] SPRITES TEXTURIZADAS!!

Re: [ SIGI-TUTO ] SPRITES TEXTURIZADAS!!

Re: [ SIGI-TUTO ] SPRITES TEXTURIZADAS!!

Re: [ SIGI-TUTO ] SPRITES TEXTURIZADAS!!

Re: [ SIGI-TUTO ] SPRITES TEXTURIZADAS!!

Re: [ SIGI-TUTO ] SPRITES TEXTURIZADAS!!

Re: [ SIGI-TUTO ] SPRITES TEXTURIZADAS!!

Re: [ SIGI-TUTO ] SPRITES TEXTURIZADAS!!

Re: [ SIGI-TUTO ] SPRITES TEXTURIZADAS!!

Re: [ SIGI-TUTO ] SPRITES TEXTURIZADAS!!