[Renpy] 50. วิธีเปลี่ยน cursor mouse

nooknazha

[Renpy] 50. วิธีเปลี่ยน cursor mouse
เป็นการเปลี่ยนสัญลักษณ์เม้าส์ หรือภาพ Cursor mouse ให้เป็นภาพที่เราสร้างไว้นะค่ะโดยภายในเกมส์ เราสามารถตั้งเงื่อนไขให้สัญลักษณ์เม้าส์แสดงภาพแตกต่างกันได้แล้วแต่สถานะหน้าจอเกมส์ขณะนั้น หรือบริเวณที่เรานำเม้าส์ไปวาง

เช่น  "default"(มาตรฐาน),"say"(สนทนา), "with"(รอ),"menu"(เลือกเมนู)
, "prompt","imagemap", "pause"(หยุด),"mainmenu"(หน้าเมนูหลัก), และ"gamemenu"

รูปแบบการเขียนโค๊ด เราจะเขียนที่ไฟล์ Options.rpy  โค๊ดที่ใช้คือ

1. config.mouse =(image, xoffset, yoffset)

คัดลอกไปที่คลิปบอร์ด

โดยที่
- image คือ ชื่อภาพตามด้วยสกุล
- xoffset คือตำแหน่งจุดที่จะชี้ด้านซ้าย (แนวนอน)
- yoffset คือ  ตำแหน่งจุดที่จะชี้ด้านบน (แนวตั้ง)

ที่ตำแหน่ง xoffset =0 และ yoffset =0 คือ กำหนดตำแหน่งซ้ายบนสุดของภาพ คือตำแหน่งที่จะมีผลเมื่อทำการคลิกเม้าส์

***หากใส่โค๊ดตามตัวอย่างด้านล่าง ภาพเม้าส์จะเป็นแบบเดิมคือสีดำขอบขาว ไม่มีอะไรเปลี่ยนแปลง

1. config.mouse = None

คัดลอกไปที่คลิปบอร์ด

--------------------------------------------------------------------------------------
วิธีทำ
1. เริ่มจาก... สร้างเม้าส์ในโปรแกรมจำพวกเวคเตอร์อย่าง Illustratorจะดีที่สุด เพราะเวลาบันทึกเป็นสกุล .PNG และนำไปแสดงบนหน้าจอเกมส์ขอบภาพเม้าส์จะคมสวย ไม่แตก แต่ถ้าใช้โปรแกรม Illustrator ไม่เป็นก็ทำในPhotoshop หรือใช้โปรแกรม Paint ที่แถมมากับวินโดว์ก็ได้ค่ะ

2. ขนาดภาพเม้าส์ควรประมาณกว้าง 40 ยาว 40ถือว่ากำลังสวย ไม่ใหญ่ไม่เล็กเกินไป

3. จะบันทึกเป็นชื่ออะไรก็ได้ แต่สกุลภาพควรเป็น .gif หรือ .png (เพื่อจะได้ไม่ติดพื้นหลังมาด้วย)

ในบทความนี้ เราจะแนะนำ วิธีการเปลี่ยนสัญลักษณ์ 4 แบบด้วยกันคือ
1. แบบภาพนิ่ง-ภาพเดียวทั้งเกมส์
วิธีนี้เราเตรียมภาพสัญลักษณ์เม้าส์ไว้แค่1 ภาพก็พอค่ะ

CODE:

1. config.mouse = { 'default' : [ ('cursor_mouse.png', 0, 0)] }

คัดลอกไปที่คลิปบอร์ด

ตัวอย่างการเขียน.....


บันทึกไฟล์และรันโปรแกรม จะเห็นว่าสัญลักษณ์เปลี่ยนไปเป็นภาพที่เรากำหนดไว้


ไม่ว่าจะเข้าหน้าสถานะไหนสัญลักษณ์เม้าส์ก็จะเหมือนเดิม


2. แบบภาพอนิเมชั่น-ภาพเดียวทั้งเกมส์
วิธีนี้เราจะต้องเตรียมภาพสัญลักษณ์ไว้มากกว่า 1 ภาพ โดยเราจะต้องกำหนดด้วยว่าภาพแต่ละภาพ คล้ายกับการกำหนดเฟรมทีละเฟรมว่าจะให้สัญลักษณ์เม้าส์มีการเปลี่ยนแปลงไปเป็นในลักษณะไหนและควรทำให้ภาพแต่ละภาพมีความต่อเนื่องกัน

(ตัวอย่างภาพที่จะนำมาใช้)


CODE:

1. 
   
2. init python:
   
3.     config.mouse = {"default": [('cursor_mouse01.png', 0, 0),
   
4.                                ('cursor_mouse02.png', 0, 0),
   
5.                                ('cursor_mouse03.png', 0, 0),
   
6.                                ('cursor_mouse04.png', 0, 0)]
   
7.                    }
   

คัดลอกไปที่คลิปบอร์ด

ตัวอย่างการเขียนโค๊ด.....

บันทึกไฟล์และรันโปรแกรม.... ผลลัพธ์ที่ได้สัญลักษณ์เม้าส์ที่วงกลมตรงกลางจะกระพริบรัวๆต่อเนื่อง


3. หลายภาพ-เปลี่ยนตามสถานะในเกมส์
วิธีนี้เราควรจะเตรียมภาพสัญลักณ์เม้าส์ให้มากกว่า1 ภาพและกำหนดให้มีสีสันต่างกันออกไป เพื่อจะได้สังเกตได้ว่า เมื่อทำการรันโปรแกรมในแต่ละสถานะภายในเกมส์ โค๊ดคำสั่งมีการแสดงถูกต้องหรือไม่

CODE:

1. 
   
2.     config.mouse = {"default": [ ('cursor_mouse01.png', 0, 0)],
   
3.                     "say": [ ('cursor_mouse02.png', 0, 0)],
   
4.                     "with": [ ('cursor_mouse03.png', 0, 0)]
   
5.                     }
   

คัดลอกไปที่คลิปบอร์ด

ตัวอย่างการเขียนโค๊ด.........

บันทึกไฟล์และลองรันโปรแกรมดูค่ะ

สถานะ "default" หรือสถานะ "พื้นฐาน" ทั่วไปภายในเกมส์กำหนดให้เม้าส์แสดงเป็น "สีฟ้า"

สถานะ "With"หรือให้เข้าใจง่ายๆก็คือ สถานะที่ให้เรา "รอ" มันคือสถานะโปรแกรมกำลังโหลดหรือ ยังแสดงเนื้อหาทั้งหมดไม่สมบูรณ์ สถานะของเม้าส์จะกลายเป็น "สีส้ม" ตามที่เรากำหนดไว้เมื่อโปรแกรมโหลดเนื้อหาเสร็จแล้ว cursor ก็จเปลี่ยนสถานะมาเป็น"สีฟ้า" เหมือนเดิม


และเมื่อเข้าสู่ฉากสนทนาของตัวละคร นั่นคือสถานะ "say" cursor เม้าส์ก็จะกลายเป็น"สีเขียว" นั่นหมายถึงเราสามารถใช้การคลิกเม้าส์แทนการกดปุ่ม Enterเพื่ออ่านคำสนทนาประโยคต่อๆไปได้ค่ะ


และ

4. แบบผสม Cursor บางสถานะเป็นอนิเมชั่นบางสถานะกำหนดให้เป็นภาพนิ่ง
วิธีนี้จะเป็นการนำวิธีที่ 2 และวิธีที่ 3มาผสมกันค่ะ

CODE:

1. 
   
2.     config.mouse = {"default": [ ('cursor_mouse01.png', 0, 0),                             
   
3.                                                 ('cursor_mouse02.png', 0, 0),
   
4.                                                 ('cursor_mouse03.png', 0, 0)
   
5.                                               ],
   
6.                                  "say": [ ('cursor_02.png', 0, 0)],
   
7.                                  "with": [ ('cursor_03.png', 0, 0)]
   
8.                                  }
   

คัดลอกไปที่คลิปบอร์ด

ตัวอย่างการเขียนโค๊ดแบบผสม...

ระวังเรื่องเคาะเว้นเวรรคพลาดด้วยนะค่ะ ไม่งั้นโปรแกรมจะแจ้ง Error

ขอให้สนุกกับการสร้างเกมส์นะค่ะ^^"

******************************
บทความโดย นุ้ก
ขอจบบทความแค่เพียงเท่านี้ แล้วพบกันใหม่บทความหน้าค่ะ ^^
(ขอสงวนสิทธิ์อนุญาตให้เผยแพร่เฉพาะในเว็บ www.graphicfufu.comเท่านั้น)