[Mac OS] Getting Started with SDL 2.0

บทความนี้ขอบันทึกการเริ่มต้นเขียนเกมด้วยภาษา 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

Simple DirectMedia Layer - Homepage

Homepage

Lazy Foo’ Productions - Beginning Game Programming v2.0

A beginners guide for Game Programming.

Beginning Game Programming v2.0

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

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

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

brew install sdl2

Hello World SDL2

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

/**
 * Source Code from :
 * https://www.lazyfoo.net/tutorials/SDL/01_hello_SDL/index2.php
 */

#include <SDL2/SDL.h>
#include <stdio.h>

// Screen dimension constants
const int SCREEN_WIDTH = 640;
const int SCREEN_HEIGHT = 480;

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

  // The surface contained by the window
  SDL_Surface* screenSurface = NULL;

  // Initialize SDL
  if (SDL_Init(SDL_INIT_VIDEO) < 0) {
    printf("SDL could not initialize! SDL_Error: %s\n", SDL_GetError());
  } else {
    // Create window
    window = SDL_CreateWindow("SDL Tutorial", SDL_WINDOWPOS_UNDEFINED,
                              SDL_WINDOWPOS_UNDEFINED, SCREEN_WIDTH,
                              SCREEN_HEIGHT, SDL_WINDOW_SHOWN);
    if (window == NULL) {
      printf("Window could not be created! SDL_Error: %s\n", SDL_GetError());
    } else {
      // Get window surface
      screenSurface = SDL_GetWindowSurface(window);

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

      // Update the surface
      SDL_UpdateWindowSurface(window);

      // Hack to get window to stay up
      SDL_Event e;
      bool quit = false;
      while (quit == false) {
        while (SDL_PollEvent(&e)) {
          if (e.type == SDL_QUIT) quit = true;
        }
      }
    }
  }

  // Destroy window
  SDL_DestroyWindow(window);

  // Quit SDL subsystems
  SDL_Quit();

  return 0;
}

โดยที่ตอน 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 ขึ้นมา แบบนี้

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

build:
	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