很多工科的學生在大一都有一門課程,叫C語言程式設計。大概就是裝個IDE然後和一個黑乎乎的視窗打交道,期末到了考完試就結束了。然而很多人可能都有一個疑惑:C語言究竟能幹什麼?除開嵌入式單片機這些高大上的選項,我們其實還有一個簡單有趣的選擇——開發一個圖形界面
這是筆者第一次嘗試用c語言編寫圖形使用者接口程式,制作了一個類似大富翁的遊戲
github連結
效果圖

- idea
- IDE
- photoshop
-
第三方的圖形庫,我用的是easyX和ACLlib
ACLlib最初是浙大幾名學生開發出來的圖形庫,經過幾屆學生和翁恺老師的努力之後,現在ACLlib已經在github上開源,參加翁恺老師在中M上的c語言課程就可以下載下傳這個庫啦
我接觸ACLlib比easyX早,入門ACLlib的時候,幫助文檔沒有示例程式看的比較頭疼。後來發現easyX的幫助文檔比ACLlib詳細,有示例程式的時候,我轉向easyX的學習了。但後面因為播放聲音的需要才把ACLlib重新添加回來。
設計UI
大緻熟悉了圖形庫的用法,能在視窗中打出字畫出圓的時候,就可以開始設計UI界面了。
相對于控制台程式,設計圖形界面程式的時候就需要ps輔助了
這裡就要求一些ps使用技能了
顔色搭配:
https://www.cnblogs.com/nxld/p/7087704.html
https://www.palettable.io/EB9528-586E58
icon案例:
阿裡巴巴矢量圖示庫
設計案例:
站酷
這些其實都是UI設計師的活…
有了粗制濫造的界面後,把重心轉移到代碼上
寫代碼
easyX
這裡總結一些我的easyX使用經驗,詳細内容還請查閱easyX線上幫助文檔
項目類型
Win 32控制台程式
C or C++
easyX的代碼檔案隻能是.cpp,不過一樣可以用c語言的語句寫
顔色
easyX提供了有關顔色的宏,WHITE,BLACK之類的
也可以通過RGB來混合顔色
RGB( 255, 255, 255 ) /*WHITE*/
用ps的吸管工具吸取指定顔色,将參數填入即可
define一些常用的顔色是一個好的習慣
#define TRACK_BACK RGB( 255, 218, 171 ) /*軌道的背景色*/
設定字型大小
LOGFONT
set_height( int height )
{
LOGFONT f;
gettextstyle(&f); // 擷取目前字型設定
f.lfHeight = height; // 設定字型高度為 48
_tcscpy(f.lfFaceName, _T("黑體")); // 設定字型為“黑體”(高版本 VC 推薦使用 _tcscpy_s 函數)
f.lfQuality = ANTIALIASED_QUALITY; // 設定輸出效果為抗鋸齒
settextstyle(&f);
return f;
}
調用時
LOGFONT f;
f = set_height( 24 );
設定字型顔色和背景色
setbkmode( RGB( 255, 229, 198 ) ); /*設定字型背景色*/
settextcolor( BLACK ); /*設定字型顔色*/
字元集配置
一開始使用outtextxy函數時
outtextxy( 20, 20, _T("hello world!"));
如果把字元串常量換成一個可變的char數組編譯器就會報錯:“沒有與參數清單比對的 重載函數 執行個體”
解決方法:
項目->"項目名"屬性->配置屬性->正常->字元集->使用多位元組符集
如此一來便可以列印一個可變的char數組
char a[] = "hello world!";
outtextxy( 20, 20, a );
vs2010的debug和release的設定是不一樣的,更換解決方案配置時記得重新設定字元集
文字在螢幕中央顯示
RECT r = { 0, 0, 1439, 899 };
drawtext( str, &r, DT_CENTER | DT_VCENTER | DT_SINGLELINE);
列印數值變量
使用sprintf函數
char str[5];
LOGFONT f;
f = config_char( 36 );
outtextxy( 614, 390, _T("你的得分是") );
sprintf( str, "%d", score );
outtextxy( 793, 390, str );
繪制圖形相關
線條相關
setlinecolor( BLACK ); /*設定線條顔色*/
setlinestyle( PS_SOLID, 2 ); /*設定線條為2像素寬的實線*/
填充相關
setfillcolor( RGB( 255, 229, 198 ) ); /*設定填充顔色*/
三種繪圖模式
roundrect( 520, 567, 920, 640, 10, 10 ); /*有邊框無填充*/
fillroundrect( 520, 567, 920, 640, 10, 10 ); /*有邊框有填充*/
solidroundrect( 520, 567, 920, 640, 10, 10 ); /*無邊框有填充*/
圖形函數裡面的坐标參數可以通過ps的參考線來擷取
- 按下ctrl + r,出現兩條刻度尺,機關設定為像素
C/C++入門級小遊戲——開發備忘錄 - 從刻度尺往右或往下拖動即可得到對應的橫縱坐标,坐标原點在畫布最左上方
标尺工具亦可完成這項任務
clearrectangle(...) /*将一個矩形區域完全擦掉,調用後顯示背景色*/
solidrectangle(...) /*用一個無邊框填充矩形來覆寫*/
solid開頭的這個函數适合清除本身不是背景色的區域,例如下面的數字
圖像
外部圖像
void
photo( int x, int y, const char *name )
{
IMAGE i;
loadimage( &i, name );
putimage( x, y , &i );
}
将要顯示的圖檔拖入ps視窗,放置在合适的位置之後測量xy坐标,調用函數即可
photo( 155, 200, "123.jpg");
資源檔案
參考連結
導入資源檔案
-
視窗->關閉所有文檔
此舉是為了防止有可能出現的“未完成操作,拒絕通路”的錯誤
- 解決方案資料總管(ctrl+w+s)->右鍵資源檔案->添加->現有項
C/C++入門級小遊戲——開發備忘錄 - 選擇bitmap->導入
- 填寫類型名
- 右鍵出現的資源檔案->檢視代碼
- 檢視頭檔案裡新出現的resource.h檔案
#define IDR_JPG1 101
完成,下次調用圖檔的時編寫下面的代碼即可
IMAGE img;
loadimage(&img, L"JPG",MAKEINTRESOURCE(101));
添加太多的資源圖檔之後exe會變得很大,慎用
ACLlib
聲音
由于前期已經用easyX完成大部分開發工作,後期使用ACLlib時對其進行了一定裁剪
在調用函數時編譯器報錯,顯示下列這條語句未知
mciSendStringA(cmdStr,NULL,0,NULL); /*這個函數需要配置*/
我們需要再一次配置開發環境
使用前配置
- 在頭檔案中添加
#include <Windows.h>
- 在C:\Program Files (x86)\Microsoft SDKs\Windows目錄下找一個叫WinMM.Lib的檔案
C:\Program Files (x86)\Microsoft SDKs\Windows\v7.0A\Lib\WinMM.Lib #winmm在我的pc的位置
-
vs2010->項目->"項目名"屬性->配置屬性->連結器->輸入->附加依賴項
将找到的路徑粘貼進去
C/C++入門級小遊戲——開發備忘錄
播放和結束
ACL_Sound p;
loadSound( name, &p );
playSound( p, 0 ); /*0隻播放一次, 非零則單曲循環*/
playSound可重複調用,可用于同時播放多首音樂
對于一些隻播放一次的聲音,可以寫成一個函數友善調用
void
play( const char *name )
{
ACL_Sound p;
loadSound( name, &p );
playSound( p, 0 );
}
play( "123.mp3" );
對于單曲循環的,用stopSound停止播放
stopSound( p );
資源檔案打包
https://blog.csdn.net/WWIandMC/article/details/106152197
icon制作
https://blog.csdn.net/definewl/article/details/47023735
項目完工之後的圖示一般預設是這樣的
以下方法可以制作自己的icon
- 用ps設計一個中意的圖示,邊框裁剪成正方形
- 找一個線上icon生成器
- 得到icon圖示之後和exe檔案放在同一個目錄
- 建立一個txt檔案,向裡面添加
IDI_ICON1 ICON "logo.ico" /*icon檔案名*/
- 儲存,将txt檔案字尾改為.rc
- 解決方案資料總管->資源->添加->現有項,導入剛剛的文本
- 右鍵新出現的.rc檔案,選擇編譯 重新生成項目就可以看到exe的圖示更改為我們自定義的icon
C/C++入門級小遊戲——開發備忘錄
dll配置
工具:Process Explorer
view->show lower pane