Adding an extra image to a FrameWindow looknfeel

[Anasky]

Heya,

I've recently been adding images to my game, and that all works fine and look splendid
Currently trying to modify the FrameWindow, and although that works so far, I can't seem to figure out how to add an extra image to it (there's a title box in the GUI that I would like to be present but not to scale along).

This is what I've got so far, and it's all working except for the new image:

Code: Select all

    <ImagerySection name="main">
      <FrameComponent>
        <Area>
          <Dim type="LeftEdge">
            <AbsoluteDim value="0" />
          </Dim>
          <Dim type="TopEdge">
            <AbsoluteDim value="0" />
          </Dim>
          <Dim type="RightEdge">
            <UnifiedDim scale="1" type="RightEdge" />
          </Dim>
          <Dim type="BottomEdge">
            <UnifiedDim scale="1" type="BottomEdge" />
          </Dim>
        </Area>
        <Image component="LeftEdge" name="Brawler/Window_TopLeft" />
        <Image component="RightEdge" name="Brawler/Window_TopRight" />
        <Image component="NewImage" name="Brawler/Window_NewImage" />
        <Image component="Background" name="Brawler/Window_Top" />
      </FrameComponent>
    </ImagerySection>
 

[Ident]

What are you trying to do exactly? What does the titlebox (you mean titlebar) have to do with the image?

[Anasky]

In the link supplied below you can see a title box being on the top part of the window. This box shouldn't scale along and as such shouldn't be part of the Window_Top (if I'm assuming correctly). Hence I am wondering how I can add it using a fixed width while placing it in the centre at the position of the title.
http://www.gameart2d.com/uploads/3/0/9/ ... 3_orig.jpg

Hope this clears it up.

[Ident]

You can always just use a child window (of the FrameWindow) in case you are trying to do some complex child/parent window behaviour as seems to be the case here. You can scale and position this with relative or absolute coordinates (or a combination of both) using the CEED layout editor.

If you can solve something with a sub-window and there is no specific behaviour from the FrameWindow happening here that should affect it, then that is usually preferrable over solving it via complex LNF setups. It is just easier to control and have an overlook over. And the editor support is there too, of course.

[Anasky]

I guess it's time for me to start using the CEED layout editor then rather than using Notepad++?
Any clue where I can find that editor?

[Ident]

I guess it's time for me to start using the CEED layout editor then rather than using Notepad++?
Any clue where I can find that editor?

Have you never visited our website?

[Anasky]

Actually, I don't think I have. My colleague started the implementation and download and what not, and I've just been going on from there on. Assuming I can find it on the website (sorry, still hungover xD)

[Anasky]

My apologies for such a late reply, went on to fix some other issues before coming back to this.
I've managed to add the titlebox to the CEGUI::Window using the addChild function, but can't get it in the right position.

In attachment 2 it's fully visible but on the wrong Y, and in attachment 1 it's cut off because of the border of the frame. Any way I can fix this?

Thanks in advance

[Ident]

If it is a regular child (you did not add this with the internal name for the titlebox did you) it can't get cut off by the frame. It can only be cut off by the windows extents. You can deactive clipping to prevent that. This should not ben ecessary though and imo it would be wrong to solve it that way since it clearly looks like the titlebar is in the framewindow's boundaries. Can you show us some code?

[Anasky]

I'll post my code below, but it's... rather integrated into my own framework...
I added it using window->addChild();
However, it's on position y=0 when it's inside the frame, hence why I figured CEGUI automatically took it outside of the border's area.

Code: Select all

m_Inventory = NewWindow( "Inventory", glm::vec2( 400, 300 ), glm::vec2( 450, 180 ), m_InGame );


Code: Select all

      void clsWindow::Init( std::string a_Name, glm::vec2 a_ScreenPos, glm::vec2 a_Size, clsWidget* a_Parent, clsGUI* a_GUI, std::string a_Theme )
      {
         clsWidget::Init( a_Name, "FrameWindow", a_ScreenPos, a_Size, a_Size, a_Parent, a_GUI, a_Theme );
         clsWidget* l_StaticImage = a_GUI->NewStaticImage( a_Name + "_TitleBox", "Window_TitleBox", glm::vec2( ( a_Size.x - 158 ) / 2, 0 ), glm::vec2( 158, 29 ), this );
      }


Code: Select all

      void clsWidget::Init( std::string a_Name, std::string a_LookNFeel, glm::vec2 a_ScreenPos, glm::vec2 a_MinSize, glm::vec2 a_Size, clsWidget* a_Parent, clsGUI* a_GUI, std::string a_Theme )
      {
         m_Name = a_Name;
         m_GUI = a_GUI;

         CEGUI::Window* l_NewWindow = m_GUI->GetWindowManager( )->createWindow( a_Theme + "/" + a_LookNFeel, a_Name );

         glm::vec2 l_ScaledParentSize;
         if (a_Parent != nullptr)
         {
            a_Parent->GetCEGUIWindow( )->addChild( l_NewWindow );
            a_Parent->AddChild( this );
            l_ScaledParentSize = a_Parent->GetSize( );
         }
         else
         {
            l_ScaledParentSize = glm::vec2( a_GUI->GetDefaultScreenWidth( ), a_GUI->GetDefaultScreenHeight( ) );
         }

         // Temp
         a_MinSize = glm::vec2( );

         l_NewWindow->setMinSize( CEGUI::USize( CEGUI::UDim( a_MinSize.x / l_ScaledParentSize.x, 0 ), CEGUI::UDim( a_MinSize.y / l_ScaledParentSize.y, 0 ) ) );
         l_NewWindow->setSize( CEGUI::USize( CEGUI::UDim( a_Size.x / l_ScaledParentSize.x, 0 ), CEGUI::UDim( a_Size.y / l_ScaledParentSize.y, 0 ) ) );
         l_NewWindow->setMaxSize( CEGUI::USize( CEGUI::UDim( a_Size.x / l_ScaledParentSize.x, 0 ), CEGUI::UDim( a_Size.y / l_ScaledParentSize.y, 0 ) ) );
         l_NewWindow->setPosition( CEGUI::UVector2( CEGUI::UDim( a_ScreenPos.x / l_ScaledParentSize.x, 0 ), CEGUI::UDim( a_ScreenPos.y / l_ScaledParentSize.y, 0 ) ) );

         m_Window = l_NewWindow;
      }


Code: Select all

      clsStaticImage* clsGUI::NewStaticImage( std::string a_Name, std::string a_Filename, glm::vec2 a_ScreenPos, glm::vec2 a_Size, clsWidget* a_Parent )
      {
         clsStaticImage* l_StaticImage = new clsStaticImage( );
         NewWidget( l_StaticImage, a_Name, &a_ScreenPos, a_Parent );
         l_StaticImage->Init( a_Name, a_Filename, a_ScreenPos, a_Size, a_Parent, this, m_Theme );
         m_GUIElements[ a_Name ] = l_StaticImage->GetCEGUIWindow( );
         return l_StaticImage;
      }


Code: Select all

      clsWidget* clsGUI::NewWidget( clsWidget* a_Widget, std::string a_Name, glm::vec2* a_ScreenPos, clsWidget* a_Parent )
      {
         //assert( std::find( m_WidgetsMap.begin( ), m_WidgetsMap.end( ), a_Name ) == m_WidgetsMap.end( ) );
         clsWidget* l_Widget = a_Widget;
         m_Widgets.push_back( l_Widget );
         m_WidgetsMap[ a_Name ] = l_Widget;

         return l_Widget;
      }


Code: Select all

      void clsStaticImage::Init( std::string a_Name, std::string a_Filename, glm::vec2 a_ScreenPos, glm::vec2 a_Size, clsWidget* a_Parent, clsGUI* a_GUI, std::string a_Theme )
      {
         clsWidget::Init( a_Name, "Image", a_ScreenPos, glm::vec2( ), a_Size, a_Parent, a_GUI, "Generic" );
         m_Window->setProperty( "Image", a_Theme + "/" + a_Filename );
      }


[Ident]

Unfortunately I can't look into it deeply right now, I would suggest you try what I said before and deactivate the parentclipping on that child window you are adding. Does it remove the clipping?

[Anasky]

A combination of:
setProperty( "ClippedByParent", "false" );
setProperty( "AlwaysOnTop", "true" );

works, although that does defeat the purpose of the frame as it is now also displaying above the text
Is there really not a better way to do this by changing the renderer of the FrameWindow?

[Ident]

If you want Text on an Image on a FrameWindow I would make 3 Windows
A Generic/Text as child of a Generic/Image as child of a FrameWindow.

Either that or you really dig into falagard like you suggested initially. You might have to do some trial and error there though to understand how it works and maybe also look into code from time to time.

[Anasky]

The possibility you suggest would indeed be better. The issue with it though is the AlwaysOnTop=true property. This would mean it wouldn't work as expected when having 2 windows one over the other.

Modifying Falagard does sound like a tougher solution than I initially thought though... I'm assuming you don't have experience in this? (And if you do, got any starting point for me?)

[Ident]

Modifying Falagard does sound like a tougher solution than I initially thought though... I'm assuming you don't have experience in this? (And if you do, got any starting point for me?)

I do have experience in this and the reason I initially advised against it is that it is not very intuitive to work with it and it gets more complicated once you add so called child "auto" windows in falagard, in which case it is often better to add actual real windows, especially if it is just about looks and not functionality related to the parent widget. I wrote a base for a Look N Feel editor for CEED to make it easier to create and edit skins but in its current form it will not help you much either yet, it is also not tested enough.

Can you explain what you mean by "The issue with it though is the AlwaysOnTop=true property. "
Who has this property and why cant you turn it to false ?