พัฒนาเกม RPG บน android ด้วย AndEngine (3)

นานโขที่ไม่ได้ update blog ส่วนตัวเลย พับผ่าสิ!!

วันนี้กลับมามองที่ บทความ การพัฒนาเกม RPG ที่ค้างเอาไว้ ก็คิดว่ายังมีน้องๆ หรือผู้เริ่มศึกษา android อีกหลายต่อหลายคนที่ต้องการ code ในการนำไปเป็นต้นแบบ เพื่อศึกษาหรือต่อยอดต่อไป

เพราะฉะนั้น ^_^ มาต่อกันเลยครับ...

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

มีการควบคุมดังนี้ครับ

• ถ้าเดินไปด้วยแล้วกดปุ่มสี่ฟ้า หน้าปุ่มสีฟ้าจะเปลี่ยน แล้วตัวละครหญิงจะเดินเร็วขึ้น สังเกตค่าที่ B button:speed ครับ จะเพิ่มหรือลดลง
• ตรงคำว่า "แม่น้ำนั้น" ผมใช้ test การแสดงผลภาษาไทย อันนี้ได้ 100% และ x กับ y ก็คือ ตำแหน่ง Position x,y ที่ตัวละครเรากำลังอ้างอิงอยู่
• กดปุ่มสี่แดงจะเหมือนกับเป็นปุ่ม action
• การเล่นเบื้องต้น ก็ควบคุมตัวละครเดินไปพูดคุยกับ UPC ต่างๆ ดูครับ โดยให้ลองไปคุยกับสองตัวที่อยู่ 2 ตำแหน่งตามรูปด้านบนดู นอกนั้นถ้าไปคุยกับคนอื่น จะมีแค่ ... แสดงออกมา

...ดูไม่มีอะไรมาก แต่ก็น่าจะเป็นการเริ่มต้นที่ดีของใครหลายๆ คนสำหรับ เกม RPG บน android นะครับ ส่วนอันนี้ Source Code ครับ รับรองว่า ไม่มี code ส่วนไหน ส่งข้อมูลอะไรไปที่ไหนแปลกๆ แน่นอน ปลอดภัย 100% ครับ (ให้ load เฉพาะจาก github ของผมนะ อย่าไปเอาจากคนอื่นที่ folked ไป ไม่รับประกัน)

source code ครับ : https://github.com/pilotpol/classicrpg2
* หมายเหตุนิดหน่อยครับ ตัว map นี้ผมได้ดัดแปลงตัว library ของ andengine นิดหน่อย เพื่อให้ทำการอ่านค่า layers ของ map ได้หลากหลายมากขึ้นนะครับ เพราะการสร้างเกม RPG ในแบบของผมจะเน้นให้เขียน event ไว้ที่ map โดยตรงครับ


หลังจาก clone git repo มาลงเครื่องแล้ว ก็จะเห็น source code ทั้งหมด เอาไปสร้าง project ตามที่เคยบอกไว้ในตอนก่อนๆ นะครับ แล้วลองรันดู ปุ่มต่างๆ มีคำอธิบายดังนี้ครับ

ตัว control - ตัวนี้โดยปกติทั่วไปแล้ว จะแยกเป็น 2 ส่วน คือ ส่วนฐาน กับ ส่วนที่เป็นจอยสติ๊ก ใน project ของผม ผมทำส่วนที่เป็นจอยสติ๊กเป็นโปร่งใสไว้ ก็เลยจะไม่เห็น (ส่วนตัวชอบเห็นฐานอย่างเดียว) ซึ่งเพื่อนๆ พี่ๆ น้องๆ ที่ clone repo ไป สามารถไปดัดแปลงรูปตามใจชอบได้เลยที่ assets/gfx/ ครับ

...มาเริ่มกันเลย...^_^
ตอนนี้จะพูดถึงเรื่อง map ก่อนครับ
เนื่องจากเป็นเกม RPG ซึ่งแนวคิดคือ จะเป็นฉากๆ ไปเรื่อยๆ และในฉากจะมีตัวละคร ดังนั้นแนวคิดที่ผมวางไว้สำหรับ Project นี้คือ การเอาพวก event ต่างๆ ที่จะเกิดขึ้นไปใส่ไว้ใน map เพื่อที่ว่าหากมีการเปลี่ยนแปลงแก้ไข ก็ทำได้เลยที่ map ไม่ต้องยุ่งกับ code ทำเสร็จก็ build ข้อดีคือสามารถทำงานเป็นทีมได้ในอนาคตครับ

ก่อนจะแก้ไข map ใน project ทุกคนต้องมี โปรแกรม Tiled ก่อนนะครับ หาโหลดได้ฟรี จากที่นี่ครับ http://www.mapeditor.org/ ต้องขอบคุณทีมงานคุณ Thorbjørn Lindeijer ด้วยครับ ใครมีสตางค์ หรือคิดจะทำเกมขึ้น Play Store จริงๆ จังๆ ก็ Donate ให้เขาหน่อยนะครับ

เปิดโปรแกรม Tilted ขึ้นมาครับ แล้วเปิดไฟล์ desert.tmx ซึ่งอยู่ใน /assets/tmx/ ครับ

เมื่อเปิดแล้วจะมีหน้าตาแบบด้านล่าง

อันนี้ด้านซ้าย

อันนี้ด้านขวา ถ้าใครไม่เป็นแบบนี้ลองดู tab เลือกที่ layers นะครับ

จากรูปจะเห็นว่าที่ด้านซ้ายของจอ มีสี่เหลี่ยมที่เขียนว่า origin อยู่ อันนั้นเป็นตำแหน่งเริ่มต้นของตัวละคร ซึ่งข้อมูลที่อยู่ใน map นี้ก็ต้องสัมพันธ์กับฝั่ง Code ที่เขียนด้วยนะครับ โดยความสัมพันธ์ทั้งหลายจะอยู่ใน function readMapObjects ที่บรรทัด 466 ครับ ซึ่งจะอธิบายต่อทีหลัง

การสร้าง map ก็ง่ายๆ ถ้าใครเคยเล่นตัว rpgmaker มาก่อนแล้ว อันนี้ก็แนวคิดเดียวกันครับ โดยเลือกขนาดแผนที่ เอาเมาส์เลือกรูปที่กรอบด้านขวาล่าง แล้วมาระบายในกรอบใหญ่ด้านซ้าย

ให้คลิกที่ objects ครับ หน้ากรอบด้านขวาบนจะเปลี่ยนเป็นแบบนี้

อธิบายตามแผนที่เลยครับ ในขั้นต้นนี้แผนที่เราจะมีตัวละครอยู่ 2 แบบ คือ 

1. UPC จะเป็นหุ่นที่อยู่นิ่งๆ (ก็ขยับแบบยืนอยู่กับที่นะครับ แต่ยังไม่ให้เดินไปไหน) และ
2. Player ตัวละคร ที่เราสามารถบังคับไปไหนมาไหนได้บนแผนที่ครับ

ถ้า ดับเบิ้ลคลิกดูที่ player ตามรูปด้านบน จะเห็นมี property "origin" โผล่ขึ้นมาครับ อันนี้คือ สี่เหลี่ยมที่เรากำหนดไว้ตอนแรกนั้นเอง ใน code จะอ่านค่าพวกนี้แล้วนำไปแสดงผลตามที่ตั้งไว้ครับ

ลองดูที่ upc กันบ้าง เยอะแยะเลยทีเดียว

จะเห็นว่ามี properties หลายตัว มี man1,man2, man3 ... (ต่อไปจากนั้น ผมขี้เกียจเปลี่ยนชื่อครับ ถ้าจะให้ดี ควรเปลี่ยนชื่อให้ตรงกับตัว UPC ที่วางไว้ด้วยนะครับ)

ทีนี้ลองมาดูที่เหลืออีกอันครับ walkable

จะเห็นว่ามีว่างๆ อยู่ ตรงพวกนั้นก็คือ wall ครับ เป็นส่วนที่ไม่ให้ player เราเดินผ่าน ที่ว่างๆ คือ ผมขี้เกียจใส่ชื่ออีกเช่นเดิม จริงๆ ควรใส่นะครับ

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

อันนี้คือ กำหนดชื่อว่า wall โดยมี property 1 ตัว ชื่อ walk มีค่า no ซึ่ง object อย่าง UPC ก็มี property เหมือนกันครับ

*หมายเหตุอีกครั้งนะครับ อันนี้ไม่ใช้มาตรฐานกลางใดๆ เป็นการตั้งมาตรฐานขึ้นมาใช้เองด้วยของผม เพราะฉะนั้นทุกคนจะเปลี่ยนค่าใดๆ ต้องดูให้สัมพันธ์กับ code ด้วยครับ

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

สำหรับตัว UPC ตัวนี้พิเศษกว่าตัวอื่นๆ คือจะมีคำพูดโต้ตอบกับ player เราด้วย ดังตัวอย่าง ใช้ Name ว่า talk นะครับ ลองเปลี่ยนคำพูดเป็นคำอื่น แล้ว save จากนั้นไป build โปรเจ็คใหม่ดู (refresh project ก่อนนะครับ) จะเห็นว่า แอพฯ ที่สร้างขึ้นใหม่ ถ้าผู้หญิงเดินไปพูดกับ UPC คนนี้ คำพูดก็จะเป็นตามที่คุณๆ เปลี่ยนกันไปครับ

ภาษาไทยก็เช่นกัน พิมพ์ลงไปตรงๆ ได้เลย อ่านออก ^_^ แบบนี้ก็ทำเกม RPG ภาษาไทยได้สบายแฮ

ตัว UPC อยู่ตรงขวาล่างครับ

มาดูที่ code กันเล็กน้อยครับ เผื่อว่าใครจบบทความนี้แล้วอยากจะเปลี่ยนอะไรนิดๆ หน่อยๆ แล้วลอง run ใหม่ดู

บรรทัดที่ 472 ของไฟล์ Testgame.java นะครับ จะมี เงื่อนไขอยู่ดังนี้

if (group.getTMXObjectGroupProperties().containsTMXProperty("walk","no"))

ก็คือ ถ้า property walk = no แล้วล่ะก็ ให้ทำตาม code ที่อยู่ใน block ด้านล่างของ if นี้ครับ code ใน block นี้เป็นการ กั้นไม่ให้ตัว player สามารถเดินผ่านได้ โดยใช้ PhysicsFactory ของ 2Dbox เข้าช่วยในการตรวจจับ collision (การปะทะกันของ 2 objects )ครับ

เช่นกันกับ if block อันอื่นครับ ด้านล่างนี้เป็นจุดเริ่มต้นของ player

if (group.getTMXObjectGroupProperties().containsTMXProperty("player", "start"))

ตำแหน่งที่มีชื่อว่า origin นั่นแหละครับ ตัวต่อมาครับ หน้าที่ของ UPC

if (group.getTMXObjectGroupProperties().containsTMXProperty("upc","upc"))

อันนี้จะต้องลงลึกนอกเหนือจากชื่อ layers หน่อย ซึ่งพอมาถึง if ตัวนี้ โปรแกรมจะ loop แล้วตรวจลึกลงไปอีกชั้นว่า ใน TMXProperty ที่ชื่อ upc มี properties ย่อย ทำหน้าที่อะไรอยู่บ้าง และจะให้ทำอะไร อธิบายได้ตาม code ดังนี้ครับ

ใน for loop block จะหาค่า property ที่ชื่อว่า image โดยเทียบดูว่ามีค่าตรงกันกับคำว่า hero หรือเปล่า (ใน if นี่จะคืนค่า true นะครับ

if (object.getTMXObjectProperties().containsTMXProperty("image", "hero"))

ซึ่งก็คือ พวก upc ที่เราใส่ค่าไปใน map นั่นเอง แล้วถ้าใช่ล่ะ ก็ทำสิ่งด้านล่างต่อครับ

Upc hero = new Upc("player.png", object.getX(),
object.getY(), this, scene, this.mPhysicsWorld,
SPEED);
hero.setDirection(2);
hero.setTalk(object.getTMXObjectProperties()
.getValuefromName("talk"));
UPChandle.add(hero); 

• สร้าง object ใหม่คือ UPC (ตัว object อันนี้คือ ไฟล์ UPC.java ที่มีอยู่ครับ ลองศึกษา code หรือปรับเปลี่ยนเพิ่มเติม เพื่อเพิ่มความสามารถให้กับ UPC ได้)
• จากนั้นตั้งว่าตัว UPC ตัวนี้จะให้หันไปด้านไหน (ก็เปลี่ยน code เป็น random ไปได้นะครับ)
• setTalk โดยดึงเอา property ที่มีชื่อว่า talk จาก map มา add เข้าไว้ครับ นั่นคือ ถ้าตัวละครเดินมาแล้วผู้เล่นกด a button (ปุ่มสีแดง) ก็จะแสดง คำพูดที่มุมบนด้านซ้ายของจอ ตามที่ตั้งไว้ใน map ครับ
• สุดท้ายก็ add ตัวละครนี้ ลงไปใน UPChandle ซึ่งทำหน้าในการ draw UPC ทั้งหมดทั้งปวง เข้าไปวางไว้ในแผนที่ครับ

คงจะพอแค่นี้ก่อน สำหรับบทความนี้นะครับ ดูจะ hardcord มากไปหรือเปล่าเนี่ย code เริ่มเยอะ 

เดี๋ยวผมจะมาต่อในบทความหน้า แต่ยังไงก็ลองแก้ไข และปรับเปลี่ยนทั้ง 2 ฝั่งดูได้ตามใจชอบเลยนะครับ เพื่อศึกษาว่า code ไล่ตรงไหน เป็นไปอย่างไร จะได้เข้าใจ code มากยิ่งขึ้นครับ

จบบทความนี้ ผู้ที่สนใจจะสร้างเกม RPG บน android ทั้งหลาย คงมีไอเดียว่าจะทำยังไงได้มากขึ้นนะครับ แต่ก็ยังเหลืออีกเยอะ ทั้งใส่เสียง ใส่ effect บลา...บลา...บลา... ใครคิดจะทำจริงๆ จังๆ อาจจะต้องหาทีมเพิ่มเติม

...หรือไม่ ค้นหาเอาได้จาก google ครับ ผมเองก็เริ่มจากตรงนั้น จนมาแจก code ให้ทุกท่านได้นี่ก็ยังใช้ google ช่วยในสิ่งที่ติดขัดทุกครั้งครับ

ขอให้สนุกกับการเขียนเกม RPG ครับ...