Thaigraph

 

   

ค้นหา
Thaigraph หน้าฟอรั่ม Ren'Py [renpy] วิธีทำฉากตัวละครนั่งอย ...
ดู: 1958|ตอบ: 13
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, 21-10-2017 10:17 , Processed in 0.027924 second(s), 22 queries .

Powered by Discuz! X1.5

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

Top 10 Best Sellers in Clothing for 2017 Top 10 Best Sellers in Clothing Best Sellers in Clothing
Top 10 Best Sellers in Books reviewer 2017 Top 10 Best Sellers in Books Best Sellers in Books