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

วันนี้เราจะมาเรียนรู้การใช้ 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