SFML 遊戲程式設計 (零) 前言&設置環境

這學期在學校修3D遊戲設計課程>w<
我未來一定會往遊戲方面走，所以這門課程對於我而言意義重大，感謝這個課程。

曾經為了完成第一個功課，雖然只是2D遊戲設計，但是花了我很多時間，主要花的時間並不是在什麼想遊戲概念還是撰寫程式碼的過程，那些對我而言都不是問題。

"尋找工具" & "學習怎麼利用" 才是真正最花時間的部分。

我們常常說的API，Application Programming Interface，是指包裝好的，可使用在特定目的的介面。舉個例子，就像是許多網站，在文章的底下會有分享至臉書或之類的社群網站的東西，正是利用的Facebook提供的API做的。而在遊戲世界裡，OpenGL、DirectX、SDL、SFML等，也是用來製作遊戲的API。

這次想要向各位介紹的SFML，正是那麼多種API中，偶然被我找到的

"非常好用無腦方便的API "

其實我原本是想要找一個方法放聲音到遊戲裡，東找找西找找，就找到了SFML，雖然我在作業中只有用來播聲音，但其他生成畫面的部分、控制事件的部分、網路通訊的部分，跟其他API結合的部分，都實在是太酷了，不學會真的浪費掉的感覺QwQ

在接下來幾篇的教學範例文中，我們會使用C++語言當作主要語言，雖然SFML支援非常多種語言(這點真的也非常精彩)，但因為C++的高效率、嚴謹性及低門檻，且世界上大部分的遊戲製作API都是C++，我們還是選用C++嚕。

步驟 0 : 準備IDE!

首先，我們需要準備一個IDE，IDE可以想成是"用來寫程式的程式"，內建許多自動完成功能或整合功能，方便我們開發程式。接下來我們會用微軟的Visual C++做示範。已經裝有IDE的朋友們可以跳到步驟1。

Visual C++ 2013 :
http://www.visualstudio.com/zh-tw/downloads/download-visual-studio-vs#DownloadFamilies_2
(中的for Windows Desktop)
(2010也可以啦，但2013的程式碼提示跟環境外觀就是比較爽)

**其實用Visual C++真的很方便QAQ，無論是我寫教學文還是各位朋友在開始學習SFML的時候，但有些人就是堅持不用Visual C++ XDD  (老實說，我覺得Visual系列是微軟唯一做得好的軟體ㄟQQ)，試試看咩。

步驟 1 : 下載SFML的原始檔!

最最最新的原始檔在他們的git上，連結為
https://github.com/LaurentGomila/SFML/archive/master.zip
載下來之後，就解壓縮在一個空曠的地方，然後順便建立接下來要建置SFML的API的資料夾。

 

步驟 2 : CMake & Build!

CMake，可以當作是一個跨平台的"生成Makefile"的神器，根據不同的作業系統或規格，CMake可以藉由使用者想要編譯的目標編譯，例如要選用Visual C++、MinGW或GCC之類的。(MinGW其實是Windows的GCC環境)

CMake :
http://www.cmake.org/download/
(中找到最新版的Binary distributions，的Windows Win32 Installer)

注意! 在安裝過程中會出現是否要加進PATH的選項，記得要勾要唷! 然後推薦勾for current user。安裝完後記得用命令元檢查一下，各位可以去看上面的上面那一張，有CMake在尾端唷。

然後重頭戲要來了，我們要用CMake產生專案檔啦!  好興奮喔!
(先說，程式碼擺放的資料夾最好不要跟建置資料夾一樣唷)

選擇好原始檔的位置(Browse Source...)及選擇好輸出專案檔的位置(Browse Build...)之後，按Configure，然後選擇相對應的編譯模組，像這裡我們是用Visual Studio 12 2013(x64先不在我們的範圍之內，但有需要的話可以使用唷)。

按下Finish之後，他會開始跑一連串的東西，請耐心等待唷! 假如安裝沒有問題的話，理當順利完成Configure的程序，Configure意旨設定專案檔要長得什麼樣子，其實在其他很大的專案(例如LLVM)，Configure裡面要設定的東西會非常非常多，但SFML真的很方便無腦，接下來馬上按Generate(產生)就好了，除非有其他設定各位想要嘗試XD

然後我們立馬到那個剛剛產生完專案檔的目錄! 打開SFML.sln。
進去之後更改建置目標，將Debug改成Release。
(深色主題真的很好看且對眼睛比較好>w<  推薦給各位)

然後，建置->建置方案，等一段時間。完成之後再回去那個資料夾看看，就可以看到多了一些東西，但我們要的東西是在lib資料夾裡。

 

我們做這檔事情的原因是，在利用API寫完程式要發布到網路上，或者分享給朋友們的時候，都是需要包裝我們剛剛編譯出來的dll的，各位假如曾經逛過程式資料夾的話，一定看過不少dll，其實那個是動態連結檔案(Dynamic Link Library)，用於當程式在執行的時候，呼叫需要的API時，函數或變數就藏在dll裡面這樣。

步驟 3 : 塞東西!

辛辛苦苦建置完使用SFML時需要的API之後，就馬上開始來測試有沒有問題啦!

先把.dll們複製到system32跟SysWOW64(有的話)裡面 :

這麼做是為了方便執行與測試SFML的功能，因為只要這麼一做完，這台電腦的任何SFML程式可以無腦執行，因為對於系統而言，找.dll會從程式執行檔目錄或這些地方開始找。之後要發佈到網路上或分享給朋友們的時候，也記得要把.dll放進程式執行檔的同目錄唷。

然後，到原本的master資料夾(原始檔資料夾)，把include資料夾裡面的SFML資料夾複製到Visual Studio在的地方，裡面的include資料夾。像我的例子的話會像這樣子 :
(仔細觀察兩個資料夾的路徑喔)

跟複製.lib檔案至lib資料夾
(仔細觀察資料夾的路徑喔)

步驟 4 : 開IDE!

怒開Visual Studio，新增一個空專案。

建立一個空專案之後，裡面應該是空空如也XDDDDD
所以我們要到原始程式檔按右鍵->加入->新增項目，然後按確定。

接下來，是每個SFML專案都要非常注意的設定!
在專案(例如這裡是SFML_TEST)按右鍵->屬性->連結器->輸入->其他相依性->編輯...，中加入以下.lib :
sfml-graphics.lib
sfml-window.lib
sfml-system.lib
(記得用換行)
(假如要撰寫的程式還需要其他功能的話，像是audio或network，記得也要額外補上喔，檔名可以參照lib資料夾裡的.lib名字)

然後終於可以貼程式碼啦!
**這個程式碼範例是來自官網的教學
**This code is quoted from SFML 2.1 tutorial

#include <SFML/Graphics.hpp>

int main()
{
    sf::RenderWindow window(sf::VideoMode(200, 200), "SFML works!");
    sf::CircleShape shape(100.f);
    shape.setFillColor(sf::Color::Green);

    while (window.isOpen())
    {
        sf::Event event;
        while (window.pollEvent(event))
        {
            if (event.type == sf::Event::Closed)
            window.close();
        }

        window.clear();
        window.draw(shape);
        window.display();
    }

    return 0;
}

然後在編譯之前，請先記得換成Release，否則會失敗，因為我們的編譯目標都是用Release。編譯及執行成功應該會長得像這樣 :

(話說，假如覺得我照片中的程式碼字型很好看的話，可以參考一下source code pro字型喔，Adobe做的免費字型耶!)

這樣一來，就成功設定好學習SFML的環境了!
有任何問題或這篇文章可以改進或補充之處，歡迎在下面留言唷!