Before you start...

Before you start implementing this, you must have source code access. With out source code access, you will loose some functionality in your GUI. Also, you will need to have images for your new GUI. Here is an example: http://img261.imageshack.us/img261/5343/mapne8.png

Dark Bane Studios

C++ MODFICATIONS

engine/gui/controls/guiBitmapCtrl.h

Find the following code:

private:
   typedef GuiControl Parent;

and after it add

   bool mResizeWidth;
   bool mResizeHeight;
   bool mCanMove;
   bool mCanClose;
   bool mCanMinimize;
   bool mCanMaximize;
   bool mPressClose;
   bool mPressMinimize;
   bool mPressMaximize;
   bool mMouseMovingWin;
   Point2I mMinSize;


   Point2I mMouseDownPosition;
   RectI mOrigBounds;
   RectI mStandardBounds;

Then, find

   S32 getWidth() const       { return(mTextureObject->getWidth()); }
   S32 getHeight() const      { return(mTextureObject->getHeight()); }

and add

      void onMouseDown(const GuiEvent &event);
      void onMouseDragged(const GuiEvent &event);
      void onMouseUp(const GuiEvent &event);

below it. That should be all for the header files.

engine/gui/controls/guiBitmapCtrl.cc

Find

#include "console/console.h"
#include "console/consoleTypes.h"
#include "gfx/gfxDevice.h"

After it add

#include "gui/core/guiCanvas.h"

Find

GuiBitmapCtrl::GuiBitmapCtrl(void)
{
   mBitmapName = StringTable->insert("");
	startPoint.set(0, 0);
	mWrap = false;

after it, add

   mCanMove = false;
   mCanClose = true;
   mResizeWidth = false;
   mResizeHeight = false;
   mCanMove = true;
   mCanClose = true;
   mCanMinimize = false;
   mCanMaximize = false;

Then, find

   Parent::initPersistFields();
   addGroup("Misc");		
   addField("bitmap", TypeFilename, Offset(mBitmapName, GuiBitmapCtrl));
   addField("wrap",   TypeBool,     Offset(mWrap,       GuiBitmapCtrl));

and after it add

   addField("resizeWidth",       TypeBool,         Offset(mResizeWidth, GuiBitmapCtrl));
   addField("resizeHeight",      TypeBool,         Offset(mResizeHeight, GuiBitmapCtrl));
   addField("canMove",           TypeBool,         Offset(mCanMove, GuiBitmapCtrl));
   addField("canClose",          TypeBool,         Offset(mCanClose, GuiBitmapCtrl));

Finally, add this to the end of you guiBitmapCtrl.cc

void GuiBitmapCtrl::onMouseDown(const GuiEvent &event)
{
   setUpdate();

   mOrigBounds = mBounds;

   mMouseDownPosition = event.mousePoint;
   Point2I localPoint = globalToLocalCoord(event.mousePoint);

   //select this window - move it to the front, and set the first responder
   //selectWindow();

   //if we clicked within the title bar
   if (localPoint.y)
   {

      {
         mMouseMovingWin = mCanMove;
      }
   }
   else
   {
      mMouseMovingWin = false;

   }
   if (mMouseMovingWin || mPressClose || mPressMaximize || mPressMinimize)
   {
      mouseLock();
   }
   else
   {

      GuiControl *ctrl = findHitControl(localPoint);
      if (ctrl && ctrl != this)
         ctrl->onMouseDown(event);

   }
}

void GuiBitmapCtrl::onMouseDragged(const GuiEvent &event)
{
   GuiControl *parent = getParent();
   GuiCanvas *root = getRoot();
   if (! root) return;

   Point2I deltaMousePosition = event.mousePoint - mMouseDownPosition;

   Point2I newPosition = mBounds.point;
   bool update = false;
   if (mMouseMovingWin && parent)
   {
      newPosition.x = getMax(0, getMin(parent->mBounds.extent.x - mBounds.extent.x, mOrigBounds.point.x + deltaMousePosition.x));
      newPosition.y = getMax(0, getMin(parent->mBounds.extent.y - mBounds.extent.y, mOrigBounds.point.y + deltaMousePosition.y));
      update = true;
   }
   if (update)
   {
      Point2I pos = parent->localToGlobalCoord(mBounds.point);
      root->addUpdateRegion(pos, mBounds.extent);
	  Point2I extent = mBounds.extent;
      resize(newPosition, extent);
   }
}

void GuiBitmapCtrl::onMouseUp(const GuiEvent &event)
{
   bool closing = mPressClose;
   mPressClose = false;
   event;
   mouseUnlock();
   mMouseMovingWin = false;
   GuiControl *parent = getParent();
   if (! parent)
      return;
}

That should be all of the C++ changes. Now, recompile the code and make sure everything works.

GUI MODIFICATIONS

For this tutorial, I will explain how to change one of the GUIs, the map. The proccess is the same for all of them, and it would be a waste of time to write out a tutorial for each gui. First, open your game/client/ui/map.gui file in wordpad or another similar text editor. At the very beginning, there should be a window control that looks similar to this:

   new GuiWindowCtrl(MapWnd_Window) {
      canSaveDynamicFields = "0";
      Profile = "MoMWndProfile";
      HorizSizing = "right";
      VertSizing = "bottom";
      Position = "0 0";
      Extent = "300 325";
      MinExtent = "300 325";
      canSave = "1";
      Visible = "0";
      ToolTip = "Map (Mouse wheel zooms, resize by dragging the lower right corner)";
      hovertime = "1000";
      shiftDoubleClick = "0";
      text = "Map";
      maxLength = "255";
      resizeWidth = "1";
      resizeHeight = "1";
      canMove = "1";
      canClose = "1";
      canMinimize = "0";
      canMaximize = "0";
      minSize = "300 325";
      closeCommand = "canvas.popDialog(MapWnd);";

replace it with

   new GuiBitmapCtrl() {
      canSaveDynamicFields = "0";
      Profile = "GuiDefaultProfile";
      HorizSizing = "right";
      VertSizing = "bottom";
      Position = "441 89";
      Extent = "323 322";
      MinExtent = "8 2";
      canSave = "1";
      Visible = "1";
      hovertime = "1000";
      shiftDoubleClick = "0";
      bitmap = "./Map.png";
      wrap = "0";
      modulation = "1 1 1 1";
      resizeWidth = "0";
      resizeHeight = "0";
      canMove = "1";
      canClose = "1";

Notice the "bitmap" field. It should point to the image that will be used for the GUI. Also, canMove should be set to true, or 1. If you didn't follow the C++ changes, then you will not be able to use canMove. Next, run your game and open up the GUI Editor by pressing F10. You will most likely need to move things around a bit, since the image may be too big/too small.

Conclusion

Doing a full GUI makeover will take a lot of time. You need to open every .gui file and replace the window control with a bitmap control, like demonstrated above. Also, you'll need to make new graphics for each window in your prefer image editor.

-DBS-