Flash Game – เกมตารางธาตุมหาสนุก v2

10/07/2014

แปลความหมายเพลง Olivia Ong – In Love With You

18/07/2014

Flash AS 3.0 – พื้นฐานการควบคุมการเคลื่อนที่ของวัตถุผ่านคีย์บอร์ด

18/07/2014
empty image
empty image

วันนี้เราจะมาเรียนรู้การใช้ Action Script 3.0 ควบคุมการเคลื่อนที่ของวัตถุโดยการกดปุ่มที่คีย์บอร์ด ซึ่งจะเห็นกันทั่วๆ ไปตามเกมแนว Side-Scrolling หรือเกมที่ต้องบังคับตัวละครเดินอะไรต่างๆ
โดยเราสามารถอ่านอ้างอิงได้จาก
keyboard
keyboard event

สิ่งที่ต้องรู้ในขั้นแรก
keyCode จะเป็นรหัสของปุ่มที่กดที่อยู่บนคีย์บอร์ด เช่นปุ่ม A จะ “A” หรือ “a” จะมีรหัสเดียวกัน และยังรวมไปถึงปุ่ม Ctrl, Shift, Alt และอื่นๆ

charCode จะเป็นรหัสของตัวอักษรและอักขระพิเศษเท่านั้น โดย A กับ a จะมีรหัสไม่เหมือนกัน

String.fromCharCode อันนี้อยู่ในคลาส String เป็นการแปลงจากรหัสเป็นตัวอักษร

ลองเขียนโปรแกรมเพื่อตรวจสอบดู

คราวนี้ก็รู้การรับค่าปุ่มกดแล้ว ต่อไปจะเป็นการรับค่าปุ่มกดเพื่อทำให้วัตถุเคลื่อนที่

จากโค้ดด้านบน เมื่อกดปุ่มใดๆ ให้แสดงออกทาง output
เปลี่ยนใหม่เป็นเมื่อกดปุ่มใดๆ ให้วัตถุเคลื่อนที่
ก่อนอื่นวาดวัตถุอะไรก็ได้ใน stage แล้ว แปลงเป็น Symbol ตั้งชื่อ ….ผมตั้ง Circle
แล้วแก้โค้ดใหม่เป็น

จากโค้ดด้านบนเมื่อกดปุ่มใดๆ ตำแหน่งของวัตถุจะเพิ่มไปครั้งละ 5 ตามแนวแกน x หรือไปทางขวานั่นเอง

แล้วถ้าจะให้กดปุ่มลูกศรแล้วเคลื่อนที่ล่ะ ….
สิ่งที่ต้องรู้
ลูกศรซ้าย มี Keycode = 37
ลูกศรขึ้น มี Keycode = 38
ลูกศรขวา มี Keycode = 39
ลูกศรลง มี Keycode = 40

เขียนโค้ดตามนี้

ตัวอย่าง1

เมื่อกดลูกศรซ้าย (37) ให้วัตถุเคลื่อนที่ไปอีก -5 ในแกน x ซึ่งก็คือไปทางซ้ายนั่นเอง
เมื่อกดลูกศรขึ้น (38) ให้วัตถุเคลื่อนที่ไปอีก -5 ในแกน y ซึ่งก็คือเคลื่อนที่ไปด้านบน
เมื่อกดลูกศรขวา (39) ให้วัตถุเคลื่อนที่ไปอีก 5 ในแกน x ซึ่งก็คือไปทางขวานั่นเอง
เมื่อกดลูกศรลง (40) ให้วัตถุเคลื่อนที่ไปอีก -5 ในแกน y ซึ่งก็คือเคลื่อนที่ลงด้านล่าง

จากโค้ดด้านบนอาจจะมีข้อเสียตรงการเคลื่อนที่มันไม่สมูท ไม่เรียบเนียน เวลากดค้างจะดูกระตุก เพราะอัตราการรีเฟรชของคีย์บอร์ดมันต่ำ คือเมื่อกดปุ่ม 1 ครั้ง – ทำ – แล้วหยุด – ค้างประมาณ 0.5 วินาทีถึงจะเป็นการกดค้าง ซึ่งการกดค้างมันก็มีช่องว่าง มีระยะเวลาที่มันหยุดอีก
ข้อเสียอีกอย่างคือถ้ากดพร้อมกัน 2 ปุ่ม มันจะทำงานแค่ปุ่มเดียวอีก เราเลยต้องเขียนอัลกอริทึมใหม่กันเลยทีเดียว

เราจะให้เหตุการณ์ EnterFrame เข้ามาช่วย เพราะมันมีอัตรการรีเฟรชสูงหน่วยเป็น มิลลิวินาทีเลยทีเดียว (1 ใน 1000 วินาที)
แนวคิดคร่าวๆ
– เมื่อ EnterFrame ให้วัตถุเคลื่อนที่
– ยังไม่ทันกดอะไรเลย มันเคลื่อนที่แล้วหรอ ? งั้นให้มันเคลื่อนที่เมื่อมีการกด
– แสดงว่าเมื่อ EnterFrame เคลื่อนที่ เมื่อมีการกดก็เคลื่อนที่อีก มันไม่สามารถทำได้ เพราะในฟังก์ชันหนึ่ง สามารถรับฟังเหตุการณ์ได้แค่ 1 เหตุการณ์เท่านั้น อ้าวทำไงล่ะทีนี้ ?
– ก็สร้างตัวแปรเก็บค่า เมื่อกดปุ่ม = เคลื่อนที่ได้ , เมื่อปล่อยปุ่ม = ไม่ให้เคลื่อนที่

งั้นลองเขียนโค้ดกันเลย

กำหนดตัวแปร canMove ถ้าเป็น true ให้เคลื่อนที่ได้ , ถ้าเป็น false ให้หยุดเคลื่อนที่

ตัวอย่าง2

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

**รับค่าให้วัตถุเคลื่อนที่ 4 ทิศทาง
เขียนโค้ดใหม่เลยนะ

1. สร้างตัวแปรเก็บสถานะว่าปุ่มถูกกดรึป่าว
ที่ผ่านมาเก็บแค่ตัวเดียว แต่ตอนนี้เคลื่อนที่ 4 ทิศก็เก็บ 4 ตัว

2. ตัวรอฟังเหตุการณ์ 3 เหตุการณ์คือ เมื่อเล่นเฟรม, เมื่อกดปุ่ม, เมื่อปล่อยปุ่ม

3. ฟังก์ชันเมื่อกดปุ่ม
ให้ switch…case เพื่อเลือกทำเฉพาะปุ่มที่กำหนดเท่านั้น คือปุ่มลูกศร 4 ปุ่มเท่านั้นที่มีผลต่อการเคลื่อนที่ เมื่อกดปุ่มอื่นๆ นอกเหนิอจากนี้ จะไม่มีผลต่อการเคลื่อนที่ของวัตถุ
โดยเมื่อปุ่มถูกกดในทิศทางใดๆ ก็กำหนดให้สามารถเคลื่อนที่ไปในทิศทางนั้นๆ ได้

4. เช่ยนเดียวกันข่อ 3 แต่เมื่อปล่อยปุ่มในทิศทางใดๆ ก็กำหนดให้หยุดการเคลื่อนที่ในทิศทางนั้นๆ

5. ฟังก์ชันในการเคลื่อนที่ของวัตถุ เมื่อทิศทางใดๆ ถูกกำหนดให้เป็นจริง ก็จะเคลื่อนที่ไปในทิศทางนั้นๆ

ตัวอย่าง3

ก็เป็นอันเสร็จเรียบร้อยสำหรับพื้นฐานการควบคุมวัตถุด้วยคีย์บอร์ด แล้วแต่จะเอาไปประยุกต์ใช้กันล่ะนะ วันนี้ Zzz…

Ref.
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/ui/Keyboard.html
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/events/KeyboardEvent.html