ในหลายกรณีเราต้องการเปลี่ยนสีพื้นหลังของเกมให้เป็นไปตามที่เราต้องการ
เรื่องนี้จะต้องอาศัยความรู้เรื่อง HTML นอกเหนือจาก JavaScript ด้วย

ขั้นตอนเปลี่ยนสีพื้นหลังของเกม

ส่วนพื้นหลังของตัวเว็บ
1. เปิดไฟล์ index.html ในโฟลเดอร์เกมของเรา ด้วย Text Editor ใดๆ (ผมใช้ Atom อีกเช่นเคย)

2. ดูที่บรรทัดที่ 13 ตรง background-color: black ให้แทนที่ black ด้วยสีใดๆที่เราต้องการ (สามารถใช้สีที่เป็น Hex color ได้เหมือนเว็บไซต์ปกติ) ดูสีเพิ่มเติมได้ที่ http://www.w3schools.com/colors/colors_picker.asp



ตอนนำสีมาใส่ให้ใส่เป็นรหัสที่ขึ้นต้นเครื่องหมาย # เช่น ถ้าผมต้องการสีแดงก็ใส่เป็น #ff0000 หรือใส่ red ก็ได้

3. บันทึกไฟล์แล้ว ทดลองรันบน server เสมือน หรือ อัพขึ้นเว็บดู จะพบว่าได้พื้นหลังเป็นสีแดง ตามต้องการแล้ว


แต่เดี๋ยวก่อนปัญหายังไม่จบเพราะหากเราเปิดฉากแผนที่ขึ้นมาดู



จะเห็นว่ายังมีส่วนที่เป็นสีดำในฉากแผนที่ ทำให้เราต้องไปยังขั้นตอนถัดไป

ส่วนพื้นหลังของฉากแผนที่ (ScreenSprite)
4. ไปที่โฟลเดอร์ js ในโฟลเดอร์เกมของเราเปิดไฟล์ rpg_core.js ขึ้น

5. ค้นหา this.setBlack(); (บรรทัดที่ 4902)



6. แทนที่โค้ด this.setBlack(); ด้วย this.setColor(R, G, B); แทนค่า R,G และ B ด้วยสีในระบบ Hex color (ครั้งนี้ไม่มีการใส่ #) เช่น ถ้าต้องการสีเขียวก็ใส่เป็น this.setColor(0, 255, 0); เป็นต้น ค่าสีสามารถดูได้ที่เว็บไซต์ที่ให้ไปตอนต้นโดยดูที่ค่า rgb(R, G, B)

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


ส่วนพื้นหลังของหน้าจอโหลด (เดิมไม่มีฉากหลัง)
8.สุดท้าย จะเป็นพื้นหลังในส่วนของฉากโหลดเกม ไปที่ rpg_core.js เหมือนเดิม

9. ค้นหาฟังก์ชั่น Graphics._clearUpperCanvas (บรรทัดที่ 1824) ฟังก์ชั่นนี้จะทำการ clear canvas (ภาพทั้งหมดในหน้าจอเกม) เพื่อทำเตรียมสำหรับวาดใหม่ (redraw)



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

Code:

context.fillStyle = "#0000FF";
context.fillRect(0, 0, this._upperCanvas.width,this._upperCanvas.height);

โดยที่ #0000FF จะเป็นสีน้ำเงิน (สามารถใช้สีอะไรก็ได้ในรูปฟอร์เม็ต #RRGGBB)

จะได้ฟังก์ชันหน้าตาประมาณนี้


หมายเหตุ: คำสั่ง fillStyle ใช้ในการกำหนดสี, Gradient หรือ Pattern ซึ่งเราจะวาดลง canvas ได้ (ตรงนี้ ถ้าจะอธิบายให้เข้าใจคงต้องพูดไปถึงเรื่อง CSS เลย) ส่วนคำสั่ง fillRect จะเป็นการนำ fillStyle ที่กำหนดไว้มาวาดลง canvas โดยเราสามารถกำหนดขนาดได้ (ในที่นี้วาดเต็มพื้นที่ canvas เลย)

11. บันทึกไฟล์และทดลองรัน จะเห็นว่าได้ผลแล้ว (สีดำที่ Now loading เป็นสีของรูปภาพเอง)


จริงๆแล้วยังมีอีกหลายจุดที่สามารถแก้พื้นหลังได้ แต่จะขอฝากไว้เพียงเท่านี้ก่อน
แล้วพบกันใหม่โอกาสหน้าครับ

ถ้าช่วยทำกันมาเยอะๆ IR อาจจะคืนชีพแน่นอน เหอๆ

จะให้ข้างๆจอเกมเป็นกล่องแชทใช่ไหมครับ
ถ้าใช่ใส่โค้ดแชทบล็อคใน index.html ได้เลยครับ ตรงส่วน tag body แล้วใช้ CSS เลื่อนตำแหน่งเอา (ถ้าเป็นแชทบล็อคที่เขียนด้วยภาษา php ต้องเปลี่ยนไฟล์เป็น index.php ก่อน)