Olá pessoal recentemente o pessoal do Corona Labs trouxeram a engine Grafica 2.0.

E enquanto nos foi dado muita coisa nova para brincar – tanto quanto enormes melhorias na engine grafica – nós também temos que adotar uma certa quantidade de mudanças, estas novas melhorias não vieram sem custo sobre o SDK básico.

Aqui estao as top 3 coisas que você precisa estar ciente a respeito da nova engine grafica no Corora SDK, sendo um iniciante ou mesmo migrando um projeto existente, aproveitem esse tutorial basico sobre coronaSDK e sobre o graphics 2.0.

Anchor Points (Pontos Ancoras)

A mais importante das mudanças no Corona SDK é display:SetReferencePoint() sendo substituido pelos mais flexiveis pontos ancoras.

Anchor points são os novos pontos de referência para mostrar objetos.

Usando o antigo reference points, eramos capazes de atribuir um ponto em uma das nove posições (TopLeftReferencePoint, TopCenterReferencePoint, etc…), o que está bom na maioria dos casos, mas com o anchor points podemos posicionar em qualquer ponto em um espaço de objetos coordenados (display objects coordinate space). Antes de olharmos aos aspectos novos do anchor points, veremos como traduzir o velho sistema reference point para o novo anchor points, os quais agora são baseados em porcentagem. Esta sendo baseada na largura e altura do objeto.

display.TopLeftReferencePoint

1
2
3
4

--Velho
obj:setReferencePoint( display.TopLeftReferencePoint )
--Novo
obj.anchorX, obj.anchorY = 0, 0

display.TopCenterReferencePoint

1
2
3
4

--Velho
obj:setReferencePoint( display.TopCenterReferencePoint )
--Novo
obj.anchorX, obj.anchorY = .5, 0

display.TopRightReferencePoint

1
2
3
4

--Velho
obj:setReferencePoint( display.TopRightReferencePoint )
--Novo
obj.anchorX, obj.anchorY = 1, 0

display.CenterLeftReferencePoint

1
2
3
4

--Velho
obj:setReferencePoint( display.CenterLeftReferencePoint )
--Novo
obj.anchorX, obj.anchorY = 0, .5

display.CenterReferencePoint

1
2
3
4

--Velho
obj:setReferencePoint( display.CenterReferencePoint )
--Novo
obj.anchorX, obj.anchorY = .5, .5

display.CenterRightReferencePoint

1
2
3
4

--Velho
obj:setReferencePoint( display.CenterRightReferencePoint )
--Novo
obj.anchorX, obj.anchorY = 1, .5

display.BottomLeftReferencePoint

1
2
3
4

--Velho
obj:setReferencePoint( display.BottomLeftReferencePoint )
--Novo
obj.anchorX, obj.anchorY = 0, 1

display.BottomCenterReferencePoint

1
2
3
4

--Velho
obj:setReferencePoint( display.BottomCenterReferencePoint )
--Novo
obj.anchorX, obj.anchorY = .5, 1

display.BottomRightReferencePoint

1
2
3
4

--Velho
obj:setReferencePoint( display.BottomRightReferencePoint )
--Novo
obj.anchorX, obj.anchorY = 1, 1

Como comentado anteriormente, o posicionamento é baseado em porcentagem.

Visualmente fica assim:

Isto nos permite atribuir um “ponto de referencia” em qualquer ponto no objeto display. Se precisarmos rotacionar do centro, mas um pouquinho para a esquerda, então podemos fazer assim:

1

obj.anchorX, obj.anchorY = .25, .5

Esta nova maneira de trabalhar com reference points será de grande beneficio para dynamic UI e mostrar objetos que precisam se transformar em um ponto especifico.

Apesar de ser completamente opcional, você pode criar um “anchor helper” inserindo o seguinte código seu main.lua ou no globals.lua para criar alguns atalhos para pontos de ancora que operam como constante no antigo reference point:

1
2
3
4
5
6
7
8
9
10

-- main.lua or globals.lua
anchor = { TopLeft = function(t) t.anchorX, t.anchorY = 0, 0; end,
           TopCenter = function(t) t.anchorX, t.anchorY = .5, 0; end,
           TopRight = function(t) t.anchorX, t.anchorY = 1, 0; end,
           CenterLeft = function(t) t.anchorX, t.anchorY = 0, .5; end,
           Center = function(t) t.anchorX, t.anchorY = .5, .5; end,
           CenterRight = function(t) t.anchorX, t.anchorY = 1, .5; end,
           BottomLeft = function(t) t.anchorX, t.anchorY = 0, 1; end,
           BottomCenter = function(t) t.anchorX, t.anchorY = .5, 1; end,
           BottomRight = function(t) t.anchorX, t.anchorY = 1, 1; end, }

Para usar esta funcionalidade, você faria assim:

1
2
3
4
5
6
7
8
9
10
11
12
13

-- some.lua

local r = display.newRect( 0, 0, 200, 300 )

anchor.Center( r ) -- seta a ancora para o centro
 
r.x = display.contentCenterX
r.y = display.contentCenterY
 
anchor.TopLeft( r ) -- seta a anchora para o topo / esquerda
 
r.x = 0
r.y = 0

Valores de Cores

Outra grande modificação é a maneira de especificar a cor. Cores agora também são baseadas em porcentagem. Neste caso o valor que precisamos especificar é a porcentagem do padrão 255 que estamos acostumados.

Onde antes representavamos uma cor, como verde, assim:

0, 255, 0

Agora representamos assim:

0, 1, 0

Ou, 0% vermelho, 100% verde, 0% azul

Os valores de colres que usavamos previamente variavam de 0 a 255. Podemos usar este fato para rapidamente calcular a porcentagem da cor. Por exemplo, para setar a cor para azul ardósia – que é 106, 90, 205 – podemos fazer assim:

1

obj:setFillColor( 106/255, 90/255, 205/255 )

Você pode também ajustar o alpha. Que é facil representar com porcentagem.

1

obj:setFillColor( 106/255, 90/255, 205/255, .6 )

Isto proverá a porcentagem requerida para qualquer setFillColor() método de objeto. Novamente, completamente opcional, mas aqui uma simples função helper para cores. Coloque este codigo em global mod ou no topo do seu arquivo:

1

color = function(r,g,b) return (r/255), (g/255), (b/255); end

Você pode usar assim:

1

txtObj:setFillColor( color( 128, 128, 128 ) )

Text Color (Cor de texto)

Agora que nos familiarizamos com os novos valores de cores, perceba que o método setTextColor() do TextObject tornou-se obsoleto e agora usa o universal setFillColor(). Novamente você deve fornecer os valores de cor usando o novo método como mostrado a baixo:

1
2
3
4

--Velho
textObj:setTextColor( 128, 128, 128 )
--Novo
textObj:setFillColor( 128/255, 128/255, 128/255 )

Ainda temos muito a aprender sobre o novo Corona SDK graphics engine, mas dou boas vindas para as possibilidades que vem com ele. Espero que este artigo tenha te ajudado a entender um pouco mais sobre a nova engine, e que você comece a fazer algumas apps e jogos incríveis no Corona SDK.

A tradução do Artigo original foi feita pela Franciele Andre

Se você achou esta informação util, outros poderão também, então por favor compartilhe. Obrigado.