DXUT中增加自定义按钮控件

DXUT中增加自定义按钮控件

作者：kagula

日期：2009-3-27

环境：[1]Microsoft DirectX SDK (November 2008)

[2]WindowsSDK_6.0.6001.18000.367

[3] Visual Studio 2005 with C

读者对象：

[1]能够看懂DirectX SDK包中 Custom UI 这个例子程序，并能根据这个例子熟练使用DXUT中提供的控件。

[2]熟悉C++语言

关键字：

DirectX DXUT Button

内容简介：

在同一个资源管理器中，如何包含多种自定义风格按钮控件。

正文：

我们知道所有的Dialog由资源管理器(CDXUTDialogResourceManager类的实例)管理，所有的Dialog需要从资料管理器里注册(或Init)，所有的控件要在Dialog里添加(例如AddButton方法)

这里我们通过重载CDXUTDialog，建立CDXUTDialog。因为我们需要通过它来载入纹理资源。纹理可以是JPG格式，也可以是DDS格式。

为了正确Render我们的按钮控件。我们对CDXUTButton也进行了重载，建立了CDXUTButton2。

下面以一个例子来说明如何使用CDXUTDialog2和CDXUTButton2。

第一步：参考本文的附件，在你的工程中建立DXUTGUI2.H和DXUTGUI2.CPP文件。

第二步：引入下面的头文件

#include "DXUT.h"

#include "DXUTgui2.h"

第三步：

建立CDXUTDialog实例，取名为m_SampleUI是因为它的作用同Custom UI这个例子中的相同变量。

CDXUTDialog2 m_SampleUI; // dialog for sample specific controls

第四步：

利用资源管理器初始化m_SampleUI中要使用到的纹理资源

std::vector<LPCWSTR> vectorFN;

//压入，按钮纹理，这里为平方像素大小，DXUT会为你自动拉伸，

//这个值，你可以配合CDXUTGUI2.cpp中的源代码，进行修改。

vectorFN.push_back(L"button.jpg");

//压入，按钮纹理。下面的dds格式纹理，带AlphaChannel

//可以帮助你Render圆角按钮。

vectorFN.push_back(L"button2.dds");

m_SampleUI.Init( &m_DialogResourceManager ,vectorFN); //初始化

m_SampleUI.SetCallback( ::OnGUIEvent ); //设置GUI事件回调函数

// Font

m_SampleUI.SetFont( 1, L"Comic Sans MS", 24, FW_NORMAL );

m_SampleUI.SetFont( 2, L"Courier New", 16, FW_NORMAL );

第五步：添加按钮

// Buttons; Remark:这里的x,y,width,height暂时可以随便指定一个

int nI=100;

// 这里，省去部份代码

m_SampleUI.AddButton( IDC_PTTJSXZ, L"B1", 30, nI, 80, 35, L'4' );

nI+=50;

m_SampleUI.AddButton2( IDC_GJLSSY, L"B2", 30, nI, 80, 35, L'5' ,false,NULL,1);

m_SampleUI.AddButton2( IDC_GXLQSY, L"B3", 30, nI, 80, 35, L'6' ,false,NULL,2);

其中B1按钮，这是DXUT缺省的按钮控件Render样子。

B2按钮，是采用button.jpg纹理的按钮控件。注意它的最后一个参数为1。表示它将使用第一个压入栈的纹理文件。

B3按钮，是采用button2.dds纹理的按钮控件，dds文件带Alpha Channel可以生成任意形状的按钮控件。注意它的最后一个参数为2。表示它将使用第二个压入栈的纹理文件。

第六步：使用按钮

这里开始，使用方式同Custom UI这个例子的m_SampleUI对象变量，这里不再重复。

如何生成Jpg图像文件格式的纹理，个人认为属于常识问题，这里不展开，下面介绍如何生成dds格式的纹理。

制作DDS格式的纹理

你需要使用DirectX Texture Tool 安装完成DirectX SDK后，你可以从系统的[开始]菜单里面找到。

你需要准备二张图片，第一张图片是要显示的纹理，第二张图片，是黑白两色的图像可以有过渡，黑色代表透明色，白色代表第一张图片可以显示的区域。

具体如下：

第一步：打开DirectX Texture Tool工具软件，新建纹理(New Texture)， 在我们这个例子中，设定了32平方，纹理格式为Unsigned 32-bit: A8R8G8B8

第二步：在菜单里，选中[Open Onto This Surface]，打开你已经准备好的第一张图片。

第三步：在菜单里，选中(Open Onto Alpha Channel Of This Surface)，打开你已经准备好的第二张图片。你可以看到由于Alpha Channel的缘故，第一张图片中的部份区域变的不可见。如果你有兴趣，可以试着用一下菜单里的[Change Background Color]选项。

第四步：保存即可。

附件：

DXUTGUI2.H

#pragma once

#ifndef DXUT_GUI2_H

#define DXUT_GUI2_H

#include "DXUTgui.h"

#include <vector>

// Minimum scroll bar thumb size

#define SCROLLBAR_MINTHUMBSIZE 8

// Delay and repeat period when clicking on the scroll bar arrows

#define SCROLLBAR_ARROWCLICK_DELAY 0.33

#define SCROLLBAR_ARROWCLICK_REPEAT 0.05

#define DXUT_NEAR_BUTTON_DEPTH 0.6f

#define DXUT_FAR_BUTTON_DEPTH 0.8f

#define DXUT_MAX_GUI_SPRITES 500

/*

这个集合的目的是，增强原DXUT上Button控件的可视化效果方面的功能。

*/

//-----------------------------------------------------------------------------

// Button control

//-----------------------------------------------------------------------------

class CDXUTButton2 : public CDXUTButton

{

public:

CDXUTButton2(CDXUTDialog* pDialog):CDXUTButton( pDialog )

{

m_nStyle = 0;

}

virtual void Render( float fElapsedTime );

public:

int m_nStyle; //Get(0+m_nStyle<<1),Get(1+m_nStyle<<1);

};

//-----------------------------------------------------------------------------

// All controls must be assigned to a dialog, which handles

// input and rendering for the controls.

//-----------------------------------------------------------------------------

class CDXUTDialog2: public CDXUTDialog

{

public:

/*

功能：在这里分配，控件将要用到的D设备相关资源

*/

void Init( CDXUTDialogResourceManager* pManager, std::vector<LPCWSTR> pVector);

void Init( CDXUTDialogResourceManager* pManager )

{

CDXUTDialog::Init(pManager);

}

/*

功能：添加，自定义按钮

备注：最后一个参数，指明将要使用到的Element的编号，必须大于，而且该编号的Element已经在Init中

分配。

警告：如果pVector.size()>nStyle,可能会出现不可预测后果！

*/

HRESULT AddButton2( int ID, LPCWSTR strText, int x, int y, int width, int height, UINT nHotkey=0,

bool bIsDefault=false, CDXUTButton** ppCreated=NULL, int nStyle=0 );

};

#endif

DXUTGUI2.CPP

#include "dxut.h"

#include "dxutgui2.h"

void CDXUTButton2::Render( float fElapsedTime )

{

int nOffsetX = 0;

int nOffsetY = 0;

DXUT_CONTROL_STATE iState = DXUT_STATE_NORMAL;

if( m_bVisible == false )

{

iState = DXUT_STATE_HIDDEN;

}

else if( m_bEnabled == false )

{

iState = DXUT_STATE_DISABLED;

}

else if( m_bPressed )

{

iState = DXUT_STATE_PRESSED;

nOffsetX = 1;

nOffsetY = 2;

}

else if( m_bMouseOver )

{

iState = DXUT_STATE_MOUSEOVER;

nOffsetX = -1;

nOffsetY = -2;

}

else if( m_bHasFocus )

{

iState = DXUT_STATE_FOCUS;

}

// Background fill layer

//TODO: remove magic numbers

CDXUTElement* pElement = m_Elements.GetAt( 0 + m_nStyle*2 );

float fBlendRate = ( iState == DXUT_STATE_PRESSED ) ? 0.0f : 0.8f;

RECT rcWindow = m_rcBoundingBox;

OffsetRect( &rcWindow, nOffsetX, nOffsetY );

// Blend current color

pElement->TextureColor.Blend( iState, fElapsedTime, fBlendRate );

pElement->FontColor.Blend( iState, fElapsedTime, fBlendRate );

m_pDialog->DrawSprite( pElement, &rcWindow, DXUT_FAR_BUTTON_DEPTH );

m_pDialog->DrawText( m_strText, pElement, &rcWindow );

// Main button

pElement = m_Elements.GetAt( 1 + m_nStyle*2 );

// Blend current color

pElement->TextureColor.Blend( iState, fElapsedTime, fBlendRate );

pElement->FontColor.Blend( iState, fElapsedTime, fBlendRate );

m_pDialog->DrawSprite( pElement, &rcWindow, DXUT_NEAR_BUTTON_DEPTH );

m_pDialog->DrawText( m_strText, pElement, &rcWindow );

}

//--------------------------------------------------------------------------------------

void CDXUTDialog2::Init( CDXUTDialogResourceManager* pManager, std::vector<LPCWSTR> pVector)

{

CDXUTDialog::Init(pManager);

for(int i=0;i<pVector.size();i++)

{

OutputDebugString(L"CDXUTDialog2::Init() ... 为Button控件装载纹理,From[");

SetTexture( 1+i, pVector[i] );

OutputDebugString(pVector[i]);

OutputDebugString(L"]/n");

}

RECT rcTexture;

CDXUTElement Element;

for(int i=0;i<pVector.size();i++)

{

//-------------------------------------

// CDXUTButton - Button

//-------------------------------------

SetRect( &rcTexture, 0, 0, 32, 32 ); //位图中指定的区域，作为按钮纹理

Element.SetTexture( 1+i, &rcTexture ); //绕过第一个，因为第一个是default材质

Element.SetFont( 0 );

Element.TextureColor.States[ DXUT_STATE_NORMAL ] = D3DCOLOR_ARGB( 150, 255, 255, 255 ); //按钮控件缺省颜色(ARGB) 当A为时，为最大透明度

Element.TextureColor.States[ DXUT_STATE_PRESSED ] = D3DCOLOR_ARGB( 150, 255, 255, 255 ); //按钮控件点中颜色(ARGB)

Element.FontColor.States[ DXUT_STATE_MOUSEOVER ] = D3DCOLOR_ARGB( 255, 0, 0, 0 ); //鼠标悬浮在按钮控件上时，字体颜色

Element.FontColor.States[ DXUT_STATE_NORMAL ] = D3DCOLOR_ARGB( 255, 0, 0, 0 ); //缺省字体颜色

// Assign the Element

SetDefaultElement( DXUT_CONTROL_BUTTON, 2+i*2, &Element );

//-------------------------------------

// CDXUTButton - Fill layer

//-------------------------------------

SetRect( &rcTexture, 0, 0, 32, 32 );

Element.SetTexture(1+i, &rcTexture, D3DCOLOR_ARGB( 0, 255, 255, 255 ) ); //绕过第一个，因为第一个是default材质

Element.TextureColor.States[ DXUT_STATE_MOUSEOVER ] = D3DCOLOR_ARGB( 160, 255, 255, 255 );

Element.TextureColor.States[ DXUT_STATE_PRESSED ] = D3DCOLOR_ARGB( 60, 0, 0, 0 );

Element.TextureColor.States[ DXUT_STATE_FOCUS ] = D3DCOLOR_ARGB( 30, 255, 255, 255 );

// Assign the Element

SetDefaultElement( DXUT_CONTROL_BUTTON, 3+i*2, &Element );

}

}

HRESULT CDXUTDialog2::AddButton2( int ID, LPCWSTR strText, int x, int y, int width, int height, UINT nHotkey,

bool bIsDefault, CDXUTButton** ppCreated, int nStyle )

{

HRESULT hr = S_OK;

CDXUTButton2* pButton = new CDXUTButton2( this );

if( ppCreated != NULL )

*ppCreated = pButton;

if( pButton == NULL )

return E_OUTOFMEMORY;

hr = AddControl( pButton );

if( FAILED( hr ) )

return hr;

// Set the ID and list index

pButton->SetID( ID );

pButton->SetText( strText );

pButton->SetLocation( x, y );

pButton->SetSize( width, height );

pButton->SetHotkey( nHotkey );

pButton->m_bIsDefault = bIsDefault;

pButton->m_nStyle = nStyle;

return S_OK;

}