[Dev] การติดตั้ง SFML ร่วมกับ Visual Studio 2019

มาด้วยความรวดเร็วครับ ตามที่ผมเกริ่นนำไปในบทความที่แล้วว่าจะมีการใช้งาน SFML เข้ามาด้วยดังนั้นบทความนี้จะไปรู้จักกับ SFML ว่ามันคืออะไรและเราจะติดตั้งและใช้งานร่วมกับ Vistual Studio 2019 อย่างไร เริ่มเลยละกันครับ

เจ้า SFML เนี่ยมันคืออะไร ?

Simple and Fast Multimedia Library (SFML) เป็น Cross-platform Game Engine/Library โดยถูกออกแบบให้เป็นการเรียกใช้ component ต่างๆที่อยู่ในเครื่องเราในแบบ API ซึ่ง Library นี้ได้ถูกเขียนจากภาษา C++ โดยมีผู้พัฒนาหลักคือคุณ Laurent Gomila ปัจจุบันถูกพัฒนาโดย SFML Team โดยเจ้า SFML ถูกปล่อยออกมาเป็นเวอร์ชันแรก v1.0 เมื่อวันที่ 9 สิงหาคม ปี 2007 หรือประมาณ 12 ปีมาแล้ว ปัจจุบัน stable version คือ v2.5.1 เมื่อวันที่ 15 ตุลาคม 2018 และด้วยความเกิดมานานของ Library ตัวนี้ และการมี Community ของชาว Dev จึงทำให้มี Dev นำ Library ตัวนี้แตกตัวออกไปในหลายภาษา เช่น C , .Net , Go , D , Java, Python , Ruby เป็นต้นสามารถดู Building ทั้งหมดได้ที่นี่ อีกอย่างคือเจ้า SFML นอกจากจะถูกแตกออกไปหลาย Build แล้วตัวมันสามารถรันและ compile ได้เกือบทุก OS เลย ทั้ง Windows , Linux , Mac OS และสามารถรันได้บน Android และ iOS ได้ตั้งแต่ v2.2 ขึ้นไปด้วย แม่เจ้า++

มาดูโครงสร้างของเจ้า SFML กันดีกว่า

SFML Module — Software architecture

โดยเจ้า SFML ถูกออกแบบมาในรูปของโมดูลประกอบไปด้วย 5 โมดูลดังนี้

• System => จะเกี่ยวข้องกับคลาสที่เป็นเวกเตอร์และ Unicode รวมไปถึงการจัดการ Threading และ timer
• Window => ในโมดูลนี้จะเกี่ยวกับหน้าต่าง windows ทั้งหมดที่แสดงผลบนจอเรา และจัดการ Input Device ทั้งหมดพวกเมาส์ คีย์บอร์ด เว็บแคม จอยสติ๊ก หรืออื่นๆ รวมไปถึงการใช้งานและจัดการ OpenGL (Open Graphics Library) จะอยู่ในโมดูลนี้
• Graphics => ในส่วนนี้จะเป็นโมดูลที่เกี่ยวกับการประมวนผลโดยใช้ฮาร์ดแวร์ในที่นี้ก็คือใช้ CPU ในการประมวนผล จำพวก ภาพ 2D , Sprites , ภาพ polygons ต่างๆ รวมไปถึงการ Render ข้อความด้วย
• Audio => จะเป็นโมดูลที่ทำงานเกี่ยวกับเสียงทั้ง Audio playback และ recoding
• Network => ไม่น่าเชื่อว่าจะมีโมดูลนี้ เป็นโมดูลเกี่ยวกับการเชื่อมต่อกับระบบเครือข่ายคอมพิวเตอร์ในแบบ network sockets ทั้ง TCP และ UDP ยังมีส่วนที่จัดการเรื่อง data encapsulation ให้ด้วย ละก็ยังรองรับโปรโตคอล HTTP (Hyper Text Tranfer Protocol )กับ FTP (File Tranfer Protocol) อีกด้วย

โมดูลทั้งหมดแยกอิสระต่อกันทำให้เราสามารถใช้แต่ละโมดูลได้ตามต้องการ (ยกเว้น โมดูล System ต้องใช้กับทุกๆ โมดูลเพราะเป็นโมดูลระบบหลัก)

อ้างอิงจาก : https://en.wikipedia.org/wiki/Simple_and_Fast_Multimedia_Library

มาต่อกันเลย+

หลังจากบทความที่เเล้วเกี่ยวกับการติดตั้ง Visual Studio 2019 ไปแล้ว ในวันนี้เราจะมาตั้งตั้งเจ้า Lib SFML ตัวนี้ให้ใช้งานกับ VS 2019 ได้ โดยเริ่มจาก

1. เริ่มต้นด้วยการดาวน์โหลดตัว SFML ที่ https://www.sfml-dev.org/download/sfml/2.5.1/ ให้ท่านเลือก Visual C++ 15 (2017) 64 bit หรือ 32 bit ตามแต่ใช้งานครับ (ในที่นี้ผมใช้ 64bit) แล้วกดปุ่ม Download

พอดาวน์โหลดเสร็จแล้วให้เปิดไฟล์ zip และแตกโฟลเดอร์ที่ชื่อว่า SFML-2.5.1 ออกมาไว้ในไดรฟ์บนเครื่อง หรือที่ไหนสักที่ในเครื่องเอาที่เราสามารถจำ path ได้ง่ายๆ น่ะ 555+ (ในภาพผมเอาไว้ที่ C:\ เวลาเรียกก็จะเป็น C:\SFML-2.5.1)

2. จากนั้นก็จะเป็นในส่วนของการสร้าง Project ใน Visual Studio 2019 โดยเริ่มจากเปิดโปรแกรม จากนั้นคลิก Create a new project

3. จากนั้นเลือก “ Empty Project ” แล้วกด Next

จากนั้นก็ทำตามขั้นตอน โดย

1. Project name = > เป็นการตั้งชื่อโปรเจค
2. Location => ตั้งที่อยู่ของโปรเจคเรา (เอาแบบจำง่ายๆ เช่น Desktop หรือ C:\)
3. Solution name => ตั้งชื่อ Solution (Solution นึงอาจมีหลายโปรเจคเหมือนโฟลเดอร์ของ Project อีกที)
4. เสร็จก็กดปุ่ม Create เราก็จะได้ Project แล้วครับ

Create Project — Visual Studio Community 2019

ต่อไปเป็นวิธีเรียก SFML กับ Project ของเรา+

เริ่มจากสร้างไฟล์ main.cpp มาสักไฟล์ก่อนโดยทำการกด [ Ctrl + Shift + a ] ก็จะมีหน้านี้เด้งขึ้นมาให้เราเลือก “ C++ File (.cpp) ” แล้วทำการตั้งชื่อไฟล์ “main.cpp ” (หรือชื่อก็ได้ครับผมตามใจเลยเพราะเป็นการทดลองเฉยๆ 555+) เรียบร้อยแล้วก็กดปุ่ม Add ครับ ส่วน location ไม่ต้องไปแก้มันนะคับมันจะ auto ไปหา path โปรเจคเราอยู่แล้ว

ต่อไปเป็นการตั้งค่า Path อันดับแรกให้กดปุ่ม [ Alt + Enter ] หรือ ไปที่เมนูด้านบน Project > Properties จะมีหน้า [ชื่อโปรเจคเรา] Property Page เด้งขึ้นมา

• Configuration => ให้เลือกเป็น [All Configurations]
• Platform => ให้เลือกตาม SFML ที่เราดาวน์โหลดมาว่าเป็น 32bit(Win32) หรือ 64bit(x64) แต่ของผมโหลด 64bit มาก็ให้เลือก x64
• จากนั้นกดปุ่ม Configuration Manager… ข้างๆ มุมขวาบน

• Active solution platform กับ Platform=> เลือกให้ตรงกับ SFML ที่โหลดมา (ของผม x64) จากนั้นกดปุ่ม Close ก็จะกลับมาหน้าเดิม
• ให้เอาเมาส์ไปคลิกในเมนูด้านข้างส่วน C/C++ > General แล้วคลิกตรงรูปสามเหลี่ยมเล็กๆหลังช่อง Additional Include Directories จะมี <Edit…> ขึ้นมาให้กด <Edit…> จากนั้นกดปุ่มรูป โฟลเดอร์เหลือง และกดปุ่ม … แล้วให้เลือก path SFML

ให้ไปเลือก [path ที่แตกโฟลเดอร์ SFML ไว้ตอนแรก]SFML-2.5.1\include (ใครลงเหมือนผมก็จะเป็น C:\SFML-2.5.1\include) จากนั้นกด Select Folder แล้วกด OK

กด OK ล่ะจะเป็นแบบนี้

ต่อมาให้ไปเลือกที่ Linker > General แล้วคลิก <Edit…> แล้วทำเหมือนเดิมเหมือนข้างบนแต่คราวนี้เราเลือกโฟลเดอร์ Lib

กด OK ล่ะจะเป็นแบบนี้

ต่อมาก็ให้ไปที่ Linker > Input > Additional Dependencies > คลิกเลือก <Edit…> หลังจากนี้ในส่วนที่ 4 จะเป็นการเรียกใช้ lib จากโฟลเดอร์ lib ที่เราเลือกให้เราไปดู lib ที่เราต้องการใช้งานได้จากโฟลเดอร์ SFML-2.5.1\lib (ส่วนที่ผมใส่ไปจะมี sfml-main-d.lib | sfml-system-d.lib(ต้องมี) | sfml-graphics — d.lib | sfml-window-d.lib | sfml-audio-d.lib | sfml-network-d.lib) ต้องการใช้ตัวไหนก็เรียกเอาเลยคับ

• เพิ่มเติมคับ lib ตัวไหนมี -s => Stable | -d => debug | ไม่มี => release
• !!! เพิ่มเติมครับ ให้ใส่ -d ลงไปด้วย

จากนั้นกด OK(5) และกด OK(6)

จากนั้น copy ไฟล์ที่นามสกุล .dll ทั้งหมดในโฟลเดอร์ SFML-2.5.1\bin ไปไว้ในโฟลเดอร์โปรเจคของเรา 2 ที่ คือ 1. ([ชื่อ Solution]>[ชื่อโปรเจค]> [วางตรงนี้แหละ]จะเห็นไฟล์นามสกุล .vcxproj กับ main.cpp ล่ะก็โฟลเดอร์ x64) 2. เข้าต่อไปอีกในโฟร์เดอร์ x64 > debug วางตรงนี้แหละ

เสร็จแล้วคับ ต่อไปก็เป็นการทดสอบแล้วว่า SFML ทำงานได้ไหม !

เริ่มจาก copy Code ด้านล่างนี้ไปวางในไฟล์ main.cpp ที่เราสร้าง ให้เลือก debug x64 จากนั้นกดปุ่ม [Local Windows Debugger]

ถ้าขึ้นตามด้านล่างนี้ก็ยินดีด้วยครับ SFML กับ Visual Studio 2019 พร้อมใช้แล้วครับ!!!

Output เมื่อกด Debugger จะขึ้นวงกลมสีเขียว

ส่วนสำหรับใครที่ยังไม่ได้หรือขึ้น Error อย่างไรลองกลับไปดูเรื่อง Path กับตรงที่เลือกใช้ .lib มาใช้งานว่าครบไหม path ถูกไหมครับ

ทิ้งท้าย+

ก็จบแล้วนะครับผม อาจจะยาวหรือละเอียดไปก็ติชมกันได้ หรือส่วนไหนตรงไหนผิดก็แจ้งมาได้ครับ SFML + VS 2019 ผมก็เพิ่งมาลองใช้ไปพร้อมๆกับเขียนบล็อกนี่แหละครับไม่ได้เคยทำมาก่อน ท่านใดเคยผ่านมาก่อนก็แนะนำได้ครับ

เอาละครับผมสุดท้ายนี้ก็ขอบคุณผู้ติดตามทุกคนที่แวะเข้ามาอ่านกันได้ครับ 555+ บทความต่อไปน่าจะเป็นเรื่องการใช้งานตัว lib SFML หรือไม่ก็เป็นการติดตั้ง SFML ร่วมกับ IDE ตัวอื่นครับ เด๋วผมจะหาเวลาเขียนเรื่อยๆ ครับ : ) แล้วเจอกันคับผม…..

ไปติดตามอ่านต่อได้เลยครับเพื่อนผมเขียนต่อไว้แล้ว

เขียนเกมด้วย SFML #1 ทำสไปรต์เดินได้/เช็ค Collision(การชน)