สอนสร้างเกม Stencyl

ส่วนประกอบ Stencyl

Stencyl เป็นเครื่องมือสร้างเกม 2D ที่ออกแบบมาเพื่อให้ทั้งผู้เริ่มต้นและนักพัฒนามืออาชีพสามารถสร้างเกมได้ง่ายและรวดเร็ว

เป็นโปรแกรมที่มีระบบ ลากและวางบล็อกคำสั่ง (Block-based Programming) ผู้ใช้ไม่จำเป็นต้องเขียนโค้ดก็สามารถทำเกมสนุก ๆ ได้ นอกจากนี้ Stencyl ยังรองรับการเขียนโค้ดภาษา Haxe สำหรับฟีเจอร์ขั้นสูง ทำให้สามารถปรับแต่งเกมได้ตามต้องการ โปรแกรมนี้มาพร้อมกับเครื่องมือสร้างฉาก ตัวละคร ระบบฟิสิกส์ และสื่อพร้อมใช้ อีกทั้งสามารถส่งออกเกมไปยังหลายแพลตฟอร์ม เช่น Windows, Mac, HTML5, Android และ iOS จึงเหมาะทั้งสำหรับการเรียนการสอนและการพัฒนาเกมเชิงพาณิชย์ด้วยระบบ ลากและวางบล็อกคำสั่ง (Block-based Programming) ผู้ใช้ไม่จำเป็นต้องเขียนโค้ดก็สามารถทำเกมสนุก ๆ ได้ นอกจากนี้ Stencyl ยังรองรับการเขียนโค้ดภาษา Haxe สำหรับฟีเจอร์ขั้นสูง ทำให้สามารถปรับแต่งเกมได้ตามต้องการ โปรแกรมนี้มาพร้อมกับเครื่องมือสร้างฉาก ตัวละคร ระบบฟิสิกส์ และสื่อพร้อมใช้ อีกทั้งสามารถส่งออกเกมไปยังหลายแพลตฟอร์ม เช่น Windows, Mac, HTML5, Android และ iOS จึงเหมาะทั้งสำหรับการเรียนการสอนและการพัฒนาเกมเชิงพาณิชย์

หมวดหลักใน Resources (แถบด้านซ้าย)

หมวด RESOURCES (ทรัพยากรในเกม)

Actor TypesActor Types

เก็บตัวละคร/วัตถุทุกชนิด เช่น ผู้เล่น, ศัตรู, เหรียญ, กำแพง **ตัวเลขข้างหลัง (6) = จำนวน Actor Types ที่มีอยู่

BackgroundsBackgrounds

พื้นหลัง (Background) ที่ใช้ใส่ใน Scene เช่น ท้องฟ้า, ภูเขา, เมือง

FontsFonts

ฟอนต์ตัวอักษรที่ใช้แสดงข้อความ เช่น คะแนน, เมนู **ตัวเลข (3) = มีฟอนต์อยู่ 3 แบบ

ScenesScenes

ฉากหรือด่านในเกม เช่น Level1, GameOver, GameWin **ตัวเลข (3) = มีอยู่ 3 Scene

SoundsSounds

เสียงที่ใช้ในเกม เช่น เสียงกระโดด, เสียงเก็บเหรียญ, เพลงประกอบ

TilesetsTilesets

ชุดบล็อก/กระเบื้อง (Tile) สำหรับสร้างพื้น กำแพง หรือทางเดินในฉาก

การกำหนดคุณสมบัติให้กับวัตถุ :

ใช้กำหนดลักษณะภายนอกของ Actorสามารถ รายละเอียด ดังนี้

A. Appearance (รูปร่าง/ภาพ)

ใช้กำหนดลักษณะภายนอกของ Actorสามารถใส่ Animation (การเคลื่อนไหว) เช่น ยืนนิ่ง, เดิน, กระโดดตั้งค่า Properties เช่น Name ชื่อ AnimationLooping ให้เล่นวนซ้ำหรือไม่Synchronized ให้ sync กับ Actor ตัวอื่นหรือไม่Origin Point จุดศูนย์กลางของภาพ (ใช้ตอนหมุน/ชน)Framesใส่รูปทีละเฟรมสำหรับทำอนิเมชัน

B. Behaviors (พฤติกรรม)

ใช้เพิ่ม “พฤติกรรม” (Behavior) ให้ Actor เช่นเคลื่อนที่ซ้าย-ขวากระโดดได้ยิงกระสุนBehavior สามารถใช้ซ้ำกับ Actor หลายตัวได้

C. Events (เหตุการณ์)

ใช้เขียน “เหตุการณ์” ที่ Actor จะตอบสนอง เช่นเมื่อถูกชน ลดพลังชีวิตเมื่อเก็บเหรียญ เพิ่มคะแนนเมื่อถูกแตะ เล่นเสียง

D. Collision (การชน)

กำหนดพื้นที่ชนของ Actorเลือกได้ว่าจะใช้รูปทรงสี่เหลี่ยม วงกลม หรือปรับเองใช้ตรวจจับการชนกับ Actor ตัวอื่นหรือTiles

E. Physics (ฟิสิกส์)

ตั้งค่าการเคลื่อนไหวตามกฎฟิสิกส์เคลื่อนไหวได้หรือไม่ (Cannot Move / Cannot be pushed / Normal)หมุนได้หรือไม่มีแรงโน้มถ่วงดึงหรือไม่

F. Properties (คุณสมบัติ)

เก็บค่าพื้นฐานเพิ่มเติม เช่น ความเร็ว, ค่า HP, ค่าที่เรากำหนดเองใช้ประกอบกับ Behavior หรือ Script อื่น ๆ

สรุป

Appearance :จัดการภาพและแอนิเมชัน

Behaviors :เพิ่มพฤติกรรมให้ Actor

Events :ใส่เหตุการณ์/การตอบสนอง

Collision :ตั้งค่าการชน

Physics :กำหนดการเคลื่อนไหวและแรงโน้มถ่วง

Properties :เก็บคุณสมบัติพิเศษเพิ่มเติม.สรุป

การจัดการส่วน Palette Inspector

Palette Inspector เป็นส่วนของเครื่องมือนี้คือ คลังวัตถุและพื้นผิว ของเกม เมื่อเราสร้าง Tileset หรือ Actor ขึ้นมา จะปรากฏในหน้าต่างนี้ แล้วเราสามารถลากไปวางในฉากได้

Palette: เป็นคลังเก็บวัตถุ (Tiles/Actors)

Inspector :ใช้ดูและแก้ไขคุณสมบัติของวัตถุที่เลือกในฉาก

Tiles :สำหรับเก็บ “กระเบื้อง” หรือชิ้นส่วนพื้นผิว เช่น พื้น กำแพง ทางเดิน

Actors:สำหรับเก็บตัวละคร/วัตถุที่มีพฤติกรรม เช่น ผู้เล่น ศัตรู ไอเท็มเครื่องมือแว่นขยาย (Zoom in/Zoom out)ใช้ปรับการมองเห็นขนาดตัวอย่างของ Tiles ให้เล็กหรือใหญ่ขึ้น เพื่อเลือกได้ง่ายPalette : เป็นคลังเก็บวัตถุ (Tiles/Actors)

Inspector :ใช้ดูและแก้ไขคุณสมบัติของวัตถุที่เลือกในฉาก

Tiles :สำหรับเก็บ “กระเบื้อง” หรือชิ้นส่วนพื้นผิว เช่น พื้น กำแพง ทางเดิน

Actors :สำหรับเก็บตัวละคร/วัตถุที่มีพฤติกรรม เช่น ผู้เล่น ศัตรู ไอเท็ม

เครื่องมือแว่นขยาย (Zoom in/Zoom out)ใช้ปรับการมองเห็นขนาดตัวอย่างของ Tiles ให้เล็กหรือใหญ่ขึ้น เพื่อเลือกได้ง่าย

การจัดการส่วนของฉาก Scence :

1. แถบเมนูการทำงานด้านบน (Scene Tabs)

Scene :ออกแบบและแก้ไขฉาก (วาง Actor, Tiles)Scene :ออกแบบและแก้ไขฉาก (วาง Actor, Tiles)

Behaviors :กำหนดพฤติกรรมของฉาก เช่น เพิ่มตัวนับเวลา คะแนนBehaviors :กำหนดพฤติกรรมของฉาก เช่น เพิ่มตัวนับเวลาคะแนน

Physics:ตั้งค่าฟิสิกส์ เช่น แรงโน้มถ่วง, การชน Physics:ตั้งค่าฟิสิกส์ เช่น แรงโน้มถ่วง, การชน

Properties:ตั้งค่าทั่วไป เช่น ชื่อฉาก, ขนาดฉากเป็นศูนย์รวมคำสั่งหลัก ใช้ควบคุม “การทำงานเบื้องหลัง” ของฉากเกมScene :ออกแบบและแก้ไขฉาก (วาง Actor, Tiles)

Behaviors:กำหนดพฤติกรรมของฉาก เช่น เพิ่มตัวนับเวลา คะแนนBehaviors:กำหนดพฤติกรรมของฉาก เช่น เพิ่มตัวนับเวลาคะแนน

Events:ตั้งเหตุการณ์ เช่น “ถ้าเก็บเพชรครบ 5 ชิ้น ชนะเกม”Events:ตั้งเหตุการณ์ เช่น “ถ้าเก็บเพชรครบ 5 ชิ้น ชนะเกม”

Physics :ตั้งค่าฟิสิกส์ เช่น แรงโน้มถ่วง, การชนPhysics :ตั้งค่าฟิสิกส์ เช่น แรงโน้มถ่วง, การชน

Atlases :จัดการไฟล์รูปภาพ/สไปรท์ของเกมAtlases :จัดการไฟล์รูปภาพ/สไปรท์ของเกม

Properties :ตั้งค่าทั่วไป เช่น ชื่อฉาก, ขนาดฉากProperties :ตั้งค่าทั่วไป เช่น ชื่อฉาก, ขนาดฉาก ป็นศูนย์รวมคำสั่งหลัก ใช้ควบคุม “การทำงานเบื้องหลัง” ของฉากเกม

2. แถบเครื่องมือด้านซ้าย (Toolbox)

ลูกศร (Select Tool)ลูกศร (Select Tool)

เลือก/ย้ายวัตถุในฉาก

พู่กัน (Draw Tool)พู่กัน (Draw Tool)

วาง Tiles (เหมือนระบายสี)

ยางลบ (Erase Tool) ยางลบ (Erase Tool)

ลบ Tiles/Actors ออกจากฉาก

ถังสี (Fill Tool) ถังสี (Fill Tool)

เติม Tiles ให้เต็มพื้นที่

เส้นตาราง (Grid Tool) เส้นตาราง (Grid Tool)

เปิด/ปิดเส้นกริดเพื่อวางของตรง

มือ (Hand Tool)

เลื่อนมุมมองฉาก

แว่นขยาย (Zoom Tool)แว่นขยาย (Zoom Tool)

ขยาย/ย่อมุมมอง

3. พื้นที่การทำงานหลัก (Scene Workspace หรือ Game Scene)

ส่วนนี้ คือ บริเวณที่ผู้พัฒนาเกมจะนำตัวละคร (Actors) และวัตถุต่าง ๆ มาจัดวางเพื่อสร้างฉาก (Scene) ของเกม

เป็นหน้าจอหลักที่ผู้ใช้จะมองเห็นการจัดวางทุกองค์ประกอบของเกม เช่น ตัวละครหลัก, ไอเท็ม, ศัตรู, สิ่งกีดขวาง ฯลฯสามารถลาก Actor จากด้านขวามือ (Actors Panel) มาวางในพื้นที่นี้ได้ใช้สำหรับออกแบบการจัดตำแหน่ง การจัดวาง และภาพรวมของด่าน (Level)สิ่งที่เห็นในพื้นที่นี้จะเป็นสิ่งที่ผู้เล่นเห็นจริงตอนเล่นเกม

1. กลุ่มบล็อกแก้ไข Block Editor

เป็นส่วนที่ใช้สร้าง “เงื่อนไขและกติกาของเกม” โดยลากบล็อกคำสั่งมาต่อกัน (คล้าย Scratch)ให้เราเลือกหมวดเพื่อหาคำสั่งที่ต้องการอธิบายหมวดหมู่ทั้งหมด ดังนี้

Flow :ควบคุมการทำงานแบบ if, loop

Actors :คำสั่งเกี่ยวกับตัวละคร

Scenes :คำสั่งเกี่ยวกับฉาก

User Input :คีย์บอร์ด/เมาส์

Collisions :ตรวจจับการชน

Game Attributes :ตัวแปรเก็บค่าของทั้งเกมและหมวดอื่น ๆ เช่น เสียง, ภาพ, คณิตศาสตร์ ฯลฯ

2.กลุ่มบล็อกเงื่อนไข (Conditionals)

สำหรับกำหนดการทำงาน แบบมีเงื่อนไขคล้ายกับการเขียนโปรแกรมด้วย if, else if, else ในภาษาโค้ดจริง

ตัวบล็อกที่เห็นในข้อ 2 มี 3 แบบหลัก ๆif ถ้าเงื่อนไขเป็นจริง (true) ให้ทำงานในบล็อกนี้if – otherwise ถ้าเงื่อนไขเป็นจริง ให้ทำงาน A แต่ถ้าไม่จริง ให้ทำงาน B otherwise if ใช้สำหรับตรวจสอบเงื่อนไขหลายชั้น เช่น ถ้าไม่ใช่เงื่อนไขแรก ให้ไปเช็กเงื่อนไขอื่น ๆ ต่อ

ตัวอย่างการใช้งาน

if :

ถ้าคะแนน ? 10 เล่นเสียงปรบมือ

if – otherwise :

ถ้าชนกับ "เพชร" เพิ่มคะแนน

มิฉะนั้น (ชนกับอย่างอื่น) ไม่ทำอะไร

otherwise if :

ถ้าคะแนน 50 ชนะเกม

ถ้าคะแนน 20 ผ่านด่าน

ถ้าไม่ถึง เล่นต่อไป

2. หมายเลข 3 : Booleans (ค่าความจริง True/False)

ใช้สร้าง เงื่อนไขเชิงตรรกะ เช่น จริง (true) หรือ เท็จ (false)

มีตัวเชื่อมเงื่อนไข (Logical Operators):

and เป็นจริงก็ต่อเมื่อทุกเงื่อนไขจริง

or เป็นจริงถ้ามีเงื่อนไขใดเงื่อนไขหนึ่งจริง

not กลับค่าความจริง เช่น not true = false

วอย่าง

if (กดปุ่มซ้าย and กดปุ่มกระโดด) ตัวละครหมุนตีลังกา

if (เก็บเหรียญครบ 10 or เวลาหมด) ไปฉากต่อไป

if (not ชนกับศัตรู) เดินต่อไปได้

กลุ่มบล็อกแก้ไข Block Editor

เป็นส่วนที่ใช้สร้าง “เงื่อนไขและกติกาของเกม” โดยลากบล็อกคำสั่งมาต่อกัน (คล้าย Scratch)ให้เราเลือกหมวดเพื่อหาคำสั่งที่ต้องการ

Flow (ควบคุมการทำงาน)

ใช้ควบคุมลำดับของคำสั่ง เช่น

if, else, repeat, while, doเป็นตัวกำหนด "ตรรกะการทำงาน" ของเกม เช่น

ถ้าผู้เล่นกด Space กระโดดทำซ้ำ 10 ครั้ง สร้างเหรียญ 10 อัน

Actors (ตัวละคร/วัตถุในเกม)

คำสั่งที่เกี่ยวข้องกับ Actor เช่น ผู้เล่น, ศัตรู, ไอเท็ม ตัวอย่างคำสั่ง:
เปลี่ยนตำแหน่ง (Move, Jump, Teleport)

เปลี่ยนรูปลักษณ์ (Change Animation, Hide, Show)

ลบออกจากฉาก (Kill/Destroy)

Scenes (ฉาก/ด่าน)Scenes (ฉาก/ด่าน)

จัดการคำสั่งที่เกี่ยวกับ ฉาก (Scene/Level) เช่น

โหลดฉากใหม่ (Switch Scene)

รีเซ็ตฉาก (Restart Scene)

ตั้งค่ากล้อง (Camera follow player)

User Input (การควบคุมโดยผู้ใช้)

ับค่าการกด คีย์บอร์ด, เมาส์ หรือ จอยสติ๊กเช่น

ถ้ากดปุ่มลูกศรขวา ตัวละครเดินไปทางขวา

ถ้าคลิกซ้าย ยิงกระสุน

Collisions (การชน)

ตรวจจับว่า Actor ชนกันหรือไม่ เช่น

ถ้าผู้เล่นชนศัตรู เสียพลังชีวิต

ถ้าเก็บไอเท็ม เพิ่มคะแนน

Flow (ควบคุมการทำงาน)

ใช้ควบคุมลำดับของคำสั่ง เช่น

if, else, repeat, while, doเป็นตัวกำหนด "ตรรกะการทำงาน" ของเกม เช่น

ถ้าผู้เล่นกด Space กระโดดทำซ้ำ 10 ครั้ง สร้างเหรียญ 10 อัน