ใช้งาน Aseprite ฟรีๆ ไม่ต้องซื้อ สำหรับทำ Pixel Art หรือ Sprite Sheets

สวัสดีครับ วันนี้มาแชร์ วิธีการ Setup และใช้งาน Aseprite แบบฟรีๆ ไม่ต้องเสียตังบน Mac OS กันครับ

ซึ่งช่วงนี้ผมกำลังพยายามหัดทำเกม และตัว Asprite ก็เป็นหนึ่งใน Tool ที่ผมกะเอาไว้ใช้ทำพวก Pixel Arts ครับ ด้วยความที่ผมไม่ค่อยมีหัวด้านนี้เท่าไหร่ การทำ Pixel น่าจะโอเคสำหรับผม

ซึ่งตัว Aseprite จริงๆ แล้ว ราคาคือ $14.99 (ประมาณ 500 บาท) รองรับทั้ง Windows, Linux และ ก็ Mac OS ครับ นอกจากนี้ ตัว Aseprite ยังเป็น Open Source ทำให้เราสามารถเอา Source Code มา Compile ใช้งานได้นั่นเอง สำหรับใครที่ไม่อยากซื้อครับ

โดยผมใช้เวลานั่ง Setup นานมาๆ 3-4 ชั่วโมง ได้ ลองผิดลองถูก ลองแก้ปัญหา ไปเรื่อยจนได้ เลยเขียนบันทึกไว้เป็นบทความดีกว่า เผื่อพี่ๆ เพื่อนๆ น้องๆ สนใจ และช่วงนี้ผม อาจจะเริ่มเรียน เริ่มหัด C++ หรือ Unity จริงๆ จังๆ มากขึ้น อาจจะเห็น Content แนว Game Dev มากขึ้นนะครับ ส่วนมาก คงเป็นแนว Devlog หรือบันทึก ผสมๆ Tutorial เผื่อทบทวนตัวเองไปนะครับ

ติดตั้ง Asprite

การติดตั้ง Aseprite จำเป็นต้องมี C++ และตัว Compiler ต่างๆ ซึ่งแต่ละ Platform ก็อาจจะแต่งต่างกันครับ ใน Windows ก็น่าจะใช้ของ Visual Studio ได้เลย ส่วนของ Mac OS ผมก็ยังงๆ อยู่ระหว่าง Clang กับพวก GCC อะไรพวกนี้ มือใหม่ C++ มากๆ ไม่เคย Setup Compiler เอง และเมื่อสมัยเรียน ใช้ Windows ใช้ Visual Studio / CodeBlock มันไม่ต้อง Setup อะไรมากมั้ง จำไม่ได้ละ

สิ่งที่ต้องมี

• Mac OS 10.15 (Catalina)
• XCode
• Skia เป็นตัว library ที่ใช้มั้ง ผมไม่แน่ใจ
• cmake และ ninja
• Python (มีมาอยู่แล้ว)

สำหรับวิธีการ Installation ใน Github เค้ามีวิธีลงไว้ละเอียดมากๆครับ ทั้ง 3 Platform ผมก็อ้างอิงจาก Doc เหมือนกัน รายละเอียดอาจจะแต่งต่างกันบ้างเล็กๆน้อยครับ

ผมลงผ่าน Homebrew หมดเลย

brew install cmake ninja gcc

ไม่แน่ใจ gcc ลงเพิ่มมันใช้ตัวนี้ หรือใช้ default ที่เป็น clang มากับ XCode ผมก็ไม่แน่ใจนะครับ เอาเป็นว่าลงไว้ก่อน เพราะผมลองเอา gcc มาใช้ compile c++ แบบฝึกที่ทำอยู่ เหมือนกัน มันใช้

ติดตั้ง Skia

ง่ายสุด โหลดจาก Github ครับ ที่ Link นี้ https://github.com/aseprite/skia/releases เลือก Skia-macOS-Release-x64.zip จากนั้นก็นำไปไว้ในโฟลเดอร์ ~/deps ครับ ไม่มีก็สร้างใหม่ ที่โหลดตั้งชื่อว่า skia

ตัวโฟลเดอร์ deps ที่อยู่ใน $HOME (ชื่อ /Users/username) จริงๆ จะตั้งชื่ออะไรก็ได้ แต่ใช้ default นี้แหละ จะได้ไม่ต้องเปลี่ยนอะไรมาก ตอนรัน script

ตอ่มา ไปที่ folder ~/deps/skia และรันคำสั่งด้านล่างเลย (Copy ไปวางง่ายสุด ผมก็ก็อปมาจาก Doc ฮ่าๆ)

cd ~/deps/skia

python tools/git-sync-deps

gn gen out/Release-x64 --args="is_debug=false is_official_build=true skia_use_system_expat=false skia_use_system_icu=false skia_use_system_libjpeg_turbo=false skia_use_system_libpng=false skia_use_system_libwebp=false skia_use_system_zlib=false skia_use_sfntly=false skia_use_freetype=true skia_use_harfbuzz=true skia_pdf_subset_harfbuzz=true skia_use_system_freetype2=false skia_use_system_harfbuzz=false target_cpu=\"x64\" extra_cflags=[\"-stdlib=libc++\", \"-mmacosx-version-min=10.9\"] extra_cflags_cc=[\"-frtti\"]"

ninja -C out/Release-x64 skia modules

Compile Aseprite

หลังจากลง Skia เสร็จแล้ว ต่อมาโหลด Source Code ของ Aseprite เราจะ Clone ก้ได้ แต่ผมลอง Clone มาแล้ว แล้ว Build แต่เปิดไม่ได้ พอเห็นใน Repo มัน build failed ก็เลยคิดว่า โหลดตัว Stable version มาน่าจะง่ายกว่า ไป Tab Release - https://github.com/aseprite/aseprite/releases

เลือก Asesprite v1.2.17 ทำการ Download Source Code จะวางไว้ที่ไหนก็ได้แล้วแต่เรา

สมมติผม วางไว้ที่ ~/deps/aseprite ละกัน ก็ไป folder นี้เลย แล้วสร้าง build โฟลเดอร์ขึ้นมา เพื่อ build ละ ตาม command ด้านล่างเลย

cd aseprite
mkdir build
cd build
cmake \
  -DCMAKE_BUILD_TYPE=RelWithDebInfo \
  -DCMAKE_OSX_ARCHITECTURES=x86_64 \
  -DCMAKE_OSX_DEPLOYMENT_TARGET=10.9 \
  -DCMAKE_OSX_SYSROOT=/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX10.15.sdk \
  -DLAF_BACKEND=skia \
  -DSKIA_DIR=$HOME/deps/skia \
  -DSKIA_LIBRARY_DIR=$HOME/deps/skia/out/Release-x64 \
  -G Ninja \
  ..
ninja aseprite

ขั้นตอน ninja aseprite อาจจะใช้เวลา compile นานหน่อย ขึ้นอยู่กับ CPU ละ ของผม Dual Core ก็ใช้เวลาพักนึงเลย เมื่อทุกอย่างเรียบร้อย ก็รัน Asepsrite ได้แล้ว

./bin/aseprite

แต่ปัญหานิดนึง คือ Menu ด้านบน กดไม่ได้เลย แฮะ ผมเลยไปลองโหลดตัว Trial จากเว็บมาลองดู ปรากฎว่าใช้ได้แฮะ เลยใช้วิธี เอาตัว Execution ของเรา build/bin/aseprite เนี่ย ไปแทน ตัว Trial ซะเลย

โดยที่ Application มี Aseprite.app ตัวโหลดมาแล้วนะ จากนั้นเข้า Finder เลือก Aesprite แล้ว Click ขวา เลือก Show Package Contents

เข้าไป folder Contents -> Mac OS

จากนั้น ก็เอาของเราที่ build เสร็จไปแทน (backup ตัว trial ไว้ก็ดีนะครับ)

และก็ใช้งานได้ปกติเลย ซึ่งไมม่รู้ว่าเป็นวิธีที่ดีมั้ย แต่ตอนนี้ ก็สามารถใช้งานเบื้องต้นได้ Save File ได้ Setting ได้ เดี๋ยวถ้าไง ลองใช้งานอื่นๆ ถ้าเจอปัญหา จะมาอัพเดทอีกทีครับ

ตอนนี้ ก็ใช้ Aseprite บน Mac OS ได้แล้ว โดยไม่ต้องเสียตัง เสียเวลา ติดตั้งเอง นิดหน่อย

References

• Aseprite on Github
• Installation