Xhatcontrol transparency

21

I did it! I made it transparent!!

screen guy 2.png1279×761 855 KB

This is how I did it:
The nifty file:

<nifty xmlns="http://nifty-gui.lessvoid.com/nifty-gui" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="https://raw.githubusercontent.com/void256/nifty-gui/1.4/nifty-core/src/main/resources/nifty.xsd https://raw.githubusercontent.com/void256/nifty-gui/1.4/nifty-core/src/main/resources/nifty.xsd">
    
    <useControls filename="nifty-default-controls.xml" />
    <useStyles filename="nifty-default-styles.xml" />
    <useStyles filename="Interface/chat-styles.xml" />
    <useStyles filename="Interface/list-styles.xml"/>
    
    
    <screen id="chat" controller="mygame.Main">
        
        <layer id="foreground" childLayout="center">
            
            <control id="chat" name="nifty-chat" width="55%" height="50%" align="left" valign="bottom" lines="13"/>
            
        </layer>
        
    </screen>
</nifty>

The file for custom chat:

<?xml version="1.0" encoding="UTF-8"?>
<nifty-styles xmlns="http://nifty-gui.lessvoid.com/nifty-gui">
    
    <style id="nifty-chat-control#mainPanel">
        <attributes childLayout="vertical" width="100%" backgroundColor="#0000"/>
    </style>

    <style id="nifty-chat-control#chatPanel">
        <attributes childLayout="horizontal" width="100%" align="center"/>
    </style>
    
    <style id="nifty-chat-control#chatArea">
        <attributes childLayout="horizontal" align="left" width="75%"/>
    </style>

    <style id="nifty-chat-control#playerArea">
        <attributes childLayout="vertical" width="25%" backgroundColor="#0000"/>
    </style>

    <style id="nifty-chat-control#spacer">
        <attributes height="9px" width="100%"/>
    </style>

    <style id="nifty-chat-control#chatTextArea">
        <attributes childLayout="horizontal" align="left" width="75%"/>
    </style>

    <style id="current-player">
        <attributes backgroundImage="Textures/guy.png"
                    imageMode="resize:8,210,8,8,8,210,8,209,8,210,8,8"/>
    </style>

    <style id="default">
        <attributes backgroundImage="Textures/guy.png"
                    imageMode="resize:8,210,8,8,8,210,8,209,8,210,8,8"/>
    </style>

</nifty-styles>

The file for custom list:

<nifty-styles xmlns="http://nifty-gui.lessvoid.com/nifty-gui">

    <style id="nifty-listbox">
        <attributes/>
    </style>
    
    <style id="nifty-listbox#scrollpanel">
        <attributes focusable="true" padding="1px" backgroundImage="Textures/guy.png"/>
        
        <effect overlay="true">
            <onActive name="colorBar" color="#0000" post="false" neverStopRendering="true" timeType="infinite"/>
            <onActive name="border" border="1px" color="#222f" inset="1px,0px,0px,1px"/>
            <onFocus name="border" border="1px" color="#f006"/>
            <onEnabled name="renderQuad" startColor="#2228" endColor="#2220" post="false" length="150"/>
            <onDisabled name="renderQuad" startColor="#2220" endColor="#2228" post="false" length="150"/>
        </effect>
        
    </style>
    
</nifty-styles>

What you were trying to do is to make the chat transparent. However, the chat was using other controls (a button and a list), which were defining the colors. To change the color of the list(which was using the 2 big boxes), I used the list-styles.xml.
To show the guy, created the chat-styles.xml.
I then included both styles in the main nifty xml (tests.xml).

Next time when encountering a problem with Nifty, try to read the original files. (In this case, nifty-default-controls.xml and nifty-default-styles.xml).

22

thanks man work