GUI with transparency & Mouse Events

Troubleshooting gui
1

Hi,



I want to make a GUI wich has transparent parts and throw mouse events when the cursor is over the interface.



Here a little screenshot:







For other GUI-Elements I use FengGui. So I tried two different ways to solve my problem.



First, quad in ortho-mode:


      TextureState state = DisplaySystem.getDisplaySystem().getRenderer().createTextureState();
      URL url = this.getClass().getResource(DiplomarbeitConstants.GUI_PATH + "maingui.png");
      Texture tex = TextureManager.loadTexture( url, true );

      AlphaState alphaState = DisplaySystem.getDisplaySystem().getRenderer().createAlphaState();
      alphaState.setBlendEnabled(true);
      
      state.setTexture(tex);
      quad.setRenderState(state);
      quad.setRenderState(alphaState);

      quad.setLocalTranslation(512, 32, 0);
      quad.setRenderQueueMode( Renderer.QUEUE_ORTHO );

      Node quadNode = new Node("quadNode");
      quadNode.attachChild(quad);
      rootNode.attachChild(quadNode);

      quad.updateRenderState();



Problem: no mouse event, tried something with "node.findPick(pickRay, results);", but doesnt work actualy (ortho mode?)


Second, FengGui background class:


public class Background extends Container {

   public Background( String filePath ) {
      
      PixmapDecorator pixmapDec = new PixmapDecorator(Window.GENERATE_NAME,loadPixmap(filePath));

      this.setXY(0, 0);
      this.setSize( pixmapDec.getPixmap().getWidth(), pixmapDec.getPixmap().getHeight() );

      this.getAppearance().add( pixmapDec );
      this.layout();
   }

   protected Pixmap loadPixmap(String filename){
      Pixmap pixmap = null;
      try {
         pixmap = new Pixmap(Binding.getInstance().getTexture(filename));
      } catch (IOException e) {
         e.printStackTrace();
      }
      return pixmap;
   }
   
   @Override
   public IWidget getWidget(int x, int y) {
      // TODO - transparent parts has to return null
      
      return super.getWidget(x, y);
   }



- Problem: I get mouse events, but also when the mouse is over the transparent areas.


So have anyone an idea what is the best way to do such a GUI, or can solve my problems?
2

After thinking about it and try a lot of code, I finally solved it with FengGUI.



public class Background extends Container {

   private BufferedImage img;
   private int width;
   private int height;

   public Background( String filePath ) {
      PixmapDecorator pixmapDec = new PixmapDecorator(Window.GENERATE_NAME,loadPixmap(filePath));

      this.setXY(0, 0);
      width = pixmapDec.getPixmap().getWidth();
      height = pixmapDec.getPixmap().getHeight();
      
      this.setSize( width, height );

      this.getAppearance().add( pixmapDec );
      this.layout();
   }

   protected Pixmap loadPixmap(String filename){
      Pixmap pixmap = null;
      try {
         img = ImageIO.read(new File(filename));
         
         pixmap = new Pixmap(Binding.getInstance().getTexture(img));
      } catch (IOException e) {
         e.printStackTrace();
      }
      return pixmap;
   }

   @Override
   public IWidget getWidget(int x, int y) {
      // test if is x,y in container
      if( super.getWidget(x, y) != null ) {
         // test transparenz
         int newY = (height - 1) - y;
         Color c = new Color(img.getRGB(x, newY), true);
         if( c.getAlpha() != 0 )
            return this;
      }
      return null;
   }
}

3

Ha, that's what I was about to say. No other way to do it really  :wink: