Forums » RGSS

Lição 3 - Nossa primeira Classe - Uma Janela

    • 683 posts
    2 de junho de 2015 18h03min39s ART

    Antes de começar este tópico quero esclarecer que TODAS as apêndices que forem colocadas neste fórum só tem como finalidade referência, não sendo de necessidade explicar ou detalhar seu conteúdo.

    Na lição de hoje vamos criar nossa primeira classe.
    Abra o RPGMaker Xp e crie um novo projeto. Chame-o como quiser. Abra o Editor de Scripts, e logo acima do Main, insira uma sessão (botão direito -> Inserir). Nomeie-a como quiser. O nome das sessões é irrelevante, pois o RGSS lê o seu conteúdo, não seus nomes.

    Na janela do Editor escreva isso:

    Código:
    class Window_Minha < Window_Base


    Note que a palavras class está em minúsculas. TODO e qualquer código escrito no RGSS que se refira a funções, classes, módulos DEVE ser escrito em minúsculas. Mais tarde veremos que o RGSS é CASE-SENSITIVE (entraremos nos detalhes depois). Note também que estou definindo nossa classe como filha de Window_Base.

    Toda classe pré-inicializada possui como procedimento inicial o initialize. Então logo abaixo do class escreva isso:

    Código:
    def initialize


    Seu código deve estar assim:

    Código:
    class Window_Minha < Window_Base
       def initialize


    Agora vamos usar o procedimento de criação da superclasse, usando a palavra reservada super, e junto com ela os parâmetros necessários.

    PARÂMETROS???


    Sim, vamos ver a superclasse para entender isso:



    Note que o initialize da classe Window_Base possui dentro dos parênteses 4 vars, separadas por virgulas. Essas vars são os parâmetros, atravéz dos quais a classe cria a janela, usando seus valores logo abaixo nas declarações self. A palavra self sempre é usada quando falamos do próprio objeto, ou seja, relacionado a ele.

    Agora que sabemos pra que servem os parâmetros aqui, vamos voltar para nossa janela.
    logo abaixo do initialize escreva assim:

    Código:
    super(32,32,120,64)


    Eu peço que escreva e não copie e cole, para que você se habitue a escrever na janela do Editor.

    Seu código deve estar assim:

    Código:
    class Window_Minha < Window_Base
         def initialize
              super(32,32,120,64)


    Para podermos visualizar nossa janela, devemos agora fechar as declarações. TUDO que for declarado no RGSS, Módulos, Classes, Funções deve ser fechado com a palavra end. Como temos uma classe e um procedimento abertos, vamos fechá-los. Escreva no código assim:

    Código:
    class Window_Minha < Window_Base
         def initialize
              super(32,32,120,64)
         end
    end


    Agora vamos visualizar nossa janela. Crie um NPC no mapa, e nele use a função "Chamar Script". Agora nela escreva assim:

    Código:
    Window_Minha.new


    Rode o game e fale com o NPC. Aí está !! Linda, maravilhosa, e vazia...  :P

    Mas não se desespere, isso é só a ponta do Iceberg.

    Vamos colocar algo dentro da nossa janela. O que você vê é apenas um desenho do WindowSkin, na largura e altura que você definiu. Para colocar algo dentro da janela, devemos criar dentro dela um bitmap. Um bitmap é sempre usado nesses casos, em qualquer lugar, seja ele uma janela, um Spriteset ou um ViewPort, esses dois últimos serão estudados mais tarde.

    Então vamos lá. Para criar o bitmap dentro da janela, usamos a denominação contents, que significa conteúdo. Logo abaixo do super escreva assim:

    Código:
    self.contents = Bitmap.new(width - 32, height - 32)


    Vamos analizar. Usamos o self, dizendo que é este objeto, .contents, que é seu conteúdo, um sinal de igual( = ) para definir, e a declaração Bitmap.new(width - 32, height - 32). Note que estamos passando parâmetros para o bitmap, de largura e altura.

    Nosso bitmap está criado. e Agora ???

    Agora, podemos "desenhar" dentro dele, tanto uma imagem, tanto quanto um texto. Vamos começar pelo texto, que é mais simples. A sintaxe é assim:
    self.contents.draw_text(x, y, largura, altura, texto [,alinhamento])

    O alinhamento é opcional, por isso ele está dentro das chaves.
    Logo abaixo da declaração do bitmap, escreva assim:

    Código:
    self.contents.draw_text(4, 0, self.width - 40, 32, "nome", 0)


    Seu código deve estar assim:

    Código:
    class Window_Minha < Window_Base
         def initialize
              super(32,32,120,64)
          self.contents = Bitmap.new(width - 32, height - 32)
          self.contents.draw_text(4, 0, self.width - 40, 32, "nome", 0)
         end
    end


    Execute o projeto e fale com o NPC.

    Estamos indo bem. Já conseguimos fazer uma janela e escrever algo nela. Mas repare que, depois de um tempo, a janela some. Isso se deve porque ela não faz parte dos processos de mapa, você apenas a chamou. Ela não tem nenhum processo que a mantenha aberta. Vamos mudar isso!!

    Vamos agora alterar uma classe já existente. Dentro da sessão Main, logo após Graphics.freeze, escreva isso:

    Código:
    $janela = []


    Agora vá no NPC do mapa e mude o código para:

    Código:
    $janela = Window_Minha.new


    E rode o game. A janela não some mais !! Mas porque? Porque ela foi DECLARADA. Por isso tudo que for feito no RGSS precisa de declaração.
    Vamos mudar o conteúdo da janela agora.
    Comente a linha self.contents.draw_text(4, 0, self.width - 40, 32, "nome", 0), para comentar, coloque um # (chama-se sharp) no ínício dela.

    Agora na linha self.contents = Bitmap.new(width - 32, height - 32), coloque assim:

    Código:
    self.contents = Bitmap.new("Graphics/Icons/001-Weapon01.png")


    Seu código deve ficar assim:

    Código:
    class Window_Minha < Window_Base
         def initialize
              super(32,32,120,64)
              self.contents = Bitmap.new("Graphics/Icons/001-Weapon01.png")
              #self.contents.draw_text(4, 0, self.width - 40, 32, "nome", 0)
         end
    end


    Agora rode o game. É, eu também gosto do ícone da espada. Repare que demos uma caminho de arquivo, no caso do bitmap basta dizer o caminho a partir da pasta do projeto.

    Até agora aprendemos que com a classe bitmap (Bitmap.new, declaração de classe, correto?) comporta tanto texto quanto e imagens. Ela também comporta os dois juntos, mas para isso, iremos precisar de outra classe e um módulo. MÓDULO ??

    Sim, um módulo é uma pré-definição, como a classe, porém ele não permite instâncias, você não declara @var = modulo.new como é feito com as classes, você chama MODULO::Procedimento. Os módulos serão estudados com mais ênfaze numa próxima lição, agora só veremos o necessário para o que precisamos.

    A classe que vamos precisar é o Rect, que significa retãngulo, a classe Rect cria uma área dentro do bitmap, onde podemos "desenhar" qualquer coisa. Sua definição é:

    Rect.new(x, y, largura, altura)

    Então vamos lá. Retorne a linha bitmap para o que era antes, assim:

    self.contents = Bitmap.new(width - 32, height - 32)

    Logo abaixo dela escreva assim:

    Código:
    icone = RPG::Cache.icon("001-Weapon01")
    rect = Rect.new(0, 0, icone.width, icone.height)


    Acabamos de declarar duas variáveis, uma com a imagem do ícone, onde usamos o módulo RPG::Cache e o procedimento icon, e o nome do arquivo. A extensão do arquivo é desnecessária, o RGSS gera um erro se a imagem não for suportada por ele.
    A outra contém nosso rect, que é exatamente do tamanho da imagem carregada na var icone.
    Agora usaremos mais uma função do self.contents, a função blt. A função blt vai desenhar dentro do rect a imagem que foi carregada na var icone, sua definição é essa:

    blt(x, y, bitmap,rect[,opacidade])


    Vamos lá. logo abaixo da declaração do rect, coloque isso:

    Código:
    self.contents.blt(0, 0, icone, rect)


    Descomente a linha self.contents.draw_text(4, 0, self.width - 40, 32, "nome", 0) e troque o numero 4 por icone.width + 4.

    Seu código deve estar assim:

    Código:
    class Window_Minha < Window_Base
         def initialize
              super(32,32,120,64)
          self.contents = Bitmap.new(width - 32, height - 32)
          icone = RPG::Cache.icon("001-Weapon01")
          rect = Rect.new(0, 0, icone.width, icone.height)
          self.contents.blt(0, 0, icone, rect)
          self.contents.draw_text(icone.width + 4, 0, self.width - 40, 32, "nome", 0)
         end
    end


    Agora rode o game. Muito bom !!

    CONCLUSÂO:

    Começamos a ver hoje como criar uma janela, colocar texto e figuras. Demos uma leve pincelada nos módulos e nas funções internas da classe Window.
    Eu quero alertar que a partir de agora tanto as lições quanto os códigos começarão a ficar complexos, por isso, se você realmente tem interesse em aprender, faça perguntas concisas, programar em RGSS é muito fácil, mas depende principalmente de atenção e paciência.

    Não jogue fora o projeto com o Exemplo da janela, ele será útil na próxima lição, onde nos aprofundaremos nos procedimentos da classe, gerando novos resultados e alterações na janela.

    Eu farei uma apêndice destacando TODAS as funções das classes Window e Bitmap, para maior facilidade nas próximas lições.