 |
บุคคลทั่วไป: 2
ไม่มีสมาชิกขณะนี้
สมาชิกทั้งหมด: 43
ยังไม่ยืนยัน: 0
สมาชิกล่าสุด: anyka
|
|
|
|
Renpy Programming คำสั่งเบื้องต้นในการเขียน ตอนที่ 6 (Image Operation(ว่าด้วยเรื่องรูปภาพภาค 2))
|
|
|
สวัสดีปีใหม่จ้าทุกท่าน ปีใหม่ปีนี้เที่ยวกันสนุกไม๊ ต้องขออภัยจริงๆที่หลังๆนี้ผมได้เอาเนื้อหาออกมานำเสนอน้อยแล้วก็ช้า เนื่องจากงานค่อนข้างจะมีเข้ามาเยอะขึ้นบวกกับความเข้มงวดของหัวหน้าที่เข้ามาตรวจตราอยู่บ่อยๆ ทำให้บทความนั้นออกมาน้อยกว่าที่ควร 55555 ช่วงนี้เองที่ผมใช้เวลาส่วนใหญ่นอกเหนือเวลางานมาลองนั่งคิดเกมส์ออนไลน์บนหน้าเวปดู (เป็นเกมส์การ์ดน่ะอยากจะหาคนช่วยออกแบบการ์ดให้หน่อยก็ดี ติดอยู่อย่างเดียวไม่รู้จะหาอะไรเป็นรางวัลกับคนออกแบบการ์ดให้ดี) โดยทางทฤษฎีแล้วสามารถทำได้โดยไม่ยากเย็นสักเท่าไหร่แต่ยังไม่เคยลองในทางปฏิบัติจริงเลย ก็เลยรู้สึกกังวลอยู่หน่อยๆ ครั้นอยากจะลงมือทำจริงๆก็หมดช่วงเวลาพักซะแล้วซิ ต้องรีบกลับไปใช้ชีวิตแบบซาลารี่แมนต่อไป คงต้องใช้เวลาหลังเลิกงานวันละนิดวันละหน่อยสักวันคงจะได้มีเกมส์การ์ดออกมาให้เล่นกันนะครับ เอาล่ะหลังจากบ่นเสร็จแล้วเราก็มาดูกันต่อเลยดีกว่าครับ สำหรับเนื้อหาในคราวนี้ นั่นก็คือเรื่อง
- รูปภาพ (Image Operation) สำหรับเรื่องนี้นั้นผมเองก็เคยได้เอ่ยกล่าวไปแล้วในบทแรกๆ แต่ในบทนี้ผมจะขอเจาะให้ลงลึกไปกว่านี้อีกหน่อยนึงนะครับโดยปกติแล้วเวลาที่เราจะประกาศรูปลงตัวแปรนั้นต้องประกาศดังนี้
image ชื่อตัวแปร = "ชื่อรูป"
แต่ในบทนี้ผมจะเพิ่มเติมฟังก์ชั่นต่างๆที่ใช้ในการปรับแต่งรูปครับโดยมีการใช้งานดังนี้ครับ
image ชื่อตัวแปร = ฟังก์ชั่น image
โดยฟังก์ชั่นนั้นมีมากมายหลายตัวดังนี้
im.Crop ตัดรูปภาพให้แสดงเฉพาะในส่วนที่เราต้องการให้แสดง มีหลักการใช้งานดังนี้
im.Crop(im, x, y, w, h) โดยพารามิตอร์แต่ละตัวมีหน้าที่ดังนี้
im ----> ชื่อรูปภาพ
x ----> ตำแหน่งในแนวแกน X ที่ต้องการนำรูปไปวางไว้
y ----> ตำแหน่งในแนวแกน Y ที่ต้องการนำรูปไปวางไว้
ค่า xและ y นั้นตำแหน่ง 0,0 จะอยู่ตรงกลางจอ (แต่ถ้าเรากำหนดตำแหน่งลงไปด้วย ค่าตำแหน่ง 0,0 ก็จะเปลี่ยนไปตรงกึ่งกลางของตำแหน่งที่เรากำหนดครับ )
w ----> พื้นที่ความกว้างที่เราต้องการให้รูปปรากฏออกมา
h ----> พื้นที่ความสูงที่เราต้องการให้รูปปรากฏออกมา
ตัวอย่างการใช้งาน
image cyan crop = im.Crop("cyan.png", 100, 0, 100, 200)
im.Scale ทำการกำหนดขนาดของรูปภาพ มีหลักการใช้งานดังนี้
im.Scale (im, width, height, bilinear=True) โดยพารามิตอร์แต่ละตัวมีหน้าที่ดังนี้
im ----> ชื่อรูปภาพ
width ----> กำหนดความกว้าง
height ----> กำหนดความยาว
bilinear=True ----> เป็น true เมื่อต้องการลบรอยหยักภาพ เป็นค่าดีฟอลอยู่แล้ว
ตัวอย่างการใช้งาน
image cyan small = im.Scale("cyan.png", 16, 32)
im.Composite ทำการ copy รูปภาพออกมาแสดงบนจอกี่รูป,ตำแหน่งไหน,ขนาดเท่าไหร่ก็ได้ตามที่เรากำหนด มีหลักการใช้งานดังนี้
im.Composite(size, *args) โดยพารามิตอร์แต่ละตัวมีหน้าที่ดังนี้
size ----> ขนาดขอรูปที่ต้องการแสดง เช่น (200,300)
*args ----> อเรย์ชุดของรูปที่เราต้องการ copy จะกำหนดเป็นรูปอะไรอยู่ตำแหน่งไหนก็ได้
ตัวอย่างการใช้งาน
im.Composite((200, 407),
(0, 0), "logo0.png",
(0, 50), "logo1.png",
(0, 100), "logo2.png")
จะเห็นว่าค่าบนสุดเป็นการกำหนดขนาดของรูปส่วนอีก 3 บรรทัดล่างเป็นการกำหนดรูปที่จำเป็นต้องใช้ (ตามตัวอย่างนี้ต้องการใช้งานแค่ 3 ภาพจึงมีการประกาศไว้แค่ 3 บรรทัด หากต้องการมากกว่านี้ก็เพิ่มลงไปตามต้องการได้เลย) พิกัดที่ใช้นั้นในที่นี้ตำแหน่ง (0,0)จะอยู่ที่กลางจอ
LiveComposite เหมือนกับ im.Composite เพียงแต่ว่าจะต่างกันตรงที่เราสามารถเรียกใช้งานฟังก์ชั่นต่างๆที่เกี่ยวกับการทำงานของรูปภาพซ้อนลงไปในฟังก์ชั่นนี้ได้ ไม่ว่าจะเป็นฟังก์ชั่นเกี่ยวกับรูปภาพหรือ animetion ก็ตามแต่ มีหลักการใช้งานดังนี้
LiveComposite(size, *args) โดยพารามิตอร์แต่ละตัวมีหน้าที่ดังนี้
size ----> ขนาดขอรูปที่ต้องการแสดง เช่น (200,300)
*args ----> อเรย์ชุดของรูปที่เราต้องการ copy จะกำหนดเป็นรูปอะไรอยู่ตำแหน่งไหนก็ได้
ตัวอย่างการใช้งาน
LiveComposite((200, 407),
(0, 0), anim.Blink(Image("logo.png")),
(0, 50), "logo.png",
(0, 100), "logo.png")
im.Map ตรงนี้เป็นการปรับแต่งสีครับใครที่เคยปรับแต่งค่าสี RGB ใน photoshop ก็คือๆเดียวกันน่ะแหล่ะครับ มีหลักการใช้งานดังนี้
im.Map(im, rmap=im.ramp(0, 255), gmap=im.ramp(0, 255), bmap=im.ramp(0, 255), amap=im.ramp(0, 255))
โดยพารามิตอร์แต่ละตัวมีหน้าที่ดังนี้
im ----> ชื่อรูปภาพ
rmap=im.ramp(0, 255) ----> ปรับแต่งค่าสีแดง
gmap=im.ramp(0, 255) ----> ปรับแต่งค่าสีเขียว
bmap=im.ramp(0, 255) ----> ปรับแต่งค่าสีน้ำเงิน
amap=im.ramp(0, 255) ----> ปรับแต่งค่าความโปร่งใส
ตัวอย่างการใช้งาน
image eileen inverse = im.Map('9a_happy.png', rmap=im.ramp(255,0),gmap=im.ramp(255,0), bmap=im.ramp(255,0))
ต่อมาก็จะขอกล่าวถึงอีกฟังก์ชันหนึ่งที่ทำหน้าที่ return ค่าที่จำเป็นต่อการปรับแต่งสีของฟังก์ชั่น im.Map นั่นก็คือ
im.ramp โดยปกติแล้วค่าพารามิเตอร์ RGB ในฟังก์ชั่น im.Map จะไม่สามารถกำหนดค่าได้ตรงๆแต่จะต้องกำหนดผ่านทางอีกฟังก์ชั่นหนึ่ง ฟังก์ชั่นนี้จะทำการ return ค่าที่จำเป็นต่อการปรับแต่งสี (a 256 character linear ramp ) ในฟังก์ชั่น im.Map มีหลักการใช้งานดังนี้
im.ramp(start,end) โดยพารามิตอร์แต่ละตัวมีหน้าที่ดังนี้
start ----> กำหนดความเข้มของสีหรือความโปร่งใสนั้น (ผลที่ได้ถ้าสีพื้นเป็นโทนสีเข้มอยู่แล้วก็จะเป็นสีนั้นๆ แต่ถ้าเป็นโทนสีอ่อนจะกลายเป็นสีดำ)
end ----> กำหนดความเข้มของสีหรือความโปร่งใสนั้น (ผลที่ได้สีที่ออกมาจะคล้ายๆ multiplyในphotoshop)
im.Recolor ให้ผลเหมือนกับฟังก์ชั่น im.Map ทุกประการแต่สะดวกกว่าตรงที่ไม่ต้องมีฟังก์ชั่น m.ramp เข้ามากำหนดค่า มีหลักการใช้งานดังนี้
im.Recolor(im, rmul=255, gmul=255, bmul=255, amul=255) โดยพารามิตอร์แต่ละตัวมีหน้าที่ดังนี้
im ----> ชื่อรูปภาพ
rmul=255 ----> ปรับแต่งค่าสีแดง (0-255)
gmul=255 ----> ปรับแต่งค่าสีเขียว (0-255)
bmul=255 ----> ปรับแต่งค่าสีน้ำเงิน (0-255)
amul=255 ----> ปรับแต่งค่าความโปร่งใส (0-255)
ตัวอย่างการใช้งาน
image cyan green2 = im.Recolor("cyan.png", 255, 255, 0, 255)
im.Alpha กำหนดความโปร่งใสของรูป มีหลักการใช้งานดังนี้
im.Alpha (image, alpha) โดยพารามิตอร์แต่ละตัวมีหน้าที่ดังนี้
image ----> ชื่อรูปภาพ
alpha ----> ค่าความโปร่งใส มีค่าอยู่ระหว่าง 0.0 1.0 (เรียงจากน้อยไปมาก)
ตัวอย่างการใช้งาน
image cyan alpha = im.Alpha("cyan.png", 0.5)
im.Twocolor เป็นการปรับแต่งค่าสี RGB เละความเข้มเหมือนกันแต่มีเกณฑ์ในการปรับก็คือจะปรับเฉพาะ 2 โทนสีเท่านั้น คือ ขาวกับดำ(รูปขาวดำ) โดยเราต้องกำหนดลงในค่าอเรย์ดังนี้ (R,G,B,A) ----> (แดง,เขียว,น้ำเงิน,ความเข้ม) โดยค่าที่เรากำหนดนั้นจะอยู่ระหว่าง 0-255 ผมไม่แน่ใจนะว่าถ้าเราใช้รูปอื่นที่นอกจากรูปขาวดำมันจะขึ้น Error รึเปล่านะ
im.Twocolor (im, white, black) โดยพารามิตอร์แต่ละตัวมีหน้าที่ดังนี้
im ----> ชื่อรูปภาพ
white ----> เมื่อพบโทนสีขาวจะทำการปรับแต่งสีและความเข้มสีตามที่เรากำหนด
black ----> เมื่อพบโทนสีดำจะทำการปรับแต่งสีและความเข้มสีตามที่เรากำหนด
ตัวอย่างการใช้งาน
image cyan twocolor = im.Twocolor("blackwhite.png" , (0, 255, 255, 255) , (255, 255, 0, 255) )
im.Flip กลับภาพ เช่นกลับซ้ายกลับขวาหรือกลับบนกลับล่าง มีหลักการใช้งานดังนี้
im.Flip (im, horizontal=False, vertical=False) โดยพารามิตอร์แต่ละตัวมีหน้าที่ดังนี้
im ----> ชื่อรูปภาพ
horizontal=True/False ----> เป็น True เมื่อต้องการกลับซ้ายกลับขวาภาพ
vertical=True/False ----> เป็น True เมื่อต้องการกลับบนกลับล่างภาพ
ตัวอย่างการใช้งาน
image eileen flip = im.Flip("happy.png", vertical=True)
im.Sepia ทำสีภาพออกมาให้ออกมาในโทนสีน้ำตาลเหมือนกระดาษเก่าๆอะไรประมาณนั้น มีหลักการใช้งานดังนี้
im.Sepia (im, tint=(R, G, B), desat=(R, G, B)) โดยพารามิตอร์แต่ละตัวมีหน้าที่ดังนี้
im ----> ชื่อรูปภาพ
tint=(R, G, B) ----> กำหนดความเข้ม-จางของสี RGB มีค่าอยู่ระหว่าง 0 1 จะกำหนดหรือไม่ก็ได้
desat=(R, G, B) ----> กำหนดค่าสี RGB เอง แต่ว่าค่าที่เรากำหนดในนี้นั้นจะต้องมีผลรวมของทั้ง 3 ตัวเท่ากับ 1 จะกำหนดหรือไม่ก็ได้
ตัวอย่างการใช้งาน
image eileen = im.Sepia("happy.png)
im.Grayscale ทำสีออกมาเป็นภาพขาวดำ มีหลักการใช้งานดังนี้
im.Grayscale(im, desat=(R,G,B)) โดยพารามิตอร์แต่ละตัวมีหน้าที่ดังนี้
im ----> ชื่อรูปภาพ
desat=(R, G, B) ----> กำหนดค่าสี RGB เอง แต่ว่าค่าที่เรากำหนดในนี้นั้นจะต้องมีผลรวมของทั้ง 3 ตัวเท่ากับ 1 จะกำหนดหรือไม่ก็ได้
ตัวอย่างการใช้งาน
image eileen = im.Grayscale("happy.png)
im.MatrixColor เป็นการปรับแต่งค่าสี RGB และความเข้มสีที่ใช้ Matrix ในการกำหนดค่าครับ ซึ่งตัวนี้ถึงมันจะกำหนดค่า RGB แต่ผลที่เราปรับแต่งออกมาอาจจะไม่ได้เป็นสีแดงเขียวหรือน้ำเงินก็ได้ มีหลักการใช้งานดังนี้
im.MatrixColor (im, matrix) โดยพารามิตอร์แต่ละตัวมีหน้าที่ดังนี้
im ----> ชื่อรูปภาพ
matrix ----> ค่าแบบ Matrix ค่าที่เราใช้จะอยู่ระหว่าง -1 ถึง 1 เราจะสามารถแทนค่าใน Matrix ได้ดังนี้
[ a, b, c, d, e,
f, g, h, i, j,
k, l, m, n, o,
p, q, r, s, t ]
โดยมีสูตรการคำนวณดังนี้
R' = (a * R) + (b * G) + (c * B) + (d * A) + (e * 255)
G' = (f * R) + (g * G) + (h * B) + (i * A) + (j * 255)
B' = (k * R) + (l * G) + (m * B) + (n * A) + (o * 255)
A' = (p * R) + (q * G) + (r * B) + (s * A) + (t * 255)
โดยที่ ค่า R,G,B แล A เป็นค่าส่วนประกอบของสีนั้น (ผมก็มะรู้เหมือนกันว่าเท่าไหร่ เพราะเค้าไม่ได้เขียนบอกมา) จากนั้นค่าที่ได้ออกมาก็จะเป็นค่า R', G' ,B' และ A' นั่นเอง
ตัวอย่างการใช้งาน
image eileen inverted = im.MatrixColor("eileen_happy.png",
[ -1, 0, 0, 0, 1,
0, -1, 0, 0, 1,
0, 0, -1, 0, 1,
0, 0, 0, 1, 0, ])
ผลที่ได้นั้นจะเป็นการinvert สีครับ
โดยปกติแล้วมีน้อยคนนักที่จะบ้าพลังนั่งคำนวณค่า Matrix เพื่อกำหนดค่าสีด้วยตนเองดังนั้นเราจึงมีฟังก์ชั่นต่างๆเพื่อช่วยส่งเสริมการทำงานให้หลากหลายและง่ายดายยิ่งขึ้นครับ
im.matrix ----> อีกหนึ่งฟังก์ชั่นที่ส่งเสริมความบ้าพลัง เปรียบเสมือนตัวแปรที่เป็นชนิดค่า Matrix นั่นเอง มีหลักการใช้งานดังนี้
im.matrix(matrix)
ตัวอย่างการใช้งาน
$ brightness = im.matrix([ 1, 0, 0, 0, .1,
0, 1, 0, 0, .1,
0, 0, 1, 0, .1,
0, 0, 0, 1, 0 ])
image eileen altered = im.MatrixColor("eileen_happy.png", brightness)
im.matrix.invert() ----> เป็นค่าคงที่ที่กำหนดค่า Matrix ให้อยู่ที่ค่า
-1, 0, 0, 0, 1,
0, -1, 0, 0, 1,
0, 0, -1, 0, 1,
0, 0, 0, 1, 0
ซึ่งผลที่ได้ออกมานั้นจะเป็นการ invert สีครับ
ตัวอย่างการใช้งาน
image eileen inverted2 = im.MatrixColor("eileen_happy.png",im.matrix.invert())
im.matrix.brightness ----> เป็นฟังก์ชั่นที่ใช้กำหนดค่า Matrix ให้แสดงความสว่างของภาพ มีหลักการใช้งานดังนี้
im.matrix.brightness (b)
โดยที่พารามิเตอร์ b คือค่าความสว่างซึ่งอยู่ระหว่าง -1 ถึง1 หากเป็น -1 จะมืด ส่วน 1 สีจะสว่าง
ตัวอย่างการใช้งาน
image eileen = im.MatrixColor("eileen_happy.png"im.matrix.brightness (-0.5))
im.matrix.tint ----> กำหนดความเข้ม-จางของสี RGB ให้อยู่ในค่า Matrix มีหลักการใช้งานดังนี้
im.matrix.tint(R,G,B) โดยพารามิตอร์แต่ละตัวมีหน้าที่ดังนี้
R ----> ค่าความเข้ม-จางของสีแดง ค่าอยู่ระหว่าง (0 - 1)
G ----> ค่าความเข้ม-จางของสีเขียว ค่าอยู่ระหว่าง (0 - 1)
B ----> ค่าความเข้ม-จางของสีน้ำเงิน ค่าอยู่ระหว่าง (0 - 1)
ตัวอย่างการใช้งาน
image eileen = im.MatrixColor("eileen_happy.png", im.matrix.tint(01.,0.7,0.5))
im.matrix.saturation ----> กำหนดความซีดของสีให้อยู่ในค่า Matrix มีหลักการใช้งานดังนี้
im.matrix.saturation(level, desat=(R, G, B)) โดยพารามิตอร์แต่ละตัวมีหน้าที่ดังนี้
level ----> กำหนดความซีดของสี มีค่าอยู่ระหว่าง 0 - 1
desat=(R, G, B) ----> กำหนดค่าสี RGB เอง แต่ว่าค่าที่เรากำหนดในนี้นั้นจะต้องมีผลรวมของทั้ง 3 ตัวเท่ากับ 1 จะกำหนดหรือไม่ก็ได้
ตัวอย่างการใช้งาน
image eileen = im.MatrixColor("eileen_happy.png", im.matrix.saturation(0.5,desat=(0.2126, 0.7152, 0.0722))
ในเรื่องเกี่ยวกับ Matrix นั้นผมเองก็ยังทดลองไม่หมดเหมือนกันหากใครว่างๆก็ลองๆปรับแต่งเล่นๆดูก็ได้ครับว่าจะกำหนดค่าอะไรแล้วได้สีอะไรออกมาเพราะว่าฟังก์ชั่นนี้สามารถปรับแต่งได้หลากหลายจริงๆ ซึ่งบางตัวอย่างที่ผมได้อ่านมาจะมีการคูณ Matrix เพื่อคำนวณค่าสีใหม่ๆด้วย (เข้าหม้อไปหมดแล้วอ่ะเรื่องนี้ = = )
|
|
|
โดย vashiya
เมื่อ January 05 2008 11:23:06
(569) อ่าน พิมพ์
|
|
|
|
© 2007 - 2010 thaiaat.com
|
|
|
|
Powered by  v6.00.109 ฉ 2003-2005
Theme Elephant v1.00 
|
|
|
