2011-07-26 50 views
7

Ý tưởng: Tôi đang tạo một tập lệnh WebGL đơn giản (sử dụng ba.js tuyệt vời của mrdoob) cho phép người dùng điều khiển máy ảnh trong một thế giới các đối tượng. Chiếc máy ảnh này được cho là để mô phỏng máy ảnh bắn súng người đầu tiên truyền thống (tham khảo Team Fortress 2, chẳng hạn). Tức là, máy ảnh chỉ di chuyển khi di chuyển chuột.Xử lý chuyển động chuột kiểu máy ảnh trong Javascript (cho phép di chuyển chuột liên tục)

Vấn đề: trong Javascript, cách duy nhất để phát hiện chuyển động của chuột là nếu chính con trỏ di chuyển. Bằng cách so sánh, các trò chơi FPS không hiển thị con trỏ - chúng chỉ dựa trên chuyển động của máy ảnh khi di chuyển chuột. Vì vậy, bạn có thể di chuyển chuột của bạn trên tất cả các mousepad theo bất kỳ hướng nào và nó luôn hoạt động.

Trên trình duyệt mặc dù, vì chuyển động của máy ảnh dựa trên con trỏ, bạn không thể di chuyển nhưng cho đến nay. Khi con trỏ chạm vào cạnh của màn hình, người dùng không thể nhìn xa hơn theo hướng đó (ví dụ: bạn di chuyển chuột sang cạnh trái của màn hình, bạn không thể nhìn sang trái nữa).

Giải pháp: Tôi đã nghĩ đến hai giải pháp, nhưng cả hai giải pháp này đều không biết cách triển khai. Hoặc là

  1. Sau khi di chuyển chuột, javascript sẽ đặt lại nó vào giữa màn hình. Bằng cách đó, sau mỗi lần di chuyển chuột, người chơi được tự do di chuyển theo bất kỳ hướng nào. Vấn đề với điều này là, dựa trên nghiên cứu tôi đã thực hiện, Javascript không thể kiểm soát vị trí của chuột của người dùng (dễ hiểu, vì nó sẽ là một phiền toái không thể so sánh trên các trang web ác tính).

  2. Hoặc, chuột "quấn" quanh màn hình. Có nghĩa là, khi người dùng đến một cạnh của màn hình, con chuột sẽ đơn giản tiếp tục sang phía bên kia của màn hình. (xem: http://www.digicowsoftware.com/detail?_app=Wraparound) Tuy nhiên, nó xuất hiện rằng điều này cũng không phải là một khả năng vốn có của javascript, nhưng thay vào đó chỉ là một cái gì đó một chương trình bên thứ ba có thể giải quyết.

Vì vậy, vấn đề có hợp lý không? Nếu vậy, có cách nào tôi có thể thực hiện các giải pháp trên, hoặc là có một số khác tôi đang thiếu?

+0

Thú vị câu hỏi. Không bao giờ đánh giá thấp F11, xem toàn màn hình. :-) –

+0

@zourtney Toàn màn hình không giải quyết được sự cố vì: 1) Chuột bị giới hạn ở giới hạn màn hình; 2) với một thiết lập multimonitor chuột có thể nhận ra khu vực trình duyệt. Kiểm tra phản ứng của tôi ở dưới đó. – Chiguireitor

+0

@Chuộc giả, vâng, tôi nhận ra toàn màn hình một mình là không đủ cho một FPS phù hợp vì những lý do bạn đề cập đến. Tôi đã không nhận ra có một thông số dự thảo cho việc này. Cảm ơn vì đã dạy tôi điều gì đó ngày hôm nay. Câu trả lời của bạn đã upvote của tôi :-) Tôi nghĩ rằng tất cả chúng ta đồng ý loại yêu cầu sẽ chỉ nhận được * nhiều hơn * phổ biến như công nghệ web trở nên phổ biến hơn –

Trả lời

3

Đối với bất cứ ai mà vẫn quan tâm đến việc đạt được điều này, nó bây giờ là hơi có sẵn.

Sử dụng:

document.addEventListener('pointerlockchange', changeCallback, false); 

xem ví dụ http://www.html5rocks.com/en/tutorials/pointerlock/intro/

+0

Vâng! API cũng được mô tả tại đây: http://www.chromium.org/developers/design-documents/mouse-lock – Will

1

Bạn nói đúng về tất cả những điều này. Công nghệ web dựa trên tiêu chuẩn sẽ không cung cấp cho bạn khả năng chụp chuột như bạn muốn.

Điều đó cho biết: bạn có thể tạo (hoặc tìm) một SWF đặc biệt có thể thu thập dữ liệu di chuyển chuột và chuyển dữ liệu đó đến javascript. Nó sẽ không hạn chế chuyển động của con trỏ, mặc dù bạn có thể sử dụng CSS để che giấu con trỏ trong khi bắt chuột đang hoạt động. Nhưng nó có thể có thể tiếp tục kích hoạt các sự kiện "di chuyển chuột trái" ngay cả khi con trỏ đã tới cạnh trái của màn hình.

Bất kỳ SWF nào như vậy có thể sẽ không chụp chuyển động khi con trỏ ở ngoài chế độ xem, tức là trên chrome của trình duyệt.

+0

Urgh. Mặc dù điều đó có thể hiệu quả nhưng tôi cảm thấy việc có một lớp phủ SWF một tập lệnh WebGL sẽ chậm và khó thực hiện. Tuy nhiên, tôi đánh giá cao phản hồi. – Will

+0

SWF sẽ không nhất thiết phải là lớp phủ. Tương tự như cách có thể nhúng SWF ẩn (hoặc 1x1px) vào ví dụ: phát tài nguyên âm thanh, SWF này có thể cung cấp dữ liệu di chuyển chuột đơn giản bằng cách ở trên trang - bất kể con chuột có vượt qua SWF hay không. Tuy nhiên, bạn cần hỏi một số người về Flash về điều này. – Tom

0

Vì rõ ràng là không thể thực hiện điều này như vậy trong HTML5/Javascript, điều gì về biến thể này: xử lý chuột vị trí (không di chuyển chuột) đại diện cho tốc độ quay.

Vì vậy nếu con chuột lớn hơn một ngưỡng nhất định bên trái của tâm, máy ảnh sẽ rẽ trái; xa hơn chuột trái, camera quay nhanh hơn. Để dừng quay, người chơi sẽ di chuyển chuột về phía trung tâm.

Với tôi đây là giao diện người dùng gây phiền nhiễu, ít nhất là ban đầu, nhưng có thể người chơi sẽ quen với nó. Vì chúng tôi không có bất kỳ giải pháp hoàn hảo nào, nên có thể bạn nên thử. Bạn có thể giảm thiểu vấn đề bằng cách cho phép các phím mũi tên hoạt động theo cách chúng thực hiện trong nhiều FPS, xoay máy ảnh khi chúng được nhấn xuống.

+0

Tôi đánh giá cao câu trả lời, mặc dù tôi nghĩ bạn đúng. Giao diện người dùng đó có thể gây khó chịu. Tôi có thể chỉ cần đi với các phím mũi tên. – Will

4

Cộng đồng trên toàn thế giới hiện đang làm việc trên dự thảo đặc điểm kỹ thuật để giải quyết vấn đề này. Những gì bạn đang nói được gọi là "chuột khóa". Tôi đã làm việc một chút về giai đoạn đầu tiên của tiêu chuẩn này để giúp đặt ra những gì cần thiết. Xin vui lòng, bỏ phiếu cho những vấn đề này và đăng ký vào danh sách thư được chỉ định để tất cả chúng tôi có được vấn đề này được khắc phục càng sớm càng tốt.

Tuy nhiên, vẫn có một cách mà bạn có thể đạt được mục tiêu của bạn (đó là cách khác tôi tìm thấy): Một plugin bản địa mà mất quyền kiểm soát của con chuột.

(Tôi đang làm cho một trò chơi quá mà là một FPS nhưng hiện tại sẽ không được phát hành do hạn chế này)

+0

Không nhận ra có một thuật ngữ thực tế cho nó. Cảm ơn bạn về thông tin! Tôi chắc chắn sẽ quảng cáo chiêu hàng. – Will

Các vấn đề liên quan