Thaigraph

 

   

ค้นหา
Thaigraph หน้าฟอรั่ม Ren'Py [renpy] วิธีทำฉากตัวละครนั่งอย ...
ดู: 1717|ตอบ: 11
go

[renpy] วิธีทำฉากตัวละครนั่งอยู่ในรถ

Rank: 7Rank: 7Rank: 7

โพสต์เมื่อ 13-4-2015 00:28 |แสดงโพสต์ทั้งหมด
[renpy] วิธีทำฉากตัวละครนั่งอยู่ในรถ  

จากที่มีท่านสมาชิกสอบถามไว้ -- ถึงจะตอบช้าไปหน่อยแต่ก็ทำเป็นบทความให้แล้วค่ะ ^^

วิธีทำในบทความนี้จะเอามาประยุกต์ให้เป็นฉากตัวละครกำลังนั่งอยู่บนรถ เรือ เรือบิน บอลลูน รถไฟ ฯลฯ หรือจะ เดิน - วิ่ง ก็ได้หมดนะคะ แค่เปลี่ยนภาพในฉากเอา ^^ มาดูกันเลยดีกว่า

ภาพที่ต้องเตรียมควรหลักๆ ก็มี 3 ภาพด้วยกัน (ภาพอาจจะเยอะกว่านี้ก็ได้ ขึ้นอยู่กับคุณเป็นคนกำหนดรายละเอียดในฉาก)

1. ภาพฉากหลัง พูดง่ายๆก็คือภาพที่เราจะมาทำให้มันวิ่งจากซ้ายไปขวากัน ขอแนะนำให้ความกว้างของฉากหลังควรมากกว่า 3 เท่าของขนาดจอภาพในเกมส์ เช่น ถ้าจอภาพของคุณมีขนาด 800pt ฉากหลังที่จะให้เคลื่อนที่ไปตามแนวนอนก็ควรจะมีความกว้าง 2400pt หรือ 3200 หรือ 4000 เป็นต้น (เพิ่มทีละ 800pt)  การกำหนดความกว้างเช่นนี้จะทำให้ง่ายต่อการแบ่งส่วนพื้นที่ในภาพ

** เคล็ดลับที่จะทำให้ฉากหลังเคลื่อนที่ได้ต่อเนื่องไม่สะดุดก็คือ **
- เราจะต้องแบ่งความกว้างของฉากให้ได้เท่าๆกันเป็นช่วงๆ (ดูภาพด้านล่างประกอบ) จะเห็นว่าข้าพเจ้าแบ่งภาพออกเป็น 3 ช่วง คือ ภาพหัว(A), ภาพกึ่งกลาง(B), ภาพท้าย(C) กว้างช่วงละ 800pt เท่าๆกัน(เพราะข้าพเจ้ากำหนดให้หน้าจอเกมส์กว้างเท่ากับ 800*600pt) แต่ถ้าภาพฉากของคุณยาวกว่านั้น คุณจะต้องแบ่งฉากของคุณให้มี 1.ภาพหัว และ 2.ภาพท้าย ที่มีความกว้าง*ยาวเท่ากับหน้าจอเกมส์ ส่วน "ภาพกึ่งกลาง" คุณจะแบ่งช่วงหรือไม่ก็ได้ แต่มีข้อแม้ว่าภาพช่วงกึ่งกลางของคุณจะต้องมีความกว้างมากกว่าขนาดหน้าจอเกมส์ของคุณ

- คุณจะต้องทำให้ "ภาพหัว(A)" และ "ภาพท้าย(C)" เป็นภาพเดียวกัน นั่นความหมายว่าคุณจะต้องใช้ความสามารถในการวาดฉาก(ช่องว่างตรงกลาง)ยังไงก็ได้ให้เชื่อมต่อเนื่องกันจนดูเหมือนเป็นภาพเดียวกัน





2. ภาพภายในพาหนะที่ตัวละครนั่งอยู่ อาจจะเป็น รถยนต์ รถไฟ เรือ หรือเครื่องบิน ก็ได้ เอาตามชอบเลยค่ะ




3. ภาพตัวละครที่จะมีบทในฉากนั้นๆ (ที่ต้องให้แยกกับฉากภายในพาหนะ เพราะบางครั้ง ตัวละครอาจจะเคลื่อนไหวหลายเท่า เช่น พลิกตัว เอียงตัว ขยับแขน-ขา หันหน้า ฯลฯ การแยกภาพกันจะทำให้ควบคุมท่าทางต่างๆของตัวละครได้ง่ายกว่าค่ะ)



ถ้านำทั้ง 3 ภาพมาวางซ้อนกันก็จะได้ประมาณนี้ค่ะ


***************************************

โค๊ดแบบที่หนึ่ง

***************************************


เหมาะสำหรับเกมส์ที่ไม่ซับซ้อนมากนัก คือประมาณว่าทั้งเกมส์มีฉากเคลื่อนที่แค่ 1-2 ฉาก วิธีนี้ ภาพภายในของพาหนะจะถูกแทรกไว้ในโค๊ดควบคุมทิศทางการเคลื่อนที่


ข้อดี    คือ ดูง่าย เวลาจะแก้ไขก็ไม่ต้องไล่หลายจุด


ข้อเสีย คือ คำสั่งเคลื่อนที่จะผูกติดอยู่กับภาพภายในของพาหนะแค่ภาพเดียว หากในเนื้อเรื่องมีฉากเคลื่อนที่ด้วยพาหนะหลายชนิด จะทำให้ต้องเขียนคำสั่งควบคุมทิศทางเคลื่อนที่ซ้ำๆ กันหลายครั้ง


CODE:
  1. define l = Character('Lim', color="#c8ffc8")

  2. image in_car = "in_car2.gif"
  3. image lim =  "in_car3.gif"

  4. image go_home:
  5.      "in_car1.jpg"
  6.      xalign 1.0 yalign 0.0
  7.      linear 3.0 xalign 0.0
  8.      repeat
  9.         
  10. # The game starts here.
  11. label start:
  12.      show go_home
  13.      show in_car
  14.      show lim
  15.      l "You've created a new Ren'Py game."
  16.      l "Once you add a story, pictures, and music, you can release it to the world!"
  17.      return
คัดลอกไปที่คลิปบอร์ด

***************************************

โค๊ดแบบที่สอง(แนะนำ)

***************************************


เหมาะสำหรับเนื้อเรื่องเกมส์ที่มีความซับซ้อนมากขึ้น คือในเกมส์มีฉากเคลื่อนที่หลายฉากด้วยกัน เราจึงจำเป็นต้องแยกส่วนคำสั่งที่ใช้ควบคุมทิศทางการเคลื่อนที่ออกมาต่างหาก

CODE:
  1. define l = Character('Lim', color="#c8ffc8")
  2. image bg_go_home = "in_car1.gif"
  3. image in_car = "in_car2.gif"
  4. image lim =  "in_car3.gif"
  5. transform go_home:
  6.     xalign 1.0 yalign 0.0 #สั่งให้ภาพเคลื่อนจาก ซ้าย >>> ขวา
  7.     linear 3.0 xalign 0.0 #linear คือ ความเร็วในการเคลื่อนที่ของภาพ
  8.     repeat
  9.         
  10. # The game starts here.
  11. label start:
  12.     jump car_go_home
  13.     return

  14. label car_go_home:
  15.     show bg_go_home at go_home #กำหนดให้ภาพ เคลื่อนที่ตามที่กำหนดไว้ใน transform ชื่อ go_home
  16.     show in_car
  17.     show lim
  18.     l "Welcome to Thaigraph and Ren'Py game."
  19.     l "I hope you will get benefits from my tutor!"
  20.     hide bg_go_home
  21.     hide in_car
  22.     hide lim
  23.     jump talk
  24.    
  25. label talk:  
  26.     show bg_go_home at left
  27.     show in_car
  28.     show lim
  29.     l "See you next my tutor."
  30.     return
คัดลอกไปที่คลิปบอร์ด

จากโค๊ดด้านบนเราจะเห็นว่าคำสั่ง transform จะเป็นตัวควบคุมทิศทางการเคลื่อนที่ของฉากหลัง และเรียกใช้ได้โดยการพิมพ์ชื่อ หลังคำสั่ง "at" หากในเนื้อเรื่องเกมส์มีฉากนั่งพาหนะหลายชนิด เช่น มอไซ จักรยาน ฯลฯ ก็จะเรียกใช้ด้วยคำสั่งเดียวกันค่ะ (ดูภาพเชื่อมโยงความสัมพันธ์ด้านล่าง)




ลองมาดูผลลัพธ์ที่ได้หลังจากรันคำสั่งกันค่ะ จะเห็นว่าตัวละครนั่งอยู่กับที่ ส่วนภาพฉากหลังจะเคลื่อนที่ไปเรื่อยๆจากซ้ายไปขวา



ฉากหลังค่อยๆเลื่อนไปเรื่อยๆ มองไป มองไปก็ตาลายได้เหมือนกันนะเนี่ย



สำหรับคนที่ต้องการตัวอย่างไฟล์เกมส์ของบทความนี้สามารถโหลดได้ที่ลิงค์ด้านล่างนี้ค่ะ

[hide][/hide]
บทความโดย NOOKFUFU2
(ขอสงวนสิทธิ์ให้เผยแพร่เฉพาะในเว็บไทยกราฟเท่านั้น!!!)
ไฟล์แนบ: คุณจำเป็นต้องเข้าสู่ระบบก่อนจึงจะสามารถดูและดาวน์โหลดไฟล์แนบได้ หากยังไม่มีแอคเคานต์หรือยังไม่ได้เป็นสมาชิก กรุณาสมัครสมาชิก
บางบทความคุณจำเป็นต้องสมัครสมาชิกแบบ VIP และ SUPERVIP ถึงจะเข้าอ่านบทความได้

Rank: 1

โพสต์เมื่อ 13-4-2015 14:09 |แสดงโพสต์ทั้งหมด
ขอบคุณมากครับ

Rank: 1

โพสต์เมื่อ 25-4-2015 17:05 |แสดงโพสต์ทั้งหมด
ขอบคุณมากๆค่ะ

Rank: 1

โพสต์เมื่อ 30-4-2015 18:04 |แสดงโพสต์ทั้งหมด
ขอบคุณมากค่ะ

Rank: 1

โพสต์เมื่อ 1-5-2015 07:57 |แสดงโพสต์ทั้งหมด
ขอนำไปศึกษาต่อ ขอบคุณครับ

Rank: 1

โพสต์เมื่อ 6-8-2015 18:10 |แสดงโพสต์ทั้งหมด

ขอบคุณมากค่ะ

Rank: 1

โพสต์เมื่อ 3-10-2015 16:54 |แสดงโพสต์ทั้งหมด
ขอบคุณมากครับกำลังหัดทำเลย

Rank: 1

โพสต์เมื่อ 25-10-2015 02:53 |แสดงโพสต์ทั้งหมด
กำลังหักทำเลยช่วยได้มากเลยครับ

Rank: 1

โพสต์เมื่อ 15-12-2015 14:39 |แสดงโพสต์ทั้งหมด
ขอบคุณค่ะ

Rank: 1

โพสต์เมื่อ 26-12-2015 04:54 |แสดงโพสต์ทั้งหมด
ตองลองไปทำดู
ขอบคุณครับ สำหลับเทกนิกดีๆ
คุณต้องเข้าสู่ระบบก่อนจึงจะสามารถตอบกลับ เข้าสู่ระบบ | สมัครสมาชิก


Thaigraph

GMT+7, 27-6-2017 10:40 , Processed in 0.054188 second(s), 22 queries .

Powered by Discuz! X1.5

© 2001-2010 Comsenz Inc. Thai Language by DiscuzThai! Team.