[Mac OS] Setup SDL2 with CLion

บันทึกการ setup การใช้งาน SDL2 ด้วยการใช้ CLion บน Windows เนื่องจากช่วงนี้ผมกำลังลองหัดเขียน C++ และก็ลองหัดใช้ตัว SDL2 ก่อนหน้านี้สามารถที่จะรัน SDL2 ได้แล้ว แบบใช้ G++ รัน command line

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

[Mac OS] Getting Started with SDL 2.0

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

DEVAHOYChai Phonbopit

วันนี้อยากลองดูอีกวิธี คือการใช้ตัว IDE ที่ชื่อ CLion ว่ามันจะสะดวกกว่าใช้ VS Code + Terminal มั้ย?

SDL2 + CLion

ตัว CLion เสียตัง แต่เราสามารถลองแบบ Trial 30 วันได้ครับ ซึ่งผมก็ลองใช้แบบ Trial Version ดูก่อน

CLion: A Cross-Platform IDE for C and C++ by JetBrains

A powerful IDE from JetBrains helps you develop in C and C++ on Linux, macOS and Windows.

JetBrainsJetBrains

ตัว SDL2 ผมติดตั้งผ่าน Homebrew ไปแล้ว ก่อนหน้านี้

brew install sdl2

ซึ่ง Location มันจะอยู่ที่ /opt/homebrew/Cellar/sdl2/2.28.2/

สร้างโปรเจ็คใหม่ ใน CLion

ตัว CMakeLists.txt ก็จะมีแค่นี้

cmake_minimum_required(VERSION 3.26)
project(hello_sdl2)

set(CMAKE_CXX_STANDARD 17)

add_executable(hello_sdl2 main.cpp)

ทดสอบรันโปรแกรม ก็จะได้ output เป็น Hello, World!

แก้ไขไฟล์ CMakeLists.txt โดย กำหนด path ของ SDL2 และก็เพิ่ม include และ lib ลงไป

cmake_minimum_required(VERSION 3.26)
project(hello_sdl2)

set(CMAKE_CXX_STANDARD 17)

# กำหนด SDL2 Path
set(SDL2_PATH /opt/homebrew/Cellar/sdl2/2.28.2)

# กำหนด include และ lib directory
set(SDL2_INCLUDE_DIR ${SDL2_PATH}/include)
set(SDL2_LIB_DIR ${SDL2_PATH}/lib)

# หา package SDL2 ใน SDL2 path ที่เรากำหนด
find_package(SDL2 REQUIRED PATHS ${SDL2_PATH})

# include และ link lib/header
include_directories(${SDL2_INCLUDE_DIR})
link_directories(${SDL2_LIB_DIR})

add_executable(hello_sdl2 main.cpp)

# กำหนด target link library
target_link_libraries(${PROJECT_NAME} SDL2::SDL2)

ทำการ reload CMake

แล้วลองแก้ไขโค๊ด main.cpp โดยเพิ่มโค๊ดเหล่านี้ลงไป

#include <iostream>
#include <SDL.h>

int main(int argc, char* args[]) {
    SDL_Init(SDL_INIT_EVERYTHING);

    std::cout << "Hello, World!" << std::endl;

    SDL_Quit();
}

ถ้าตั้งค่าถูก เราก็จะ include ได้ถูก กดรันแล้วดูผลลัพธ์ ถ้ารันได้ compile ผ่านไม่มี error และแสดง Hello World! ได้ปกติ แสดงว่าเรา setup SDL2 ได้ถูกต้องแล้ว

ลองใช้โค๊ดตัวอย่าง นี้ ก็จะแสดงหน้า Window สีเขียวๆ ขึ้นมา

#include <SDL.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;
}

ผลลัพธ์

โค๊ดตัวอย่างจาก Lazy Foo - Hello SDL

Lazy Foo’ Productions - Hello SDL: Your First Graphics Window

Create your first GUI Window with SDL2!

Hello SDL: Your First Graphics Window

ติดตั้งไว้ที่ /Library/Frameworks

อีกวิธีที่ผมยังงงๆ คือ ใช้ SDL2 จากหน้า Release v2.28.2 เลือกเป็น Mac OS

Release 2.28.2 · libsdl-org/SDL

This is a stable bugfix release, with the following changes: Fixed occasionally failing to open the clipboard on Windows Fixed crash at shutdown when using the D3D11 renderer Fixed setting the vie…

GitHublibsdl-org

แล้วก็ติดตั้งไว้ที่โฟลเดอร์ /Library/Frameworks ของเรา

วิธีการเปิดคือ เข้า Finder แล้วกด Command + Shift + G และพิมพ์หา /Library/Frameworks เปิดโฟลเดอร์ แล้วเอา SDL2.framework เราไปติดตั้งที่นั้น

ทีนี้ ส่วนที่เป็น CMakeLists.txt ก็ไม่ต้องไป กำหนด path ไป homebrew แต่ใช้ตัว Frameworks ได้เลย

cmake_minimum_required(VERSION 3.26)
project(hello_sdl2)

set(CMAKE_CXX_STANDARD 17)

# หา package ชื่อ SDL2
find_package(SDL2 REQUIRED)

add_executable(hello_sdl2 main.cpp)

# กำหนด target link SDL2
target_link_libraries(${PROJECT_NAME} SDL2::SDL2)

เพียงแค่นี้ เราก็สามารถใช้ SDL2 จากโฟลเดอร์ /Library/Frameworks ได้แล้ว

สรุป

เพิ่งหัดใช้ CmakeLists ครั้งแรก ก็ยังแอบงงๆ เรื่องการใช้พวก find_package ไม่แน่ใจ default มันคือ /Library/Frameworks รึเปล่า ซึ่งทั้งหมด ลองพยายามให้มันได้แบบเดียวกันกับที่เรารันผ่าน command line ตัวนี้ตั้งค่า ผิดหรือถูก ต้องขออภัยด้วยนะครับ

Happy Coding ❤️