ส่งค่าผ่าน ajax แบบ get และ post ทำอย่างไร

บทความนี้ ผมจะกล่าวถึงวิธีการส่งค่า จากเกม ที่สร้างด้วยโปรแกรม constuct 2 ไปยังเว็บไซต์ที่กำหนด เพื่อแลกเปลี่ยนข้อมูลหรือปรับปรุงข้อมูลของเกม โดยอาศัยความสามารถของ ajax เป็นตัวช่วย

การส่งผ่านค่าระหว่างไฟล์ของเว็บต่างๆ ผู้อ่านบทความคงพอจะทราบอยู่แล้วว่า มีการส่งผ่านได้สองแบบ คือ แบบ get และแบบ post แต่ถ้าหากยังไม่ทราบ อันนี้ขอให้ได้ศึกษาหาความรู้เพิ่มเติมอีกเล็กน้อย

การส่งค่าแบบ  get คือการส่งข้อมูลไปกับที่อยู่ของเว็บ (URL) การส่งข้อมูลแบบนี้ผู้ใช้งานเว็บก็จะมองเป็นข้อมูลที่ส่งไป  เช่น ส่งค่า username ไปยังเว็บเพจ login ก็จะมองเห็นเป็นลักษณะนี้

http://www.youdoman.com/login.html?username=witoon

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

การส่งค่าผ่าน ajax ใน construct 2

การส่งค่าระหว่างเกมที่สร้างด้วยโปรแกรม construct 2 กับเว็บไซต์  จะอาศัยคุณสมบัติของ ajax มาช่วยในการส่งข้อมูล ซึ่งการส่งข้อมูลจะมีสองลักษณะ คือ get  และ post โดยผมจะขอยกตัวอย่าง การส่งข้อมูล ชื่อผู้ใช้ และรหัสผ่าน ไปยังเว็บไซต์ เพื่อดึงข้อมูลการลงทะเบียนเกมจากเว็บไซต์
หน้าตาของเกม ที่ออกแบบไว้ ให้มี Text Box สองตัว คือ txt_username และ txt_password

เมื่อผู้เล่น คลิกที่ปุ่ม ลงทะเบียน ตัวเกมจะส่งข้อมูลไปตรวจสอบการลงทะเบียนกับเว็บไซต์ของเกม ซึ่งสามารถส่งค่าไปได้ สองวิธี คือ

1. การส่งค่าแบบ get

เพิ่ม event สำหรับปุ่ม ลงทะเบียน แล้วกำหนด action เป็น ajax => Posts to URL

กำหนดค่า Tag เพื่อเป็นชื่อสำหรับใช้ตรวจสอบการทำงาน

กำหนด URL เพื่อส่งค่าข้อมูล

"http://www.youdomain.com/register.php?username="&txt_username.Text&"&password="&txt_password.Text

การส่งค่าแบบ get จะเขียนข้อมูลต่อท้ายกับ URL และส่งไปพร้อมกัน

ค่า Data ไม่ต้องกำหนด

ค่า Method กำหนดให้เป็นการส่งแบบ GET

2. การส่งค่าแบบ post

เพิ่ม event สำหรับปุ่ม ลงทะเบียน แล้วกำหนด action เป็น ajax => Posts to URL

กำหนดค่า Tag เพื่อเป็นชื่อสำหรับใช้ตรวจสอบการทำงาน

กำหนด URL เพื่อส่งค่าข้อมูล http://www.youdomain.com/register.php

ค่า Data จะกำหนดข้อมูลที่จะส่งไปยัง URL ที่กำหนดไว้
"username="&txt_username.Text&"&password="&txt_password.Text

โดยย้ายจากวิธีการส่งแบบ get ที่ ต่อท้าย URL มาใส่ไว้ในช่อง Data แทนนั้นเอง

ค่า Method กำหนดให้เป็นการส่งแบบ POST

การรับค่าที่ส่งมาจาก construct 2

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

    header('Access-Control-Allow-Origin: *');

ถ้าผู้เขียนส่งค่ามาด้วยวิธีการ get จะต้องรับค่าด้วย $_GET ดังนี้

$username = $_GET["username"];
$password = $_GET["password"];

ถ้าผู้เขียนส่งค่ามาด้วยวิธีการ post จะต้องรับค่าด้วย $_POST ดังนี้

$username = $_POST["username"];
$password = $_POST["password"];


จากเนื้อหาที่กล่าวมาข้างต้น เป็นเพียงหลักการทำงานของ ajax ในการส่งค่าระหว่างตัวเกม construct 2 กับเว็บไซต์ ในการนำไปใช้งานจริงนั้น ผู้เขียนเกมควรศึกษาวิธีการเขียนเว็บด้วยภาษา php ศึกษาหลักการทำงานของเว็บไซต์ เพื่อให้สามารถนำไปประยุกต์ใช้งานให้เกิดประโยชน์ได้อย่างแท้จริง เพราะผมเชื่อว่า คงมีหลายคนที่อ่านบทความนี้จบแล้ว จะพูดว่า ไม่เห็นจะเข้าใจเลย แต่ผมหวังว่าจะมีสักคนที่เข้าใจและนำไปใช้ได้ ขอให้สนุกกับการสร้างเกม ด้วย construct 2 นะครับ

Construct 2 : ปุ่มเดียว เสียวทุกเมนู

วันนี้มาในแนวเสียวๆ ครับ ไม่ใช่อะไรหรอกครับ ไปเจอน้องคนหนึ่ง เขาเอาโปรแกรม Construct 2 ที่สร้างเกมมาให้ดู บอกว่า ตัวอย่างเขาทำปุ่มเป็น family แต่อยากเลียนแบบบ้าง แต่ของเรามันของฟรี จะไปทำอะไรเสียวๆ แบบเขาก็ไม่ได้ ผมก็เลยขำก๊ากเลยทีเดียว ที่แท้ก็อยากทำเสียวแบบเขานั่นเอง เลยเป็นที่มาของชื่อบทความในวันนี้

อันที่จริงแล้ว การสร้างปุ่มในลักษณะของ family นั่น มีจุดประสงค์เพื่อให้สามารถสั่งงานเมื่อคลิกปุ่มด้วยคำสั่งหรือ event เดียว ให้ครอบคลุมการทำงานของปุ่มทุกปุ่ม แล้วทำไมต้องรวมกลุ่มแต่ละปุ่มแต่ละปุ่มไว้ด้วยกันล่ะ ผมจะยกตัวอย่างให้ดูว่า ถ้าแยก จะต้องเขียนคำสั่งมากขนาดไหน

จะเห็นว่า แต่ละปุ่มก็ต้องใช้คำสั่งควบคุมเฉพาะตัว หากมีปุ่มจำนวนมาก คำสั่งก็จะมากไปด้วย หากใช้ปุ่มแบบ family นั้น จะใช้คำสั่งสำหรับเรียกใช้งานแค่คำสั่งเดียว แต่ผมจะไม่ขอยกตัวอย่างการใช้งานไว้ในบทความนี้ เพราะเรื่องของ family นั้น ไม่ใช่ของฟรี ที่จะใช้งานได้ทั่วไป ผมจึงของนำเสนอวิธีการที่จะใช้ของฟรี แต่ทำให้หรู ดูดีแบบเสียตังค์กัน

สิ่งที่ต้องรู้ก่อนที่จะทำตามเนื้อหาในบทความนี้
1. การทำ sprite แบบ animation คลิกกลับไปอ่านบทความ
2. การใช้งาน function ในโปรแกรม Construct 2  (ค้นหาอ่านจาก google ก่อนนะครับ ยังไม่ได้เขียน)

ลงมือกันเลย
ขั้นแรก ให้รวมเมนูต่าง ๆ เข้าเป็นปุ่มเดียวในลักษณะของ animation ก่อนนะครับ กำหนด speed ของ animation เป็น 0 เพื่อไม่ใช้ animation ของปุ่มทำงาน

นำปุ่มมาวางในหน้าเกม ตามจำนวนปุ่มหรือเมนูที่ต้องการ  และกำหนด instance variable ให้กับปุ่ม เพื่อใช้แสดงภาพ frame ปุ่มตามค่าของ buttonID เปลี่ยนค่าไปเรื่อยๆ ตามหมายเลขของภาพใน frame ของ animation

กำหนดค่าให้แสดงปุ่ม เมื่อเริ่มทำงานทุกครั้งที่ load layout

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

เปลี่ยนค่าของ instance variable ให้เป็นชื่อ function ที่ต้องการเรียกใช้ ตรงตามปุ่มแต่ละปุ่ม

กำหนดคำสั่งสำหรับการทำงาน เมื่อคลิกที่ปุ่มต่าง ๆ ที่เราได้วางไว้ในเกมแล้ว โดยอาศัยการทำงานคุณสมบัติของ Function คือ Function.Call  โดยอาศัยชื่อ function ที่ส่งมาจากค่า instance variable ที่ชื่อ callback

ถ้าปุ่มที่กด เป็นค่า playback การทำงานของ function "callback"  จะไปเรียกใช้งาน function "playback" อีกต่อหนึ่ง

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

เปลี่ยนหน้าเกม ตามเวลาที่กำหนด

ในการสร้างเกม บางครั้ง ผู้สร้างเกมก็ต้องการให้แสดงหน้าเกมบางหน้าในเวลาชั่วขณะหนึ่ง แล้วเปลี่ยนหน้าเกมไปอีกหน้าโดยอัตโนมัติ ลักษณะแบบนี้ ส่วนใหญ่จะใช้ทำหน้า loading screens แต่สำหรับโปรแกรม construct 2 มี loading screens เตรียมไว้ให้สำหรับเกมอยู่แล้ว หากไม่ใช่เวอร์ชันฟรี จะสามารถเปลี่ยนแปลงได้  แต่สำหรับคนที่อยากพัฒนาเกมเล่นๆ ไม่ได้จำเป็นต้องซื้อเวอร์ชันเสียตังมาใช้งาน แต่อยากทำหน้า loading screens หรือกำหนดให้หน้าเกมเปลี่ยนแปลงได้อัตโนมัติ

การเปลี่ยนหน้าเกม จะสามารถใช้คุณสมบัติของ Time เพื่อกำหนดเหตุการณ์ในการเปลี่ยนหน้าเกม คุณสมบัติดังกล่าวจะอยู่ในเหตุการณ์ System -> Time และใช้เงื่อนไข Compare time

Compare time  เป็นเงื่อนไขที่ใช้ตรวจสอบเวลา  เปรียบเทียบเวลาที่ต้องการกับเวลาตั้งแต่เริ่มเกม ยกตัวอย่างเช่น เหตุการณ์ที่เกิดขึ้นสามารถตั้งค่าให้ทำงานเมื่อเวลาตั้งแต่เริ่มเกม มาถึง 10 วินาที
หรือใช้เปรียบเทียบการทำงานตามช่วงเวลา โดยอาศัยตัวแปรของ system time

ทดลองสร้างเกมด้วย construct 2 โดยกำหนดให้มีอย่างน้อย 2 layout  โดย layout แรกให้เป็นหน้า loading screens

กำหนดค่าใน Event sheet ดังนี้
System -> Compare time  กำหนดค่าให้ทำงาน เมื่อเวลาผ่านไป 10 วินาที

กำหนดการทำงานเมื่อเวลาผ่านไป 10 วินาที ให้ระบบทำการเปลี่ยนไปยัง layout ต่อไป

เมื่อทดสอบการทำงานของเกม ตัวเกมจะแสดงหน้า layout แรก เป็นเวลา 10 วินาที แล้วจะเปลี่ยนไปยัง layout ถัดไป

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

ลองประยุกต์ใช้งานในหลายๆ แบบ จะทำให้เกมของเรามีความน่าสนใจมากยิ่งขึ้น  ขอให้สนุกกับการสร้างเกมนะครับ

construct 2 : แสดงคะแนนเกม

จากคำถามของคุณ TOOMTAM TV.  ที่อยากทราบว่า "วิธีทำให้คะแนนอยู่กับหน้าจอตลอดทำยังไงครับผมทำให้มีคะแนนแล้ว แต่เวลาเล่นผลสกอ มันไม่ติดอยู่กับหน้าจอ"  ผมขอตอบคำถามในลักษณะของการสร้างเกมและต้องการให้วัตถุบางตัวแสดงตลอดเวลา แม้จะมีการเคลื่อนหน้าจอของเกม วิธีการสามารถทำได้หลายวิธี แต่ขอแนะนำ เพียง 2 วิธี

วิธีที่ 1 คือการกำหนดค่า parallax ให้กับ layout ให้มีค่าเป็น 0  จะทำให้ layout นั้น ไม่เคลื่อนที่ไปกับตำแหน่งของวัตถุในเกม ผมได้นำเสนอไปแล้วในบทความ Parallax effect
ซึ่งการคงตำแหน่งของ layout มีข้อดี คือ วัตถุต่าง ๆ ใน layout จะไม่เคลื่อนที่ไปด้วย เมื่อเราเพิ่มวัตถุใหม่เข้ามาใน layout ก็จำเป็นต้องกำหนดวัตถุให้ตรึงตำแหน่งเดิม เพราะ layout กำหนดไว้ให้แล้ว

วิธีที่ 2 คือการใช้คุณสมบัติของ Anchor Behaviors การใช้วิธีนี้ จะกำหนดให้กับวัตถุที่เราต้องการตรึงตำแหน่งเท่านั้น เมื่อหน้าจอเกมเคลื่อนที่ไป ตำแหน่งของวัตถุที่เราตรึงไว้ก็จะไม่เคลื่อนที่ตาม ทำให้แสดงบนจอภาพตลอดเวลา

เมื่อเลือกวัตถุที่ต้องการตรึงตำแหน่งแล้ว  คลิกที่ Add/edit Behaviors  จะปรากฏหน้าต่าง Behaviors
คลิกที่เครื่องหมายบวก  แล้วเลือก Anchor  หลังจากนั้นคลิกปุ่ม  Add จะได้ Anchor Behaviors สำหรับวัตถุที่เราต้องการ เมื่อสั่งให้เกมทำงาน ตำแหน่งของวัตถุจะถูกตรึงตำแหน่งเอาไว้

ทดลองใช้งาน และเลือกให้เหมาะสมกับเกมที่สร้างนะครับ จะใช้วิธีไหน ไม่มีข้อบังคับที่แน่นอน ขอให้สนุกกับการสร้างเกม

construct 2 : local storage

บันทึกข้อมูลด้วย local storage

local storage เป็นส่วนเสริม ที่ช่วยให้โปรแกมบันทึกข้อมูลลงในอุปกรณ์ของผู้เล่นได้ เช่น เก็บคะแนนสูงสุดของผู้เล่น เก็บระดับการเล่น เป็นต้น การเก็บข้อมูลของ local storage จะเป็นลักษณะของการทำงานออฟไลน์ การจัดเก็บจะแยกเป็นอิสระของอุปกรณ์แต่ละตัว  และการเปิดใช้งานโปรแกรมจาก Browser ที่ต่างกัน ก็จะจัดเก็บข้อมูลที่แตกต่างกันด้วย ข้อมูลที่จัดเก็บไม่สามารถใช้งานร่วมกันได้ แม้ว่าจะอยู่บนคอมพิวเตอร์เครื่องเดียวกันก็ตาม ข้อมูลจะคงอยู่จนกระทั่งผู้ใช้ทำการล้างข้อมูล และการจัดเก็บข้อมูลจะแยกย่อยให้มีความจำเพาะเจาะจงกับโปรแกรมแต่ละโปรแกรมที่ทำงาน เช่น game1 และ game2 มีการบันทึกข้อมูลลง local storage บนเครื่องคอมพิวเตอร์เดียวกัน แต่ทั้ง game1 และ game2 จะไม่สามารถใช้งานข้อมูลร่วมกันได้ ซึ่งเป็นการรักษาความปลอดภัยของข้อมูลในระดับหนึ่งด้วย

รูปแบบการบันทึก local storage

การบันทึกข้อมูลใน local storage จะมีรูปแบบคล้ายกับการบันทึกข้อมูลลงในตาราง ที่มีสองคอลัมน์ คือ Key และ Value

ค่าในคอลัมน์ Key  เป็นค่าที่ใช้จำแนกความแตกต่างของข้อมูลที่บันทึกไว้ใน local storage ที่สำคัญค่าที่กำหนดให้เป็น key จะต้องไม่ซ้ำกัน เป็นค่าที่มีความจำเพาะ  เช่น HighScore Level เป็นต้น ค่าเหล่านี้จะใช้ในการอ้างอิงถึงข้อมูลที่เก็บอยู่ภายใน

ค่าในคอลัมน์ Value  เป็นค่าข้อมูลที่สัมพันธ์กับ key จะเป็นตัวเลข ข้อความ หรือค่าใน array ก็ได้ ทำให้สามารถจัดเก็บข้อมูลขนาดใหญ่ ลงใน key เพียงตัวเดียวได้

Local Storage is asynchronous.

การอ่านและบันทึกข้อมูลงใน local storage จะเป็นการทำงานแบบไม่ต่อเนื่อง คือ ไม่ได้ทำงานจนเสร็จแบบทันที เมื่อมีคำสั่งในการอ่านหรือเขียนข้อมูลลงใน local storage โปรแกรมจะไม่หยุดรอให้การอ่านหรือเขียนเสร็จก่อน  แต่จะทำงานอื่นต่อไป  ทำให้ลดปัญหาการรอ ที่เกิดจากความล้าช้าของการอ่านข้อมูล โปรแกรมจึงมีประสิทธิภาพในการทำงานอย่างเต็มที่ การอ่านและเขียนข้อมูลใน local storage จะมีทริกเกอร์ ที่คอยตรวจสอบสถานะของการอ่านและเขียนข้อมูล ซึ่งผู้พัฒนาโปรแกรมจะใช้คำสั่งควบคุมการใช้ข้อมูลผ่านทริกเกอร์เหล่านี้

ยกตัวอย่าง การอ่านข้อมูล score จาก local storage จะมีขั้นตอนดังนี้
1. ใช้คำสั่ง action Get เพื่อขออ่านจาก key "score"
2. สร้างเหตุการณ์ on item "score" get
3. สร้างคำสั่งเพื่อรับค่า จาก ItemValue


Local Storage conditions

On any item get  จะทำงานเหตุการณ์นี้ เมื่อการอ่านข้อมูลทั้งหมดเสร็จสิ้น

On any item removed  จะทำงานเหตุการณ์นี้ หลังจากที่ลบข้อมูลเสร็จสิ้น

On any item set  จะทำงานเหตุการณ์นี้ หลังจากที่บันทึกข้อมูลเสร็จสิ้น

On item exists  จะทำงานเหตุการณ์นี้ หลังจากการตรวจสอบค่า key ที่เก็บใน local storage เสร็จสิ้น ถ้าไม่พบ key ที่ค้นหา จะไม่มีการทำงานใดๆ แต่ถ้าพบ key ต้องใช้คำสั่ง Get เพื่ออ่านข้อมูลมาเก็บที่ItemValue

On item get  จะทำงานเหตุการณ์นี้ หลังจากที่อ่านข้อมูลจาก key ที่กำหนดสำเร็จ ข้อมูลของ key จะถูกมาเก็บที่ ItemValue

On item missing  จะทำงานเหตุการณ์นี้ หลังจากการตรวจสอบค่า key ที่เก็บใน local storage เสร็จสิ้น แล้วไม่พบ key ที่ค้นหา

On item removed  จะทำงานเหตุการณ์นี้ หลังจากลบค่า key ที่เก็บใน local storage เสร็จสิ้น

On item set  จะทำงานเหตุการณ์นี้ หลังจากที่บันทึกข้อมูลสำหรับ key ที่กำหนดสำเร็จ ข้อมูลใหม่จะถูกบันทึกลงหน่วยความจำ

Compare key  ใช้สำหรับเปรียบเทียบค่าที่เก็บไว้ใน Key กับค่า key ปัจจุบัน

Compare value  ใช้สำหรับเปรียบเทียบค่าปัจจุบันของ ItemValue ที่ได้จากการอ่านค่าข้อมูล

On all key names loaded  จะทำงานเหตุการณ์นี้ หลังจากที่อ่านข้อมูลจาก key ที่กำหนดสำเร็จ โดยจะได้ชื่อ key ในรูปแบบของแถวลำดับ อ้างอิงด้วย KeyCount และ KeyAt

On error จะทำงานเหตุการณ์นี้ เมื่อเกิดข้อผิดพลาดในการใช้ local storage เช่น เขียนข้อมูลไม่สำเร็จ หรือ พื้นที่ในการจัดเก็บข้อมูลเต็ม โดยข้อผิดพลาดจะถูกเก็บไว้ที่ ErrorMessage

On storage cleared  จะทำงานเหตุการณ์นี้ หลังจากที่ล้างข้อมูลในหน่วยความจำ และหน่วยความจำว่าง

Is processing gets  คืนค่าสถานะของการอ่านข้อมูลเป็น True  เมื่ออยู่ในระหว่างการอ่านข้อมูล

Is processing sets  คืนค่าสถานะของการบันทึกข้อมูลเป็น True  เมื่ออยู่ในระหว่างการบันทึกข้อมูล

On all gets complete  จะทำงานเหตุการณ์นี้ เมื่อการอ่านข้อมูลทั้งหมดเสร็จสิ้น เช่น มีการอ่านข้อมูล 10 ตัว ที่เกิดขึ้นในขณะเดียวกัน เหตุการณ์นี้จะทำงาน เมื่อการอ่านข้อมูลทั้ง 10 ตัว เสร็จสิ้น

On all sets complete  จะทำงานเหตุการณ์นี้ เมื่อการบันทึกข้อมูลทั้งหมดเสร็จสิ้น เช่น มีการบันทึกข้อมูล 10 ตัว ที่เกิดขึ้นในขณะเดียวกัน เหตุการณ์นี้จะทำงาน เมื่อการบันทึกข้อมูลทั้ง 10 ตัว เสร็จสิ้น


Local Storage actions

Check item exists เป็นคำสั่งสำหรับตรวจสอบ Key ที่ถูกเก็บอยู่ใน local storage ถ้าพบ key ที่ต้องการ จะตอบสนองต่อเหตุการณ์ On item exists  แต่ถ้าไม่พบ จะตอบสนองกับเหตุการณ์ On item missing

Get item  เป็นคำสั่งอ่านค่าข้อมูลของ key จากหน่วยความจำ จะตอบสนองกับเหตุการณ์ On item get และค่าที่ได้จะถูกเก็บไว้ที่ ItemValue

Remove item  เป็นคำสั่งในการลบ key ออกจากหน่วยความจำ จะตอบสนองกับเหตุการณ์ On item removed

Set item เป็นคำสั่งบันทึกข้อมูลลงใน local storage จะตอบสนองกับเหตุการณ์ On item set

Clear storage  เป็นคำสั่งล้างข้อมูลจาก local storage ให้เป็นค่าว่าง จะตอบสนองกับเหตุการณ์ On storage cleared

Get all key names  เป็นคำสั่งอ่านค่า key ทั้งหมดที่เก็บใน local storage โดยจะทำงานกับเหตุการณ์ On all key names loaded ผลการทำงานจะได้แถวลำดับของชื่อ key และอ้างถึงด้วย KeyCount และ KeyAt


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

Random ค่าใน array ไม่ให้ซ้ำกัน

มีเพื่อนๆ น้องๆ หลายคนมาก สอบถามเรื่องของการอ่านค่าที่เก็บไว้ใน array ของโปรแกรม construct 2 ออกมาใช้งาน หรือมาแสดง ให้เปลี่ยนลำดับไปทุกครั้งที่ทำงาน แรกๆ ก็พอตอบคำถามได้ แต่หลังๆ มา เริ่มมีมากขึ้น ผมก็งานเยอะ ไม่ค่อยได้ตอบ วันนี้เลยพักงานตัวเอง มาเขียนเนื้อหาเกี่ยวกับ array เอาไว้ ให้ได้อ่านศึกษากันก่อน
การสุ่ม (Random) ตำแหน่งที่จะแสดงค่าใน array นั้น มีการนำไปใช้ประโยชน์อย่างกว้างขวาง ในการสร้างเกม การเปลี่ยนตำแหน่ง Sprite หรือประยุกต์ใช้กับการสร้างสื่อการสอน การทำแบบทดสอบที่มีการสลับตัวเลือก
ผมไม่กล่าวถึงการสร้าง array นะครับ ถ้ายังไม่เข้าใจ อ่านเพิ่มเติมตรงนี้ก่อน (construct 2 : array)

ในบทความนี้ ผมมี array ชื่อ myArray ที่เก็บชื่อผลไม้ 5 ชนิด ดังนี้

หลักการสุ่มค่าใน array แบบไม่ให้ซ้ำ มีหลักการง่ายๆ คือ ถ้าสุ่มได้แล้วลบทิ้ง จึงไม่มีโอกาสจะสุ่มได้ค่าเดิมอีกครั้ง
ขั้นตอนการทำงาน
1. ทำซ้ำตามจำนวนรอบที่ต้องการ แต่ต้องไม่เกินขนาดของ array ที่มี
2.  สุ่มค่าตำแหน่ง array  ระหว่าง 0 ถึง ขนาดของ array เก็บที่ตัวแปร pos_x
3.  แสดงค่าหรือนำค่าที่เก็บใน array ที่ตำแหน่ง pos_x ไปใช้งาน
4.  ลบค่าจาก array ในตำแหน่ง pos_x

ตัวอย่างคำสั่งใน event sheet

ผลการทำงาน จะได้ ชื่อผลไม้ที่แสดงสลับตำแหน่ง ไม่ซ้ำกัน

จากเนื้อหาที่กล่าวไปข้างต้น สามารถนำไปประยุกต์ให้เข้ากับงานที่ต้องการได้ เช่น สลับตำแหน่งของ sprite ที่สร้างขึ้น โดยการเก็บตำแหน่งไว้ใน array ก่อน แล้วสุ่มตำแหน่งที่จะ create object จาก array มาใช้ในขั้นตอนการ create object เป็นต้น  ขอให้สนุกกับการใช้งาน array นะครับ

Action RPG ตอน 1

มีเพื่อน สอบถามเข้ามาว่า เราจะมีแนวทางสร้างเกมแบบคลาสสิก ประเภทสวมบทบาท และออกต่อสู้ ตีให้ตาย ได้ค่าประสบการณ์ มีของหล่น เก็บเอาไปขาย หรือตีแล้วได้พลังงานชีวิต ได้พลังฟื้นฟู เกมแนวนี้สมัยก่อนมีเยอะมากครับ เกม diablo สมัยก่อน (รุ่นเก๋า ตีกันทั้งคืน)  พอมายุคนี้อยากจะลองทำด้วย construct 2 ดูบ้าง ก็ไม่ยากครับ แต่จะขอแนะนำแนวทางการออกแบบเกมและการสร้างเกมบางส่วน

ที่มา : https://en.wikipedia.org/wiki/File:Diabloscreen.jpg

ในตอนที่ 1 นี้ เรามาออกแบบคุณลักษณะของตัวละครของเราก่อนนะครับ การออกแบบตัวละครในเกม construct 2 นี้ ต้องคิด วางแผน ให้ครบถ้วน ว่าตัวละครของเราทำอะไรได้บ้าง เขียนรวมๆ เอาไว้ จะช่วยสร้างกรอบความคิดของเราได้ดี ตัวละครที่ผมจะสร้างนี้ต้องทำสิ่งเหล่านี้ได้

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

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

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

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

5. มีประสบการณ์ หรือ Experience แน่นอนครับ เมื่อออกทำภารกิจบ่อยๆ ย่อมจะมีประสบการณ์ในการต่อสู้ พอสู้ไปเยอะๆ ก็ต้องเก่งขึ้นเรื่อยๆ และพอเก่งก็ต้องเพิ่ม ระดับ เหมือนเลื่อนขั้นให้มี level  สูงขึ้นเรื่อยๆ ครับ

6. พลังโจมตีและการป้องกัน ตัวละครของเราเวลาต่อสู้กับศัตรู จะโจมตีให้พลังชีวิตของศัตรูลดลงได้ทีละเท่าไร และเมื่อโดนตีกลับ จะสามารถป้องกันการโจมตีได้เท่าไร เช่น เขาตีมา 500 เกราะเรากันได้ 300 เราก็โดนตีแค่ 200 เป็นลักษณะแบบนี้ครับ

เมื่อเราสร้างตัวละครในใจของเราขึ้นมาแล้ว เราต้องมาสร้างให้เป็นจริงกันใน construct 2 กันเลยครับ  การกำหนดคุณลักษณะของตัวละครให้ จะอาศัย Instance value ซึ่งเป็นค่าตัวแปรเฉพาะของวัตถุ วัตถุแต่ละตัวก็จะมีค่าที่แตกต่างกันออกไป ถ้าสงสัยว่า Instance value คืออะไร ย้อนกลับไปศึกษาก่อนก็ได้นะครับ

ผมเพิ่ม instance value จำนวน 8 ตัว คือ
Health เป็นค่าพลังชีวิต เป็นชนิด Number  มีค่าเริ่มต้นเท่ากับ 500
Stamina         เป็นค่าความอดทน เป็นชนิด Number  มีค่าเริ่มต้นเท่ากับ 500
Bagsize เป็นขนาดของเป้ใส่ของ เป็นชนิด Number  มีค่าเริ่มต้นเท่ากับ 10
WeaponID เป็นรหัสของอาวุธที่ถือ มีค่าเริ่มต้นเท่ากับ 1
Experience เป็นค่าประสบการณ์ของตัวละคร เป็นชนิด Number  มีค่าเริ่มต้นเท่ากับ 0
Level เป็นระดับของตัวละคร เป็นชนิด Number  มีค่าเริ่มต้นเท่ากับ 0
Damage เป็นพลังในการโจมตีของตัวละคร เป็นชนิด Number  มีค่าเริ่มต้นเท่ากับ 250
Defense เป็นพลังในการป้องกันการโจมตีของตัวละคร เป็นชนิด Number  มีค่าเริ่มต้นเท่ากับ 100

เมื่อเรากำหนดค่า Instance value เสร็จแล้ว ผมขอพักไว้ก่อนนะครับ ตอนต่อไปจะนำเสนอวิธีการในการกำหนดค่า Health ให้เพิ่มหรือลด เวลาต่อสู้ และการเปลี่ยนแปลงค่า Stamina ในระหว่างการทำภารกิจในเกม

construct 2 : sprite font

sprite font คือ วิธีการหนึ่งในการใช้งาน text แต่มีข้อแตกต่างจากการใช้ตัวอักษรทั่วไป คือการใช้ภาพแทนตัวอักษร ตัวอักษรแต่ละตัวจะแทนด้วยส่วนย่อยของภาพ 1 ส่วน ตัวอักษรแต่ละตัว จะถูกออกแบบและตกแต่งให้มีลักษณะเฉพาะ และเข้ากับเกมที่สร้างขึ้น

การเลือกใช้ sprite font ควรใช้เมื่อใด
การใช้งานตัวอักษรต่าง ๆ มักเกิดปัญหาในการแสดงผล เช่น การเปิดด้วย browser ที่แตกต่างกัน การแสดงผลตัวอักษรจะแตกต่างกันด้วย แต่ปัญหาดังกล่าวจะไม่เกิดขึ้น เมื่อใช้งานภาพข้อความ แต่การใช้ภาพข้อความ มักจะเกิดปัญหา เมื่อต้องการเปลี่ยนข้อความในขณะที่รับชม หรือเล่นเกม การใช้ spritefont จะเป็นการใช้ภาพมาแทนตัวอักษร จึงสามารถเปลี่ยนแปลงข้อความได้ตลอดเวลา

การใช้ตัวอักษร จะสามารถเปลี่ยนแปลงสีได้เพียงสีเดียว แต่ถ้าหากใช้ spritefont สามารถจะตกแต่งด้วยสีได้ตามต้องการ ตกแต่งได้หลากหลายสี ทำให้เกมที่สร้างขึ้นมานั้นน่าสนใจมากยิ่งขึ้น

เราควรเลือกใช้ sprite font เมื่อ
1. เมื่อต้องการให้การแสดงผลตัวอักษร การจัดแนว เหมือนกันในทุก browser ที่เรียกใช้งาน
2. เมื่อต้องการใช้กราฟิคกับตัวอักษร เช่น fades, outline, drop shadows
3. ใช้ sprite font เมื่อเกิดปัญหาในการส่งออกเกม แล้วไม่สามารถส่งออกแบบอักษรที่ใช้ไปด้วยได้

ควรระวังการใช้งาน sprite font เมื่อ
1. ไม่ควรใช้ sprite font เมื่อมีการเปลี่ยนขนาดของตัวอักษร หรือการจัดรูปแบบที่แตกต่างกันบ่อยๆ เช่น ตัวหนา ตัวเอียง เพราะจะต้องสร้าง sprite font ที่แตกต่างกันจำนวนมาก
2. ไม่ควรใช้ sprite font สำหรับการแสดงข้อความจำนวนมาก เช่น รายละเอียดของเกม หรือเนื้อหา เรื่องราว เนื้อเรื่อง หรือ คำอธิบายเกม การแสดงผลลักษณะนี้ ควรใช้ข้อความที่เป็นตัวอักษรทั่วไปจะเหมาะสมกว่า

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

construct 2 : Sprite เดินเอง ตอน 2

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

ขั้นแรกต้องสร้างทางเดินของตัว sprite โดยกำหนดพฤติกรรมเป็นแบบ solid ดังนี้

สร้าง sprite ขึ้นมา เพื่อเป็นตัวละครของเกม กำหนดพฤติกรรมเป็นแบบ platform

เพิ่ม instance variable จากแถบ Properties ของตัวละคร ชื่อ moveRight เป็นชนิด Boolean มีค่าเริ่มต้นเป็น true

การตรวจสอบการเดินของ sprite จะตรวจสอบจาก offset ของพื้น โดยปกติ ถ้าไม่ได้กำหนดเป็นอย่างอื่น ถ้าเคลื่อนที่ไปทางด้านขวา ค่าในแกน x จะเป็นลบ แต่เมื่อเคลื่อนที่ไปทางซ้าย ระยะแกน x จะเป็นบวก

การคำนวณ ระยะที่ต้องหมุนกลับ เมื่อเดินไปทางด้านขวา ค่า offset แกน x จะคำนวณดังนี้
- (ความกว้างของพื้น)  เช่น  -(wall.Width)

การคำนวณ ระยะที่ต้องหมุนกลับ เมื่อเดินไปทางด้านซ้าย ค่า offset แกน x จะคำนวณดังนี้
ความกว้างของพื้น เช่น  wall.Width


เพิ่มคำสั่งใน event sheet ดังนี้

เมื่อทดสอบการทำงานของเกม ตัวละครของเราจะเดินไปจนสุดทางเดินก็จะเดินย้อนกลับอีกทางหนึ่ง

ขอให้สนุกกับการสร้างเกมนะครับ

construct 2 : Sprite เดินเอง ตอน 1

สำหรับมือใหม่หัดสร้างเกม หลายคนคงจะเคยสร้าง sprite ที่ไว้ให้ hero ของเราเดินชน กระโดดเหยียบ แบบที่วางไว้ตรงไหนก็อยู่ตรงนั้น แต่บทความนี้ ผมจะนำเสนอวิธีการที่ทำให้ sprite ของเกมที่เราสร้างดูฉลาดขึ้นมาหน่อย คือ เคลื่อนที่ไป-มา ได้โดยอัตโนมัติ

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

สร้าง sprite ขึ้นมา เพื่อเป็นตัวละครของเกม กำหนดพฤติกรรมเป็นแบบ platform

เพิ่ม instance variable จากแถบ Properties ของตัวละคร ชื่อ moveRight เป็นชนิด Boolean มีค่าเริ่มต้นเป็น true

เพิ่มคำสั่งใน event sheet ดังนี้

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

ขอให้สนุกกับการสร้างเกมนะครับ

construct 2 : วาดเส้นอิสระ

หลังจากที่ผมได้นำเสนอวิธีการวาดเส้นตรงด้วย Construct 2 ไปแล้ว บทความนี้ผมจะนำเสนอวิธีการวาดเส้นอิสระ โดยใช้ mouse กดลากให้เกิดรูปตามต้องการ  หลายคนคงอาจจะเคยใช้วิธีการให้สร้างวัตถุใหม่ขึ้นมาเรื่อยๆ ในขณะที่ mouse เคลื่อนที่ แต่วิธีการดังกล่าวนั้นจะมีปัญหา คือ เมื่อเราลาก  mouse ไปอย่างรวดเร็ว เส้นที่เกิดจะขาดเป็นช่วง ไม่ต่อเนื่องกัน และถ้าวาดเยอะมาก จะเกิดการค้างของโปรแกรมได้
การแก้ปัญหาของผมที่จะนำเสนอคือ การใช้หลักการของการวาดเส้นตรงระหว่างจุดสองจุด โดยอาศัยตัวแปรชั่วคราว 2 ตัว เพื่อเก็บตำแหน่งจุดเริ่มต้น x และ y  และอีก 2 ตัว เพื่อเก็บตำแหน่งจุดสิ้นสุด x และ y ใช้ฟังก์ชันทางคณิตศาสตร์ ที่ชื่อว่า distance โดยมีรูปแบบคำสั่ง คือ distance(X1,Y1,X2,Y2)

ขั้นตอนแรก สร้าง sprite ที่จะใช้สำหรับสร้างเส้นตรง ตั้งชื่อว่า line1 และกำหนด Image points Origin ให้ค่า X = 0 เพื่อเป็นจุดเริ่มต้นของการขยายภาพ (ปกติค่า X จะถูกกำหนดไว้กึ่งกลางภาพ เวลาขยายภาพ จะขยายออกจากกึ่งกลางภาพ ทำให้เส้นตรงที่ได้ มีจุดเริ่มต้นไม่ตรงตามที่เราต้องการ)

สร้างตัวแปร จำนวน 4 ตัว คือ x1, y1, x2, y2 เป็นชนิด Number มีค่าเริ่มต้นเป็น 0

เพิ่มวัตถุ Mouse เข้ามาในเกม และเพิ่มคำสั่งใน event sheet ดังนี้

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

ขอให้สนุกกับการสร้างเกมนะครับ

construct 2 : วาดเส้นตรง

บทความนี้จะขอกล่าวถึงการวาดเส้นตรงในเกม โดยเกมส่วนมากจะใช้การวาดเส้นตรงในการวัดระยะหรือกำหนดขอบเขตของเกม หรือใช้แสดงเส้นแบ่งของการโจมตี เช่น เกม “fruit ninja” หรือใช้ในการเชื่อมความสัมพันธ์ของสิ่งของต่าง ๆ เช่น เกมจับคู่  หรือจะใช้ในการวาดภาพก็ได้เช่นเดียวกันครับ

หลักการวาดเส้นตรงที่ผมจะแนะนำ จะใช้หลักของการขยายภาพ โดยที่เรามีภาพที่เป็นสี่เหลี่ยมกำหนดไว้แล้ว หลังจากนั้นก็ขยายความยาวไปตามระยะทางที่ mouse เคลื่อนที่ไป การกำหนดความยาวนั้น จะใช้ฟังก์ทางคณิตศาสตร์ ที่ชื่อว่า distance โดยมีรูปแบบคำสั่ง คือ distance(X1,Y1,X2,Y2)

ขั้นตอนแรก สร้าง sprite ที่จะใช้สำหรับสร้างเส้นตรง ตั้งชื่อว่า line1 และกำหนด Image points Origin ให้ค่า X = 0 เพื่อเป็นจุดเริ่มต้นของการขยายภาพ (ปกติค่า X จะถูกกำหนดไว้กึ่งกลางภาพ เวลาขยายภาพ จะขยายออกจากกึ่งกลางภาพ ทำให้เส้นตรงที่ได้ มีจุดเริ่มต้นไม่ตรงตามที่เราต้องการ)

กำหนดค่าตัวแปร Instance variable ชื่อ drawing  ชนิดข้อมูลแบบ Boolean  กำหนดค่าเริ่มต้นเป็น false

เพิ่มวัตถุ Mouse เข้ามาในเกม และเพิ่มคำสั่งใน event sheet ดังนี้

เมื่อทดลองการทำงานของเกม เมื่อเราคลิก mouse แล้วลากออกไป จะเกิดเส้นตรงจากจุดเริ่มต้นและยาวไปถึงตำแหน่งของ mouse ที่เคลื่อนที่ไป

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

construct 2 : Upload game to Google Drive

หลายคนคงเจอปัญหาว่า เมื่อสร้างเกมมาแล้ว จะเอาเกมไปแจกจ่ายให้เล่นกันได้อย่างไร แถม construct ที่ใช้ก็เป็น free version ถึงจะสามารถ export ออกมาเป็น HTML5 ได้ แต่ก็ไม่อยากจะไปเช่าโฮสให้เสียเงินเปล่าๆ บทความนี้จะช่วยเป็นทางออกของคนทำเกมสมัครเล่นครับ ทางออกที่ว่านั้น คือ การใช้บริการ google drive ของบริษัท google ที่ให้บริการฝากไฟล์ข้อมูลให้ฟรี ๆ ขนาดพื้นที่ 15 G กันเลยทีเดียว (จริง ๆ แล้วแบบเสียเงินก็มีนะครับ แต่พอพูดว่าเสียเงินแล้ว ไม่ค่อยมีคนสนใจเท่าไร)

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

เตรียมไฟล์เกม
เมื่อเราสร้างเกมเสร็จเรียบร้อยดีแล้ว จะต้องทำการ export เกมออกมาให้อยู่ในรูปแบบ HTML5 ก่อน โดยไปที่ File --> Export Project... จะได้หน้าต่างสำหรับส่งออกเกม ซึ่งมีหลายรูปแบบด้วยกัน แต่ขอให้เลือกเป็นแบบ HTML5

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

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

เมื่อส่งออกสำเร็จ โปรแกรมจะแสดงหน้าต่างแจ้ง The project was successfully exported. ถือว่าสำเร็จกระบวนการส่งออกเกม

เมื่อเปิดดูไฟล์ที่ได้จากการส่งออก จะประกอบด้วยไฟล์ข้อมูลที่จำเป็นในการแสดงเกมในรูปแบบเว็บ ดังภาพ

Upload file to google drive
ขั้นตอนต่อไปจะเป็นการนำไฟล์ที่ส่งออก ไปเก็บไว้ยัง drive ของ google โดยไปที่ เว็บ drive.google.com แล้วเข้าระบบให้เรียบร้อย สร้าง Folder สำหรับเก็บงานเกมของเรา ด้วยคำสั่ง New --> Folder  แล้วตั้งชื่อให้สอดคล้องกับเกมที่เราสร้าง

Upload ไฟล์ข้อมูลที่ได้ส่งออกไว้แล้วขึ้นไปยัง Folder ที่เราได้สร้างไว้

เมื่อ upload ไฟล์ข้อมูลทั้งหมดเสร็จแล้ว จะต้องแชร์ Folder เพื่อให้คนอื่นเข้ามาเล่นเกมที่เราสร้างได้ โดยไปที่ Folder ที่เราสร้างไว้ คลิกลูกศรสีดำ จะมีคำสั่งเลื่อนลงมา  เลือก Share...

กำหนดการเข้าถึงเป็นแบบ Anyone with the link can view เพื่อให้คนที่มีลิงค์สามารถเข้าชมได้  และคัดลอกที่อยู่ลิงค์ของ Folder เอาไว้

ลักษณะของลิงค์ ที่ได้ จะเป็น ดังนี้

https://drive.google.com/folderview?id=0B-f6ViMko6VsX1FCTDBTS2VLeGs&usp=sharing

ส่วนที่เป็นค่าของ id คือ ตำแหน่งของ Folder ที่อยู่บน Google drive (ส่วนที่เป็นตัวหนาสีแดง)

ปรับปรุงส่วนของลิงค์ที่จะแชร์ใหม่ ให้อยู่ในรูปแบบ

https://googledrive.com/host/FOLDER ID/index.html

ตรงส่วนของ Folder id ให้แทนด้วย id ของ Folder ที่เราแชร์ไว้ จะได้ลักษณะ ดังนี้

https://googledrive.com/host/0B-f6ViMko6VsX1FCTDBTS2VLeGs/index.html

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

แต่ของฟรีก็ย่อมมีข้อจำกัดอยู่บ้าง คือ bandwidth ที่ได้นั่นจะไม่มากนัก ถ้ามีการเข้าใช้งานเยอะๆ ทาง google อาจจะปิดการแชร์ ทำให้ไม่สามารถเข้าเล่นเกมได้ ถ้าเกมของเราเป็นที่นิยมขนาดที่มีคนเข้าเล่นเป็นจำนวนมาก ควรรีบเช่าโฮส และนำเกมไปติดตั้ง ลงโฆษณา หาเงินเข้ากระเป๋าเยอะๆ กันเลยนะครับ