Renpy Programming คำสั่งเบื้องต้นในการเขียน ตอนที่ 5 (Position And Movement(การวางตำแหน่งของภาพ))
posted on 04 Aug 2011 12:25 by vashiya in Programming, renpyห่างหายไปนานพอสมครสำหรับในบทความนี้
ไม่มีอะไรมากหรอกครับแค่งานมันเยอะน่ะ
เอาล่ะสำหรับเนื้อหาในคราวนี้จะไม่พูดอะไรเลยนอกเสียจากเรื่อง การวางตำแหน่งของภาพ (Position And Movement) อันที่จริงแล้วก็เหมือนอย่างที่ผมบอกในทุกๆหัวข้อที่กล่าวมานะครับว่า
เนื้อหาที่ผมแปลมานั้นยังไม่หมดหรอกครับ ผมแค่ยกในส่วนที่เค้านิยมใช้กันบ่อยๆเท่านั้นเองหากมีใครต้องการที่จะรู้เนื้อหาที่มันนอกเหนือจากนี้ก็สามารถสอบถามเพิ่มเติมได้ครับ เอาล่ะเรามาดูกันในส่วนนี้ดีกว่านะครับว่ามีเนื้อหาอย่างไรบ้าง
- การวางตำแหน่งของภาพ (Position And Movement)
ตำแหน่งของภาพก็เป็นอีกส่วนหนึ่งที่สำคัญเหมือนกัน และก็เป็นอีกส่วนที่มีคำสั่งมากมายไม่แพ้กับหัวข้ออื่นๆเช่นกันครับ
คำสั่ง at คำสั่งนี้จะเป็นการกำหนดตำแหน่ง ของตัวละครครับ ว่าจะต้องปรากฎอยู่ที่ตำแหน่งไหนของหน้าจอ คำสั่งนี้จำเป็นที่จะต้องวางไว้อยู่หลังคำสั่ง show หรือ sceneครับ มีหลักการใช้งานดังนี้
“คำสั่ง show | scene“ “at” function1 [ , function2 ]
โดยที่ค่า functionต่างๆดังนี้
left <--- ตำแหน่งซ้ายของจอ
right <--- ตำแหน่งขวาของจอ
center <--- ตำแหน่งกึ่งกลางจอ
offscreenleft, offscreenright <--- ตำแหน่างนอกขอบจอทางด้านซ้าย / ขวา
Position <--- เป็นฟังก์ชั่นที่กำหนดตำแหน่ง ณ จุดใดๆบนจอ (กำหนดจุดเอง) มีลักษณะการใช้งานเบื้องต้นดังนี้
Position(**properties)
ค่า properties เป็นชุดของพารามิเตอร์ครับ ชุดพารามิเตอร์นี้มีมากมายหลายตัวจนผมจำเป็นต้องขอตัดออกไปก่อน แล้วจะนำมาอธิบายให้อีกทีในบทหลังๆละกันครับ ซึ่งในฟังก์ชั่นนี้ผมจะขออธิบายแค่เฉพาะพารามิเตอร์ที่จำเป็นต่อการทำงานก่อนละกันครับ สามารถไปหาอ่านเพิ่มเติมได้ ที่นี่
xpos <---- กำหนดตำแหน่งของแกน X ของรูป ยึดตามมุมล่างซ้ายของภาพเป็นหลัก ใช้ค่าพิกเซลในการกำหนดค่า (เริ่มต้นจากมุมซ้ายบนของจอ) ในการกำหนดค่า
ypos <---- กำหนดตำแหน่งของแกน Y ของรูป ยึดตามมุมล่างซ้ายของภาพเป็นหลัก ใช้ค่าพิกเซลในการกำหนดค่า (เริ่มต้นจากมุมซ้ายบนของจอ) ในการกำหนดค่า
xanchor <---- กำหนดตำแหน่งแนวแกน X ของรูป ยึดตามมุมบนซ้ายของภาพเป็นหลัก ใช้ค่าทศนิยม(0.0-1.0 เริ่มต้นจากมุมล่างขวาของจอ)ในการกำหนดค่า
yanchor <---- กำหนดตำแหน่งแนวแกน Y ของรูป ยึดตามมุมบนซ้ายของภาพเป็นหลัก ใช้ค่าทศนิยม(0.0-1.0 เริ่มต้นจากมุมล่างขวาของจอ)ในการกำหนดค่า
หมายเหตุ หากเราต้องการที่จะใช้ค่า xposและ ypos ร่วมกับค่า xanchor และ yanchor ก็สามารถทำได้เพียงแต่ว่าผลที่ออกมาจะได้ตำแหน่งที่หักล้างกันระหว่าง ค่า xpos กับ xanchor และค่า ypos กับ yanchor ไปลองเล่นดูละกันครับ
xalign <---- เป็นทางลัดที่เราจะสามารถใช้กำหนดตำแหน่งในแนวแกน X โดยที่เปรียบเสมือนว่าเราได้กำหนดค่า xpos และ xanchor ไว้แล้ว โดยปกติจะกำหนดไว้เป็นค่าทศนิยม (0.0-1.0)
yalign <---- เป็นทางลัดที่เราจะสามารถใช้กำหนดตำแหน่งในแนวแกน Y โดยที่เปรียบเสมือนว่าเราได้กำหนดค่า ypos และ yanchor ไว้แล้ว โดยปกติจะกำหนดไว้เป็นค่าทศนิยม (0.0-1.0)
xoffset <---- เหมือน xalign แต่วิธีกำหนดค่าจะกำหนดเป็นพิกเซลเทน
yoffset <---- เหมือน yalign แต่วิธีกำหนดค่าจะกำหนดเป็นพิกเซลเทน
ตัวอย่างการใช้งาน
show eileen happy at Position(xpos=250, ypos=300, xanchor=0.5, yanchor=0.5)
show eileen happy at Position(xalign=0.5,yalign=0.5)
Move() <--- ฟังก์ชั่นนี้จะเป็นการเลื่อนรูปไปตามตำแหน่งที่เรากำหนด มีลักษณะการใช้งานเบื้องต้นดังนี้
Move (startpos, endpos, time, repeat=False, bounce=False,time_warp = ฟังก์ชั่น,**properties)
โดยพารามิเตอร์แต่ละตัวมีความหมายดังนี้
startpos <--- ตำแหน่งเริ่มต้น
endpos <--- ตำแหน่งปลายทาง
time <--- ระยะเวลาที่ใช้ (คิดเป็นวินาที)
time_warp <---- กำหนดว่าจะเริ่มต้นตำแหน่งในการเคลื่อนที่ ณ เสี้ยวเวลาที่เท่าไหร่ อย่างเช่นว่าในเวลา1วินาทีภาพเคลื่อนที่ไป100พิกเซลหากว่าเรากำหนดให้เป็น 0.5 วินาที ตำแหน่งมันก็จะเริ่มต้นที่ตำแหน่งเมื่อมันเคลื่อนที่ไปแล้ว 0.5 วินาทีก็คือ 50 พิกเซลครับ พารามิเตอร์ตัวนี้ผมเองก็ไม่ค่อยอยากจะแนะนำให้ใช้สักเท่าไหร่ครับเพราะว่าค่อนข้างยุ่งยากในการใช้งาน เนื่องจากว่าเราไม่สามารถที่จะใส่ค่าของเวลาลงไปในพารามิเตอร์ตัวนี้ได้ตรงๆ แต่เราจะต้องสร้างฟังก์ชั่นชึ้นมาเพื่อให้พารามิเตอร์เรียกใช้ขึ้นมาแทนครับ(ตัวนี้ผมจะไม่ขอกล่าวละกันครับแต่ถ้าใครต้องการรู้จริงๆให้มาถามผมอีกทีละกันครับ)
repeat= True /False <--- เป็น True ถ้าต้องการกำหนดให้วนลูป
bounce= True/False <--- เป็น True ถ้าต้องการให้รูปที่เรากำหนดเด้งกลับมายังจุดเริ่มต้นเมื่อมันวิ่งไปถึงจุดสุดท้ายแล้ว
หมายเหตุ ทั้งค่า startpos และ endpos มีหลักการใช้งานดังนี้
การกำหนดตำแหน่งสามารถเรียกกำหนดได้ 2 แบบ คือ
แบบ 2 ตำแหน่ง <--- คือ เราจะเขียน กำหนดตำแหน่งเพียงแกน x และ y เท่านั้น โดยอ้างอิง ณ ที่จุดซ้ายบนของภาพ เช่น (1.0,1.0)
แบบ 4 ตำแหน่ง <--- คือ เราจะเขียน กำหนดตำแหน่งเพียงแกน x และ y เช่นกัน แต่จะอ้างอิง ณ ที่จุดซ้ายบนของภาพ และ จุดกึ่งกลางของภาพด้วย ดังนั้นจะได้เป็น (xแกนซ้าย,y แกนซ้าย,x กึ่งกลาง,y กึ่งกลาง) เช่น (0.0,1.0,0.0,1.0)
โดยปกติแล้วเค้านิยมเรียกใช้งานกันแบบ 2 ตำแหน่งอ่ะครับเพราะว่าเข้าใจง่ายดี (มั้ง 5555)
ส่วนค่าตำแหน่งที่เรากำหนดนั้นจำเป็นที่จะต้องเป็นค่าที่อยู่ ระหว่าง 0.0ถึง 1.0 นะครับ โดยที่ตำแหน่ง (0.0,0.0) จะอยู่ที่ตำแหน่งขวาล่างของจอ และตำแหน่ง (1.0,1.0) จะอยู่ที่ตำแหน่งซ้ายบนของจอครับ
ตัวอย่างการใช้งาน
show eileen happy at Move((1.0, 1.0, 1.0, 1.0), #startpos (แบบ 4 ตำแหน่ง)
(0.0, 1.0, 0.0, 1.0), #endpos (แบบ 4 ตำแหน่ง)
4.0, #time
repeat=True, #repeat
bounce=True) #bounce
pan <--- ฟังก์ชั่นนี้เหมือนกับฟังก์ชั่น Moveทุกประการเพียงแต่ว่า Move มันจะขยับเฉพาะรูปที่เรากำหนดแต่ pan มันจะขยับทั้งรูปและฉากเลย มีลักษณะการใช้งานเบื้องต้นดังนี้
Pan (startpos, endpos, time, repeat=False, bounce=False,time_warp = ฟังก์ชั่น,**properties)
โดยพารามิเตอร์แต่ละตัวสามารถอ่านอ้างอิงจาก Move ได้
หมายเหตุ ค่า startpos และ endpos มีหลักการใช้งานที่แตกต่างกันออกไปดังนี้
ค่าตำแหน่งของMove จะวิ่งอยู่ที่ 0.0 – 1.0 แต่ว่าของ Pan กำหนดตามพิกเซลของรูปเลยโดยที่ตำแหน่งนี้จะอ้างอิงที่จุดซ้ายบนของจอเสมอ
ตัวอย่างการใช้งาน
scene bg onememorial at Pan((0, 800), (0, 0), 10.0)
zoom <---- ตามตัวครับซูมฉากได้ทั้งขยายใหญ่หรือซูมภาพออกก็ไม่หวั่น มีลักษณะการใช้งานเบื้องต้นดังนี้
Zoom(size, start, end, time,time_warp = ฟังก์ชั่น ,bilinear=True / False,opaque=True / False ,**properties)
โดยพารามิเตอร์แต่ละตัวมีความหมายดังนี้
size <---- ขนาดของภาพที่จะทำการแสดงขึ้นมา (กว้าง,สูง) ภาพจะอยู่ที่ตำแหน่ง (0,0) เสมอ
start <---- ขนาดและตำแหน่งของภาพเมื่อเริ่มต้น ( ตำแหน่งที่แกน x, ตำแหน่งที่แกน y ,กว้าง(ขนาดที่ต้องการซูม) ,สูง (ขนาดที่ต้องการซูม))
end <---- ขนาดและตำแหน่งของภาพหลังการซูม ( ตำแหน่งที่แกน x,ตำแหน่งที่แกน y ,กว้าง(ขนาดที่ต้องการซูม) ,สูง (ขนาดที่ต้องการซูม))
time <---- เวลาที่ใช้ในการซูม มีหน่วยเป็นวินาที
time_warp <---- วิธีการใช้งานเหมือนกับ Move
bilinear=True / False <---- เปิดใช้ระบบลบรอยหยักของรูปที่เรากำหนด
opaque=True / False <---- เป็น false ถ้าต้องการให้ฉากหลังของรูปโปร่งใส ถ้าเป็น true ฉากข้างหลังจะออกเละๆไม่น่าดู
ตัวอย่างการใช้งาน
scene washington at Zoom((800, 600), #size
(0, 0, 800, 600), #start
(300, 100 , 400, 300 ),#end
0.5) #time
FactorZoom <----เหมือนกับฟังก์ชั่น Move แต่เป็นการซูมที่ตัวละครแทน มีลักษณะการใช้งานเบื้องต้นดังนี้
FactorZoom(size, start, end, time,time_warp = ฟังก์ชั่น ,bilinear=True / False,opaque=True / False ,**properties)
โดยพารามิเตอร์แต่ละตัวมีความหมายดังนี้
size <---- ขนาดของภาพที่จะทำการแสดงขึ้นมา (กว้าง,สูง)
start <---- ขนาดและตำแหน่งของภาพเมื่อเริ่มต้น กำหนดว่ามีขนาดเป็นกี่เท่าของขนาดปกติ
end <---- ขนาดและตำแหน่งของภาพหลังการซูม กำหนดว่ามีขนาดเป็นกี่เท่าของขนาดปกติ
time <---- เวลาที่ใช้ในการซูม มีหน่วยเป็นวินาที
time_warp <---- วิธีการใช้งานเหมือนกับ Move
bilinear=True / False <---- เปิดใช้ระบบลบรอยหยักของรูปที่เรากำหนด
opaque=True / False <---- เป็น false ถ้าต้องการให้ฉากหลังของรูปโปร่งใส
ตัวอย่างการใช้งาน
show eileen happy at FactorZoom(1.0, 1.1, 1.0) , center
หมายเหตุ เนื่องจากว่าฟังก์ชั่นนี้ไม่สามารถกำหนดได้ว่าจะให้ไปย่อหรือขยายที่ ณ ตำแหน่งใดดังนั้นเราจึงจำเป็นที่จะต้องระบุตำแหน่งในการซูมด้วยทุกครั้งโดยจะต้องเติม “, ตำแหน่ง” ต่อท้ายฟังก์ชั่นนี้ด้วยทุกครั้ง
RotoZoom <---- ชูมือขึ้นแล้วหมุนๆ (555) เป็นคำสั่งที่ใช้ในการหมุนรูปจ๊ะ แถมยังสามารถซูมภาพได้เหมือนกับคำสั่ง Zoom เลยทีเดียวเชียวเพียงแต่ว่าใช้งานค่อนข้างยากไปหน่อยเท่านั้นเอง มีลักษณะการใช้งานเบื้องต้นดังนี้
RotoZoom (rot_start, rot_end, rot_delay, zoom_start, zoom_end, zoom_delay, rot_repeat=False, zoom_repeat=False, rot_bounce=False, zoom_bounce=False, rot_anim_timebase=False, zoom_anim_timebase=False, rot_time_warp=None, zoom_time_warp=None, opaque=True, **properties)
โดยพารามิเตอร์แต่ละตัวมีความหมายดังนี้
rot_start <---- ค่าองศาของรูปเมื่อเริ่มต้น
rot_end <---- ค่าองศาของรูปตอนจบ
rot_delay <---- เวลาในการกระทำการหมุน มีหน่วยเป็นวินาที
zoom_start <---- ขนาดของรูปเมื่อเริ่มต้น (ให้ขยายกี่เท่า) ถ้ากำหนดให้เป็น 0 ก็จะทำให้ภาพมันหดหายไป
zoom_end <---- ขนาดของรูปเมื่อจบการทำงาน (ให้ขยายกี่เท่า) ถ้ากำหนดให้เป็น 0 ก็จะทำให้ภาพมันหดหายไป
zoom_delay <---- เวลาที่ใช้ในการซูม
rot_repeat=False <---- สั่งให้หมุนใหม่(วนลูป)เมื่อหมุนเสร็จแล้ว
zoom_repeat=False <---- สั่งให้ซูมใหม่(วนลูป)เมื่อซูมเสร็จแล้ว
rot_bounce=False <---- สั่งให้หมุนกลับที่เดิมเมื่อหมุนเสร็จแล้ว
zoom_bounce=False <---- สั่งให้ซูมกลับเมื่อซูมเสร็จแล้ว
rot_anim_timebase=False <---- กำหนดให้ใช้เวลาในการหมุนแบบมาตรฐาน(ไม่รุแปลถูกรึเปล่าแต่ว่าจะเซตหรือไม่เซตค่านี้แล้วไม่เห็นความแตกต่างเลยแฮะ)
zoom_anim_timebase=False <---- กำหนดให้ใช้เวลาในการซูมแบบมาตรฐาน(ไม่รุแปลถูกรึเปล่าแต่ว่าจะเซตหรือไม่เซตค่านี้แล้วไม่เห็นความแตกต่างเลยแฮะ)
rot_time_warp=None <---- คล้ายกับ time_warp ของฟังก์ชั่น Move แต่ในที่นี้จะเป็นตำแหน่งของการหมุนแทน
zoom_time_warp=None <---- คล้ายกับ time_warp ของฟังก์ชั่น Move แต่ในที่นี้จะเป็นขนาดของการซูมแทน
opaque=True <---- เป็น false ถ้าต้องการให้ฉากหลังของรูปโปร่งใส ถ้าเป็น true ฉากข้างหลังจะออกเละๆไม่น่าดู
ตัวอย่างการใช้งาน
show magic_circle at RotoZoom(0,360,5,0,1,1,
rot_repeat=True,rot_anim_timebase=True,
opaque=False,xalign=0.5, yalign=0.5)
Revolve <---- เป็นการกำหนดการเคลื่อนที่ของูปที่เรากำหนดให้เคลื่อนที่ไปในแนวเส้นโค้งหรือวงกลม
Revolve (start, end, time, around=(0.5, 0.5), cor=(0.5, 0.5),**kwargs)
start <---- ค่าองศาเริ่มต้น(เมื่อเทียบกับจุดศูนย์กลาง)
end <---- ค่าองศาสุดท้าย(เมื่อเทียบกับจุดศูนย์กลาง)
time <---- เวลาที่ใช้ในการเคลื่อนที่
around=(0.5, 0.5) <---- จุดที่ต้องการให้รูปวิ่งผ่าน ในที่นี้อาจใช้อ้างถึงรัศมี(ระยะห่างของรูปและจุดศูนย์กลาง)ได้ด้วย กำหนดค่าโดยใช้ค่าทศนิยม(0.0-1.0) ค่าดีฟอลที่(0.5, 0.5) จะกำหนดหรือไม่ก็ได้
cor=(0.5, 0.5) <---- จุดศูนย์กลางที่ต้องการให้รูปหมุนรอบ กำหนดค่าโดยใช้ค่าทศนิยม(0.0-1.0) ค่าดีฟอลที่(0.5, 0.5) ยึดมุมขวาล่างที่จุด(0.0,0.0) จะกำหนดหรือไม่ก็ได้
**kwargs <---- เป็นชุดของพารามิเตอร์ เหมือนกับ **properties ในฟังก์ชั่น Move แต่สำหรับชุดพารามิเตอร์นี้จะเป็นพารามิเตอร์ที่ใช้รวมกับฟังก์ชั่น Motion ซึ่งผมจะไม่ขอกล่าวถึง มี 2 ตัวที่จะขอยกมาคือ repeat=False, bounce=False โดยวิธีการใช้งานนั้นเหมือนกับฟังก์ชั่น Move
ตัวอย่างการใช้งาน
show circle at Position(xpos=200, ypos=150), Revolve(0, 360, 2)
เราจะเห็นว่ามีการใช้ฟังก์ชั่นPosition แทนการใช้คำสั่ง around ในฟังก์ชั่น Revolve ได้ด้วยเนื่องจาก cor จะกำหนดเป็นค่าทศนิยมแต่ Position จะสามารถกำหนดเป็นค่า พิกเซลได้ซึ่งเข้าใจง่ายกว่า
ต่อมาก็เป็นฟังก์ชั่นสุดท้ายแล้วครับนั่นก็คือ renpy.layer_at_list ฟังก์ชั่นนี้เราจะใช้ประยุกต์ในการเคลื่อนไหวของภาพ พูดง่ายๆก็คือสั่งให้ภาพทุก layer ขยับพร้อมกันหมดโดยวิธีการใช้นั้นก็แค่ใส่ฟังก์ชั้นต่างๆข้างต้นไว้ในฟังก์ชั่นนี้เท่านั้น
$ renpy.layer_at_list([ ฟังก์ชั่นต่างๆ ])
ตัวอย่างการใช้งาน
$ renpy.layer_at_list([ Zoom((800, 600), (200, 0, 400, 300), (0, 0, 800, 600),0.5)])
##หรือ
$ renpy.layer_at_list([ Move((0, 40), (0, -40), 1.0, bounce=True, repeat=True) ])



รวบรวมเครื่องมือที่มีประโยชน์ 

แต่ว่าเนื่องจากตอนเขียนเวลามันไม่เพราะว่าเนื้อหาในเรื่องนี้ของการตัดฉากนั้นค่อนข้างมากแล้วก็ออกจะทำผมงงๆหน่อย ก็เลยขอเอามาลงแค่เฉพาะเรื่องการตัดฉากอย่างเดียวก่อนครับ
5555 (เพี๊ยะ.......
เกรียนแตก) โดยปกติเราเราสารถเรียกใช้ font ตามที่ windowsมีมาตั้งแต่เริ่มต้น จริงๆแล้วจะเพิ่มเติม font ใหม่ตามแบบที่หนึ่งก็ได้ (ง่ายดี....งั้นไม่ต้องสอนนะข้ามไปเลยละกัน 5555) แต่ถ้าทำอย่างงั้น font ตัวนี้มันก็จะสามาถเอาไปใช้กับโปรแกมตัวอื่นได้ มันทำให้เรารู้สึกไม่ค่อยเป็นส่วนตัวสักเท่าไหร่ต้องการอะไรทีมันปลอดภัย กว่านี้ (5555ใจแคบจัง) เอาล่ะเรามาดูกันดีกว่าว่าจะทำยังไงเพื่อทำให้โปรแกรมรู้จักกับ font ใหม่ของเรา และสามารถตกแต่ง font ให้สวยใสถูกใจเรา

(อันนี้ก็ไม่ทราบเหมือนกันนะครับว่ามันแก้ไขข้อด้อยทางด้านภาษาไปแล้วตั้งแต่เวอร์ชั่นไหน
ก็เอาเป็นว่าเวอร์ชั่นใหม่สุดในขณะนี้ละกันครับ) แต่เอาเป็นว่าวิธีเก่าๆผมก็ยังไม่ลบ ออกละกันถือว่ารู้ไว้หลายๆวิธีก็ดี