irpg Community
วิธีเปลี่ยนสีพื้นหลังในจุดต่างๆของเกม - 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]

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

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

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

[Image: changebg_02.png]

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

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

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

[Image: 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]

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

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

[Image: changebg_05.png]

10. ให้มาดูส่วนของคำสั่ง clearRect (บรรทัดที่ 1826) ซึ่งเป็นคำสั่งที่ใช้ล้างหน้าจอนั่นเอง ตรงนี้เราจะแอบลักไก่เล็กน้อย โดยเราจะใส่พื้นหลังลงไปเลยหลังจากล้างหน้าจอเสร็จ ด้วยการเพิ่มโค้ดต่อไปนี้ ไว้ใต้คำสั่ง clearRect
Code:
context.fillStyle = "#0000FF";
context.fillRect(0, 0, this._upperCanvas.width,this._upperCanvas.height);
โดยที่ #0000FF จะเป็นสีน้ำเงิน (สามารถใช้สีอะไรก็ได้ในรูปฟอร์เม็ต #RRGGBB)

จะได้ฟังก์ชันหน้าตาประมาณนี้
[Image: changebg_06.png]

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

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

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


RE: วิธีเปลี่ยนสีพื้นหลังในจุดต่างๆของเกม - slost - 05-04-2016

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


RE: วิธีเปลี่ยนสีพื้นหลังในจุดต่างๆของเกม - XthemeCore - 05-04-2016

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