How to add text on imagebutton or image?

For help with general CEGUI usage:
- Questions about the usage of CEGUI and its features, if not explained in the documentation.
- Problems with the CMAKE configuration or problems occuring during the build process/compilation.
- Errors or unexpected behaviour.

Moderators: CEGUI MVP, CEGUI Team

User avatar
CrazyEddie
CEGUI Project Lead
Posts: 6760
Joined: Wed Jan 12, 2005 12:06
Location: England
Contact:

Re: thank you

Postby CrazyEddie » Tue Mar 17, 2009 11:56

marspass wrote:1 how to make the alignment of shadow change with the default text in statictext?

This is largely dependant upon whether you're using or need the scrollbars and such things. If you do not it may be possible to 'match' the area of the copy of the text used for shadow with the named area that is used by the static text (meaning WithFrameTextRenderArea or whatever).

If you need the text scrolling, or need to use anything other than the simplest cases, then you'll probably end up writing a replacement WindowRenderer object.


marspass wrote:2 Is there a way to add shadow to all text in cegui ?

Shadowed text is not directly supported, which is why you have to resort to drawing strings twice.

You might consider using a Pixmap based font which can have the shadows pre-rendered for each glyph (You might find this useful: http://www.cegui.org.uk/phpBB2/viewtopic.php?t=3875 for that).

CE

djphilipe
Quite a regular
Quite a regular
Posts: 48
Joined: Thu Aug 23, 2007 10:15
Location: Slovakia
Contact:

Re: How to add text on imagebutton or image?

Postby djphilipe » Wed Jul 08, 2009 10:23

Hi,
you must make a new widget in looknfeel and use it for your texts.

Example looknfeel:

Code: Select all

    <!--
    ***************************************************
        MyLook/StaticShadowText
    ***************************************************
    -->
    <WidgetLook name="MyLook/StaticShadowText">
        <PropertyDefinition name="VertLabelFormatting" initialValue="CentreAligned" />
        <PropertyDefinition name="HorzLabelFormatting" initialValue="CentreAligned" />
        <PropertyDefinition name="TextShadowColour" initialValue="77000000" redrawOnWrite="true" />
        <PropertyDefinition name="TextColours" initialValue="FFFFFFFF" redrawOnWrite="true" />
        <PropertyDefinition name="ShadowShiftDown" initialValue="1" redrawOnWrite="true"/>
        <PropertyDefinition name="ShadowShiftRight" initialValue="1" redrawOnWrite="true"/>
       
        <ImagerySection name="label">
            <TextComponent>
                <Area>
                    <Dim type="LeftEdge"><PropertyDim name="ShadowShiftRight"/></Dim>
                    <Dim type="TopEdge"><PropertyDim name="ShadowShiftDown"/></Dim>
                    <Dim type="Width"><UnifiedDim scale="1" type="Width" >
                           <DimOperator op="Subtract">
                                 <PropertyDim name="ShadowShiftRight"/>
                                </DimOperator>
                     </UnifiedDim>
                    </Dim>
                         <Dim type="Height"><UnifiedDim scale="1" type="Height" >
                      <DimOperator op="Subtract">
                                 <PropertyDim name="ShadowShiftDown"/>
                                </DimOperator>
                     </UnifiedDim>
                    </Dim>
                </Area>
                <ColourProperty name="TextShadowColour" />
                <VertFormatProperty name="VertLabelFormatting" />
                <HorzFormatProperty name="HorzLabelFormatting" />
            </TextComponent>
            <TextComponent>
                <Area>
                    <Dim type="LeftEdge"><AbsoluteDim value="0" /></Dim>
                    <Dim type="TopEdge"><AbsoluteDim value="0" /></Dim>
                    <Dim type="Width"><UnifiedDim scale="1" type="Width" >
                           <DimOperator op="Subtract">
                                 <PropertyDim name="ShadowShiftRight"/>
                                </DimOperator>
                     </UnifiedDim>
                    </Dim>
                         <Dim type="Height"><UnifiedDim scale="1" type="Height" >
                      <DimOperator op="Subtract">
                                  <PropertyDim name="ShadowShiftDown"/>
                                 </DimOperator>
                     </UnifiedDim>
                    </Dim>
                </Area>
                <ColourProperty name="TextColours" />
                <VertFormatProperty name="VertLabelFormatting" />
                <HorzFormatProperty name="HorzLabelFormatting" />
            </TextComponent>
        </ImagerySection>
       
        <StateImagery name="Enabled" ><Layer><Section section="label" /></Layer></StateImagery>
        <StateImagery name="Disabled" />   
         
    </WidgetLook>

Example scheme:

Code: Select all

<FalagardMapping WindowType="MyLook/StaticShadowText"  TargetType="DefaultWindow" Renderer="Falagard/Default"  LookNFeel="MyLook/StaticShadowText" />

And result:
Image

Filip

06casswp
Just popping in
Just popping in
Posts: 7
Joined: Wed May 04, 2011 15:24

Re:

Postby 06casswp » Sun Dec 01, 2013 08:36

CrazyEddie wrote:Ok, I have produced the following approach to draw shadowed text. I'm not sure if this is what you were wanting or not, but this is what I'm posting anyway :lol:

First, near the top of the WidgetLook, you must make sure you have these new properties defined:

Code: Select all

        <PropertyDefinition name="VertLabelFormatting" initialValue="CentreAligned" />
        <PropertyDefinition name="HorzLabelFormatting" initialValue="CentreAligned" />
        <PropertyDefinition name="TextShadowColour" initialValue="FF000000" redrawOnWrite="true" />
        <PropertyDefinition name="TextColour" initialValue="FFFFFFFF" redrawOnWrite="true" />


Then you need an ImagerySection to create the text. We'll call this 'label' and it contains two TextComponents; these are identical except that they use different ColourProperty names in order to access the shadow and text colours, and also in that the second copy has a negative two offset.

Code: Select all

        <ImagerySection name="label">
            <TextComponent>
                <Area>
                    <Dim type="LeftEdge"><AbsoluteDim value="0" /></Dim>
                    <Dim type="TopEdge"><AbsoluteDim value="0" /></Dim>
                    <Dim type="Width"><UnifiedDim scale="1" type="Width" /></Dim>
                    <Dim type="Height"><UnifiedDim scale="1" type="Height" /></Dim>
                </Area>
                <ColourProperty name="TextShadowColour" />
                <VertFormatProperty name="VertLabelFormatting" />
                <HorzFormatProperty name="HorzLabelFormatting" />
            </TextComponent>
            <TextComponent>
                <Area>
                    <Dim type="LeftEdge"><AbsoluteDim value="-2" /></Dim>
                    <Dim type="TopEdge"><AbsoluteDim value="-2" /></Dim>
                    <Dim type="Width"><UnifiedDim scale="1" type="Width" /></Dim>
                    <Dim type="Height"><UnifiedDim scale="1" type="Height" /></Dim>
                </Area>
                <ColourProperty name="TextColour" />
                <VertFormatProperty name="VertLabelFormatting" />
                <HorzFormatProperty name="HorzLabelFormatting" />
            </TextComponent>
        </ImagerySection>


Finally, you have to add references to the new ImagerySection in the StateImagery definitions, for example, the "Normal" state:

Code: Select all

        <StateImagery name="Normal">
            <Layer>
                <Section section="normal" />
                <Section section="label" />
            </Layer>
        </StateImagery>


Just to reiterate that I'm not sure if this is what you were asking or not, but I've done my best.

HTH

CE.


Cheers for that code CE, was looking for a way to give my text an outline and that code solved it very quickly for me. Here is the widgetlook I created out of it. Gives a pretty cool effect:

Code: Select all

<WidgetLook name="Eternity/Label">
   <PropertyDefinition name="TextColours" initialValue="FFFFFFFF" redrawOnWrite="true" />
    <PropertyDefinition name="VertFormatting" initialValue="CentreAligned" redrawOnWrite="true" />
    <PropertyDefinition name="HorzFormatting" initialValue="CentreAligned" redrawOnWrite="true" />
   <PropertyDefinition name="BackgroundTextColours" initialValue="tl:00000000 tr:00000000 bl:00000000 br:00000000" redrawOnWrite="true" />
    <PropertyDefinition name="TextShadowColour" initialValue="FF000000" redrawOnWrite="true" />
    <PropertyDefinition name="TextColour" initialValue="FFFFFFFF" redrawOnWrite="true" />

            <ImagerySection name="label">
               
                <TextComponent>
                    <Area>
                        <Dim type="LeftEdge"><AbsoluteDim value="-1" /></Dim>
                        <Dim type="TopEdge"><AbsoluteDim value="0" /></Dim>
                        <Dim type="Width"><UnifiedDim scale="1" type="Width" /></Dim>
                        <Dim type="Height"><UnifiedDim scale="1" type="Height" /></Dim>
                    </Area>
                    <ColourProperty name="TextShadowColour" />
                    <VertFormatProperty name="VertFormatting" />
                    <HorzFormatProperty name="HorzFormatting" />
                </TextComponent>
            <TextComponent>
                    <Area>
                        <Dim type="LeftEdge"><AbsoluteDim value="0" /></Dim>
                        <Dim type="TopEdge"><AbsoluteDim value="-1" /></Dim>
                        <Dim type="Width"><UnifiedDim scale="1" type="Width" /></Dim>
                        <Dim type="Height"><UnifiedDim scale="1" type="Height" /></Dim>
                    </Area>
                    <ColourProperty name="TextShadowColour" />
                    <VertFormatProperty name="VertFormatting" />
                    <HorzFormatProperty name="HorzFormatting" />
                </TextComponent>
            <TextComponent>
                    <Area>
                        <Dim type="LeftEdge"><AbsoluteDim value="0" /></Dim>
                        <Dim type="TopEdge"><AbsoluteDim value="1" /></Dim>
                        <Dim type="Width"><UnifiedDim scale="1" type="Width" /></Dim>
                        <Dim type="Height"><UnifiedDim scale="1" type="Height" /></Dim>
                    </Area>
                    <ColourProperty name="TextShadowColour" />
                    <VertFormatProperty name="VertFormatting" />
                    <HorzFormatProperty name="HorzFormatting" />
                </TextComponent>
            <TextComponent>
                    <Area>
                        <Dim type="LeftEdge"><AbsoluteDim value="1" /></Dim>
                        <Dim type="TopEdge"><AbsoluteDim value="0" /></Dim>
                        <Dim type="Width"><UnifiedDim scale="1" type="Width" /></Dim>
                        <Dim type="Height"><UnifiedDim scale="1" type="Height" /></Dim>
                    </Area>
                    <ColourProperty name="TextShadowColour" />
                    <VertFormatProperty name="VertFormatting" />
                    <HorzFormatProperty name="HorzFormatting" />
                </TextComponent>
            <TextComponent>
                    <Area>
                        <Dim type="LeftEdge"><AbsoluteDim value="0" /></Dim>
                        <Dim type="TopEdge"><AbsoluteDim value="0" /></Dim>
                        <Dim type="Width"><UnifiedDim scale="1" type="Width" /></Dim>
                        <Dim type="Height"><UnifiedDim scale="1" type="Height" /></Dim>
                    </Area>
                    <ColourProperty name="TextColour" />
                    <VertFormatProperty name="VertFormatting" />
                    <HorzFormatProperty name="HorzFormatting" />
                </TextComponent>
            </ImagerySection>
   
    <ImagerySection name="label_bg">
      <ImageryComponent>
          <Area>
                <Dim type="LeftEdge" >
                        <AbsoluteDim value="0" />
                    </Dim>
                    <Dim type="TopEdge" >
                        <AbsoluteDim value="0" />
                    </Dim>
               <Dim type="Width"><UnifiedDim scale="1" type="Width" /></Dim>
               <Dim type="Height"><UnifiedDim scale="1" type="Height" /></Dim>
                </Area>
                <Image imageset="Eternity" image="LabelBackground" />
                <ColourRectProperty name="BackgroundTextColours" />
                <VertFormat type="Stretched" />
                <HorzFormat type="Stretched" />
            
        </ImageryComponent>
    </ImagerySection>
    <StateImagery name="Enabled">
        <Layer>
         <Section section="label_bg" />

            <Section section="label">
             <ColourProperty name="TextColours" />
         </Section>
         
        </Layer>
    </StateImagery>
    <StateImagery name="Disabled">
        <Layer>
         <Section section="label_bg" />

            <Section section="label">
             <ColourProperty name="TextColours" />
         </Section>
        </Layer>
    </StateImagery>
    </WidgetLook>


Image


Return to “Help”

Who is online

Users browsing this forum: No registered users and 21 guests