วันเสาร์ที่ 28 พฤศจิกายน พ.ศ. 2558

construct 2 : เชื่อมต่อฐานข้อมูล ตอนที่ 2

เมื่อมีข้อมูลในฐานข้อมูลแล้ว ต่อไปจะนำเสนอการอ่านข้อมูลจากฐานข้อมูล ออกมาแสดง หรือนำไปใช้งานตามต้องการ ถ้าหากผู้อ่านยังไม่มีข้อมูลในฐานข้อมูล หรือข้ามมาอ่านบทความนี้ก่อน ถ้าเกิดข้อสงสัย สามารถย้อนกลับไปอ่าน การเชื่อต่อฐานข้อมูล ตอนที่ 1  ได้ เพื่อให้เนื้อหาต่อเนื่องกัน และเกิดความเข้าใจมากขึ้น
เพิ่มเหตุการณ์เมื่อบันทึกข้อมูลเสร็จ ให้อ่านข้อมูลมาแสดง add events แบบ AJAX แล้วเลือก On completed



กำหนด tag ตามค่าที่ได้ส่งไปให้ AJAX ตอนที่บันทึกข้อมูล คือ "PostScore"


แล้วกำหนดคำสั่ง add action ให้เรียกอ่านข้อมูลจากฐานข้อมูลด้วยไฟล์ getscores.php
เลือกคำสั่งแบบ AJAX และ Request URL



กำหนดค่าดังนี้
Tag  = "GetScores"
URL = "http://localhost/construct/getscores.php"


เพิ่มวัตถุแบบ text มาอีก 1 ตัว เพื่อใช้แสดงข้อมูลจากฐานข้อมูล


เพิ่มเหตุการณ์ใหม่ เมื่อ tag “GetScores” ทำงานเสร็จ add events แบบ AJAX แล้วเลือก On completed
กำหนด tag ตามค่าที่ได้ส่งไปให้ AJAX ตอนที่อ่านข้อมูล คือ "GetScores"



เพิ่มเหตุการณ์ คือ นำค่าที่อ่านได้จาก Ajax มาแสดง ด้วยคำสั่ง settext ให้กับ Text ที่เพิ่มเข้ามาใหม่ ให้เท่ากับ Ajax.LastData


จะได้คำสั่ง ดังนี้



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


การใช้งานฐานข้อมูลของโปรแกรม Construct 2 จะอาศัยความสามารถของ AJAX ในการดึงข้อมูลจากฝั่ง server  มาใช้งาน หวังว่าผู้ที่สนใจจะนำไปประยุกต์กับเกมที่ต้องการได้นะครับ ขอให้สนุกกับการสร้างเกม

construct 2 : เชื่อมต่อฐานข้อมูล ตอนที่ 1

สำหรับบทความนี้ ผมสมมุติว่าผู้อ่านเข้าใจเรื่องเกี่ยวกับพื้นฐานของการเขียนโปรแกรมภาษา PHP หรือมีความรู้เบื้องต้นกับ mysql ซึ่งเป็นโปรแกรมฐานข้อมูล รู้จักตัวจัดการฐานข้อมูล เช่น phpmyadmin เป็นต้น เพราะผมจะไม่ได้กล่าวถึงรายละเอียดในส่วนนี้ หากผู้อ่านต้องการศึกษาเพิ่มเติม สามารถหาอ่านได้จากเว็บไซต์ทั่วไป และที่สำคัญบทความนี้ จะต้องทำงานบน webserver อาจจะจำลองบนเครื่องคอมพิวเตอร์ แบบ localhost หรือการใช้งานบน server
ขั้นแรก ขอให้สร้างฐานข้อมูลขึ้นมาก่อน ผมยกตัวอย่าง ชื่อ construct_db



สร้างตารางข้อมูลขึ้นมา 1 ตาราง
CREATE TABLE `scores` (
      `id` INT NOT NULL AUTO_INCREMENT ,
    `name` VARCHAR( 20 ) NOT NULL ,
  `score` INT NOT NULL ,
      PRIMARY KEY ( `id` )
    );



สร้าง Folder ขึ้นมาใน wevserver ผมจำลองด้วย appserve ผมก็เข้าไปที่ C:\AppServ\www แล้วสร้าง Folder ชื่อ construct เพื่อจำลองว่ามีเว็บชื่อ construct อยู่บนเครือข่ายอินเทอร์เน็ต และสร้างไฟล์ php ขึ้นมา 2 ไฟล์ ดังนี้
ไฟล์สำหรับการบันทึกข้อมูลคะแนน ชื่อ savescores.php
$dbu = "root"; //ชื่อผู้ใช้ฐานข้อมูล
$dbp = "password"; //รหัสผ่านฐานข้อมูล
$host = "localhost"; //MySQL server
$db_name="construct_db";  //ชื่อฐานข้อมูล
$tbl_name="scores"; // Table name

$dblink = mysql_connect($host,$dbu,$dbp);
$seldb = mysql_select_db($db_name);

if(isset($_GET['name']) && isset($_GET['score'])){
     $name = strip_tags(mysql_real_escape_string($_GET['name']));
     $score = strip_tags(mysql_real_escape_string($_GET['score']));
     $sql = mysql_query("INSERT INTO $tbl_name (`id`,`name`,`score`) VALUES ('','$name','$score');");
   
     if($sql){
          echo 'Your score was saved. Congrats!';
     }else{
          echo 'There was a problem saving your score. Please try again later.';
     }
}
mysql_close($dblink);
?>

ไฟล์สำหรับการอ่านข้อมูลคะแนน ชื่อ getscores.php 
header('Access-Control-Allow-Origin: *');
$dbu = "root"; //ชื่อผู้ใช้ฐานข้อมูล
$dbp = "password"; //รหัสผ่านฐานข้อมูล
$host = "localhost"; //MySQL server
$db_name="construct_db";  //ชื่อฐานข้อมูล
$tbl_name="scores"; // Table name

mysql_connect($host,$dbu,$dbp) or die("cannot connect");
mysql_select_db($db_name) or die("cannot select DB");

// Retrieve data from database
$sql="SELECT * FROM $tbl_name ORDER BY score DESC LIMIT 10";
$result=mysql_query($sql);
while($rows=mysql_fetch_array($result)){
echo $rows['name'] . "\t\t" . $rows['score'] . "\n";
}
mysql_close();
?>

ต่อไปก็สร้าง Project ของ Construct ขึ้นมา



เพิ่ม textbox ใหม่ ชื่อ txtPlayerName เพื่อให้กรอกชื่อผู้เล่น



และเพิ่ม textbox อีกหนึ่งอัน ชื่อ txtPlayerScore  เพื่อให้กรอกคะแนนที่จะบันทึก
เพิ่มปุ่มขึ้นมา ตั้งชื่อว่า submit ใช้เพื่อกดให้บันทึกคะแนน


จะได้หน้าตาประมาณนี้



ต่อไปจะเพิ่มคำสั่ง สำหรับบันทึกคะแนนลงในฐานข้อมูล อันดับแรก ต้องเพิ่มวัตถุแบบ ajax เข้ามาก่อน เพื่อใช้ในการติดต่อรับ-ส่งข้อมูลจากไฟล์ php ที่เราได้สร้างเอาไว้


เพิ่มเหตุการณ์ที่ event sheets สำหรับการคลิกที่ปุ่ม save โดยเลือก add event ตามด้วย ok button และ on clicked แล้วเพิ่มการกระทำ add action ด้วย ajax


เลือกคำสั่ง Post to URL



กำหนดค่าดังนี้
Tag  = “PostScore”
URL = “http://localhost/construct/savescores.php?name=" & txtPlayerName.Text & "&score=" & txtPlayerScore.Text”
Data = “”
Method = “GET”
(ตามตัวอย่าง จำลองด้วย localhost ซึ่งได้ติดตั้ง webserver บนคอมพิวเตอร์)


เมื่อทดสอบการทำงานของเกม จะได้ลักษณะ ดังนี้


เมื่อกรอกข้อมูล แล้วคลิกปุ่มบันทึก ข้อมูลจะถูกส่งไปยังไฟล์ savescores.php ซึ่งจะทำการบันทึกข้อมูลลงในฐานข้อมูล


เมื่อสามารถบันทึกข้อมูลลงในฐานข้อมูลได้แล้ว ต่อไปจะเป็นการอ่านข้อมูลจากฐานข้อมูลมาแสดง ซึ่งผมได้เขียนไว้ในบทความตอนที่ 2 การเชื่อมต่อฐานข้อมูล

วันเสาร์ที่ 21 พฤศจิกายน พ.ศ. 2558

Construct 2 : Bullet ยิงกระสุน ตอนที่ 2

ขั้นต่อไป สร้างกระสุนขึ้นมา ด้วยการ Insert new Object ตั้งชื่อว่า missile


แล้ววางไว้นอกพื้นที่ของเกม


กำหนดพฤติกรรม Behavior เป็นแบบ Bullet และกำหนดให้ทำลายตัวเองเมื่อออกนอกพื้นที่ของเกม


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



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


ต่อไปทำการยิงกระสุนเมื่อกดปุ่ม Space bar
กำหนดการกระทำที่ event sheet เพิ่ม event ให้ โดยเลือก keyboard


เลือกเหตุการณ์แบบ Key is down


กำหนดเหตุการณ์สำหรับการกดปุ่ม Space bar


กำหนดการกระทำโดยให้วัตถุจรวดยิงกระสุน เลือกวัตถุจรวด


เลือกคำสั่ง Spawn another object


กำหนดวัตถุที่จะ spawn คือ missile และจุดที่จะสร้างคือ image point 1


เมื่อทดลองเล่นเกม แล้วกดปุ่ม space bar กระสุนก็จะถูกยิงออกมาจากจรวด




Construct 2 : Bullet ยิงกระสุน ตอนที่ 1

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



คุณสมบัติของ Bullet
Speed คือ ความเร็วเริ่มต้นของกระสุน หลายเป็น พิกเซลต่อวินาที
Acceleration คือ อัตราเร่งของกระสุน ถ้ากำหนดเป็น 0 ความเร็วจะคงที่ ถ้ากำหนดเป็นบวกจะเคลื่อนที่ด้วยอัตราเร่งเพิ่มขึ้น  ถ้ากำหนดเป็นลบ จะมีอัตราเร่งลดลง จนความเร็วเป็น 0 และหยุดนิ่ง
Gravity คือ ค่าแรงโน้มถ่วงของโลก ที่จะกระทำกับกระสุนที่เคลื่อนที่ทำให้ความเร่งลดลงและเคลื่อนที่เป็นเส้นโค้งลงพื้นด้านล่าง แต่ถ้ากำหนดเป็น 0 จะไม่มีแรงโน้มถ่วงมากระทำ ทำให้กระสุนเคลื่อนที่ในแนวที่กำหนด
Bounce off solids คือ การกำหนดให้วัตถุแบบ Solid กระเด็นเมื่อโดนกระสุนพุ่งชน
Set angle คือ การกำหนดค่าว่าจะให้ใช้มุมในการเคลื่อนที่ของกระสุนหรือไม่
Initial state คือ การกำหนดว่าจะให้วัตถุทำงานหรือไม่ทำงาน

ทีนี้มาลองสร้างเกมที่ใช้พฤติกรรมแบบ Bullet กันลองดูครับ
สร้างโปรเจคใหม่ขึ้นมา และแทรกพื้นหลังให้เป็นฉากท้องฟ้าครับ โดยการ Insert New Object เลือก Sprite ตั้งชื่อว่า background แล้วคลิก Insert


ผมขอวาดง่าย ๆเลยนะครับ เต็มสีฟ้าลงไปเต็มช่องก็พอ


ปรับขนาดของวัตถุให้เต็มพื้นที่ของเกม แล้วไปที่แทบ layer แล้ว lock ไว้ และเพิ่ม layer ใหม่ขึ้นมา



ต่อไปสร้างจรวดขึ้นมา 1 ลำ ด้วยการ Insert new Object ออกแบบได้ตามต้องการครับ


วางจรวดของเราไว้ตรงกลางของเกม


เพิ่มวัตถุ keyboard เข้ามาในเกม


กำหนดการกระทำที่ event sheet เพิ่ม event ให้ โดยเลือก keyboard


เลือกเหตุการณ์แบบ Key is down



กำหนดเหตุการณ์สำหรับการกดปุ่ม w


เพิ่มการกระทำด้วย add action แล้วเลือกจรวด


เลือกการกระทำเป็น  Move at angle


กำหนดค่ามุม Angle เป็น 270 คือ ให้เคลื่อนที่ขึ้นด้านบน กำหนด Distance ระยะในการเคลื่อนที่ เท่ากับ 5


เพิ่มเหตุการณ์ลักษณะเดียวกัน แต่เป็นการกดปุ่ม s ให้เคลื่อนที่ลง กำหนดมุมเป็น 90


ทดสอบการทำงานของเกม จะพบว่าจรวดจะเคลื่อนที่ขึ้นเมื่อกดปุ่ม w และเคลื่อนที่ลงเมื่อกดปุ่ม s

construct 2 : เคลื่อนกล้องตามตัวละคร


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




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

วิธีการ คือ การเพิ่มพฤติกรรมให้ตัวละครของเรา คลิก  Add behavior  แล้วเลือก Scroll To คลิก Add เพิ่มเข้ามาให้กับตัวละครของเรา


ตัวละครของเราก็จะมีพฤติกรรมเพิ่มเข้ามา


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