<< Voltar Índice Próxima >>

TRANSPARÊNCIA E NAVIMATERIAL

Transparência

Uma primeira forma de determinar a transparência na Navi é usando a função "setOpacity()". 

naviMgr->getNavi("naviTeste")->setOpacity(0.7);

 

Em que define-se a porcentagem de opacidade da janela como um todo,no parâmetro da função.

Outra forma de transparência é determinando isso na própria figura como acima. Isso pode ser feito em muitos editores de imagem, como o Gimp e o Photoshop. Recomenda-se utilizar o formato .png, pois é gratuito, é pequeno e trabalha muito bem com transparências. 

<html>
<head>
<style>
#container
{
	position: absolute;
	top: 0px;
	left: 0px;
	background-image: url('status_bg.png');
	width: 512px;
	height: 256px;
}
</style>
</head>
<body>

    <div id="container">

</body>
</html>

 

Depois de criar uma página com a imagem anteriormente citada, salve-a com o nome "paginaMask.html" e coloque juntamente com as outras. 

naviMgr->createNavi("naviTeste", "local://paginaMask.html", NaviPosition(Center), 512, 256, true);
naviMgr->getNavi("naviTeste")->setMask("status_bg.png");

 

Primeiramente criamos uma janela com a "paginaMask.html" e depois definimos a imagem que possui transparência através da função "setMask()". Execute o programa para testar.

Uma terceira maneira de se fazer isso na Navi, é definindo a transparência para uma determinada cor da página. Uma figura pode ser criada com uma cor de fundo que não existe em outras partes da figura, como a cor rosa ou verde.

Após alterar a imagem da página "paginaMask.html" pela vista acima. Mudando também as dimensões para as da nova figura. 

naviMgr->createNavi("naviTeste", "local://paginaMask.html", NaviPosition(Center), 346, 171, true);
naviMgr->getNavi("naviTeste")->setColorKey("#44AA5E",0.0);

 

O código acima cria uma nova janela, e depois define a cor de fundo verde(#44aa5e) como totalmente transparente, usando a função "setColorKey()". Em que o primeiro parâmetro é a cor e o segundo o grau de opacidade. Veja abaixo. 

naviMgr->getNavi("naviTeste")->setColorKey("#44AA5E",0.3, "#ff0000");

 

Um terceiro parâmetro desta função define uma cor que será posta no lugar da usada no primeiro. No exemplo, a cor verde é substituida por vermelho com opacidade de 30%.

NaviMaterial

Podemos usar uma página da Navi como material na Ogre. Isso pode ser útil para criar uma interface que possa ser mais 3D, interagir mais com o ambiente. 

Plane plane(Vector3::UNIT_Z, 0);

MeshManager::getSingleton().createPlane("ground",
   ResourceGroupManager::DEFAULT_RESOURCE_GROUP_NAME, plane,
   512,256,20,20,true,1,1,1,Vector3::UNIT_Y);

Entity *entPlano = scene_mgr->createEntity("chao","ground");
SceneNode *nodePlano = scene_mgr->getRootSceneNode()->createChildSceneNode("chaoNode");
nodePlano->attachObject(entPlano);

nodePlano->yaw(Degree(45));
nodePlano->setPosition(Vector3(25,0,-300));
ent1->setCastShadows(true);

 

No arquivo "Inicializa.cpp" adicione o código acima no método "CarregaMalhas()". Inicialmente criamos um plano semelhantemente como foi feito no tutorial de sombras e luzes. Mas como o ele deve estar voltado para a câmera, então na sua inicialização definimos a direção positiva do eixo Z para ser a sua "frente".

Outra diferença esta nos 3 últimos parâmetros do método "createPlane()", em que o antepenúltimo e o penúltimo são a quantidade de vezes em que a textura irá se repetir no plano, nas direções X e Y respectivamente. Como queremos que ela seja uma imagem única estabelece-se esses dois valores como 1. O último parâmetro é o upVector, o qual deve ser uma direção paralela a da "frente" do plano, no exemplo é o eixo positivo de Y. 

naviMgr->createNaviMaterial("tela", "local://paginaMask.html", 512, 256);
scene_mgr->getEntity("chao")->setMaterialName(naviMgr->getNavi("tela")->getMaterialName());

 

Indo para o arquivo "AplicationListener.cpp", inclua as linhas acima no construtor da classe.

Utilizando a página HTML cujo o código é o mesmo do inicio deste tutorial, criamos um material com ela usando a função "createNaviMaterial()". É importante definir o tamanho da janela sendo o mesmo do plano nos 2 últimos parâmetros, para evitar problemas de layout. Então obtemos a entidade do plano, e com a função "setMaterial()" definimos o seu material. Onde o mesmo virá de uma janela da Navi apartir da função "getMaterialName()";

Italo Mendes
italo.ribeiro@gmail.com

<< Voltar Índice Próxima >>