Tutorial (Aula Prática) - Adicionando 'Introdução' antes da tela de Título

[Vitu Jr.]

Bom, oi centro. Estou postando aqui uma de minhas aulas, (única aqui na MRM), achei que seria bem útil e interessante posta-la para quem procura colocar em prática o que vem aprendendo em RGSS.

Não tive tempo para modificar o tópico de acordo com um tutorial. Mas isso não prejudica o conteúdo do material. Abrss õ/ !!

Recursos Externos :

Será necessário no mínimo uma imagem para usarmos no sistema. Eu usarei três nesta aula, seguem abaixo :

Spoiler

          

[close]

Cada imagem deve estar na pasta : Graphics ~> System. Com o nome Intro- e o número da ordem na qual ela aparecerá.

Por exemplo Intro-1 será a primeira imagem a aparecer Intro-2 a segunda, e assim por diante.

Início :

Crie um "novo script", no seu editor de scripts. Então começaremos criando um Módulo para modificações do script e base de início :

module Scene_Intro_DB
  
  Max_Intro_Scenes = 3       #~ Número máximo de Imagens para Intro
  
  Appear_Opacity = 3           #~ Velocidade para imagem aparecer
  
  Exit_Opacity = 3                #~ Velocidade para imagem sair
  
  Time_Visible_Intro = 60     #~ Tempo que a imagem fica após aparecer
  
end

class Scene_Title

  alias incluindo_dados_ao_metodo_start start

  def start
    SceneManager.clear
    incluindo_dados_ao_metodo_start
  end

end

Para concluirmos nosso primeiro passo vamos criar duas estruturas "def", uma com nome crate_intro e outra intro_animation dentro da nossa classe "Scene_Title"

E dentro da estrutura "def start" declararemos nossa estrutura "def create_intro".

Por fim nosso script deve estar assim :

Checando !

module Scene_Intro_DB
  
  Max_Intro_Scenes = 3       #~ Número máximo de Imagens para Intro
  
  Appear_Opacity = 3           #~ Velocidade para imagem aparecer
  
  Exit_Opacity = 3                #~ Velocidade para imagem sair
  
  Time_Visible_Intro = 60     #~ Tempo que a imagem fica após aparecer
  
end

class Scene_Title

  alias incluindo_dados_ao_metodo_start start

  def start
    SceneManager.clear
    create_intro
    incluindo_dados_ao_metodo_start
  end

  def create_intro
  end

  def  intro_animation
  end

end

[close]

Então seguimos para o passo 2, onde vamos usar o que aprendemos em aulas anteriores !

Programando :

Para iniciar o ciclo de nossa Scene_Intro, começamos criando uma estrutura de repetição for i in dentro da estrutura "def create_intro".

O número de ciclos definidos por essa estrutura de repetição vai de 1 até o valor máximo de "intros" definidas em nosso módulo.

Se leram minhas aulas anteriores saberão como aceder a constante Max_Intro_Scenes. Que seria a constante com o valor máximo de "intros".

Nosso script deve estar assim :

Checagem !

module Scene_Intro_DB
  
  Max_Intro_Scenes = 3       #~ Número máximo de Imagens para Intro
  
  Appear_Opacity = 3           #~ Velocidade para imagem aparecer
  
  Exit_Opacity = 3                #~ Velocidade para imagem sair
  
  Time_Visible_Intro = 60     #~ Tempo que a imagem fica após aparecer
  
end

class Scene_Title

  alias incluindo_dados_ao_metodo_start start

  def start
    SceneManager.clear
    create_intro
    incluindo_dados_ao_metodo_start
  end

  def create_intro
    for i in 1..Scene_Intro_DB::Max_Intro_Scenes
    end
  end

  def intro_animation
  end

end

[close]

Agora vamos usar uma variável para corresponder as imagens da intro.

Dentro a estrutura de repetição for i in, colocaremos os seguintes comandos :

@intro = Sprite.new
@intro.bitmap = Cache.system("Intro-" + "#{i}")
@intro.opacity = 0
intro_animation

Explicando o que ocorre, a cada ciclo do for i in o i correspondera a uma valor de 1 até (..) o valor máximo de imagens para intro (Scene_Intro_DB::Max_Intro_Scenes).

Sendo assim a variável @intro corresponderá a imagem de nome Intro-i.

Então no ciclo 1 i será igual a 1 e por fim a imagem que corresponde a @intro vai ser Intro-1 e assim por diante.

Mas como o sistema não se baseia apenas em criar imagens, vamos também dar o efeito delas.

Para isso declaramos a estrutura def intro_animation após criar a imagem, para adicionarmos os efeitos.

Nosso script deve estar assim :

Checagem !

module Scene_Intro_DB
  
  Max_Intro_Scenes = 3       #~ Número máximo de Imagens para Intro
  
  Appear_Opacity = 3           #~ Velocidade para imagem aparecer
  
  Exit_Opacity = 3                #~ Velocidade para imagem sair
  
  Time_Visible_Intro = 60     #~ Tempo que a imagem fica após aparecer e antes de sumir
  
end

class Scene_Title

  alias incluindo_dados_ao_metodo_start start

  def start
    SceneManager.clear
    create_intro
    incluindo_dados_ao_metodo_start
  end
  
  def create_intro
    for i in 1..Scene_Intro_DB::Max_Intro_Scenes
      @intro = Sprite.new
      @intro.bitmap = Cache.system("Intro-" + "#{i}")
      @intro.opacity = 0
      intro_animation
    end
  end

  def intro_animation
  end

end

[close]

Agora passaremos para a programação dos efeitos de cada imagem.

Adicionando Efeitos :

Dentro da estrutura def intro_animation, criem duas variáveis locais, uma chamada turn e a outra timer, ambas contendo valor 0.

Em seguida, ainda na estrutura def intro_animation, criamos uma estrutura de repetição loop do.

Então adicionamos os comandos Graphics.update e Input.update para atualizar as imagens e teclas pressionadas dentro do ciclo.

Nosso script deve estar assim :

Checagem !

module Scene_Intro_DB
  
  Max_Intro_Scenes = 3       #~ Número máximo de Imagens para Intro
  
  Appear_Opacity = 3           #~ Velocidade para imagem aparecer
  
  Exit_Opacity = 3                #~ Velocidade para imagem sair
  
  Time_Visible_Intro = 60     #~ Tempo que a imagem fica após aparecer e antes de sumir
  
end

class Scene_Title

  alias incluindo_dados_ao_metodo_start start

  def start
    SceneManager.clear
    create_intro
    incluindo_dados_ao_metodo_start
  end
  
  def create_intro
    for i in 1..Scene_Intro_DB::Max_Intro_Scenes
      @intro = Sprite.new
      @intro.bitmap = Cache.system("Intro-" + "#{i}")
      @intro.opacity = 0
      intro_animation
    end
  end

  def intro_animation
    turn = 0 ;  timer = 0
    loop do
      Graphics.update
      Input.update
    end
  end

end

[close]

Agora trabalharemos apenas dentro da estrutura de repetição loop do, para adicionar os efeitos as imagens.

Começamos usando uma estrutura condicional, se for pressionada a tecla Z (:C), para pular uma intro.

E dentro dela colocamos os efeitos de cancelamento da imagem e quebra do ciclo de animação.

if Input.trigger?(:C)
  @intro.opacity = 0
  @intro.dispose
  break
end

Caso contrário, segue a animação. Vamos à dividir em 3 partes, Entrada, Apresentação e Saída.

Para isso, iremos usar a variável local turn e timer. Dependendo da parte em que estamos, turn terá um valor.

Se estivermos na entrada, turn será igual a 0, na apresentação 1 e Saída turn será igual a 2.

Agora que sabemos para que servirá turn, vamos enfim, aos efeitos.

Crie outra estrutura condicional, abaixo da anterior. Nessa estrutura checaremos se turn == 0 ou se turn == 1 ou se turn == 2.

if turn == 0
  #~ Entrada
elsif turn == 1
  #~ Apresentação
elsif turn == 2
  #~ Saída
end

Na Entrada, vamos adicionar o comando :

@intro.opacity += Scene_Intro_DB::Appear_Opacity

E logo em seguida criamos uma condição para checar se : @intro.opacity >= 255. Dentro desta condição adicionamos o comando turn = 1.

Esta parte deveria estar assim :

if turn == 0
  @intro.opacity += Scene_Intro_DB::Appear_Opacity
  if @intro.opacity >= 255
    turn = 1
  end
elsif turn == 1
  #~ Apresentação
elsif turn == 2
  #~ Saída
end

Agora em Apresentação, faremos uma checagem do tempo que a imagem ficara na tela.

Enfim usaremos a variável local timer, vamos adicionar um valor a ela para que chegue até o tempo que a imagem fica após aparecer.

Logo em seguida criamos uma estrutura condicional para checar se timer >= Scene_Intro_DB::Time_Visible_Intro

Esta parte deveria estar assim :

if turn == 0
  @intro.opacity += Scene_Intro_DB::Appear_Opacity
  if @intro.opacity >= 255
    turn = 1
  end
elsif turn == 1
  timer += 1
  if timer >= Scene_Intro_DB::Time_Visible_Intro
    turn = 2
  end
elsif turn == 2
  #~ Saída
end

Agora em Saída, vamos adicionar um efeito "fade out" a imagem.

Primeiro adicionamos o comando :

@intro.opacity -= Intro_DB::Appear_Opacity

Depois criamos uma estrutura condicional para checar se @intro.opacity <= 0

E dentro desta estrutura adicionamos os comandos @intro.dispose para remover a imagem e break para pausar o ciclo de animação.

Esta parte deve estar :

if turn == 0
  @intro.opacity += Scene_Intro_DB::Appear_Opacity
  if @intro.opacity >= 255
    turn = 1
  end
elsif turn == 1
  timer += 1
  if timer >= Scene_Intro_DB::Time_Visible_Intro
    turn = 2
  end
elsif turn == 2
  @intro.opacity -= Intro_DB::Appear_Opacity
  if @intro.opacity <= 0
    @intro.dispose
    break
  end
end

Explicando, sempre que o ciclo for i in, criar uma imagem será também iniciado um ciclo "fechado", que vai adicionar um efeito a imagem criada.

E assim que o ciclo "fechado" loop do for encerrado, o ciclo for i in vai progredir com suas voltas até que chegue ao valor do ultimo ciclo.

Por fim, nosso script completo deve estar assim :

Checagem !

module Scene_Intro_DB
  
  Max_Intro_Scenes = 3       #~ Número máximo de Imagens para Intro
  
  Appear_Opacity = 3           #~ Velocidade para imagem aparecer
  
  Exit_Opacity = 3                #~ Velocidade para imagem sair
  
  Time_Visible_Intro = 60     #~ Tempo que a imagem fica após aparecer e antes de sumir
  
end

class Scene_Title

  alias incluindo_dados_ao_metodo_start start

  def start
    SceneManager.clear
    create_intro
    incluindo_dados_ao_metodo_start
  end
  
  def create_intro
    for i in 1..Scene_Intro_DB::Max_Intro_Scenes
      @intro = Sprite.new
      @intro.bitmap = Cache.system("Intro-" + "#{i}")
      @intro.opacity = 0
      intro_animation
    end
  end

  def intro_animation
    turn = 0 ;  timer = 0
    loop do
      Graphics.update
      Input.update
      if Input.trigger?(:C)
        @intro.opacity = 0
        @intro.dispose
        break
      end
      if turn == 0
       @intro.opacity += Scene_Intro_DB::Appear_Opacity
        if @intro.opacity >= 255
          turn = 1
        end
      elsif turn == 1
        timer += 1
        if timer >= Scene_Intro_DB::Time_Visible_Intro
         turn = 2
        end
      elsif turn == 2
        @intro.opacity -= Scene_Intro_DB::Appear_Opacity
        if @intro.opacity <= 0
          @intro.dispose
          break
        end
      end
    end
  end
  
end

[close]

Dúvidas ou curiosidades sobre o tutorial, basta perguntar no próprio tópico que responderei ^-^

Espero que tenham gostado do tutorial, e aprendido com ele.

[Danka]

Gostei bastante da aula. ^^
Muito Obrigado Vitor.

[Raposa Solar]

Adorei a aula. Eu sempre quis saber como fazer uma abertura (Introdução) antes da tela de título. Adorei mesmo.

[Raposa Solar]

Dá para colocar algum tipo de som durante a respectiva apresentação? Assim como acontece já com alguns títulos famosos de jogos e/ou aberturas de empresas. Como por exemplo no jogo Sonic que dizia: SEGA.
Ou mesmo algum tipo de som rápido?