Categories
Programming Scratch

Mario ใน Scratch

เกม Mario เป็นเกมที่ดังมาก การจะทำเกมให้เหมือน Mario ในโปรแกรม Scratch คงใช้เวลาเอาเรื่องเลย แต่มาลองดูการทำตัวละครใน Scratch ให้เคลื่อนที่คล้ายในเกม Mario

ก่อนอื่นดูคลิปนี้เป็นแนวทาง

ในวีดีโอนี้ MrMattperreault อธิบายการสร้างตัวละครแมว ให้เคลื่อนที่ในแนวดิ่งตามแรงโน้มถ่วง (gravity) และแมวยังเด้งได้เมื่อกระทบพื้นและกระโดดได้เมื่อกด space bar นอกจากนั้นแมวยังเคลื่อนที่ในแนวราบแบบมีแรงต้านหรือแรงเสียดทานได้อีก วิธีการเขียนโปรแกรมโดยสรุปจากวีดีโอมีดังนี้

การเคลื่อนที่ในแนวดิ่ง

  • สร้างพื้นสีฟ้า เพื่อให้แมวตกลงมาแล้วหยุดหรือเด้งได้
  • สร้างตัวแปร gravity มีแรงดึงลง ดังนั้นกำหนดค่าให้เป็น -0.3
  • สร้างตัวแปร velocity เป็นตัวกำหนดความเร็วในแนวดิ่ง กำหนดค่าเริ่มต้นที่ 0 หมายความว่า แมวอยู่กับที่
  • การทำให้แมวเคลื่อนที่ในแนวดิ่ง ตกสู่พื้นหรือเด้งขึ้น ต้องเปลี่ยนความเร็วตามแรงโน้มถ่วง ดังนั้นกำหนดค่า velocity ใหม่เป็น velocity + gravity จากนั้นเปลี่ยนค่าตำแหน่ง y ตามค่า velocity เป็น y + velocity เนื่องจาก gravity มีค่าเป็นลบ จะทำให้แมวเคลื่อนที่ลงหรือตกสู่พื้นสีฟ้า
  • ถ้าต้องการให้แมวเด้งขึ้นเมื่อกระทบพื้น ต้องตรวจสอบการสัมผัสพื้นก่อน จากนั้นเปลี่ยนทิศของการเคลื่อนที่ ที่ขึ้นกับค่าของ velocity ซึ่งก่อนหน้าจะกระทบพื้น velocity มีค่าเป็นลบ (เคลื่อนที่ลง) ดังนั้นเปลี่ยนทิศได้ด้วยการคูณ -1 กับ velocity เพื่อให้ velocity มีค่าเป็นบวก (เคลื่อนที่ขึ้น)
  • แมวจะเด้งขึ้นลงไปเรื่อยๆ ไม่มีวันจบ ในความสูงระดับหนึ่ง เพื่อให้แมวเด้งขึ้นลงในระดับความสูงที่ลดลงในแต่ละครั้งของการเด้ง ต้องลดค่า velocity อย่างรวดเร็วด้วยการหาร ดังนั้นกำหนดค่าใหม่ให้ velocity เป็น velocity / 5
  • เพื่อให้แมวหยุดเด้งขึ้นลง ต้องสร้างตัวแปร Bounce count ขึ้นมาเพื่อนับจำนวนการเด้ง โดยกำหนดค่าเริ่มต้นเป็น 0 ทุกครั้งที่แมวเด้ง เพิ่มค่านี้ทีละ 1 เมื่อได้จำนวนการเด้งตามที่ต้องการ ก็กำหนดให้ velocity เป็น 0 เพื่อให้แมวหยุดการเคลื่อนที่ในแนวดิ่ง
  • การทำให้แมวกระโดดได้จากพื้น เมื่อกด space bar ทำได้โดยตรวจสอบก่อนว่าแมวอยู่ที่พื้นหรือยัง จากนั้นกำหนดค่าใหม่ให้ตัวแปร Bounce count เป็น 0 (ตอนนี้ยังไม่มีการเด้ง) และกำหนดค่าความเร็วตอนเริ่มกระโดดในตัวแปร velocity เป็น 6 แมวก็จะกระโดดขึ้นได้

การเคลื่อนที่ในแนวนอน

  • การเคลื่อนที่ในแนวนอน เกิดจากการกดคีย์ลูกศรซ้ายขวา
  • สร้างตัวแปร HorzVelocity เป็นตัวกำหนดความเร็วในแนวนอน
  • เมื่อกดคีย์ลูกศรซ้าย กำหนดค่า HorzVelocity เป็น -3 เมื่อกดคีย์ลูกศรขวากำหนดค่า HorzVelocity เป็น 3 จากนั้นเปลี่ยนค่าตำแหน่ง x ตามค่าใน HorzVelocity ดังนั้นแมวจะเคลื่อนที่ซ้ายขวาได้เมื่อกดคีย์ลูกศรซ้ายขวา
  • สุดท้าย การทำให้แมวลดความเร็วลงในแนวราบเสมือนว่ามีแรงเสียดทานที่พื้น ทำได้โดยตรวจสอบว่า เมื่อคีย์ลูกศรไม่ได้ถูกกดแล้ว ก็กำหนดค่า HorzVelocity ด้วยค่าใหม่เท่ากับ HorzVelocity  คูณ 0.92 (ความเร็วใหม่เท่ากับ 92% ของความเร็วเดิม) จะทำให้ความเร็วในแนวราบค่อยๆ ลดลงเอง 
Categories
Kodu Programming

Kodu Grammar

Kodu เป็นโปรแกรมภาษาเฉพาะด้าน (Domain-specific language) สร้างมาสำหรับการสร้างเกม โดยอาศัยไวยากรณ์ภาษา (Grammar) ของ Kodu เป็นตัวกำหนดวิธีการเขียนโปรแกรมในเกม

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

Kodu Code

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

ไวยากรณ์ของ Kodu อยู่ในรูปแบบง่ายๆ คือ แต่ละบรรทัด หรือแต่ละรายการ (มีตัวเลขกำกับอยู่) เป็นกฎหนึ่งข้อสำหรับตัวละครหรือวัตถุนั้น กฎจะอยู่ในรูปแบบตามไวยากรณ์ของ Kodu ดังนี้

When Condition Do Action 

อธิบายได้ว่า เมื่อ (When) เหตุการณ์ที่เฝ้ารอเกิดขึ้น (Condition) ให้ทำ (Do) งานดังนี้ (Action)

จากรูปด้านบน อธิบายกฎตามหลักไวยากรณ์ของ Kodu ได้ดังนี้

  1. เมื่อผู้เล่นใช้จอยสติ๊กด้านซ้ายของเกมแพด ตัวละคร Kodu จะเคลื่อนที่ตามทิศทางของจอยสติ๊ก
  2. เมื่อผู้เล่นใช้คีย์ลูกศรบนคีย์บอร์ด ตัวละคร Kodu จะเคลื่อนที่ตามทิศทางของคีย์ลูกศร (เกมนี้ผู้เล่นสามารถจะใช้เกมแพด หรือจะใช้คีย์บอร์ดในการเล่นก็ได้)
  3. เมื่อตัว Kodu ชน (bump) กับแอปเปิ้ล ให้ตัว Kodu กินผลแอปเปิ้ลนั้น (it)
  4. ในกรณีที่กฎมีการย่อหน้า และไม่มีเงื่อนไขของเหตุการณ์กำกับอยู่ หมายความว่า ให้ใช้เงื่อนไขก่อนหน้านั้น ซึ่งก็คือกฎในข้อ 3 เมื่อตัว Kodu ชน กับแอปเปิ้ล ให้เพิ่มคะแนน 1 คะแนนแก่ผู้เล่น
  5. เมื่อผู้เล่นทำคะแนนได้ครบ 5 คะแนน ผู้เล่นชนะ

ไวยากรณ์ของ Kodu  ยังมีให้ศึกษาอีก มาตามต่อคราวหน้าครับ

 

Categories
App Inventor Programming

โปรแกรมแมวเหมียว ตอน 4

ถ้าคุณมีมือถือ Android ที่สามารถติดต่อกับ App Inventor ได้ ให้ต่อสาย USB เข้ากับเครื่องคอมพิวเตอร์ โปรแกรม Hello Purr จะปรากฎบนมือถือให้ทดสอบ (live testing) ได้ทันที

แต่ถ้าดึงสาย USB ออก โปรแกรมก็จะหายไป ไม่มีอยู่ในมือถืออีกต่อไป ทั้งนี้เพราะโปรเจกได้ถูกเก็บไว้ในระบบคลาวด์ (Cloud system) ถ้าเสียบสาย USB กลับไปขณะที่ยังอยู่ในระบบอยู่ โปรแกรม Hello Purr ก็จะกลับมาอีกครั้ง

ถ้าต้องการทดสอบโปรแกรมที่เราสร้างขึ้นมา โดยไม่ต้องใช้สาย USB เราต้องดาวน์โหลดโปรเจกจากระบบมาเก็บไว้ที่มือถือเราเอง เรียกวิธีนี้ว่า Package for Phone เหมือนกับการจัดเก็บของ (ในที่นี้คือโปรเจก) แล้วส่งของผ่านพัสดุ จากระบบคลาวด์มาที่มือถือของเรานั้นเอง วิธีการทำ คือ คลิกปุ่ม Package for Phone บนโปรแกรม Designer คลิกเลือก Download to Connected Phone โปรแกรมจะสร้างไฟล์นามสกุล apk ส่งมาและติดตั้งเข้าไปยังมือถือ ซึ่งต้องต่อสาย USB อยู่

package for phone

หรือถ้าต้องการเก็บไฟล์ (.apk) ไว้ที่เครื่องคอมพิวเตอร์ก่อน ก็ทำได้โดยคลิกปุ่ม Package for Phone คลิกเลือก Download to this Computer วิธีนี้ เราสามารถต่อมือถือกับคอมพิวเตอร์เพื่อติดตั้งโปรแกรมในภายหลัง หรือจะแชร์ไฟล์นี้ให้คนอื่น นำไปลงโปรแกรมบนมือถือของคนๆ นั้นก็ได้

ทั้งสองวิธีที่ผ่านมา มือถือที่จะใช้ต้องตั้งค่า Unknown sources ก่อน ซึ่งทำได้จาก เมนูในมือถือ Setting -> Applications ทั้งนี้เพราะ วิธีนี้เป็นการลงโปรแกรมที่ไม่ผ่าน Google Play (ก่อนหน้านี้คือ Android Market) ดังนั้น มือถือต้องตั้งค่าอนุญาตให้ลงโปรแกรมที่ไม่รู้จัก (และไม่น่าเชื่อถือ) ก่อน

อีกวิธีหนึ่งในการลงโปรแกรมบนมือถือของเรา คือ การใช้บาร์โค้ด ซึ่งทำได้โดย คลิกปุ่ม Package for Phone คลิกเลือก Show Barcode

barcode

วิธีนี้ต้องมีโปรแกรมบาร์โค้ดแสกนเนอร์ (ดาวน์โหลดได้จาก Google Play) และใช้ได้เฉพาะมือถือของเราเองเท่านั้น แชร์ไม่ได้

สำหรับคนที่ต้องการพัฒนาโปรแกรมร่วมกัน หรือต้องการแชร์ซอร์สโค้ดให้คนอื่น ทำได้โดยคลิก My Projects ในโปรแกรม Designer เพื่อไปยังรายการโปรเจกที่สร้างไว้ คลิกเลือกโปรเจกที่ต้องการ จากนั้นคลิกปุ่ม More Actions คลิกเลือก Download Source

download source

ก็จะได้ซอร์สโค้ดของโปรเจกที่ดาวน์โหลดมา (ไฟล์ zip) อยู่ที่เครื่องคอมพิวเตอร์ของเรา จากนั้นสามารถส่งไฟล์นี้ให้คนอื่นนำซอร์สโค้ดไปพัฒนาต่อได้ เมื่อคนที่ได้ไฟล์ zip นี้ไปแล้ว สามารถสร้างโปรเจกนี้ได้โดย คลิกปุ่ม More Actions คลิกเลือก Upload Source เพื่อสร้างโปรเจก Hello_purr ของคนๆ นั้น ในระบบคลาวด์ต่อไป 

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

Categories
App Inventor Programming

โปรแกรมแมวเหมียว ตอน 3

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

เริ่มต้นการเขียนโปรแกรมด้วยการเปิดโปรแกรม Blocks Editor ด้วยการคลิกปุ่ม Open the Blocks Editor บนโปรแกรม Designer รอสักครู่ ไฟล์ AppInventorForAndroidCodeblocks.jnlp จะถูกดาวน์โหลดและรันโดยอัตโนมัติ แต่ถ้าโปรแกรมไม่เปิดทำงานเอง (เบราว์เซอร์อาจไม่ได้ตั้งค่าให้รันโปรแกรมจาวาโดยอัตโนมัติ) ก็สามารถดับเบิลคลิกไฟล์ที่ดาวน์โหลดมาได้เอง

block editor

Blocks Editor มี 3 แทป (Built-in, My Blocks, Advanced) Built-in รวบรวมบล็อกคำสั่งที่สามารถใช้ได้กับทุกโปรเจก ส่วน My Blocks เป็นบล็อกคำสั่งของส่วนโปรแกรมที่ออกแบบไว้ในโปรเจกนี้เท่านั้น (Advanced ยังไม่กล่าวถึงในที่นี่) พื้นที่ว่างด้านขวาเป็นพื้นที่สำหรับวางบล็อก เพื่อสร้างโปรแกรม ถ้าไม่ต้องการบล็อกใดแล้ว ให้ลากบล็อกนั้นไปลงถังขยะที่อยู่มุมล่างขวา ส่วนอื่นๆ ของโปรแกรมจะกล่าวต่อไปภายหลัง

เมื่อคลิกที่ส่วนโปรแกรมใด (ในรูปเป็น Button1) จะปรากฎหน้าต่างแสดงบล็อกที่เกี่ยวข้องกับส่วนโปรแกรมนั้น

วิธีการเขียนโปรแกรม ทำได้โดยลากบล็อกที่ต้องการไปยังพื้นที่ว่างถัดไป การต่อบล็อกจะคล้ายกับ Scratch (แต่บล็อกจะมีความซับซ้อนของมากกว่า) ข้อความที่อยู่บนบล็อกจะสื่อถึงหน้าที่ของมัน

สิ่งที่เราต้องการในโปรแกรมนี้ คือเมื่อผู้ใช้โทรศัพท์แตะที่รูปแมว (Button1) ก็จะมีเสียงร้องของแมว (Sound1) ดังออกมา ดังนั้น คลิกแทป My Blocks คลิกเลือก Button1 ลากบล็อก when Button1.Click do ไปยังพื้นที่เขียนโปรแกรม สังเกตบล็อกที่ถูกเลือกอยู่จะมีกรอบสีส้มล้อมเอาไว้

จากนั้นคลิกเลือก Sound1 ลากบล็อก call Sound1.Play ไปวางด้านในของบล็อก when Button1.Click do สังเกตรูปร่างของบล็อกจะต่อกันพอดี และจะมีเสียงดังคลิกถ้าบล็อกต่อกันได้

hello purr block code

โค้ดของ Hello Purr มีเท่านี้ สั้นและเข้าใจได้ง่าย ถ้าจะแปลความหมายของบล็อกคำสั่งนี้ เป็นภาษาที่คนทั่วไปพอจะเข้าใจได้ ก็คือ เมื่อปุ่มนี้ (Button1) ถูกคลิกหรือแตะบนหน้าจอมือถือ ให้เปิดเสียงแมว (Sound1)

ต่อไปจะทดสอบโปรแกรมกับโปรแกรมมือถือจำลอง (ตอน 4 จะทดสอบกับมือถือจริง) โดยคลิกปุ่ม New emulator บนโปรแกรม Blocks Editor เพื่อเปิดโปรแกรมมือถือจำลอง รอสักครู่ขณะโปรแกรมติดตั้งค่าเริ่มต้นก่อนใช้งาน

running Android emulator

จากรูปด้านบน เริ่มต้นรูปหนึ่งเมื่อโปรแกรมมือถือจำลองพร้อมใช้งาน ใช้เมาส์ลากกุญแจไปด้านขวามือเพื่อปลดล็อกมือถือ จะได้รูปที่สอง จากนั้นคลิกปุ่ม Connect to device…  บนโปรแกรม Blocks Editor เลือกมือถือจำลอง ในที่นี่คือ emulator-5554 สังเกตตัวเลขเดียวกับเครื่องจำลอง (มุมซ้ายบน) ตัวเลขนี้ระบุเครื่องที่ต้องการติดต่อกับโปรแกรม App Inventor เนื่องจากเราสามารถเปิดโปรแกรมมือถือจำลองพร้อมกันได้มากกว่าหนึ่งเครื่อง (ทดลองดูก็ได้)

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

Categories
App Inventor Programming

โปรแกรมแมวเหมียว ตอน 2

เมื่อเรารู้องค์ประกอบหลักๆ ของ Designer กันแล้ว ขั้นตอนต่อไป คือ ออกแบบหน้าตาโปรแกรมบนมือถือ ซึ่งทำได้โดย ลากส่วนประกอบที่ต้องการไปยัง Viewer

ตอนเริ่มต้นโปรเจกใหม่ จะมีส่วนโปรแกรมที่เป็นหน้าจอมือถือ (Screen1) ก่อนอยู่แล้ว ดังนั้นเราจึงเห็น หน้าจอมือถืออยู่ที่ Viewer ส่วนโปรแกรม Screen1 ใน Components และรายการคุณสมบัติของ Screen1 ใน Properties

สังเกตเลข 1 ที่ตามหลังชื่อส่วนโปรแกรม Screen ใน Viewer หรือใน Components ตัวเลขนี้ถูกใส่เข้าไปในชื่อ เพราะในโปรแกรมหนึ่ง อาจมีส่วนโปรแกรมชนิดเดียวกันมากกว่า 1 ส่วน ถ้าเราลากส่วนโปรแกรมที่มีอยู่แล้วเพิ่มเข้าไปใน Viewer ตัวเลขในชื่อจะเพิ่มขึ้นเองโดยอัตโนมัติ เพื่อป้องกันชื่อซ้ำกัน

ลำดับแรกในการออกแบบโปรแกรม Hello Purr เริ่มด้วยการลากส่วนประกอบปุ่ม (Button) ในหมวด Basic มายังหน้าจอมือถือ สังเกตว่าปุ่มใน Components จะถูกเลือกพร้อมทั้งแสดงคุณสมบัติของปุ่มใน Properties โดยอัตโนมัติ

ปรับแต่งปุ่ม Button

ณ ขณะนี้ ปุ่มที่อยู่ใน Viewer จะมีรูปร่างสี่เหลี่ยมพร้อมข้อความ Text for Button1 (ในกรอบสีส้ม) สิ่งที่เราต้องการแก้ไข คือ ลบข้อความนั้นทิ้ง แล้วใส่รูปแมวบนปุ่มแทน โดยไปที่คุณสมบัติ Text ของปุ่ม แล้วลบข้อความ Text for Button1 ออกไป

จากนั้นไปยังคุณสมบัติ Image คลิก None… (ในกรอบสีฟ้า) จะเห็นหน้าต่างให้เพิ่มไฟล์สื่อต่างๆ ได้ (หรืออีกทางหนึ่ง คลิกปุ่ม Add ในส่วนของ Media ที่อยู่ด้านล่างติดกับ Components) จากนั้นเลือกไฟล์รูปแมวที่ดาวน์โหลดมาแล้วในคอมพิวเตอร์ของตัวเอง

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

sound component

ต่อไปต้องเพิ่มเสียงให้แมว โดยเลือกส่วนโปรแกรมในหมวด Media ลากส่วนโปรแกรมเสียง (Sound) ไปยัง Viewer จากนั้นไปที่คุณสมบัติ Source เพื่อเพิ่มไฟล์เสียงแมวที่ดาวน์โหลดมาก่อนหน้านี้ โดยจะใส่ที่ Source หรือตรง Media ก็ได้ (คล้ายกับตอนใส่ไฟล์รูปแมว) 

ต่อไปเพิ่มส่วนโปรแกรม Label (อยู่ในหมวด Basic) เพื่อเขียนข้อความลงไปบนหน้าจอมือถือ โดยแก้ไขข้อความในคุณสมบัติ Text นอกจากนั้นยังสามารถเพิ่มสีสันให้กับข้อความได้ โดยแก้ไขคุณสมบัติต่างๆ เช่น ขนาด สี รูปแบบ ของตัวอักษร คล้ายๆ ในโปรแกรมเวิร์ด

ถ้าทำตามบทเรียนจาก MIT จะได้หน้าตาโปรแกรมมือถือตามรูปใน Viewer ดังนี้

หน้าตาโปรแกรม Hello Purr

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