林林.台灣 | Linwebs

跨平台圖形化程式開發 - (2)賽車遊戲開發-介面編排設計

本文章為嘉大資工讀書會第二期課程內容
場次 4-1 【跨平台圖形化程式設計開發(二)】跨平台圖形化程式開發

PS: 本課程圖片較多，此頁面圖片有經過壓縮處理，若圖片模糊不清，可點選圖片開啟圖片原始檔

開啟Qt Creator，新增一個專案，選擇【Qt Widgets Applictaion】。
輸入要建立的專案名稱及儲存的位置。
選擇建構系統(在此採用預設值)。
設定初始 class 資訊(在此採用預設值)。
設定翻譯檔(在此不做設定)。
選擇要使用的 Kit。
選擇版本控制系統(在此採用 Git)。
選擇【mainwindow.ui】進行介面設計。
點選【MainWindow】調整視窗大小，因素才關係，geometry、minimumSize、maximumSize 皆設定為寬度 800 和高度 532。
此次專案不須使用狀態列，故將其移除。
在畫面中點選滑鼠右鍵，點選【移除狀態列】。
接下來，製作遊戲背景，新增一個【Label】，將其 objectName 命名為 background，geometry 的寬度為 4800，高度為 512。
接下來，須建立一個資源檔，將所有的圖片放入，點選專案名稱【racing_car_1】，點選【Add New...】。
選擇【Qt】> 【Qt Resource File】。
將【File name】命名為【images】。
選擇版本控制系統【在此選擇 Git】。
若要編輯資源檔，需在資源檔上點選滑鼠右鍵，選擇【Open in Editor】。
在資源檔編輯器中點選【Add Prefix】，輸入前字字串【/】。
將下載來的素材 ncyu_study_racing_car_src.zip 複製到專案的資料夾中，並將其解壓縮，可看到 src 資料夾。
確認 src 資料夾內有這些圖片檔案。
回到 Qt Creator，點選資源檔的【Add Files】，選擇所有的圖片後按【開啟】。
是否將其新增到版本控制。
由於此版本的 Qt Creator 有問題，無法正常執行，故先選擇【否】，待稍後手動加入版本控制。
將資源檔放入後，先建置專案，以編譯資源檔。
編譯專案前記得先儲存。
再次回到 ui 編輯頁面，將背景套上剛才匯入的圖片，點選 background 的 pixmap 後方的箭頭【▼】，點選【選擇資源...】。
點選【src】資料夾中的【map.png】。
編譯並執行專案，可看到背景已成功顯示。

接下來以同樣的方式加入兩個 Label，分別為當作畫面標題及車子。
並將車子的 scaledContents 打勾，將其圖片大小符合框架大小。

label_title = {
    objectName: label_title,
    geometry: [x: 210, y: 70, 寬度: 384, 高度: 150],
    pixmap: game_name.png
}

car = {
    objectName: car,
    geometry: [x: 10, y: 220, 寬度: 237, 高度: 71],
    scaledContents: true,
    pixmap: car.png
}

再加入一個 PushButton，點選【icon】設定圖片背景，並將 iconSize 改為按鈕的寬度和高度。

button_start_game = {
    objectName: button_start_game,
    geometry: [x: 280, y: 270, 寬度: 250, 高度: 100],
    text: ,
    icon: start_btn.png,
    iconSize: [寬度: 250, 高度: 100]
}

再加入一個 Label 顯示車子的行駛距離。

label_distance = {
    objectName: label_distance,
    geometry: [x: 10, y: 40, 寬度: 300, 高度: 36],
    text: 行駛距離: 0公尺
}

將行駛距離的文字改變顏色。
點選【styleSheet】，點選新增顏色旁的【▼】，點選【color】。
可在此處選擇顏色，選擇完畢，點選確定，確認 styleSheet 的值為 color: rgb(255, 255, 255)。
PS: color: rgb(255, 255, 255)，這個值會根據所選的顏色不同而改變。
步驟如下。

再新增一個顯示遊戲時間的【LCD Number】。

lcd_clock = {
    objectName: lcd_clock,
    geometry: [x: 690, y: 40, 寬度: 100, 高度: 10],
    value: 0.000000,
    intValue: 0
}

建置並執行專案查看畫面編排結果。
將此專案的程式碼交由 Git 管理。
可使用自己常用的終端機介面執行 Git 指令，如 Git 預設的 Git Bash，或使用 PowerShell(跳至第37步)、或 Cmder (跳至第38步)等。
(1) 在此先以 Git Bash 做示範
打開 Git Bash 後，使用 cd 指令前往專案資料夾的路徑。
若專案資料夾位於 C:\data\Code\Qt\racing_car_1，則須輸入 cd /c/data/Code/Qt/racing_car/1
接下來使用 git status 查看目前程式碼狀態，跳至第 39 步。
(2) 在此使用 PowerShell 做示範，檔案總管中的專案資料夾上方選單選擇【檔案】> 【開啟 Windows PowerShell】。
接下來使用 git status 查看目前程式碼狀態，跳至第 39 步。
(3) 在此使用 Cmder做示範，開啟 Cmder 使用 cd 指令前往專案資料夾的路徑。
接下來使用 git status 查看目前程式碼狀態。
將所有檔案交由 git 管理，輸入 git add . 指令，再次使用 git status 查看目前程式碼狀態。
至 GitHub 新建立一個 Repository (儲存庫)。
輸入儲存庫名稱，選擇儲存庫可見度，接下來點選【Create Repository】。
將以下指令貼至終端機介面執行( git init 除外，因為 Qt Creator 已幫我們完成此步驟)。
輸入 echo xxxxxx >> README.md 作為 Readme 文件的標題 (若使用 Cmder 則不須加上引號)。
輸入 git add README.md 將檔案交由 git 管理。
輸入 git commit -m "xxx" 提交目前 git 暫存區的程式碼，xxx 為 commit 訊息。
輸入 git branch -M main 切換到 main 分支。
輸入 git remote add origin xxx 設定 git 遠端儲存庫。
輸入 git push -u origin main 將程式碼 push 到遠端儲存庫(GitHub) 上的main 分支。
恭喜您已完成介面的設計，接下來請閱讀下一篇文章【跨平台圖形化程式開發 - (3)賽車遊戲開發-程式碼實作】撰寫程式碼。

林林.台灣 | Linwebs - 課程

跨平台圖形化程式開發 - (2)賽車遊戲開發-介面編排設計

bookmark標籤