Home-theater-designers
Phaser là một khuôn khổ để tạo trò chơi điện tử 2D. Nó sử dụng HTML5 Canvas để hiển thị trò chơi và JavaScript để chạy trò chơi. Lợi ích của việc sử dụng Phaser so với vanilla JavaScript là có một thư viện rộng lớn hoàn thiện phần lớn vật lý của trò chơi điện tử cho phép bạn tập trung vào việc thiết kế trò chơi.
Phaser giảm thời gian phát triển và giảm bớt quy trình làm việc. Hãy cùng Phaser tìm hiểu cách tạo một trò chơi cơ bản.
Tại sao phát triển với Phaser?
Phaser tương tự như các ngôn ngữ lập trình trực quan khác ở chỗ chương trình dựa trên các bản cập nhật được lặp lại. Phaser có ba giai đoạn chính: tải trước, tạo và cập nhật.
Khi tải trước, nội dung của trò chơi được tải lên và có sẵn cho trò chơi.
Tạo khởi tạo trò chơi và tất cả các yếu tố bắt đầu trò chơi. Mỗi chức năng đó được chạy một lần khi trò chơi được bắt đầu.
Mặt khác, cập nhật chạy theo vòng lặp trong suốt trò chơi. Nó là workhorse cập nhật các yếu tố của trò chơi để làm cho nó trở nên tương tác.
Thiết lập hệ thống của bạn để phát triển trò chơi với Phaser
Mặc dù Phaser chạy trên HTML và JavaScript, các trò chơi thực sự được chạy phía máy chủ chứ không phải phía máy khách. Điều này có nghĩa là bạn sẽ cần phải chạy trò chơi của mình trên máy chủ cục bộ của bạn . Chạy phía máy chủ trò chơi cho phép trò chơi của bạn truy cập các tệp và nội dung bổ sung bên ngoài chương trình. Tôi đề nghị sử dụng XAMPP để thiết lập máy chủ cục bộ nếu bạn chưa có một thiết lập.
Đoạn mã dưới đây sẽ giúp bạn thiết lập và chạy. Nó thiết lập một môi trường trò chơi cơ bản.
var config = {
type: Phaser.AUTO,
backgroundColor: 0xCCFFFF,
width: 600,
height: 600,
physics: {
default: 'arcade'
},
scene: {
preload: preload,
create: create
}
};
var gamePiece;
var game = new Phaser.Game(config);
function preload(){
this.load.image('gamePiece', 'img/gamePiece.png');
}
function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
}
Để chạy, trò chơi sẽ yêu cầu một hình ảnh PNG có tên là 'gamePiece' được lưu vào thư mục 'img' trên máy chủ cục bộ của bạn. Để đơn giản, ví dụ này sử dụng hình vuông màu cam 60xgame de60px. Trò chơi của bạn sẽ trông giống như sau:
Nếu bạn gặp sự cố, hãy sử dụng trình gỡ lỗi của trình duyệt để tìm ra sự cố. Việc thiếu dù chỉ một ký tự có thể gây ra sự tàn phá, nhưng nhìn chung, trình gỡ lỗi của bạn sẽ bắt được những lỗi nhỏ đó.
Giải thích mã thiết lập
Cho đến nay, trò chơi không làm được bất cứ điều gì. Nhưng chúng tôi đã bao phủ rất nhiều mặt đất! Hãy xem mã chuyên sâu hơn.
Để trò chơi Phaser chạy, bạn cần nhập thư viện Phaser. Chúng tôi thực hiện việc này trên dòng 3. Trong ví dụ này, chúng tôi đã liên kết với mã nguồn, nhưng bạn có thể tải nó xuống localhost của mình và tham chiếu tệp.
windows stop code clock watchdog timeout
Phần lớn mã cho đến nay định cấu hình môi trường trò chơi, mà biến cấu hình các cửa hàng. Trong ví dụ của chúng tôi, chúng tôi đang thiết lập một trò chơi phaser với nền màu xanh lam (CCFFFF trong mã màu hex) là 600px x 600px. Hiện tại, vật lý trò chơi đã được đặt thành Arcadian , nhưng Phaser cung cấp vật lý khác.
Cuối cùng, sân khấu yêu cầu chương trình chạy tải trước chức năng trước khi trò chơi bắt đầu và tạo ra chức năng để bắt đầu trò chơi. Tất cả thông tin này được chuyển đến đối tượng trò chơi được gọi là trò chơi .
Có liên quan: 6 máy tính xách tay tốt nhất để lập trình và mã hóa
Phần mã tiếp theo là nơi trò chơi thực sự thành hình. Chức năng tải trước là nơi bạn muốn khởi tạo bất kỳ thứ gì bạn cần để chạy trò chơi của mình. Trong trường hợp của chúng tôi, chúng tôi đã tải trước hình ảnh của phần trò chơi của chúng tôi. Tham số đầu tiên của .hình ảnh đặt tên cho hình ảnh của chúng ta và cái thứ hai cho chương trình biết vị trí cần tìm hình ảnh.
Hình ảnh trò chơi đã được thêm vào trò chơi trong chức năng tạo. Dòng 29 nói rằng chúng tôi đang thêm trò chơi hình ảnh dưới dạng một sprite 270px bên trái và 450px xuống từ góc trên cùng bên trái của khu vực trò chơi của chúng tôi.
Làm cho trò chơi của chúng tôi chuyển động
Cho đến nay, đây khó có thể được gọi là một trò chơi. Có điều, chúng tôi không thể di chuyển phần trò chơi của mình. Để có thể thay đổi mọi thứ trong trò chơi của mình, chúng tôi sẽ phải thêm chức năng cập nhật. Chúng tôi cũng sẽ phải điều chỉnh cảnh trong biến cấu hình để cho trò chơi biết chức năng nào sẽ chạy khi chúng tôi cập nhật trò chơi.
Thêm chức năng cập nhật
Cảnh mới trong cấu hình:
scene: {
preload: preload,
create: create,
update: update
}Tiếp theo, thêm một chức năng cập nhật bên dưới chức năng tạo:
cách tốt nhất để ghi lại các chương trình truyền hình
function update(){
}Nhận đầu vào chính
Để người chơi điều khiển quân cờ bằng các phím mũi tên, chúng ta sẽ phải thêm một biến để theo dõi người chơi đang nhấn phím nào. Khai báo một biến có tên keyInputs bên dưới nơi chúng ta đã khai báo gamePieces. Khai báo nó ở đó sẽ cho phép tất cả các hàm truy cập vào biến mới.
var gamePiece;
var keyInputs;Biến keyInput phải được khởi tạo khi trò chơi được tạo trong hàm tạo.
function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys();
}Bây giờ trong chức năng cập nhật, chúng tôi có thể kiểm tra xem người chơi có đang nhấn phím mũi tên hay không, và nếu có, hãy di chuyển phần trò chơi của chúng tôi cho phù hợp. Trong ví dụ bên dưới, phần trò chơi được di chuyển 2px, nhưng bạn có thể đặt con số đó lớn hơn hoặc nhỏ hơn. Di chuyển mảnh 1px tại một thời điểm có vẻ hơi chậm.
function update(){
if(keyInputs.left.isDown){
gamePiece.x = gamePiece.x - 2;
}
if(keyInputs.right.isDown){
gamePiece.x = gamePiece.x + 2;
}
if(keyInputs.up.isDown){
gamePiece.y = gamePiece.y - 2;
}
if(keyInputs.down.isDown){
gamePiece.y = gamePiece.y + 2;
}
}Trò chơi có một nhân vật có thể di chuyển ngay bây giờ! Nhưng để thực sự là một trò chơi, chúng ta cần một mục tiêu. Hãy thêm một số trở ngại. Vượt chướng ngại vật là cơ sở cho rất nhiều trò chơi trong kỷ nguyên 8-bit.
Thêm chướng ngại vật vào trò chơi
Ví dụ mã này sử dụng hai mảnh chướng ngại vật được gọi là chướng ngại vật 1 và chướng ngại vật 2. chướng ngại vật1 là một hình vuông màu xanh lam và chướng ngại vật 2 là màu xanh lá cây. Mỗi hình ảnh sẽ cần phải được tải trước giống như sprite giao tử.
function preload(){
this.load.image('gamePiece', 'img/gamePiece.png');
this.load.image('obstacle1', 'img/obstacle1.png');
this.load.image('obstacle2', 'img/obstacle2.png');
}Sau đó, mỗi sprite chướng ngại vật sẽ cần được khởi tạo trong chức năng tạo, giống như giao tử.
function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys();
obstacle1 = this.physics.add.sprite(200, 0, 'obstacle1');
obstacle2 = this.physics.add.sprite(0, 200, 'obstacle2');
}Làm cho chướng ngại vật di chuyển
Để di chuyển các quân lần này, chúng tôi không muốn sử dụng đầu vào của trình phát. Thay vào đó, hãy để một mảnh di chuyển từ trên xuống dưới và mảnh kia di chuyển từ trái sang phải. Để làm điều đó, hãy thêm mã sau vào chức năng cập nhật:
obstacle1.y = obstacle1.y + 4;
if(obstacle1.y > 600){
obstacle1.y = 0;
obstacle1.x = Phaser.Math.Between(0, 600);
}
obstacle2.x = obstacle2.x + 4;
if(obstacle2.x > 600){
obstacle2.x = 0;
obstacle2.y = Phaser.Math.Between(0, 600);
}Đoạn mã trên sẽ di chuyển chướng ngại vật1 xuống màn hình và chướng ngại vật2 qua khu vực trò chơi 4px mỗi khung hình. Sau khi một hình vuông tắt màn hình, nó sẽ được di chuyển trở lại phía đối diện tại một điểm ngẫu nhiên mới. Điều này sẽ đảm bảo rằng luôn có một chướng ngại vật mới cho người chơi.
Phát hiện va chạm
Nhưng chúng tôi vẫn chưa hoàn thành. Bạn có thể nhận thấy rằng người chơi của chúng tôi có thể vượt qua ngay các chướng ngại vật. Chúng ta cần làm cho trò chơi phát hiện ra khi người chơi chạm phải chướng ngại vật và kết thúc trò chơi.
Thư viện vật lý Phaser có một máy dò va chạm. Tất cả những gì chúng ta cần làm là khởi tạo nó trong hàm create.
this.physics.add.collider(gamePiece, obstacle1, function(gamePiece, obstacle1){
gamePiece.destroy();
obstacle.destroy();
obstacle2.destroy();
});
this.physics.add.collider(gamePiece, obstacle2, function(gamePiece, obstacle2){
gamePiece.destroy();
obstacle.destroy();
obstacle2.destroy();
});Phương thức máy va chạm yêu cầu ba tham số. Hai tham số đầu tiên xác định vật thể nào đang va chạm. Vì vậy, ở trên, chúng ta có hai máy va chạm được thiết lập. Máy thứ nhất phát hiện khi phôi va chạm với chướng ngại vật1 và máy va chạm thứ hai tìm kiếm va chạm giữa phôi và chướng ngại vật2.
Tham số thứ ba cho máy va chạm biết phải làm gì khi phát hiện ra va chạm. Trong ví dụ này, có một chức năng. Nếu có va chạm, tất cả các yếu tố của trò chơi sẽ bị phá hủy; điều này dừng trò chơi. Bây giờ người chơi sẽ chuyển đổi trò chơi nếu họ gặp chướng ngại vật.
Hãy thử phát triển trò chơi với Phaser
Có nhiều cách khác nhau để trò chơi này có thể được cải thiện và phức tạp hơn. Chúng tôi chỉ tạo một người chơi, nhưng một nhân vật có thể chơi thứ hai có thể được thêm vào và điều khiển bằng các điều khiển 'awsd'. Tương tự, bạn có thể thử nghiệm thêm nhiều chướng ngại vật và thay đổi tốc độ di chuyển của chúng.
sử dụng đĩa windows 10 ở 100
Phần giới thiệu này sẽ giúp bạn bắt đầu, nhưng vẫn còn rất nhiều điều để tìm hiểu. Điều tuyệt vời về Phaser là rất nhiều vật lý trò chơi được thực hiện cho bạn. Đó là một cách dễ dàng tuyệt vời để bắt đầu thiết kế trò chơi 2D. Tiếp tục xây dựng trên mã này và tinh chỉnh trò chơi của bạn.
Nếu bạn gặp bất kỳ lỗi nào, trình gỡ lỗi trình duyệt của bạn là một cách tuyệt vời để phát hiện ra sự cố.
Đăng lại Đăng lại tiếng riu ríu E-mail Cách sử dụng Công cụ dành cho nhà phát triển của Chrome để khắc phục sự cố trang webTìm hiểu cách sử dụng các công cụ phát triển tích hợp của trình duyệt Chrome để cải thiện trang web của bạn.
Đọc tiếp Chủ đề liên quan- Lập trình
- JavaScript
- HTML5
- Sự phát triển trò chơi
J. Seaton là một nhà văn khoa học chuyên nghiên cứu về các chủ đề phức tạp. Cô có bằng Tiến sĩ tại Đại học Saskatchewan; nghiên cứu của cô tập trung vào việc sử dụng học tập dựa trên trò chơi để tăng mức độ tương tác trực tuyến của sinh viên. Khi cô ấy không làm việc, bạn sẽ thấy cô ấy đang đọc sách, chơi trò chơi điện tử hoặc làm vườn.
Xem thêm từ Jennifer SeatonTheo dõi bản tin của chúng tôi
Tham gia bản tin của chúng tôi để biết các mẹo công nghệ, đánh giá, sách điện tử miễn phí và các ưu đãi độc quyền!
Bấm vào đây để đăng ký