本期教程我們來創建工具欄，其實也非常簡單，和之前做的方式相同，只是位置不同而已。我們將創建一個背景並將工具欄放置在其中。如果我發現你現在做的東西和我們最開始的項目介紹不一樣，你不是有一個場景過渡嗎？那我們可以在後面來做。我先把主體做好，然後我們逐步添加。現在我們先把工具欄做好，然後在中間添加一張圖片。
首先，我們需要定義一個圖片變量來表示工具欄。接下來，我們要處理相同的背景，初始化。我們將加載這張背景圖片到內存中，並將其與工具欄圖片合併。
# 定義工具欄圖片變量toolbar_img =None# 初始化相同的背景definit_background():# 加載背景圖片globalbackground_imgbackground_img = load_image("background.jpg")# 以"background.jpg"為例# 加載工具欄圖片defload_toolbar_image():globaltoolbar_imgtoolbar_img = load_image("toolbar.png")# 以"toolbar.png"為例# 渲染函數中顯示工具欄defrender():# 先渲染背景render_background()# 顯示工具欄render_toolbar()# 渲染背景defrender_background():# 渲染背景圖片draw_image(background_img, (0,0))# 假設背景圖片大小和屏幕大小相同# 渲染工具欄defrender_toolbar():# 將工具欄圖片放置在屏幕頂部中間位置screen_center_x = SCREEN_WIDTH //2toolbar_center_x = toolbar_img.get_width() //2screen_center_y = SCREEN_HEIGHT //2toolbar_center_y = toolbar_img.get_height() //2screen.blit(toolbar_img, (screen_center_x - toolbar_center_x, screen_center_y - toolbar_center_y))# 主函數defmain():init_background()# 初始化背景load_toolbar_image()# 加載工具欄圖片render()# 渲染背景和工具欄# 運行主函數main()
通過這種方式，我們在渲染函數中實現了對背景和工具欄的顯示，使得代碼更加整潔且易於維護。
在這裡，根據座標來配置圖片位置，比如說，你想放在哪個位置，就量一下那個位置的座標。你可以使用 Windows 系統自帶的畫圖軟件來看座標，截圖後就可以看到座標。比如，如果你想要把圖片放在左下角，你就可以量一下左下角的座標。假設你量得到的座標是 (250, 250)，那麼 x 座標就是 250，y 座標就是 250。最頂部開始顯示的話，y 座標是零。所以，這個位置的話，y 座標就是零。然後，你把這個座標取整，比如取整到 250。然後，你就可以在代碼中將 y 座標設置為零或取整後的值，這樣圖片就會顯示在相應的位置了。
為了處理背景圖片和工具欄圖片的座標，你可以定義它們的位置並將其加載到資源中，然後在渲染函數中將它們渲染出來。這樣做非常簡單，只需要加幾行代碼。不過，有一個小問題就是圖片周圍有黑色的邊框，這是因為圖片是 PNG 格式的，而默認情況下背景是透明的，導致顯示為黑色。為了解決這個問題，你可以將圖片轉換成背景透明的 PNG 格式，這樣就會方便很多。
之前我們在素材中導入了兩個文件，tools 和 p toots，這些工具文件裡面有一個接口可以幫助我們處理圖片。將這兩個文件添加到項目中，然後調用接口即可實現背景透明化處理。
添加這些文件很簡單。首先，將目錄複製到項目中。然後，在項目名稱上右鍵單擊，選擇“添加現有項”，然後選擇要添加的目錄。這樣，當前目錄下的文件就會被複制到項目中。
在複製的目錄中，你會看到有 tools.h 和 tools.cpp 這兩個文件。右鍵單擊它們，選擇“添加現有項”，然後確認添加。現在，這些文件已經添加到了項目中。
在 tools.h 文件中，有一個接口 pro_image_png，用於顯示背景透明的 PNG 圖片。如果你對它的實現感興趣，可以查看具體的實現細節。現在，我們要調用這個接口了。
首先，要包含頭文件 tools.h，使用雙引號包含，因為它是我們自己寫的頭文件。然後，在代碼中調用 pro_image_png 函數，將圖片顯示部分改成 put_image_png，參數是 PNG 圖片的路徑。其他部分保持不變。運行代碼後，你會發現黑色的邊角消失了。
現在，我們的工具欄已經添加了，但是還沒有植物卡牌。我們希望在工具欄中添加一個能放置各種植物卡牌的區域，這樣玩家就可以從中選擇植物進行種植。現在，我們要開始實現工具欄中的植物卡牌。
植物卡牌有很多種類，每種植物對應一種卡牌。在代碼中，我們可以使用數組來表示這些植物卡牌。我們可以定義一個圖片數組 image，用於存儲每種植物卡牌的圖片。根據你的描述，最多可能有七種植物卡牌，所以我們可以定義一個長度為七的數組。
讓我們先減少一點。保證有三種植物卡牌。在第一個紅中，紅的優點是它很靈活，但也有缺點，當我們要增加更多種類的植物時，你可能需要修改代碼來適應新的情況。這樣的做法不夠方便。更方便的方式是使用一些小技巧。
我們可以先用一個整型常量數組來定義這些植物卡牌的類型。然後，我們可以在數組中添加新的植物類型，而不需要手動更改代碼。最後，我們在數組的最後加上一個植物種類的計數，這樣可以方便地統計有多少種植物類型。
這種方式非常巧妙。比如，如果我們有兩種植物類型，後面再添加一種新的植物類型，數組的大小會自動增加，而不需要手動修改。這種方式非常高效，你在以後的開發中也可以使用這種技巧。
現在，讓我們來定義植物卡牌。我現在先做兩種植物卡牌：豌豆和向日葵。我們可以先定義一個數組來存儲這些植物卡牌的圖片，然後在初始化時加載這些圖片到內存中。讓我們看看我們有多少張卡牌，然後進行初始化。
在初始化過程中，我們可以使用循環來加載每張植物卡牌的圖片。因為每張卡牌的文件名不同，所以我們需要根據文件名來生成加載路徑。我們可以定義一個變量來表示文件名，然後通過循環來生成不同的文件名。
生成文件名的最簡單方式是使用字符串格式化操作，將文件名打印到一個字符串中。在C語言中，我們可以使用 sprintf 函數來完成這個任務。sprintf 函數的第一個參數是目標字符串，後面的參數是要格式化的內容。
首先，我們需要確定每個卡牌的文件名。通常，我們可以在一個循環中使用 sprintf 函數來生成文件名。在生成文件名時，我們可以使用一個標誌來表示卡牌的序號，並將其加到文件名中。
比如，假設我們的卡牌文件存儲在植物目錄下，文件名以 card%d.png 的格式命名，其中 %d 表示卡牌的序號。我們可以在循環中使用 sprintf 函數生成文件名，然後加載每個卡牌的圖片。
加載圖片後，我們就可以將每張卡牌渲染到屏幕上了。我們可以使用一個循環來遍歷所有的卡牌，確定每張卡牌的位置，並使用 put_image 函數將其渲染到屏幕上。通常，我們可以根據卡牌的序號來確定每張卡牌的位置，然後將其放置在適當的位置上。
在確定位置時，我們可以使用一些簡單的數學運算來計算每張卡牌的位置。通常，我們可以根據每張卡牌的大小和間距來確定每張卡牌的位置。最後，我們可以將每張卡牌渲染到屏幕上，這樣玩家就可以在屏幕上看到所有的卡牌了。
總的來說，生成文件名和渲染卡牌到屏幕上是實現植物卡牌功能的關鍵步驟之一。通過使用字符串格式化操作和簡單的數學運算，我們可以輕鬆地生成文件名和確定每張卡牌的位置，從而實現植物卡牌的功能。