Tutorial Pong #2 - Tela de Créditos

Bom dia a todos!!

Hoje vou colocar a tela de créditos deste jogo.
Para isso, vamos adicionar as seguintes linhas:

-- [Tela Créditos]
local telaCreditos

local mostrarCreditos = {}
local ocultarCreditos = {}

Agora criaremos o listener do botão, o evento que será disparado ao clicar no botão.

startButtonListener( 'add' )

function startButtonListener( action )
    if action == 'add' then
        btnCreditos:addEventListener( 'tap', mostrarCreditos )
    end
end

function mostrarCreditos:tap( e )
    btnJogar.isVisible    = false
    btnCreditos.isVisible = false

    telaCreditos = display.newImage( 'creditos.png', _W / 2, _H / 2 + 90 )

    telaCreditos:addEventListener( 'tap', ocultarCreditos )
end

function ocultarCreditos:tap( e )
    btnJogar.isVisible    = true
    btnCreditos.isVisible = true

    telaCreditos:removeEventListener( 'tap', ocultarCreditos )
    display.remove( telaCreditos )
    telaCreditos = nil
end

Com isso, já deve estar aparecendo a tela de créditos ao clicar no botão. Mas não é só isso não. Vamos colocar um efeito nesta transição de telas. Para isso, vamos adicionar algumas linhas à função mostrarCreditos:

    lastY = titulo.y
    transition.to( titulo, { time = 300, y = ( display.contentHeight * 0.5 ) - ( titulo.height + 50 ) } )
    transition.to( telaCreditos, { time = 300, y = ( display.contentHeight * 0.5 ) + 35,
        onComplete = function()
            telaCreditos:addEventListener( 'tap', ocultarCreditos )
        end } )

E vamos alterar a função ocultarCreditos para que fique assim:

function ocultarCreditos:tap( e )
    transition.to( telaCreditos, { time = 300, y = _H / 2 + 90,
        onComplete = function()
            btnJogar.isVisible = true
            btnCreditos.isVisible = true
            telaCreditos:removeEventListener( 'tap', ocultarCreditos )
            display.remove( telaCreditos )
            telaCreditos = nil
        end } )
    transition.to( titulo, { time = 300, y = lastY } )
end

Bom, a animação desta tela não foi nada muito grandioso, mas já deu outra cara ao app.
Para baixar essa parte do tutorial, clique aqui.
Espero que estejam gostando deste tutorial. Até o próximo!!