Flash Game – เกมตารางธาตุมหาสนุก v2
10/07/2014แปลความหมายเพลง Olivia Ong – In Love With You
18/07/2014วันนี้เราจะมาเรียนรู้การใช้ Action Script 3.0 ควบคุมการเคลื่อนที่ของวัตถุโดยการกดปุ่มที่คีย์บอร์ด ซึ่งจะเห็นกันทั่วๆ ไปตามเกมแนว Side-Scrolling หรือเกมที่ต้องบังคับตัวละครเดินอะไรต่างๆ
โดยเราสามารถอ่านอ้างอิงได้จาก
keyboard
keyboard event
สิ่งที่ต้องรู้ในขั้นแรก
– keyCode จะเป็นรหัสของปุ่มที่กดที่อยู่บนคีย์บอร์ด เช่นปุ่ม A จะ “A” หรือ “a” จะมีรหัสเดียวกัน และยังรวมไปถึงปุ่ม Ctrl, Shift, Alt และอื่นๆ
– charCode จะเป็นรหัสของตัวอักษรและอักขระพิเศษเท่านั้น โดย A กับ a จะมีรหัสไม่เหมือนกัน
– String.fromCharCode อันนี้อยู่ในคลาส String เป็นการแปลงจากรหัสเป็นตัวอักษร
ลองเขียนโปรแกรมเพื่อตรวจสอบดู
stage.addEventListener(KeyboardEvent.KEY_DOWN, onPressed); function onPressed(evt:KeyboardEvent):void { trace("Key Pressed: " + String.fromCharCode(evt.charCode)); trace("Char Code: " + evt.charCode); trace("Key Code: " + evt.keyCode); }
คราวนี้ก็รู้การรับค่าปุ่มกดแล้ว ต่อไปจะเป็นการรับค่าปุ่มกดเพื่อทำให้วัตถุเคลื่อนที่
จากโค้ดด้านบน เมื่อกดปุ่มใดๆ ให้แสดงออกทาง output
เปลี่ยนใหม่เป็นเมื่อกดปุ่มใดๆ ให้วัตถุเคลื่อนที่
ก่อนอื่นวาดวัตถุอะไรก็ได้ใน stage แล้ว แปลงเป็น Symbol ตั้งชื่อ ….ผมตั้ง Circle
แล้วแก้โค้ดใหม่เป็น
stage.addEventListener(KeyboardEvent.KEY_DOWN, onPressed); function onPressed(evt:KeyboardEvent):void { Circle.x +=5; }
จากโค้ดด้านบนเมื่อกดปุ่มใดๆ ตำแหน่งของวัตถุจะเพิ่มไปครั้งละ 5 ตามแนวแกน x หรือไปทางขวานั่นเอง
แล้วถ้าจะให้กดปุ่มลูกศรแล้วเคลื่อนที่ล่ะ ….
สิ่งที่ต้องรู้
ลูกศรซ้าย มี Keycode = 37
ลูกศรขึ้น มี Keycode = 38
ลูกศรขวา มี Keycode = 39
ลูกศรลง มี Keycode = 40
เขียนโค้ดตามนี้
stage.addEventListener(KeyboardEvent.KEY_DOWN, onPressed); function onPressed(evt:KeyboardEvent):void { switch (evt.keyCode) { case 37 : Circle.x -=5; break; case 38 : Circle.y -=5; break; case 39 : Circle.x +=5; break; case 40 : Circle.y +=5; break; } }
ตัวอย่าง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 ให้หยุดเคลื่อนที่
var canMove:Boolean=false; stage.addEventListener(Event.ENTER_FRAME, doMove); //เหตุการณ์ EnterFrame หรือเมื่อเล่นเฟรมนี้ stage.addEventListener(KeyboardEvent.KEY_DOWN, WhenKeyDown); //เมื่อปุ่มที่คีย์บอร์ดถูกกด ให้ไปทำฟังก์ชัน WhenKeyDown stage.addEventListener(KeyboardEvent.KEY_UP, WhenKeyUp); //เมื่อปล่อยปุ่ม ให้ไปทำฟังก์ชัน WhenKeyUp function doMove(evt:Event):void{ //ในฟังก์ชันนี้ วัตถุจะเคลื่อนที่ก็ต่อเมื่อ canMove เป็นจริงเท่านั้น if(canMove==true){ Circle.x +=5; } } function WhenKeyDown(evt:KeyboardEvent):void{ //เมื่อกดปุ่มใดๆ กำหนดให้ canMove เป็นจริง canMove=true; } function WhenKeyUp(evt:KeyboardEvent):void{ //เมื่อกดปุ่มๆ ใดๆ กำหนดให้ canMove เป็นเท็จ canMove=false; }
ตัวอย่าง2
จากโค้ดน่าจะพอเข้าใจนะ ไปกันทีละขั้น จะเห็นว่าการเคลื่อนที่มันดูสมูทกว่าเดิมมาก เนียนกว่าเดิม
ด้านบนเป็นการกดปุ่มใดๆ ก็ช่าง วัตถุเคลื่อนที่หมด แถมไปทางเดียวด้วย ต่อไปถ้าเราจะให้กดปุ่มที่กำหนดแล้วเคลื่อนที่ไปในทางที่กำหนดล่ะ
**รับค่าให้วัตถุเคลื่อนที่ 4 ทิศทาง
เขียนโค้ดใหม่เลยนะ
1. สร้างตัวแปรเก็บสถานะว่าปุ่มถูกกดรึป่าว
ที่ผ่านมาเก็บแค่ตัวเดียว แต่ตอนนี้เคลื่อนที่ 4 ทิศก็เก็บ 4 ตัว
var left:Boolean = false; var right:Boolean = false; var up:Boolean = false; var down:Boolean = false; var speed:int = 5; //ค่านี้เอาไว้เก็บระยะทางในการเคลื่อนที่ เวลาเปลี่ยนจะได้แก้แค่ที่เดียว ไม่ต้องไปตามแก้ทุกตัว
2. ตัวรอฟังเหตุการณ์ 3 เหตุการณ์คือ เมื่อเล่นเฟรม, เมื่อกดปุ่ม, เมื่อปล่อยปุ่ม
stage.addEventListener(KeyboardEvent.KEY_DOWN, WhenKeyDown); stage.addEventListener(KeyboardEvent.KEY_UP, WhenKeyUp); stage.addEventListener(Event.ENTER_FRAME, doMove);
3. ฟังก์ชันเมื่อกดปุ่ม
ให้ switch…case เพื่อเลือกทำเฉพาะปุ่มที่กำหนดเท่านั้น คือปุ่มลูกศร 4 ปุ่มเท่านั้นที่มีผลต่อการเคลื่อนที่ เมื่อกดปุ่มอื่นๆ นอกเหนิอจากนี้ จะไม่มีผลต่อการเคลื่อนที่ของวัตถุ
โดยเมื่อปุ่มถูกกดในทิศทางใดๆ ก็กำหนดให้สามารถเคลื่อนที่ไปในทิศทางนั้นๆ ได้
function WhenKeyDown(evt:KeyboardEvent):void { switch (evt.keyCode) { case 37 : left = true; break; case 38 : up = true; break; case 39 : right = true; break; case 40 : down = true; break; } }
4. เช่ยนเดียวกันข่อ 3 แต่เมื่อปล่อยปุ่มในทิศทางใดๆ ก็กำหนดให้หยุดการเคลื่อนที่ในทิศทางนั้นๆ
function WhenKeyUp(evt:KeyboardEvent):void { switch (evt.keyCode) { case 37 : left = false; break; case 38 : up = false; break; case 39 : right = false; break; case 40 : down = false; break; } }
5. ฟังก์ชันในการเคลื่อนที่ของวัตถุ เมื่อทิศทางใดๆ ถูกกำหนดให้เป็นจริง ก็จะเคลื่อนที่ไปในทิศทางนั้นๆ
function doMove(evt:Event):void { if (left){ Circle.x -= speed; } if (up){ Circle.y -= speed; } if (right){ Circle.x += speed; } if (down){ Circle.y += speed; } }
ตัวอย่าง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