วิธีเปลี่ยนสีพื้นหลังในจุดต่างๆของเกม - Printable Version+- irpg Community (https://irpg.in.th)
+-- Forum: irpg Fabella RPG Maker Academia (https://irpg.in.th/forum-4.html)
+--- Forum: RPG Maker Engine School (https://irpg.in.th/forum-7.html)
+--- Thread:
วิธีเปลี่ยนสีพื้นหลังในจุดต่างๆของเกม (/thread-2850.html)วิธีเปลี่ยนสีพื้นหลังในจุดต่างๆของเกม - XthemeCore - 05-04-2016
ในหลายกรณีเราต้องการเปลี่ยนสีพื้นหลังของเกมให้เป็นไปตามที่เราต้องการ
เรื่องนี้จะต้องอาศัยความรู้เรื่อง HTML นอกเหนือจาก JavaScript ด้วย
ขั้นตอนเปลี่ยนสีพื้นหลังของเกม
ส่วนพื้นหลังของตัวเว็บ
1. เปิดไฟล์ index.html ในโฟลเดอร์เกมของเรา ด้วย Text Editor ใดๆ (ผมใช้ Atom อีกเช่นเคย)
2. ดูที่บรรทัดที่ 13 ตรง background-color: black ให้แทนที่ black ด้วยสีใดๆที่เราต้องการ (สามารถใช้สีที่เป็น Hex color ได้เหมือนเว็บไซต์ปกติ) ดูสีเพิ่มเติมได้ที่ http://www.w3schools.com/colors/colors_picker.asp
![[Image: changebg_00.png]](https://dl.dropboxusercontent.com/u/54427785/article/changebg_00.png)
ตอนนำสีมาใส่ให้ใส่เป็นรหัสที่ขึ้นต้นเครื่องหมาย # เช่น ถ้าผมต้องการสีแดงก็ใส่เป็น #ff0000 หรือใส่ red ก็ได้
3. บันทึกไฟล์แล้ว ทดลองรันบน server เสมือน หรือ อัพขึ้นเว็บดู จะพบว่าได้พื้นหลังเป็นสีแดง ตามต้องการแล้ว
![[Image: changebg_01.png]](https://dl.dropboxusercontent.com/u/54427785/article/changebg_01.png)
แต่เดี๋ยวก่อนปัญหายังไม่จบเพราะหากเราเปิดฉากแผนที่ขึ้นมาดู
![[Image: changebg_02.png]](https://dl.dropboxusercontent.com/u/54427785/article/changebg_02.png)
จะเห็นว่ายังมีส่วนที่เป็นสีดำในฉากแผนที่ ทำให้เราต้องไปยังขั้นตอนถัดไป
ส่วนพื้นหลังของฉากแผนที่ (ScreenSprite)
4. ไปที่โฟลเดอร์ js ในโฟลเดอร์เกมของเราเปิดไฟล์ rpg_core.js ขึ้น
5. ค้นหา this.setBlack(); (บรรทัดที่ 4902)
![[Image: changebg_03.png]](https://dl.dropboxusercontent.com/u/54427785/article/changebg_03.png)
6. แทนที่โค้ด this.setBlack(); ด้วย this.setColor(R, G, B); แทนค่า R,G และ B ด้วยสีในระบบ Hex color (ครั้งนี้ไม่มีการใส่ #) เช่น ถ้าต้องการสีเขียวก็ใส่เป็น this.setColor(0, 255, 0); เป็นต้น ค่าสีสามารถดูได้ที่เว็บไซต์ที่ให้ไปตอนต้นโดยดูที่ค่า rgb(R, G, B)
7. บันทึกไฟล์และทดลองรันดูจะพบว่าที่พื้นหลังของฉากแผนที่เป็นสีเขียวแล้ว (ที่ทำแบบนี้เมื่อให้สังเกตได้ชัดเจน)
![[Image: changebg_04.png]](https://dl.dropboxusercontent.com/u/54427785/article/changebg_04.png)
ส่วนพื้นหลังของหน้าจอโหลด (เดิมไม่มีฉากหลัง)
8.สุดท้าย จะเป็นพื้นหลังในส่วนของฉากโหลดเกม ไปที่ rpg_core.js เหมือนเดิม
9. ค้นหาฟังก์ชั่น Graphics._clearUpperCanvas (บรรทัดที่ 1824) ฟังก์ชั่นนี้จะทำการ clear canvas (ภาพทั้งหมดในหน้าจอเกม) เพื่อทำเตรียมสำหรับวาดใหม่ (redraw)
![[Image: changebg_05.png]](https://dl.dropboxusercontent.com/u/54427785/article/changebg_05.png)
10. ให้มาดูส่วนของคำสั่ง clearRect (บรรทัดที่ 1826) ซึ่งเป็นคำสั่งที่ใช้ล้างหน้าจอนั่นเอง ตรงนี้เราจะแอบลักไก่เล็กน้อย โดยเราจะใส่พื้นหลังลงไปเลยหลังจากล้างหน้าจอเสร็จ ด้วยการเพิ่มโค้ดต่อไปนี้ ไว้ใต้คำสั่ง clearRect
Code:
context.fillStyle = "#0000FF";
context.fillRect(0, 0, this._upperCanvas.width,this._upperCanvas.height);จะได้ฟังก์ชันหน้าตาประมาณนี้
![[Image: changebg_06.png]](https://dl.dropboxusercontent.com/u/54427785/article/changebg_06.png)
หมายเหตุ: คำสั่ง fillStyle ใช้ในการกำหนดสี, Gradient หรือ Pattern ซึ่งเราจะวาดลง canvas ได้ (ตรงนี้ ถ้าจะอธิบายให้เข้าใจคงต้องพูดไปถึงเรื่อง CSS เลย) ส่วนคำสั่ง fillRect จะเป็นการนำ fillStyle ที่กำหนดไว้มาวาดลง canvas โดยเราสามารถกำหนดขนาดได้ (ในที่นี้วาดเต็มพื้นที่ canvas เลย)
11. บันทึกไฟล์และทดลองรัน จะเห็นว่าได้ผลแล้ว (สีดำที่ Now loading เป็นสีของรูปภาพเอง)
![[Image: changebg_07.png]](https://dl.dropboxusercontent.com/u/54427785/article/changebg_07.png)
จริงๆแล้วยังมีอีกหลายจุดที่สามารถแก้พื้นหลังได้ แต่จะขอฝากไว้เพียงเท่านี้ก่อน
แล้วพบกันใหม่โอกาสหน้าครับ
RE: วิธีเปลี่ยนสีพื้นหลังในจุดต่างๆของเกม - slost - 05-04-2016
ถ้าช่วยทำกันมาเยอะๆ IR อาจจะคืนชีพแน่นอน เหอๆ
RE: วิธีเปลี่ยนสีพื้นหลังในจุดต่างๆของเกม - XthemeCore - 05-04-2016
จะให้ข้างๆจอเกมเป็นกล่องแชทใช่ไหมครับ
ถ้าใช่ใส่โค้ดแชทบล็อคใน index.html ได้เลยครับ ตรงส่วน tag body แล้วใช้ CSS เลื่อนตำแหน่งเอา (ถ้าเป็นแชทบล็อคที่เขียนด้วยภาษา php ต้องเปลี่ยนไฟล์เป็น index.php ก่อน)