ฟรีการเคลื่อนไหวในเกมภาพวาดสามมิติแบบเรียงต่อกัน


9

มีวิธีง่ายๆในการใช้การเคลื่อนไหวฟรีในเกม isometric แบบอิงไทล์หรือไม่? หมายความว่าผู้เล่นจะไม่เพียงกระโดดจากไทล์หนึ่งไปอีกอันหนึ่งทันทีหรือไม่ใช่ "snapped" ไปยังกริด (ตัวอย่างเช่นหากการเคลื่อนไหวระหว่างไทล์เป็นภาพเคลื่อนไหว แต่คุณถูกล็อคไม่ให้ทำอะไรก่อนที่ภาพเคลื่อนไหวจะเสร็จสิ้น) ฉันเป็นมือใหม่จริงๆกับทุกอย่างที่เกี่ยวข้องกับการเขียนโปรแกรมเกม แต่ด้วยความช่วยเหลือของเว็บไซต์นี้และแหล่งข้อมูลอื่น ๆ มันค่อนข้างง่ายที่จะทำสิ่งพื้นฐาน แต่ฉันไม่สามารถหาแหล่งข้อมูลที่เป็นประโยชน์สำหรับปัญหานี้โดยเฉพาะ .

ขณะนี้ฉันได้แก้ไขบางสิ่งที่ใกล้เคียงกับสิ่งนี้: http://jsfiddle.net/KwW5b/4/ (การเคลื่อนไหว WASD) แนวคิดสำหรับการเคลื่อนไหวคือการใช้แผนที่ของเมาส์เพื่อตรวจจับเมื่อผู้เล่นย้ายไปที่ไทล์อื่นแล้วพลิกออฟเซ็ตและส่วนใหญ่ทำงานอย่างถูกต้อง (แต่ละมุมทำให้ผู้เล่นย้ายไปยังตำแหน่งที่ไม่ถูกต้อง: ดูhttp: //www.youtube.com/watch?v=0xr15IaOhrIซึ่งอาจเป็นเพราะฉันไม่สามารถทำงานแผนที่เมาส์เต็มอย่างถูกต้อง) แต่ฉันไม่มีภาพลวงตาว่าอยู่ใกล้กับวิธีแก้ปัญหาที่ดี / มีสติ และอย่างไรก็ตามมันเป็นเพียงการแสดงให้เห็นถึงสิ่งที่ฉันต้องการนำไปใช้


รหัสนั้นดูดีปัญหามีอะไรกันแน่? คุณค่อนข้างสุภาพ (ในทางที่ดี) โค้ดของคุณค่อนข้างดีคุณลักษณะใดขาดหายไปในการสาธิต
AturSams

สิ่งที่ฉันหมายโดยปัญหามุมเป็นชนิดของพฤติกรรมนี้: youtube.com/watch?v=0xr15IaOhrI ฉันไม่สามารถหาวิธีแก้ปัญหาอื่นที่นอกเหนือจากการตรวจสอบปัญหาที่เกิดปัญหาได้และแม้ว่าจะมีบางกรณีที่ผู้เล่นประลองกำลังไปยังตำแหน่งที่ไม่ถูกต้อง แต่อย่างที่ฉันพูดฉันสงสัยว่าการเคลื่อนไหวประเภทนี้มักจะนำไปใช้อย่างไรเนื่องจากฉันไม่เห็นวิธีที่ฉันใช้กับที่อื่น
xtr486

คำตอบ:


10

ก่อนอื่นฉันขอแนะนำให้คุณเปลี่ยนเส้นทางจาก: W - ขึ้น - ซ้าย S - ล่าง - ขวา A - ซ้าย - D - ขวา

ใช้งานง่ายยิ่งขึ้น: W - up S - down A - left D - right

สำหรับข้อกังวลของคุณฉันขอแนะนำให้คุณทำสองฟังก์ชั่นหนึ่งพิกัดไทล์กระเบื้องมีมิติเท่ากันแปลเป็นพิกัดกริดและสองวิธีอื่น ๆ ด้วยวิธีนี้คุณสามารถแยก MVC และทำให้ชีวิตของคุณง่ายขึ้นเมื่อคำนวณกระเบื้องที่ใช้งานอยู่: ป้อนคำอธิบายรูปภาพที่นี่


1
คำตอบของคุณดูดีมาก ๆ แต่ฉันยอมรับว่ามันค่อนข้างจะเกินหัว อย่างไรก็ตามฉันจะพยายามแยกย่อยโซลูชันของคุณในช่วงสองสามวันถัดไป นี่อยู่ใกล้กับสิ่งที่คุณเป็นหรือเปล่า? jsfiddle.net/Sd4ZP/18มันมีข้อผิดพลาดทางตรรกะบางอย่าง (โดยหนึ่ง ฯลฯ ) และเช่นนี้ แต่เท่าที่ฉันรู้แผนที่จากบนลงล่างและมีมิติเท่ากันมีการเคลื่อนไหวเดียวกัน สิ่งที่ฉันยังไม่ได้รับรอบคือวิธีการแปล
ไท

มันดูดีมาก! ฉันจะดูมันในตอนเย็น สิ่งนี้คือการใช้การแปลงในวิธีการวาดภาพกระเบื้องมีมิติเท่ากันลงในฟังก์ชั่น positionToUser () แปลและผกผันใน positionFromUser () วิธีการ
Markus von Broady

ฉันเห็นปัญหา: คุณกำลังวาดมุมมอง izometric ด้วยการใส่รูปภาพแทนที่จะใช้ผ้าใบวาด API มันค่อนข้างสมเหตุสมผลในตอนท้ายของไพ่ izo ของคุณจะมีสีมากกว่านั้น อย่างไรก็ตามสำหรับการแก้ไขข้อบกพร่องคุณควรวาดเส้นระหว่างกระเบื้องที่จะทำให้ชีวิตของคุณง่ายขึ้น อย่างไรก็ตามฉันแยกรหัสของคุณและสร้างฟังก์ชันการแปล positionToUser (x, y) ทดสอบโดยการจัดกึ่งกลางสี่เหลี่ยมสีดำไว้บนแผ่นกระเบื้อง (เพราะในมุมมอง iso จะอยู่กึ่งกลางเสมอ) และเลื่อนเมาส์ไปที่ผืนผ้าใบด้านล่าง - จุดที่แปลจะปรากฏบน izo canvas: jsfiddle.net/tZTXS/1
Markus von Broady

ขอบคุณ! จริงๆแล้วฉันสามารถอนุมานได้ (อย่างใดอย่างหนึ่ง) สิ่งที่ฉันทำเองนั่นคือ isometric offset ในฟังก์ชัน drawIsometric ตอนนี้มันมีลักษณะเช่นนี้: jsfiddle.net/P2eKF/4ซึ่งดูเหมือนจะทำสิ่งที่ฉันถามในคำถามเดิมดังนั้นฉันจะทำเครื่องหมายคำตอบของคุณ :)
xtr486

ฉันดีใจที่คุณทำมัน! ฉันชอบวิธี WA, WD, AS, SD kombinations ที่สำคัญในการจัดแนวการเคลื่อนที่ไปยังแกนภาพสามมิติแทนมุม 45 องศา การทำงานที่ดี.
Markus von Broady

0

ถ้าฉันเข้าใจคุณต้องการให้ผู้เล่นย้ายไทล์ไปที่ไทล์ แต่ไม่ต้องกระโดด คุณสามารถ:

1- เริ่มต้นด้วยกระเบื้อง t0 และชดเชย 0

2- เมื่อผู้เล่นย้ายไปที่ไทล์ t1 ตั้งค่า offset = - (t1 - t0)

3- ในการอัพเดทผู้เล่นหากออฟเซตไม่ใช่ 0 จะลดลงโดยใช้เวลาอัปเดตและความเร็วของผู้เล่น

amount = deltatime * playerSpeed
deltaoff = sqrt(offsetX*offsetX + offsetY*offsetY)
total = min( amount, deltaoff )
offsetX = offsetX - (total * offsetX / deltaoff)
offsetY = offsetY - (total * offsetY / deltaoff)

4- Yo สามารถใช้ offset == 0 ตรวจสอบเพื่อทราบว่าผู้เล่นอยู่บนไทล์

ด้วยวิธีนี้คุณจะได้ผู้เล่นที่เคลื่อนที่ได้ฟรีในแผนที่ แต่ติดกับแผ่นกระเบื้อง

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.