[ SIGI-TUTO ] BARRAS PERSONALIZADAS!!

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Qualidade [ SIGI-TUTO ] BARRAS PERSONALIZADAS!!

Mensagem por SIGILOSO em Ter 05 Abr 2011, 16:38

Pipolho: Que saco, por que essa porcaria de barrinha do Gm tinha que ser tão morta?!!
SIGI: Hey hey hey, calma, eu estou de volta!!
Pipolho: surpreso ......... Você vai me ajudar?
SIGI: Não, apenas continuar te chamando de noob.


E aí criançada, prontos pra mais um sigi tuto?
Hoje vou ensinar a criar as barras presentes na HUD dos seus jogos, como energia, poder mágico, etc et...


Nome: BARRAS PERSONALIZADAS!!
Descrição: Aprenda a criar barras personalizadas para os seus jogos!
Nível de dificuldade: Iniciante / Mediano
Requerimentos: GM 8 - PRO!

COMO COMEÇASTES, SIGILOSO?

Primeiramente, vamos esclarecer, que este tuto não irá ajudá-los a criar aquelas barras phodalhonas que a gente vê no PS3, apenas uma introdução a elas. No caso, vamos criar uma barra simplezinha que nem essa aí:


Para tal, utilizaremos uma sprite para a barra. Sim, isso mesmo! Essa coisa verde aí da imagem é uma sprite.
A altura da sprite deverá estar de acordo com a sua preferência, mas a largura deverá ter sempre o valor 2.

Pipolho: Lá vem você com essas regras idiotas! Cadê a barra?!
SIGI: Tenho uam boa sugestão de onde ela poderia estar, mas iriam me tirar warning.


Caso não queira criar sua sprite, ou por falta de experiência ou mera preguiça, pode usar essa mesma que eu usei.

Agora seguinte: A sprite deverá estar centralizada verticalmente. Na horizontal é diferente, o center x deverá ser o ponto de onde a barra vai começar a se esticar!!

Nesse caso, a barra irá se esticar completamente pra direita, sem "vazar" pra esquerda Smile

Ok, vamos prosseguir!
Em quase todo santo tutorial que faço eu falo do objeto de controle. Se não tiver um, crie um objeto pra trabalhar na barrinha. Tudo o que iremos usar é o nosso amigo chegado draw. Vamos degustar, saborear destes códigos, sem nenhuma pressa, pra podermos entender como é simples, livre de complicaç...


Pipolho: Dá pra ir direto ao ponto?!... Você é chato assim com sua namorada também?
SIGI: ..... Se não quer conversar, fala logo.... --\'


Código:
draw_set_alpha(0.5)draw_rectangle(20,12,220,28,false)draw_set_alpha(1)
Esse é o primeiro pedaço de nosso código. O que ele faz? Ele vai criar a área escurecida por trás da barra, que nem na screen lá encima. Pra isso, ele faz com que o alpha utilizado no draw seja igual a 0.5 através do draw_set_alpha(0.5), pra que a área fique transparente.

Agora muita atenção crianças! Nesta parte, draw_rectangle(20,12,220,28,false), é onde ele de fato cria a parte transparente, desenhando um retângulo. Veja a imagem:

O canto esquerdo do retângulo é definido por x1, o direito, por x2. A parte de cima, será y1 e a de baixo, y2, então, alterando algum destes valores podemos alargar/achatar nosso retângulo Smile
(toda hora quando ia digitar retângulo acabava digitando triângulo... enfim...)

Código:
draw_sprite_ext(sprite0,0,20,20,global.vida,1,0,c_white,1)
Aqui iremos desenhar a barrinha. Agora vamos usar a cuca pra entender o porquê das coordenadas do retângulo.
Tanto a barra quanto o canto esquerdo do retângulo estão no ponto 20 x. Os dois começam ali, já que a barra não vai vazar pra esquerda. O x1 do retângulo e a coordenada x da barra deverão ser iguais!
O que seria aquele global.vidas? Ela representa a variável que será mostrada na sua barra. Você deve colocar ali a variável pra vidas, energia, patatí e patatá... o que a barra deve mostrar mesmo. O limite da variável deverá ser x2 do retângulo, ou seja, o máximo que a barra poderá se esticar Smile
Agora preste atenção. O y da barra é 20, certo? Se lembram de que o center y da barra é o centro exato da sprite, né?
O que isso significa? Que sendo o certo exato, a sprite terá o mesmo número de pixels, tanto na parte de cima quanto na de baixo. Vamos ver... A sprite tem 16 pixels de altura... Classe, quantos pixels sobrarão para cada lado?


Pipolho: Eu sei!! Eu sei!!!!
SIGI: Alguém sabe... Alguém?
Pipolho: EUUUU!!! EEEEUUUUUU!!!
SIGI: ...... Ninguém?
Pomposo: Sorbarão 6 píquiceus!!
SIGI: Nada disso, sobrarão 8 pixels.
Pipolho: Hey... Quem é você?
Pomposo: Seu piorrr persadelo....
Pipolho: surpreso2 ................


Então vamos entender as coordenadas y1 e y2 do nosso retângulo. y1 será igual à coordenada y da barra menos 8, e y2, a mesma coisa, só que +8 no lugar de -8. Por quê? Porque o retângulo deverá ter o mesmo tamanho da barra, se sobram 8 pixels pra cada lado da barra, sobrarão igualmente 8 pixels pra cada lado do retângulo também. Entenderam? É meio complicado de entender essa parte...

Agora a última parte do código:
Código:
draw_set_font(font0)
draw_text_color(225+2,7+2,global.vida-frac(global.vida),c_black,c_black,c_black,c_black,1)
draw_text_color(225,7,global.vida-frac(global.vida),c_white,c_white,c_white,c_white,1)
Isso vai escrever a variável do lado da barra, pra tornar mais completo. Não, você não é obrigado a deixar assim, mas caso queira... O que tem de importante aí, é isto: global.vida-frac(global.vida)
Essa parte, -frac(global.vida) vai tirar o "quebradinho" do código. Por exemplo:

O pipolho tem 30 pontos de vida, tomou umas porradas e ficou com 27.4. Não queremos que este ".4" saia na tela (a menos que você queira, sei lá), como eu não quero, eu tiro essa parte, com o -frac(global.vida). Frac representa esse quebrado, e nos parênteses você repete o nome da variável.
Ah sim, aí no código eu coloco a mesma linha duas vezes, só que a primeira tem +2 na coordenada x e +2 na y, tendo como cor, preto. É só pra dar um efeito de sombra na string... hehehe

Então é isso, se você realmente entendeu, realmente leu essa coisa, crie uma barra de energia vertical. Vai lá bonzão, agora quero vê... XD


Pomposo: Eu não enterdi nada do que você disse!!!
SIGI: Err... você é quem mesmo?
Pomposo: Seu pior pesad...
SIGI: Se tem amor a vida, fique quieto!
Pipolho: Acredite, não vai querer desafiar o tio SIG...
Pomposo: Calado!! Pomposo não gostar de vorcê!
SIGI: Hehe... gostei dele...


Isso aí galera, mais um tuto pra vocês. Até a próxima! _o/
afro


Última edição por SIGILOSO em Qua 06 Abr 2011, 12:16, editado 2 vez(es)

SIGILOSO

Ranking : Nota A
Número de Mensagens : 2264
Idade : 23
Data de inscrição : 06/06/2009
Notas recebidas : A+A+A+A+A+A+A
Reputação : 39
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 4
   : 2
   : 1

Voltar ao Topo Ir em baixo

Qualidade Re: [ SIGI-TUTO ] BARRAS PERSONALIZADAS!!

Mensagem por Nuclear em Qua 06 Abr 2011, 10:40

Bem interensante isso... gostei da ideia de fazer o número com sombra Very Happy
Apesar da minha ultra mega ultra super dificuldade com draw (nun vo com a cara dele XD),ainda deu pra entender.

Nuclear

Ranking : Nota B
Número de Mensagens : 346
Idade : 18
Data de inscrição : 18/02/2011
Notas recebidas : B
Reputação : 22
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 0

Voltar ao Topo Ir em baixo

Qualidade Re: [ SIGI-TUTO ] BARRAS PERSONALIZADAS!!

Mensagem por Markituh em Qua 06 Abr 2011, 10:51

surpreso Big Master Sigiloso! Tem um novo aluno na sala, o Pomposo! Happy Mas usar o draw_sprite_ext só para fazer isso, e ter que usar o Pro, isso não é um tutorial para iniciantes? Apesar da função ir direto ao assunto, há um outro método que gosto de usar com draw_sprite_part. De qualquer modo, ótimo tutorial Sigiloso!

Isso foi um erro, ou é para os iniciantes prestarem atenção? Vi que você colocou as funções todas juntas...

___________

"Não deixe para amanhã o que se pode fazer hoje"

Links úteis:
Índice de Tutoriais
Manual online do GMS

Markituh

Ranking : Sem avaliações
Número de Mensagens : 2183
Data de inscrição : 11/10/2009
Reputação : 106
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 0

Voltar ao Topo Ir em baixo

Qualidade Re: [ SIGI-TUTO ] BARRAS PERSONALIZADAS!!

Mensagem por SIGILOSO em Qua 06 Abr 2011, 11:00

Eu coloquei como iniciantes pois são poucos códigos a serem usados, mesmo que em alguns pontos ele seja meio complicado Smile
E botei as partes do código separadas pra que o pessoal possa acompanhar com mais facilidade. Vou editar o tópico rapidin pra avisar que pode ser um pouco mais complicado. Valew pelo comentário Happy
afro

SIGILOSO

Ranking : Nota A
Número de Mensagens : 2264
Idade : 23
Data de inscrição : 06/06/2009
Notas recebidas : A+A+A+A+A+A+A
Reputação : 39
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 4
   : 2
   : 1

Voltar ao Topo Ir em baixo

Qualidade Re: [ SIGI-TUTO ] BARRAS PERSONALIZADAS!!

Mensagem por MatheusReis em Qua 06 Abr 2011, 11:45

"Mathnoob: Eu sei fazer barra vertical!!!" ._.
Mt bom, se eu não soubesse fazer uma, agora entenderia.
Mas quando eu vi a parte de usar sprites na barra de vida não achei que fosse para esticar, e sim para por em sequencia, q nem... a barra de vida do Megaman, por exemplo, formada por vários pedacinhos.
Imaginei algo como:
Código:
parte=0
repeat(global.vida-frac(global.vida)){
draw_sprite(sprite0,0,20+2*parte,20);
parte+=1};
Aliás,Isso deve funcionar no Lite anh!
Pra falar a verdade... o "global.vida-frac(global.vida)" tem o mesmo efeito de "floor(global.vida)", não é? ._.
Enfim, bom tutorial ;D

MatheusReis

Ranking : Nota A
Número de Mensagens : 1087
Idade : 23
Data de inscrição : 13/01/2010
Notas recebidas : B-A-A
Reputação : 30
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 2
   : 1
   : 0

http://www.mathaeuz.deviantart.com

Voltar ao Topo Ir em baixo

Qualidade Re: [ SIGI-TUTO ] BARRAS PERSONALIZADAS!!

Mensagem por Markituh em Qua 06 Abr 2011, 11:56

Não foi isso que quis dizer dos códigos cara, eu disse que as funções estão juntas! Está assim:
Código:
draw_set_font(font0)draw_text_color(225+2,7+2,global.vida-frac(global.vida),c_black,c_black,c_black,c_black,1)
draw_text_color(225,7,global.vida-frac(global.vida),c_white,c_white,c_white,c_white,1)
Tudo junto. Devia estar assim:
Código:
draw_set_font(font0)
draw_text_color(225+2,7+2,global.vida-frac(global.vida),c_black,c_black,c_black,c_black,1)
draw_text_color(225,7,global.vida-frac(global.vida),c_white,c_white,c_white,c_white,1)
Caso contrário iria dar um erro sinistro. Mas isso deve ter sido alguma casca de banana para iniciantes, certo? Ou foi um erro mesmo? Foi isso que quis dizer anteriormente.
Mathaeuz escreveu:Pra falar a verdade... o "global.vida-frac(global.vida)" tem o mesmo efeito de "floor(global.vida)", não é? ._.
Não exatamente...
Game Maker Help escreveu:frac(x) Returns the fractional part of x, that is, the part behind the decimal dot. (Retorna a parte fracional de x, isto é, a parte atrás do ponto decimal.)
floor(x) Returns the floor of x, that is, x rounded down to an integer. (Retorna o piso de x, isto é, x arredondado abaixo à um inteiro.)
Com floor, o número volta para o inteiro mais próximo. Já no frac, ele não volta, apenas pega o inteiro antes do ponto decimal(pelo menos foi o que entendi).

___________

"Não deixe para amanhã o que se pode fazer hoje"

Links úteis:
Índice de Tutoriais
Manual online do GMS

Markituh

Ranking : Sem avaliações
Número de Mensagens : 2183
Data de inscrição : 11/10/2009
Reputação : 106
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 0

Voltar ao Topo Ir em baixo

Qualidade Re: [ SIGI-TUTO ] BARRAS PERSONALIZADAS!!

Mensagem por ricaun em Qua 06 Abr 2011, 12:00

Mathaeuz escreveu:"Mathnoob: Eu sei fazer barra vertical!!!" ._.
Mt bom, se eu não soubesse fazer uma, agora entenderia.
Mas quando eu vi a parte de usar sprites na barra de vida não achei que fosse para esticar, e sim para por em sequencia, q nem... a barra de vida do Megaman, por exemplo, formada por vários pedacinhos.
Imaginei algo como:
Código:
parte=0
repeat(global.vida-frac(global.vida)){
draw_sprite(sprite0,0,20+2*parte,20);
parte+=1};
Aliás,Isso deve funcionar no Lite anh!
Pra falar a verdade... o "global.vida-frac(global.vida)" tem o mesmo efeito de "floor(global.vida)", não é? ._.
Enfim, bom tutorial ;D

Acho que o grande problema de fazer assim, usando repeat ou algo parecido, é que se tiver muitos pedacinhos... vai lerdiar o jogo. Seria muito melhor usar draw_sprite_part, só imagine uma barra com 500 pedacinhos... Lerda tudo!

Té!

ricaun

Número de Mensagens : 169
Idade : 27
Data de inscrição : 23/09/2008
Reputação : 9
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   :
   :
   :

Voltar ao Topo Ir em baixo

Qualidade Re: [ SIGI-TUTO ] BARRAS PERSONALIZADAS!!

Mensagem por MatheusReis em Qua 06 Abr 2011, 12:09

Markituh escreveu:
Com floor, o número volta para o inteiro mais próximo. Já no frac, ele não volta, apenas pega o inteiro antes do ponto decimal(pelo menos foi o que entendi).
Não... o frac pega tudo depois da casa decimal:
Se o numero for 5.267, frac vai retornar 0.267.
Logo, no conjunto que global.vida-frac(global.vida), que o mestre SIGI usou, acontece:
27.4 - frac(27.4) = 27.4 - 0.4 = 27.
Por isso causa um efeito igual ao de floor(). [floor(27.4) = 27]
Acabei de fazer 1 gmk aqui comparando os resultados de "floor(var)" e "var-frac(var)", sendo var um número com parte fracionária, os resultados são sempre os mesmos.
Espero que tenha entendido Happy.

@ricaun
É verdade o que você disse, fica lento. Mas é só um exemplo ;D.


Última edição por Mathaeuz em Qua 06 Abr 2011, 17:24, editado 2 vez(es)

MatheusReis

Ranking : Nota A
Número de Mensagens : 1087
Idade : 23
Data de inscrição : 13/01/2010
Notas recebidas : B-A-A
Reputação : 30
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 2
   : 1
   : 0

http://www.mathaeuz.deviantart.com

Voltar ao Topo Ir em baixo

Qualidade Re: [ SIGI-TUTO ] BARRAS PERSONALIZADAS!!

Mensagem por SIGILOSO em Qua 06 Abr 2011, 12:16

@Markituh
Ahhh sim... É que todos os meus códigos estão assim agora, pra economizar linhas, não dá nenhum erro não Happy
Já me acostumei com o padrão e acabei esquecendo de ajeitar aqui... Obrigado pela observação, já vou ajeitar _o/

@Mathaeuz
Provavelmente não funcionaria no LITE devido ao draw_set_alpha, funções de transparência são exclusivos no PRO.
Gostei do seu método pra criar a barrinha Rockman Style Of Live XD
Sinceramente eu não teria feito de forma tão simples e organizada. As vezes não penso de forma lógica...
afro

SIGILOSO

Ranking : Nota A
Número de Mensagens : 2264
Idade : 23
Data de inscrição : 06/06/2009
Notas recebidas : A+A+A+A+A+A+A
Reputação : 39
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 4
   : 2
   : 1

Voltar ao Topo Ir em baixo

Qualidade Re: [ SIGI-TUTO ] BARRAS PERSONALIZADAS!!

Mensagem por Assassino em Qua 06 Abr 2011, 12:59

Sigi seus tutoriais são de alta qualidade, gosto muito do pimpolho Smile; você é uma grande ajuda a este fórum, por isso você é um colaborador nota 10, eu ri muito quando você nos chama de crianças Smile, já ao tópico eu já tinha uma idéia de como fazer isto, mas com esse tutorial você me tirou todas a dúvidas blz

Assassino

Número de Mensagens : 390
Idade : 20
Data de inscrição : 13/08/2010
Reputação : 6
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 0

http://rockstarfamilies.blogspot.com/

Voltar ao Topo Ir em baixo

Qualidade Re: [ SIGI-TUTO ] BARRAS PERSONALIZADAS!!

Mensagem por Licht em Qua 06 Abr 2011, 16:00

Um tutorial bem bunitinhu e explicado. o/ Eu já tô ligado como fazer barra de tudo quanto é jeito. (e fazer uma barra loucônica não é tão difícil) mas vejamos...

Umas coisas...

Nem todas as coisas relacionadas à canais alpha são exclusividade do PRO. Por exemplo, a variável "image_alpha". Mas as funções do PRO as quais você se refere devem só funcinar no PRO mesmo, mas por que usar funções do PRO pra uma coisa que dá MUITO BEM pra fazer no Lite?

Inclusive, tem dois tipos de barras de vida que eu coloquei numas engines minhas:

Barrinha:

Pizza:


Tudo no Lite.

Mas enfim, é um bom tuto mas com algumas funções desnecessárias...

PS.: VIVA OS ÍCONES!! santa

Licht

Ranking : Sem avaliações
Número de Mensagens : 1217
Idade : 18
Data de inscrição : 26/04/2010
Reputação : 34
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 1
   : 0

http://lightsoftworks.blogspot.com/

Voltar ao Topo Ir em baixo

Qualidade Re: [ SIGI-TUTO ] BARRAS PERSONALIZADAS!!

Mensagem por Markituh em Qui 07 Abr 2011, 10:06

Sigiloso escreveu:É que todos os meus códigos estão assim agora, pra economizar linhas, não dá nenhum erro não Happy
Isto é, se você colocar um ponto e vírgula, aí sim não dá erro.
Sigiloso escreveu:Provavelmente não funcionaria no LITE devido ao draw_set_alpha, funções de transparência são exclusivos no PRO.
Quem disse isso a você? draw_set_alpha é do Lite scratch Função de Draw do Pro são aquelas draw_*_ext; draw_sprite_general etc.
Mathaeuz escreveu:Não... o frac pega tudo depois da casa decimal:
Se o numero for 5.267, frac vai retornar 0.267.
Logo, no conjunto que global.vida-frac(global.vida), que o mestre SIGI usou, acontece:
27.4 - frac(27.4) = 27.4 - 0.4 = 27.
Por isso causa um efeito igual ao de floor(). [floor(27.4) = 27]
Hmmm... Entendi agora, obrigado Smile


___________

"Não deixe para amanhã o que se pode fazer hoje"

Links úteis:
Índice de Tutoriais
Manual online do GMS

Markituh

Ranking : Sem avaliações
Número de Mensagens : 2183
Data de inscrição : 11/10/2009
Reputação : 106
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 0

Voltar ao Topo Ir em baixo

Qualidade Re: [ SIGI-TUTO ] BARRAS PERSONALIZADAS!!

Mensagem por SIGILOSO em Qui 07 Abr 2011, 13:20

@Markituh
Não sabia dessa, achava que o alpha era apenas pro gm PRO :|
Valew pela correção cara, vou dar uma editada no tópico _o/
afro

SIGILOSO

Ranking : Nota A
Número de Mensagens : 2264
Idade : 23
Data de inscrição : 06/06/2009
Notas recebidas : A+A+A+A+A+A+A
Reputação : 39
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 4
   : 2
   : 1

Voltar ao Topo Ir em baixo

Qualidade Re: [ SIGI-TUTO ] BARRAS PERSONALIZADAS!!

Mensagem por NPH em Qui 07 Abr 2011, 22:11

SIGILOSO, você é demais!
Eu nunca pensei em criar barras personalizadas em meus jogos!!
Seus tutoriais são realmente ótimos e bem humorados!!!
Nota 10!!!!!!!
[obs: eu sempre dou risada quando leio seus tutos! por causa do pipolho e suas perguntas!]

NPH

Ranking : Nota B
Número de Mensagens : 452
Idade : 22
Data de inscrição : 28/11/2010
Notas recebidas : B
Reputação : 32
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 0

Voltar ao Topo Ir em baixo

Qualidade Re: [ SIGI-TUTO ] BARRAS PERSONALIZADAS!!

Mensagem por sonic luan em Qui 07 Abr 2011, 22:14

muito bom o tutorial vai ajudar bastante jente, a barra do game maker e bem sem grasa mesmo. vai me ajudar em alguns projetos que estou planejando faser futuramente.

FLWS

sonic luan

Ranking : Nota C
Número de Mensagens : 1003
Idade : 17
Data de inscrição : 28/01/2011
Notas recebidas : C-D-A-C
Reputação : 18
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 1

http://sonicmaker.forumeiros.com/memberlist

Voltar ao Topo Ir em baixo

Qualidade Re: [ SIGI-TUTO ] BARRAS PERSONALIZADAS!!

Mensagem por Conteúdo patrocinado Hoje à(s) 00:49


Conteúdo patrocinado


Voltar ao Topo Ir em baixo

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum