1 Aula 12: Criando uma HUD Parte 2 Sáb 13 Out 2012, 21:27
Halt
Administrador
[Autor: Anderson Porto]
Para não perder-mos tempo, vamos dar continuidade a nossa hud. Não siga essa aula antes de terminar a hud que eu pedi na aula anterior, pois se não fizer, não vai adiantar esses comandos^^.
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]O Refresh
Com a sua hud terminada, basta agora inserir-mos o que ela vai mostrar! (ps.: hoje vamos usar o a.to_s denovo! Só que sem o p - nada de patos pra vcs) Vou ir listando os comandos e mostrando como usá-los...
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]self.contents.clear
Método básico, ele limpa o bitmap antes de desenhar os conteúdos dentro, sempre coloque como 1º comando do seu método refresh
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]self.contents.draw_text( x, y, width, height, "text", alinhamento)
Comando para se desenhar textos na tela, use-o e abuse-o. As primeiras quatro variáveis definem a posição largura e altura máximos que o texto irá ocupar. "test" é o texto, esse texto precisa ser nescessariamente uma String, sendo assim, você terá que usar o método .to_s para poder mostrar números na tela. O alinhamento pode ser 0 para normal(esquerda), 1 para centralizar e 2 para direita.
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]Obs.: Para mostrar por exemplo o level do personagem, você pode usar:
self.contents.draw_text( x, y, width, height, "Level " + $game_party.actors[0].level.to_s, alinhamento)
Note que entre o texto "Level " e a variável $game_party.actors[0].level.to_s existe um sinal de +, esse "+" é diferente do sinal de soma, ele é um concatenador.
Concatenar: é unir diferentes Strings para mostrar na tela ou para editar o valor de uma String, use o + para concatenar diferentes textos, como no exemplo, "Level " e $game_party.actors[0].level.to_s. Ao se concatenar duas Strings não é gerado nenhum espaço automático e por isso a String "Level " possui um espaço depois da palavra.
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]self.contents.blt(x, y, bitmap, Rect.new(x1, y1, width, height), opacidade)
Esse é ocomando para mostrar imagens em um bitmap, substitua x e y pelas posições do objeto na tela, bitmap é a imagem, mas não o nome, você tem que passar um objeto da classe RPG.Cache. Após isso você tem que estabelecer um objeto da classe Rect, esse objeto é que vai delimitar a imagem, ele é uma caixa, em geral usa-se como x1 e y1 o valor 0, pois x1 e y1 não são valores com referência à janela e sim as posições x e y usadas. Assim sendo, se você usar self.contents.blt(15, 25, bitmap, Rect.new(0, 1, width, height), 255) a imagem ira ser mostrada na posição 15 26 pois 15 e 25 são as posições definidas para o objeto, como você puxou o Rect para baixo colocando nele o número 1 na posição y, a imagem irá se deslocar para baixo, por isso o padrão que se usar é:
self.contents.blt(x, y, bitmap, Rect.new(0, 0, largura da imagem, altura da imagem), 255)
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]Definindo o bitmap:
No comando acima vimos que há um objeto bitmap, esse objeto precisa ser definido, vamos aos meios:
bitmap = RPG::Cache.icon("nome do icone")
bitmap = RPG::Cache.title("nome do title")
bitmap = RPG::Cache.picture("nome da picture")
...
Basicamente cada pasta que esta dentro de Graphics possui um respectivo RPG::Cache, mas fique atento, algumas usam mais parâmetros que o nome da imagem, um fog possui também a hue ficando RPG::Cache.fog("nome do fog", <valor da hue>)
Resumindo
Para mostrar uma imagem na tela use 2 linhas, uma estabeleça o bitmap e depois use o blt, veja um exemplo:
bitmap = RPG::Cache.icon(item.icon_name)
self.contents.blt(x, y + 4, bitmap, Rect.new(0, 0, 24, 24), 255)
Esse comando é o utilizado na classe Window_Item, ele serve para mostrar os ícones dos ítens ao lado do nome.
SEU DESAFIO
Utilize todos os conhecimentos ja obtidos para criar uma HUD, nela deve mostrar:
[<nome>]
Level: <nível>
HP: <hp>/<maxhp>
SP: <sp>/<maxsp>
EXP: <exp_s>/<next_exp_s>
Sua hud deverá ter a janela transparente e deverá ter uma imagem no fundo.
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]Antes de acabar
Vamos aprender sobre os loops
Loops são ciclos, são comandos que servem para executar uma série de comandos repetidamente até que se use um comando break ou que o ciclo termine.
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]loop do
Esse nós ja estudamos nas scenes, ele serve para ficar executando uma série de comandos infinitamente até que se use um break, para relembrar, um exemplo:
Loop da classe Scene_Map
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]while
Esse comando não é muito utilizado, mas é muito útil, ele serve como um loop, mas sem precisar de um break, um wuile fica executando seus comandos até que a sua condição de existência não exista mais, exemplo:
while x != 2
x = rand (10)
end
Ou seja, enquanto x for diferente de 2, ele vai ficar fazendo x = rand(10), quando x assumir o valor 2 ele sai do while
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
IntroduçãoPara não perder-mos tempo, vamos dar continuidade a nossa hud. Não siga essa aula antes de terminar a hud que eu pedi na aula anterior, pois se não fizer, não vai adiantar esses comandos^^.
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]O Refresh
Com a sua hud terminada, basta agora inserir-mos o que ela vai mostrar! (ps.: hoje vamos usar o a.to_s denovo! Só que sem o p - nada de patos pra vcs) Vou ir listando os comandos e mostrando como usá-los...
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]self.contents.clear
Método básico, ele limpa o bitmap antes de desenhar os conteúdos dentro, sempre coloque como 1º comando do seu método refresh
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]self.contents.draw_text( x, y, width, height, "text", alinhamento)
Comando para se desenhar textos na tela, use-o e abuse-o. As primeiras quatro variáveis definem a posição largura e altura máximos que o texto irá ocupar. "test" é o texto, esse texto precisa ser nescessariamente uma String, sendo assim, você terá que usar o método .to_s para poder mostrar números na tela. O alinhamento pode ser 0 para normal(esquerda), 1 para centralizar e 2 para direita.
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]Obs.: Para mostrar por exemplo o level do personagem, você pode usar:
self.contents.draw_text( x, y, width, height, "Level " + $game_party.actors[0].level.to_s, alinhamento)
Note que entre o texto "Level " e a variável $game_party.actors[0].level.to_s existe um sinal de +, esse "+" é diferente do sinal de soma, ele é um concatenador.
Concatenar: é unir diferentes Strings para mostrar na tela ou para editar o valor de uma String, use o + para concatenar diferentes textos, como no exemplo, "Level " e $game_party.actors[0].level.to_s. Ao se concatenar duas Strings não é gerado nenhum espaço automático e por isso a String "Level " possui um espaço depois da palavra.
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]self.contents.blt(x, y, bitmap, Rect.new(x1, y1, width, height), opacidade)
Esse é ocomando para mostrar imagens em um bitmap, substitua x e y pelas posições do objeto na tela, bitmap é a imagem, mas não o nome, você tem que passar um objeto da classe RPG.Cache. Após isso você tem que estabelecer um objeto da classe Rect, esse objeto é que vai delimitar a imagem, ele é uma caixa, em geral usa-se como x1 e y1 o valor 0, pois x1 e y1 não são valores com referência à janela e sim as posições x e y usadas. Assim sendo, se você usar self.contents.blt(15, 25, bitmap, Rect.new(0, 1, width, height), 255) a imagem ira ser mostrada na posição 15 26 pois 15 e 25 são as posições definidas para o objeto, como você puxou o Rect para baixo colocando nele o número 1 na posição y, a imagem irá se deslocar para baixo, por isso o padrão que se usar é:
self.contents.blt(x, y, bitmap, Rect.new(0, 0, largura da imagem, altura da imagem), 255)
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]Definindo o bitmap:
No comando acima vimos que há um objeto bitmap, esse objeto precisa ser definido, vamos aos meios:
bitmap = RPG::Cache.icon("nome do icone")
bitmap = RPG::Cache.title("nome do title")
bitmap = RPG::Cache.picture("nome da picture")
...
Basicamente cada pasta que esta dentro de Graphics possui um respectivo RPG::Cache, mas fique atento, algumas usam mais parâmetros que o nome da imagem, um fog possui também a hue ficando RPG::Cache.fog("nome do fog", <valor da hue>)
Resumindo
Para mostrar uma imagem na tela use 2 linhas, uma estabeleça o bitmap e depois use o blt, veja um exemplo:
bitmap = RPG::Cache.icon(item.icon_name)
self.contents.blt(x, y + 4, bitmap, Rect.new(0, 0, 24, 24), 255)
Esse comando é o utilizado na classe Window_Item, ele serve para mostrar os ícones dos ítens ao lado do nome.
SEU DESAFIO
Utilize todos os conhecimentos ja obtidos para criar uma HUD, nela deve mostrar:
[<nome>]
Level: <nível>
HP: <hp>/<maxhp>
SP: <sp>/<maxsp>
EXP: <exp_s>/<next_exp_s>
Sua hud deverá ter a janela transparente e deverá ter uma imagem no fundo.
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]Antes de acabar
Vamos aprender sobre os loops
Loops são ciclos, são comandos que servem para executar uma série de comandos repetidamente até que se use um comando break ou que o ciclo termine.
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]loop do
Esse nós ja estudamos nas scenes, ele serve para ficar executando uma série de comandos infinitamente até que se use um break, para relembrar, um exemplo:
Loop da classe Scene_Map
- Código:
loop do
# Atualizar tela de jogo
Graphics.update
# Atualizar a entrada de informações
Input.update
# Atualizar Frame
update
# Abortar loop se a tela foi alterada
if $scene != self
break
end
end
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]while
Esse comando não é muito utilizado, mas é muito útil, ele serve como um loop, mas sem precisar de um break, um wuile fica executando seus comandos até que a sua condição de existência não exista mais, exemplo:
while x != 2
x = rand (10)
end
Ou seja, enquanto x for diferente de 2, ele vai ficar fazendo x = rand(10), quando x assumir o valor 2 ele sai do while