幻世（OurDream）2D图形引擎使用教程16——GUI图形用户界面系统（4）

最新推荐文章于 2022-11-05 14:27:44 发布

Lizcst

最新推荐文章于 2022-11-05 14:27:44 发布

阅读量1.4k

点赞数

分类专栏：游戏开发文章标签：幻世OurDream 图形引擎 2D 游戏开发媒体播放

本文链接：https://blog.youkuaiyun.com/kflizcst/article/details/17416095

版权

游戏开发专栏收录该内容

139 篇文章

订阅专栏

声明：本教程版权归Lizcst Software Lab所有，欢迎转载，但是转载必须保留本段声明文字，并注明文章来源：http://blog.youkuaiyun.com/kflizcst

谢谢合作！

[综合实例]

前面我们已经学习了媒体播放及幻世GUI的相关知识，这篇教程，将通过一个综合的实例来将这两部分的内容融合起来，让读者能够更好的理解幻世引擎在播放媒体文件及GUI系统内部交互方面的大致情形。

今天我们要使用幻世引擎开发的是一个带简单操作界面的媒体播放软件，可以用来播放音乐也可以播放视频文件。软件的界面上带有与播放相关的控制按钮，可以方便的播放、暂停或者停止，界面上还能调节媒体播放时的音量大小，同时，播放的进度也能显示在界面中。

在接下来的代码讲解中，我将只关注主要的设计部分，其他的细节处理部分，请各位通过示例代码了解。

[操作界面的设计]

首先，我们设计好这个软件的界面，包括播放区、控制按钮、音量调节器、播放进度显示等的位置及大小，同时设定好各个控件的事件处理等，将UI控件的功能与程序的功能结合起来：

　　SOD2DFloatRect position;
	//程序控制按钮
	position.Init(904, 718, 1004, 748);
	gui->AddButton(100, position, 100, 0xffff0000, "关闭", true, false, 0, 
					ARGB(150, 255, 255, 255), ARGB(255, 0, 255,0), 0, position , 0, position , -1);
	
	gui->SetEvenReceiver(100, EERT_MOUSE_LEFTBUTTON_UP, ButtonPress, -1);

	//媒体播放控制按钮
	position.Init(830, 100, 930, 130);
	gui->AddButton(101, position, 100, 0xffff0000, "播放", true, false, 0, 
					ARGB(150, 255, 255, 255), ARGB(255, 0, 255,0), 0, position , 0, position , -1);
	gui->SetEvenReceiver(101, EERT_MOUSE_LEFTBUTTON_UP, PlayMedia, -1);

	position.Init(830, 140, 930, 170);
	gui->AddButton(102, position, 100, 0xffff0000, "暂停", true, false, 0, 
					ARGB(150, 255, 255, 255), ARGB(255, 0, 255,0), 0, position , 0, position , -1);
	gui->SetEvenReceiver(102, EERT_MOUSE_LEFTBUTTON_UP, PauseMedia, -1);

	position.Init(830, 180, 930, 210);
	gui->AddButton(103, position, 100, 0xffff0000, "停止", true, false, 0, 
					ARGB(150, 255, 255, 255), ARGB(255, 0, 255,0), 0, position , 0, position , -1);
	gui->SetEvenReceiver(103, EERT_MOUSE_LEFTBUTTON_UP, StopMedia, -1);

	//音量调节控制
	position.Init(830, 250, 1014, 280);
	gui->AddLabel(104, position, 100, 0xffffffff, "音量：", true, false, 0, false, false, 0xffffffff, -1);

	position.Init(830, 290, 1014, 320);
	gui->AddScrollBar(105, position, false, 0x69ffffff, 0xffff0000, 0, position, 0, position, 0, -10000, 0, -1);

	//播放进度显示
	position.Init(10, 630, 820, 660);
	gui->AddProgressBar(106, position, 0xff00ff00, 100, 0, 0, -1);

	//其他
	position.Init(10, 718, 820, 748);
	gui->AddLabel(107, position, 100, 0xffffffff, "Powered by OurDream 2D Graphic Engine !", true, false, 0, false, false, 0xffffffff, -1);

在这里，我们一共创建了8个UI控件，分别是4个按钮，用来控制程序的关闭，媒体的播放、暂停、停止。1个滚动条，用来控制媒体播放的音量。1个进度条，用来显示播放进度。2个标签，用来在某些位置显示一些提示信息。实际的界面效果是这样的：

[各个控件的事件处理]

下面列出上面创建的各个控件的事件处理部分，这是控件变为可用的关键：

//关闭按钮的事件处理
bool ButtonPress(void)
{
	engine->SystemStop();
	exit(0);
	return true;
}
//播放按钮的处理函数
bool PlayMedia(void)
{
	if (media->IsPlay(100)!=true)
	{
		media->Play(100);
	}
	return true;
}
//暂停按钮的事件处理
bool PauseMedia(void)
{
	if (media->IsPlay(100)==true)
	{
		media->Pause(100);
	}
	return true;
}
//停止按钮的事件处理
bool StopMedia(void)
{

	media->Stop(100);
	return true;
}

[媒体文件的处理]

接下来，我们加载一个媒体文件用来播放。在这里我们加载媒体完成后，首先进行了对进度条数值范围的精确设定，即将媒体文件的时长作为进度条显示进度的依据，届时通过获得当前已播放时间，就可以让进度条显示出播放进度了。最后，我们将GUI系统的操作焦点设定到播放按钮上，这样当用户在界面中按下回车键的时候，播放器就会自动开始播放了。

　　//载入媒体文件
	position.Init(15, 15, 815, 615);

	WCHAR wmediapath[MAX_PATH];
	MultiByteToWideChar(CP_ACP, 0, "big_buck_bunny_1080p_stereo.avi", -1,wmediapath, MAX_PATH);

	media->AddMedia(100, wmediapath, position);

	//获取媒体信息，并且设置好进度条（106）的准确数值
	SMediaInfo info;
	info.Init();

	media->GetMediaInfo(100, &info);

	gui->SetGUIObjValue(106, EGUIVT_FLOAT_MAXVALUE, (float)info.m_dLong);

	//将GUI系统的操作焦点定位到播放按钮（101）上面
	gui->SetFocusToThis(101);

[播放过程中的细节处理]

在播放的过程中，为了让一些功能生效，我们需要做一些设置交换的工作，才能让诸如音量设置能够对媒体播放生效，播放进度能够正常的显示到进度条中等。

首先是让界面中的音量调节滚动条生效：

　　//通过获取滚动条（105）的当前值属性来设置媒体播放时的音量大小
	media->SetMediaVolume(100,gui->GetGUIObjFloatValue(105,EGUIVT_FLOAT_CURVALUE));

然后是让播放进度显示到进度条中，这里我写的稍微复杂了一点，主要是想让进度条看起来更漂亮——进度条将会随着播放进度变化而改变进度块的颜色：

　　//声明两个变量用于进度条的颜色动态变化
	float rate=0;
	DWORD color=0;

	//将媒体播放的时的已播放时间作为进度条（106）的进度块位置，这样进度条就能够随着播放时间的慢慢流逝而不断填充
	gui->SetGUIObjValue(106,EGUIVT_FLOAT_CURVALUE,(float)media->GetMediaPosition(100));
	//计算当前播放时间占媒体文件总时长的百分比
	rate=gui->GetGUIObjFloatValue(106,EGUIVT_FLOAT_CURVALUE)/(gui->GetGUIObjFloatValue(106,EGUIVT_FLOAT_MAXVALUE)-gui->GetGUIObjFloatValue(106,EGUIVT_FLOAT_MINVALUE))*100;
	//根据不同的百分比设置进度条（106）的颜色
	if (rate<=50)
	{
		//绿色
		color=0xff00ff00;
	}
	else if (rate>50 && rate <=80)
	{
		//黄色
		color=0xffffff00;
	}
	else
	{
		//红色
		color=0xffff0000;
	}

	//将颜色值赋给进度条（106）的颜色属性
	gui->SetGUIObjValue(106, EGUIVT_DWORD_NORMALCOLOR, color);

[测试]

大体的代码完成了，现在我们来看看最终的效果。

媒体文件说明：我们在本例中使用了开源3D动画影片Big Buck Bunny（http://www.bigbuckbunny.org/），感谢原作者的无私奉献，请各位到官网下载。

通过界面上的按钮和滚动条可以控制视频的播放，怎么样？看上去还像那么回事吧？

[完成]

通过的今天的实例大家可以很好地理解幻世GUI系统如何与程序的实际功能结合起来从而提供友好的操作界面让使用者更方便的使用或娱乐。

[示例代码下载]

全部源代码下载：http://kuai.xunlei.com/d/BiIvAPP7UZqyUgQAaa4