Game Development Community

GUI: Control a Folders opacity...how?

by Josh Butterworth · in Torque X 2D · 06/14/2007 (3:02 am) · 5 replies

Ok, I think I'm getting on pretty well with the TorqueX GUI framework, Ive worked out some basic transitions and animations now I'm just trying to put it all together in a useful way.

As Such, one one of my screens I have boxes with multiple controls in that look like this:

www.grassrootsgames.co.uk/q1.png

For simplicitys sake, lets just take the grey box, it consists of:

1 GUIBitmap for the box
1 GUIBitmap for the Red Text
1 GUIText for the white text


Now what i want know is if I can apply one fade-in transition to all three controls? Either by making them all children of a 4th control or some dark voodoo.

I read somewhere this was possible but i cant remember where.

#1
06/14/2007 (3:13 am)
If they're all on the same colored background you could just fade out a grey box on top of them. :D

As for gui controls inheriting visibility, I'd have to test it out. I'll try to remember to do that when I get into the office tomorrow.

Edit: BTW nice GUI.
#2
06/14/2007 (4:33 am)
Thanks, still needs loads doing to it but it should be cool when it's done.

Grey box would only work fading in the text, i need to fade in the box too :D

I guess I could make all the controls custom ones with Opacity Parameters then make a new function for a parent rendering it's child controls that sets the value.


I just thought it was already in there for some reason.
#3
06/14/2007 (6:09 pm)
Ok, so GUIBitmap apparently didn't have opacity exposed. I just made the change in the engine, but since we won't be releasing this stuff any time soon, here's a GUIBitmap with opacity exposed. Use it exactly the same and set the Opacity property to a float value between zero and one. Text you can fade in and out using the alpha component of the style's TextColor.

I think this should work with 1.0. Let me know if it explodes.

using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Graphics;

using GarageGames.Torque.GUI;
using GarageGames.Torque.GFX;
using GarageGames.Torque.Materials.DXEffects;
...


    /// <summary>
    /// Draws an image to the GUICanvas.
    /// </summary>
    public class GUITransparentBitmap : GUIControl
    {
        //======================================================
        #region Public properties, operators, constants, and enums

        /// <summary>
        /// The image file to render to the screen.
        /// </summary>
        public string Bitmap
        {
            get { return _bitmapName; }
            set
            {
                _bitmapName = value;
                if (_bitmapName != String.Empty)
                {
                    if (_material != null)
                        _material.Dispose();

                    _material = new SimpleEffect();
                    _material.Filename = @"SimpleEffect";
                    _material.BaseTex = _bitmapName;

                    // rdbnote: the render material should really handle this for me
                    Resource<Texture> res = GFXDevice.Instance.TextureManager.LoadTexture(_material.BaseTex);
                    Texture2D texture = (Texture2D)res.Instance;

                    _bitmapSize = new SizeF(texture.Width, texture.Height);

                    if (_style != null && _style.SizeToBitmap)
                        SetSize(_bitmapSize);

                    // invalidate the temp. resource
                    res.Invalidate();
                }
                else
                {
                    if (_material != null)
                        _material.Dispose();
                    _material = null;
                }
            }
        }

        /// <summary>
        /// If texture wrapping is enabled, this specifies the x,y coordinates of the
        /// area of the texture to begin rendering.
        /// </summary>
        public Vector2 WrapStart
        {
            get { return _wrapStart; }
            set { _wrapStart = value; }
        }

        /// <summary>
        /// The opacity of the bitmap. 1.0f is fully visible. 0.0f is fully transparent.
        /// </summary>
        public float Opacity
        {
            get { return _opacity; }
            set { _opacity = value; }
        }

        #endregion

        //======================================================
        #region Public methods

        public override void OnRender(Vector2 offset, RectangleF updateRect)
        {
            // clear bitmap modulation
            DrawUtil.ClearBitmapModulation();

            RectangleF ctrlRect = new RectangleF(offset, _bounds.Size);

            // fill in, if appropriate
            if (_style.IsOpaque)
                DrawUtil.RectFill(ctrlRect, _style.FillColor);

            // set the opacity of the material
            _material.Opacity = _opacity;

            if (_material != null)
            {
                if (_style.TextureWrap)
                {
                    RectangleF srcRegion = new RectangleF();
                    RectangleF dstRegion = new RectangleF();

                    float xDone = (_bounds.Size.Width / _bitmapSize.Width) + 1;
                    float yDone = (_bounds.Size.Height / _bitmapSize.Height) + 1;

                    int xShift = (int)_wrapStart.X % (int)_bitmapSize.Width;
                    int yShift = (int)_wrapStart.Y % (int)_bitmapSize.Height;

                    for (int y = 0; y < yDone; ++y)
                    {
                        for (int x = 0; x < xDone; ++x)
                        {
                            srcRegion.X = 0;
                            srcRegion.Y = 0;
                            srcRegion.Width = _bitmapSize.Width;
                            srcRegion.Height = _bitmapSize.Height;

                            dstRegion.X = ((_bitmapSize.Width * x) + offset.X) - xShift;
                            dstRegion.Y = ((_bitmapSize.Height * y) + offset.Y) - yShift;
                            dstRegion.Width = _bitmapSize.Width;
                            dstRegion.Height = _bitmapSize.Height;

                            // draw the bitmap
                            DrawUtil.BitmapStretchSR(_material, dstRegion, srcRegion, BitmapFlip.None);
                        }
                    }
                }
                else
                {
                    // draw the bitmap
                    DrawUtil.BitmapStretch(_material, ctrlRect, BitmapFlip.None);
                }
            }

            // draw a border, if appropriate
            if (_style.HasBorder)
                DrawUtil.Rect(ctrlRect, _style.BorderColor);

            // render the child controls
            _RenderChildControls(offset, updateRect);
        }

        public override void CopyTo(TorqueObject obj)
        {
            base.CopyTo(obj);

            GUIBitmap obj2 = (GUIBitmap)obj;

            obj2.Bitmap = Bitmap;
            obj2.WrapStart = WrapStart;
        }

        #endregion

        //======================================================
        #region Private, protected, internal methods

        protected override bool _OnNewStyle(GUIStyle style)
        {
            _style = (style as GUIBitmapStyle);

            Assert.Fatal(_style != null, "GUIBitmap::_OnNewStyle: control was assigned an invalid style!");
            if (_style == null || !base._OnNewStyle(style))
                return false;

            if (_style.SizeToBitmap && _material != null)
                SetSize(new SizeF(_bitmapSize.Width, _bitmapSize.Height));

            return true;
        }

        #endregion

        //======================================================
        #region Private, protected, internal fields

        string _bitmapName = String.Empty;
        SimpleEffect _material = null;

        float _opacity = 1.0f;

        SizeF _bitmapSize;
        Vector2 _wrapStart = new Vector2(0.0f, 0.0f);

        GUIBitmapStyle _style = null;

        #endregion
    }
#4
06/15/2007 (4:28 am)
Great thanks. This is pretty much what I've done already but I implemented IAnimatedObject to manage the fade for me.
#5
06/16/2007 (5:30 am)
Ooh, nice. Sounds like something we should roll into the engine.