[GML]คำสั่งการเคลื่อนที่ (ผู้เริ่มต้น)

gol-a-khung 09-12-2013, 12:51 PM

GML
สวัสดีครับเพื่อนๆ ผมโกลเอ้คุง วันนี้จะมาแนะนำการเขียนโค้ดขั้นต้นครับ โดยผมจะเริ่มอธิบาย
ตั้งแต่การเริ่มต้นไปจนถึงการทำให้ตัวละครเคลื่อนไหวครับ

ตัวอย่างสิ่งที่ได้
[Image: test_move_zps1c5d2063.gif]

จากตัวอย่างนะครับ เราจะมาเรียนรู้ไปทีละขั้นตอนจนเสร็จดังตัวอย่างครับ

[Image: tut01_zps076537df.png]

เริ่มแรกเลย เราจะต้องเตรียมไฟล์ 1.sprites กับ 2.backgrounds ครับ
ส่วน 3.objects กับ 4.rooms นั้น จะเป็นผลที่จะได้จากการจัดเตรียมไฟล์ดังกล่าว

[Image: tut02_zpsd9f83a79.png]

เริ่มจากการนำเข้าของไฟล์ภาพสไปร์ก่อนนะครับ
จากรูปที่ช่อง Name: ให้เราตั้งชื่อ ผมตั้งเป็น spr_boy ครับ แล้วกดที่ Edit Sprite

[Image: tut03_zpsa32bd8ef.png]

จะมีหน้าต่างขึ้นมาดังภาพ ให้เราคลิ๊กที่ file / Create from Strip

[Image: tut04_zpsd1a4cdd4.png]

เลือกไฟล์สไปร์ ของผมไฟล์ชื่อ spr_boy

[Image: tut05_zpsc8cc87a1.png]

เมื่อนำเข้าสไปร์จะมีหน้าต่างการตัดสไปร์ขึ้นมา ทำการตั้งค่าตามตัวอย่างนะครับ เมื่อเสร็จก็กด OK
number of images: 12
images per row: 12
image width:24
image height:32

[Image: tut05-1_zps5e742596.png]

จากนั้นเราจะทำการลบพื้นหลัง คลิ๊กไปที่ Images / Erase a Color

[Image: tut05-2_zps855a3b14.png]

สังเกตุจะมี เครื่องมือดูดสี ให้เราดูดสีที่ต้องการลบออก เสร็จขั้นตอนกด OK

[Image: tut06_zps83e573fe.png]

ตรวจสอบดูแล้วว่าถูกต้อง ทำการคลิ๊กที่เครื่องหมายถูกได้เลยครับ

[Image: tut07_zps20bb15ae.png]

กำหนดจุดกำเนิดภาพ คลิ๊กที่ Center หรือจะตั้งค่าเองก็ได้ตามต้องการ เสร็จกด OK

มาถึงขั้นตอนนี้อยากให้เพื่อนๆ ตั้งใจให้มากขึ้นนะครับ
[Image: tut07-1_zpse8f80966.png]

ให้คัดลอกไฟล์สไปร์ ต้องการให้ได้ 4 ไฟล์งานครับ ดังภาพ โดย คลิ๊กขวา ไปที่ Duplicate
เพื่อเราจะแบ่งเป็นไฟล์สไปร์ 4 ท่าทางด้วยกัน ดังนี้
[Image: tut07-3_zps0e9917fc.png]

spr_boy_left คือ ท่าเดินไปทางซ้าย
spr_boy_right คือ ท่าเดินไปทางขวา
spr_boy_up คือ ท่าเดินขึ้นบน
spr_boy_down คือ ท่าเดินลงล่าง
โดยเราต้องเข้าไปลบภาพสไปร์ที่เกินออกครับ ให้เหลือภาพตามต้องการ ตามรูปภาพครับ
จบขั้นตอนการนำเข้าสไปร์ครับ

มาต่อกันที่การนำเข้าภาพพื้นหลัง ซึ่งการนำเข้านั้นจะเหมือนกับการนำเข้าสไปร์ครับ แต่มีจุดต่างกันนิดหน่อยมาดูกันครับ
[Image: tut08_zps307ac90a.png]

ตั้งชื่อ แล้วคลิ๊ก Edit background

[Image: tut09_zps21380d13.png]

ไปที่ File / Open เพื่อนำเข้าภาพ

[Image: tut10_zps951b7c23.png]

เลือกภาพที่ต้องการ ตัวอย่างผมไฟล์ชื่อ mini_map

[Image: tut11-1_zps574f4f2b.png]

ลบภาพพื้นหลัง ไปที่ Image / Erase a Color

[Image: tut11-2_zps28e1a5dc.png]

เลือกสีที่ต้องการลบ เสร็จกด OK

[Image: tut11_zpsabebb417.png]

คลิ๊กเครื่องหมายถูก เมื่อเรียบร้อยแล้ว

[Image: tut12_zps6431c02d.png]

ให้เราติ๊กเครื่องหมายถูก หน้าช่อง Use as tile set แล้วตั้งค่าตามรูปภาพ
tile width: 32
tile height: 32
Use as tile set คือการเปิดโหมดใช้งานภาพแบบกำหนดช่อง
คลิ๊ก OK เมื่อเสร็จสิ้น

ต่อไปให้เราทำการสร้างห้องเกมส์
[Image: tut13_zps962e434e.png]

ไปที่ settings ทำการตั้งชื่อ แล้วกำหนด ความกว้างxยาว ของห้องเกมส์ ผมกำหนดเป็น 320x320

[Image: tut14_zps37a31c33.png]

ไปที่ tiles เพื่อทำการสร้างแผนที่ในห้องเกมส์
วิธีการใช้เมาส์
Shift + เมาส์ซ้าย = วาดภาพแบบต่อเนื่อง
เมาส์ขวา = ลบ
Ctrl + เมาส์ซ้าย = เคลื่อนย้าย

คลิ๊กเครื่องหมายถูกเมื่อเสร็จสิ้น

มาถึงขั้นตอนการสร้างออปเจ็กต์ครับ
[Image: tut15_zps3b6afb51.png]

ทำการตั้งชื่อ ผมใช้ obj_boy ครับ จากนั้น คลิ๊กที่ Add Event / Step / Step ตามรูปภาพ

[Image: tut16_zps0eaa77b2.png]

เมื่อได้ Events:Step มาแ้ล้วให้เรา ทำการแทรกโค้ด โดยการ คลิ๊กขวาที่ Execute Code ตามรูปภาพ

[Image: tut17_zps1cb53bb0.png]

ก็จะได้หน้าต่างโค้ดตามรูปภาพครับ

ทำการใส่โค้ดตามด้านล่างนี้
if keyboard_check(vk_nokey)
{
sprite_index=spr_boy_down;
image_index=1;
}
if keyboard_check(vk_up)
{
sprite_index=spr_boy_up;
image_speed=0.2;
y-=4;
}
if keyboard_check(vk_down)
{
sprite_index=spr_boy_down;
image_speed=0.2;
y+=4;
}
if keyboard_check(vk_left)
{
sprite_index=spr_boy_left;
image_speed=0.2;
x-=4;
}

if keyboard_check(vk_right)
{
sprite_index=spr_boy_right;
image_speed=0.2;
x+=4;
}

เมื่อเสร็จขั้นตอนให้คลิ๊ก เครื่องหมายถูก แล้ว OK

[Image: tut18_zpse5b5e9bf.png]

จากนั้นให้กลับไป Rooms คลิ๊กที่ ห้องเกมส์ที่เราสร้าง ไปที่ objects แล้วคลิ๊กซ้ายเพื่อวางออปเจ็กต์ในแผนที่เกมส์
เมื่อเสร็จขั้นตอนให้คลิ๊กเครื่องหมายถูก

และสุดท้าย RUN เกมส์เพื่อทดสอบครับ
[Image: test_move_zps1c5d2063.gif]

ประโยคเงื่อนไข ที่ผมใช้ครับ
if (คำสั่งเงื่อนไข)
{
ผลรับที่ต้องการ ;
}
else
{
ผลรับที่ต้องการ ;
}
ถ้าคำสั่งเงื่อนไขเป็นจริง โปรแกรมจะทำ ผลรับที่ต้องการในปีกกาทันที
ถ้าคำสั่งเงื่อนไขเป็นเท็จ โปรแกรมจะทำ ผลรับที่ต้องการในปีกกา else ทันที

ตัวแปรที่น่าจดจำ
ในตัวแปรที่ผมใช้จะประกอบไปด้วย
keyboard_check() คำสั่งตรวจเช็คค่าการกดปุ่มครับ ใช้บ่อยมาก
sprite_index ใช้การกำหนดภาพสไปร์ที่ต้องการ ใช้บ่อยเช่นกัน
image_speed ความเร็วในการเล่นภาพต่อเนื่อง ใช้บ่อยเช่นกัน
x ตำแหน่งในแนวแกน x
y ตำแหน่งในแนวแกน y

ตัวอย่างคำสั่ง
if keyboard_check(vk_up)
{
sprite_index=spr_boy_up;
image_speed=0.2;
y-=4;
}

จากคำสั่งเงื่อนไขด้านบน จะอธิบายได้ว่า

ถ้ามีการกดปุ่มลูกศรขึ้น
{
กำหนดภาพสไปร์เป็น spr_boy_up* ;
ความเร็วในการเล่นภาพเป็น 0.2 ;
เคลื่อนที่ไปในแนวแกน -y ครั้งละ 4 พิกเซล ;
}

spr_boy_up* คือ สไปร์ที่เรานำเข้ามาใช้ช่วงแรกครับ จำได้ไหมเอ่ย

ดาวน์โหลดไฟล์
ตัวอย่างไฟล์งาน

ติดตามบทความที่ 2 ได้ที่ลิงค์ด้านล่างครับ
[GML]กำหนดสิ่งกีดขวาง (ผู้เริ่มต้น 2)
บทความ : gol-a-khung
ขอบคุณครับ

This post was last modified: 09-13-2013, 12:49 AM by gol-a-khung.