Ir para conteúdo


Foto

Elementos transparentes na tela.


  • Por favor, faça o login para responder
15 respostas neste tópico

#1 Pedro Pinheiro

Pedro Pinheiro

    Membro Nível 1

  • Membros
  • PipPip
  • 185 posts
  • LocationBrazil

Postado 18 julho 2016 - 05:36

A bastante tempo eu venho me perguntando. Porque com outros programas é tão simples a sobreposição e transparência de imagens, mas no autoit NÃO!?

 

Por exemplo:

 

Em muitos programas é usado o arquvo ".png", normalmente essa imagem é criada com um background trânsparente para sobrepor algum elemento da GUI ou geralmente fundos verde:

 

zFUnAQH.png

 

Depois de montar a GUI com o elemento (.png) de background verde, o fundo verde some e a imagem fica sem fundo:

 

M1zxQwy.png

 

 

Onde eu quero chegar???

 

Eu gostaria de achar um padrão para definir um background nas imagens usadas como elemento na tela. Um tempo atrás eu vi um elemento na tela de uma GUI onde o elemento tinha sombra:

 

Ex:

 

htAh6Km.png

 

 

Coloquei 4 elementos na imagem representando uma Gui. O background da Gui é a foto das pedras, e as demais imagens são exemplos de como elas podem ficar em cima do background mantendo sua transparência e sua sombra. Eu gostaria de fazer isso no autoit, mas o guicreatepic não aceita png, eu encontrei outras maneiras de colocar uma png no gui, mas ela não fica transparente e nem mantem a borda...simplesmente fica um background branco.

 

Eu estava pensando em criar algumas coisas, mas essa limitação do autoit que eu encontrei não me deixa.

Pensei em fazer algo do tipo...slides, jogos, matriz de maquinas comerciais...

 

Ex:

lJ4i555.png

 

 

 

Sabe aquele item de seleção verde que aparece na imagem abaixo? Isso que eu queria fazer. Fazer com que ele fique transparente para que eu possa ver o backgroundo do gui por dentro dele.

 

placa-arcade-fliperama-jamma-pandora-box

 

Eu abri o programa e peguei a imagem png verde de seleção e tentei usar no autoit, mas..

 

v8FfXbv.png

 

 

Quando eu fui colocar no programa, ele ficou assim, sem transparência.

 

SUJ7mwf.gif


Editado por Pedro Pinheiro, 18 julho 2016 - 05:39 .


#2 Belini

Belini

    Administrador

  • Administradores (Adm)
  • PipPipPipPipPip
  • 2.206 posts
  • LocationMinas Gerais

Postado 18 julho 2016 - 08:51

Achei que ficou bem legal o seletor desta maneira pois o preenchimento dele fez ficar bem mais nítido o item selecionado!

#3 Pedro Pinheiro

Pedro Pinheiro

    Membro Nível 1

  • Membros
  • PipPip
  • 185 posts
  • LocationBrazil

Postado 18 julho 2016 - 08:55

Achei que ficou bem legal o seletor desta maneira pois o preenchimento dele fez ficar bem mais nítido o item selecionado!

 

Belini. Você sabe mover uma imagem em GDI+? Estou usando para colocar imagem na tela com transparência. Aprendi essa noite mexer um pouco com GDI+ e apliquei ao programa, mas na hora de mover a imagem ele fica repetindo a mesma "_GDIPlus_GraphicsDrawImageRect($hGraphic,$imagem,35,$pos_barra,309,49)" Essa função adiciona uma imagem na GUI, só que não consigo mover a imagem criada.



#4 Fábio iGames

Fábio iGames

    AutoIt MVP

  • AutoIt MVPs (MVP)
  • PipPip
  • 178 posts
  • LocationSão Paulo / SP

Postado 18 julho 2016 - 09:46

@Pedro Pinheiro, para imagens PNG use a UDF do Jscript _GUICreateAlfa.au3.
 
Download da UDF + Exemplo Aqui:

Por favor Login ou se não possuir um conta Registre-se para ver o conteúdo escondido

 
Ao testar declare a Variável  $ghGDIPDll   e pronto.
 
Tô usando ela para um projeto fica show de bola.
 
Para trabalhar GDI é bem chato, acho que tem que criar e se for mover tem que deletar para para criar em outra coordenada novamente.

Editado por Fábio iGames, 18 julho 2016 - 09:48 .


#5 Belini

Belini

    Administrador

  • Administradores (Adm)
  • PipPipPipPipPip
  • 2.206 posts
  • LocationMinas Gerais

Postado 18 julho 2016 - 10:24

@Pedro Pinheiro não uso em nenhum projeto meu mas tenho aqui coisas que fui guardando que deve servir para o seu propósito.

 

Baixar:

Por favor Login ou se não possuir um conta Registre-se para ver o conteúdo escondido


Editado por Belini, 18 julho 2016 - 10:25 .


#6 Pedro Pinheiro

Pedro Pinheiro

    Membro Nível 1

  • Membros
  • PipPip
  • 185 posts
  • LocationBrazil

Postado 18 julho 2016 - 04:39

Eu usei  _GDIPlus_GraphicsClear($hGraphic, 0xFF000000), mas ele deleta todas as imagens da Gui também que não tem nada haver.

 

HnkRErO.gif



#7 Belini

Belini

    Administrador

  • Administradores (Adm)
  • PipPipPipPipPip
  • 2.206 posts
  • LocationMinas Gerais

Postado 18 julho 2016 - 04:47

Não sei se tem haver mas neste código da cor está passando 2 zeros 0xFF000000



#8 Pedro Pinheiro

Pedro Pinheiro

    Membro Nível 1

  • Membros
  • PipPip
  • 185 posts
  • LocationBrazil

Postado 18 julho 2016 - 05:21

No script que eu fiz de exemplo...a estrutura é criada com uma imagem de background e uma outra imagem em cima. Em 8 segundos a imagem de cima é deletada e recriada um pouco a baixo, mas o problema é que o "_GDIPlus_GraphicsClear($hGraphic, 0xFF000000)" está deletando todas as imagens.

 

 

 

Não sei se tem haver mas neste código da cor está passando 2 zeros 0xFF000000

 

Não é :/

 

 

Eu separei o script e deixei ele bem simples.

Por favor Login ou se não possuir um conta Registre-se para ver o conteúdo escondido

 

@Pedro Pinheiro, para imagens PNG use a UDF do Jscript _GUICreateAlfa.au3.
 
Download da UDF + Exemplo Aqui:

Por favor Login ou se não possuir um conta Registre-se para ver o conteúdo escondido

 
Ao testar declare a Variável  $ghGDIPDll   e pronto.
 
Tô usando ela para um projeto fica show de bola.
 
Para trabalhar GDI é bem chato, acho que tem que criar e se for mover tem que deletar para para criar em outra coordenada novamente.

 

 

Eu fiz isso. Deletar e criar outra, mas na hora de deletar uma, o script deleta todas imagens da gui.


Editado por Pedro Pinheiro, 19 julho 2016 - 01:45 .


#9 John

John

    Novato

  • Membros
  • 8 posts
  • LocationCampinas

Postado 18 janeiro 2017 - 01:41

0xFF000000
 

 

Galera, me perdoem mudar de calça pra sapato, mas alguém sabe me explicar o que é isso ou apenas dizer algo para que eu possa pesquisar a respeito. Vejo essas paradas em códigos de C e me parece ser referente à alocação na memória, mas não acho nada que explique o uso, como é feito, etc. De novo, me desculpem por essa resposta nada vê com o contexto.



#10 BigMen

BigMen

    Membro

  • Membros
  • Pip
  • 58 posts
  • LocationUberlândia, MG

Postado 18 janeiro 2017 - 04:32

 

 

Galera, me perdoem mudar de calça pra sapato, mas alguém sabe me explicar o que é isso ou apenas dizer algo para que eu possa pesquisar a respeito. Vejo essas paradas em códigos de C e me parece ser referente à alocação na memória, mas não acho nada que explique o uso, como é feito, etc. De novo, me desculpem por essa resposta nada vê com o contexto.

 

 

São códigos para que o sistema identifique as cores:

 

 

White
RGB="#FFFFFF" Red
RGB="#FF0000" Green
RGB="#33ff33" Blue
RGB=#0000FF Magenta
RGB=#FF00FF Cyan
RGB=#00FFFF Black
RGB=#000000Y

Yellow
RGB=#FFFF00

 

 

Da uma pesquisa na net, existem tabelas de cores pra você entender melhor.



#11 John

John

    Novato

  • Membros
  • 8 posts
  • LocationCampinas

Postado 19 janeiro 2017 - 08:12

 

São códigos para que o sistema identifique as cores:

 

 

White
RGB="#FFFFFF" Red
RGB="#FF0000" Green
RGB="#33ff33" Blue
RGB=#0000FF Magenta
RGB=#FF00FF Cyan
RGB=#00FFFF Black
RGB=#000000Y

Yellow
RGB=#FFFF00

 

 

Da uma pesquisa na net, existem tabelas de cores pra você entender melhor.

 

Brigadão, bro!



#12 Luigi

Luigi

    Administrador

  • Administradores (Adm)
  • PipPipPipPipPip
  • 606 posts
  • LocationCWB

Postado 19 janeiro 2017 - 08:52

Eu usei  _GDIPlus_GraphicsClear($hGraphic, 0xFF000000), mas ele deleta todas as imagens da Gui também que não tem nada haver.
 
HnkRErO.gif

Desculpe chegar atrasado, mas vai a minha contribuição...

Para trabalhar com GDI+, é mais ou menos assim, você cria um background e um buffer.
Desenha tudo no buffer, e depois pinta o "buffer" no background.
Depois apaga o buffer

E desenha tudo de novo no buffer.

E imprime o buffer no background.

É uma carga de processamento bem grande, ainda mais se trabalhar com muitas imagens/elementos e como o AutoIt não processa diretamente por hardware, se colocar muitos elementos vai ficar lento mesmo.

Falo isso, pois não é uma boa ideia desenvolver um jogo diretamente em AutoIt, ele não foi feito pra isso.

Mas esse encher de coisas, depende também do seu computador.

Você disse que ele deleta tudo, sim, é isso mesmo.
Não tente programar um código para que ele não delete.
Programe um código que reconstrua todos os seus elementos nas posições que você deseja, e pinte novamente, assim dará certo.
Dessa forma, você conseguirá mover os elementos.

Trabalha com GDI+, é como pensar em desenvolver um jogo...
É necessário reconstruir a cena inteira a cada 15 mili-segundos para dar a impressão de movimento, aparecimento ou desaparecimento.

Acredito que trabalhar com animação no GuiCreate não seja uma boa ideia (pois ele não foi feito para isso, GuiCreate é para exibição de elementos estáticos).
Pense direto com tudo no GDI+, o GuiCreate serve apenas de base para criar a tela de GDI+.
Mas ai vem um grande trabalho, refazer tudo em GDI+ (construir tudo o que você quer ver em GDI+, sem usar nada dos controles de GuiCreate).

Ainda tem mais um detelhe: a interacão dos controles com o mouse, isso também terá de ser construído.

Com taclado, é mais fácil.

inté mais


Editado por Luigi, 19 janeiro 2017 - 08:40 .


#13 Luigi

Luigi

    Administrador

  • Administradores (Adm)
  • PipPipPipPipPip
  • 606 posts
  • LocationCWB

Postado 19 janeiro 2017 - 09:04

Vou tentar dar uma pequena contribuição sobre GDI+.

 

Quando eu penso em construir qualquer coisa em GDI+, eu já tenho esse modelo pronto, segue:

Por favor Login ou se não possuir um conta Registre-se para ver o conteúdo escondido

Agora, fiz uns comentários no exemplo acima, que talvez ajude a entender o que está acontecendo:

Por favor Login ou se não possuir um conta Registre-se para ver o conteúdo escondido

Agora, meu caro colega de fórum, deixa eu te dizer algo que vale ouro!

O HELP do AutoIT quando fala de GDI+ é fantástico! É riquíssimo!

Se fosse um livro e tivesse um valor, acho que seria mais de R$ 1.000,00!

E você tem isso de graça!

 

Bem, voltando ao assunto...

 

Agora deixo alguns desafios para você:

 

a) use o exemplo acima, e faça o _box() se mover para cima, baixo, esquerda e direita;

 

B) use o exemplo acima, e limite o movimento do _box() para que ele não possa sair dos limites do GDI+

 

c) crie uma forma de variar suavemente a cor do background entre branco e preto, dando a impressão de dia/noite

 

d) carregue uma imagem qualquer (pequena por favor)

 

e) faça essa imagem carregada se mover pelo GDI+ com as setas

 

f) no GDI, tudo que é carregado/aberto, tem que ser descarregado/fechado, há algo no exemplo comentado que não foi descarregado/fechado, onde esta?

 

g) faça um _box() piscar a cada 300 mili segundos

 

h) faça um _box() variar de tamanho sozinho


Editado por Luigi, 19 janeiro 2017 - 09:15 .


#14 Pedro Pinheiro

Pedro Pinheiro

    Membro Nível 1

  • Membros
  • PipPip
  • 185 posts
  • LocationBrazil

Postado 08 março 2017 - 09:08

AAAH Mil desculpas, não conheço nenhum modo de acompanhar tópicos antigos, não aparece nenhuma notificação para mim...enfim. A tempos eu já resolvi esse problema, na verdade eu achei duas alternativas, as UDF's abaixo.

 

1º GIFAnimation.au3

 

2º GUICtrlPic.au3

 

 

As duas emulavam .PNG de forma que mantinha as imagens com seus backgrounds transparentes e assim com o "ControlMove" eu movimentava barra pela GUI. A GUICtrlPic.au3 foi mais eficiente, mas ela não emula Gif animado. A GIFanimation.au3 tinha um pequeno bug que as vezes apagava todos os elementos da gui.


Editado por Pedro Pinheiro, 08 março 2017 - 09:10 .


#15 Fábio iGames

Fábio iGames

    AutoIt MVP

  • AutoIt MVPs (MVP)
  • PipPip
  • 178 posts
  • LocationSão Paulo / SP

Postado 09 março 2017 - 10:08

@Luigi tenho uma pasta só com seus exemplos aqui . :up:

 

Vou tentar dar uma pequena contribuição sobre GDI+.

 

Quando eu penso em construir qualquer coisa em GDI+, eu já tenho esse modelo pronto, segue:

Por favor Login ou se não possuir um conta Registre-se para ver o conteúdo escondido

Agora, meu caro colega de fórum, deixa eu te dizer algo que vale ouro!

O HELP do AutoIT quando fala de GDI+ é fantástico! É riquíssimo!

Se fosse um livro e tivesse um valor, acho que seria mais de R$ 1.000,00!

E você tem isso de graça!

 

Bem, voltando ao assunto...

 

Agora deixo alguns desafios para você:

 

a) use o exemplo acima, e faça o _box() se mover para cima, baixo, esquerda e direita;

 

B) use o exemplo acima, e limite o movimento do _box() para que ele não possa sair dos limites do GDI+

 

c) crie uma forma de variar suavemente a cor do background entre branco e preto, dando a impressão de dia/noite

 

d) carregue uma imagem qualquer (pequena por favor)

 

e) faça essa imagem carregada se mover pelo GDI+ com as setas

 

f) no GDI, tudo que é carregado/aberto, tem que ser descarregado/fechado, há algo no exemplo comentado que não foi descarregado/fechado, onde esta?

 

g) faça um _box() piscar a cada 300 mili segundos

 

h) faça um _box() variar de tamanho sozinho

 

 

É como eu digo atualmente... A experiência faz toda a diferença.

 

Tá guardado aqui e quando tiver tempo vou encarar o Desafio. :like_icon:  ;)


Editado por Fábio iGames, 09 março 2017 - 10:09 .


#16 Pedro Pinheiro

Pedro Pinheiro

    Membro Nível 1

  • Membros
  • PipPip
  • 185 posts
  • LocationBrazil

Postado 11 março 2017 - 05:43

Me sinto até mau em usar um UDF que faz tudo o que ele com paciência explicou ali em cima, mas vou ler o que você explicou, preciso modificar e converter imagens usando o Gdiplus. Valeu mesmo @

Por favor Login ou se não possuir um conta Registre-se para ver o conteúdo escondido


Editado por Pedro Pinheiro, 11 março 2017 - 05:43 .





0 usuário(s) está(ão) lendo este tópico

0 membro(s), 0 visitante(s) e 0 membros anônimo(s)

Documentação OnLine de referência