Getting Started with SDL 2.0 บน Mac OS

บทความนี้ขอบันทึกการเริ่มต้นเขียนเกมด้วยภาษา C++ โดยใช้ SDL 2.0 ครับ โดยที่เครื่องที่ผมใช้คือ Mac OS ฉะนั้น ขั้นตอนต่างๆ ก็จะเป็น Mac OS อาจจะมีความแตกต่างบ้างในแต่ละ Platform

สืบเนื่องจากว่า ผมมีความคิดว่าอยากจะลองฝึกหัดเขียนเกมยาวว่างๆ เป็น #HobbyGameDev (ซึ่งเคยคิดแบบนี้เมื่อนานมาแล้ว แต่ก็ไม่ได้ทำต่อเนื่อง และล้มเลิกไป)

ตอนนี้ก็เลยเริ่มต้นไอเดียในการหัดเขียนเกมใหม่อีกครั้ง โดยผมตั้งเป้าหมายไว้ ดังนี้

• หัดเขียนและใช้งาน C++ เน้นเรียนรู้พื้นฐาน Fundamental ส่วนใหญ่จะเน้นเป็น C++ Programming ให้แน่นก่อน เนื่องจากไม่ได้เขียนเลย ตั้งแต่เรียนจบ และส่งคืนอาจารย์ไปหมดแล้ว 😅
• เลือกใช้ SDL 2.0 (ลังเลว่าจะใช้ SFML / Raylib ดีมั้ย หรือ lib อื่นๆ)
• ค่อยไปเรียนรู้ Engine พวก Unity / Unreal Engine 5 หรือพวก WebGL/OpenGL ทีหลัง (ถ้ามีโอกาส)
• ไม่ได้จริงจังมาก เพราะว่าคนละสายงานที่ทำ Full Time อยู่ ก็คงเน้นเรียนรู้ เมื่อว่าง เท่าที่จะหาได้
• จะพยายามจดบันทึก เป็น Learning Journey ถ้าช่วงนี้เห็นบทความพวก C++ กับพวก Game Dev ก็แน่นอน เป็นบันทึกการเรียนรู้ของผมนั่นเอง (ไม่ใช่ Tutorial)

ติดตั้ง SDL 2.0

การติดตั้ง SDL ผมทำตามเว็บ Official ของ SDL ครับ รวมถึงอ่าน Tutorial และ Reference บางส่วนจากเว็บ Lazy Foo

• libsdl
• Lazy Foo

วิธีติดตั้งที่ง่ายที่สุด คือ ดาวน์โหลดตัว .dmg จากหน้า release บน Github (ปัจจุบันที่เขียนบทความคือ SDL2 v2.28.2)

ก็อปปี้โฟลเดอร์ SDL2.framework ไปไว้ที่ /Library/Frameworks (ถ้าไม่มีก็สร้างโฟลเดอร์ Frameworks ขึ้นมา แต่คิดว่าจริงๆ เอาไว้ที่ไหนก็ได้มั้ง ไม่แน่ใจ ขอแค่ตอน compile link ไปถูกก็พอ 🤣)

หรืออีกวิธีติดตั้งผ่าน Homebrew ดีกว่า

brew install sdl2

Hello World SDL2

ทดสอบรัน Source Code ว่าได้หรือไม่

1
/\*\*
2

3
- Source Code from :
4
- https://www.lazyfoo.net/tutorials/SDL/01_hello_SDL/index2.php
5
  \*/
6

7
#include <SDL2/SDL.h>
8
#include <stdio.h>
9

10
// Screen dimension constants
11
const int SCREEN_WIDTH = 640;
12
const int SCREEN_HEIGHT = 480;
13

14
int main(int argc, char* args[]) {
15
// The window we'll be rendering to
16
SDL_Window* window = NULL;
17

18
// The surface contained by the window
19
SDL_Surface\* screenSurface = NULL;
20

21
// Initialize SDL
22
if (SDL_Init(SDL_INIT_VIDEO) < 0) {
23
printf("SDL could not initialize! SDL_Error: %s\n", SDL_GetError());
24
} else {
25
// Create window
26
window = SDL_CreateWindow("SDL Tutorial", SDL_WINDOWPOS_UNDEFINED,
27
SDL_WINDOWPOS_UNDEFINED, SCREEN_WIDTH,
28
SCREEN_HEIGHT, SDL_WINDOW_SHOWN);
29
if (window == NULL) {
30
printf("Window could not be created! SDL_Error: %s\n", SDL_GetError());
31
} else {
32
// Get window surface
33
screenSurface = SDL_GetWindowSurface(window);
34

35
      // Fill the surface white
36
      SDL_FillRect(screenSurface, NULL,
37
                   SDL_MapRGB(screenSurface->format, 0x00, 0xcF, 0x90));
38

39
      // Update the surface
40
      SDL_UpdateWindowSurface(window);
41

42
      // Hack to get window to stay up
43
      SDL_Event e;
44
      bool quit = false;
45
      while (quit == false) {
46
        while (SDL_PollEvent(&e)) {
47
          if (e.type == SDL_QUIT) quit = true;
48
        }
49
      }
50
    }
51

52
}
53

54
// Destroy window
55
SDL_DestroyWindow(window);
56

57
// Quit SDL subsystems
58
SDL_Quit();
59

60
return 0;
61
}

โดยที่ตอน Compile เลือก link include / lib ไปที่โฟลเดอร์ SDL2.0 ที่ติดตั้งผ่าน Homebrew คือ /opt/homebrew/Cellar/sdl2/2.28.2

g++ main.cpp -I /opt/homebrew/Cellar/sdl2/2.28.2/include -L /opt/homebrew/Cellar/sdl2/2.28.2/lib -l SDL2 -o main

อธิบายเพิ่มเติมนิดนึงตรงที่ options ต่างๆ

• -I - คือ การ include directories (ก็ link ไป SDL2.0 includes)
• -L - คือ library directories
• -l (L ตัวพิมพ์เล็ก) ชื่อ library

ถ้า Compile ไม่มี Error แสดงว่า link ถูกต้อง

ลองกด start program

./main

จะได้หน้าต่าง Window ที่เป็นสีเขียวๆ ขึ้นมา แสดงว่า รันได้แล้ว

ให้มาพิมพ์คำสั่งเพื่อ Compile ยาวๆ ไม่น่าจะไหว สร้างเป็น Makefile ละกัน สร้าง Makefile ขึ้นมา แบบนี้

1
sdl_location = /opt/homebrew/Cellar/sdl2/2.28.2
2

3
build:
4
g++ main.cpp -I ${sdl_location}/include -L ${sdl_location}/lib -l SDL2 -o main

ทีนี้เวลา Compile ก็สั่ง

make build

ตัว Source Code อยู่บน Github

ต่อไป เดี๋ยวจะลองหัดใช้งาน SDL ตาม Tutorial ดูเพิ่มเติม ว่าทำอะไรได้บ้าง

Happy Coding ❤️

References

• https://github.com/libsdl-org/SDL
• https://wiki.libsdl.org/SDL2/Installation
• https://www.lazyfoo.net/tutorials/SDL/01_hello_SDL/index.php