SpriteKit Advanced - Cách xây dựng trò chơi 2.5D (Phần I)

Giới thiệu

Bài viết này là về sự phát triển đồ họa của Raft Challenge từ nguyên mẫu đến sản phẩm cuối cùng. Đó là AIM-ed dành cho những người đang nghĩ về việc tạo ra trò chơi của riêng họ với đồ họa như Raft, nhưng don không biết chính xác làm thế nào để bắt đầu.

Sự khởi đầu của Thử thách Raft

Raft Challenge được sinh ra trong cuộc thi hackathon đầu tiên do All In Mobile tổ chức. Ý tưởng là tạo ra một trò chơi trong đó người chơi tránh chướng ngại vật. Chúng tôi muốn giữ mọi thứ đơn giản nhất có thể.

Sau cuối tuần, chúng tôi đã có một nguyên mẫu trông như thế này:

Thử thách Raft đã chiến thắng hackathon. Công ty đã thông báo rằng nó sẽ tạo ra các nguồn lực để cải thiện trò chơi.

Hãy để Lừa làm cho nó 2,5D!

Khi bắt đầu dự án, Raft có đồ họa đơn giản nhất có thể. Một khung nhìn trực tiếp trên một kết cấu mặt đất bằng phẳng, với các vòng tròn màu biểu thị người chơi và kẻ thù. Nó đẹp và đơn giản như mã bên dưới. Sau đó, nhà thiết kế đồ họa của chúng tôi đã đến và làm rối tung mọi thứ. Anh ấy nói, Hãy để Lôi làm cho nó 2,5D! Thử thách đã được chấp nhận và hình ảnh động ở trên là kết quả.

Sau hackathon, anh lại xuất hiện một lần nữa. Lần này là một câu nhiều hơn một câu.

Đó là một nụ cười xấu xa và video này:

Phối cảnh giải thích

Ok, hãy để từ bỏ hành động :-). Tôi đã muốn mang đến cho anh ấy cảm giác mà anh ấy phụ trách. Nhưng tôi là ông chủ ở đây! Phối cảnh rất dễ thực hiện trong mã, bất kể chúng ta sử dụng công cụ 2D nào.

Đầu tiên, chúng ta phải xác định nơi chúng ta muốn đặt điểm biến mất. Ví dụ dưới đây cho thấy điểm này ở trung tâm của khung vẽ.

Raft Challenge có điểm này ở nửa trên của màn hình, bởi vì bầu trời và mọi thứ trên cao không quan trọng như chướng ngại vật trên sông.

Làm thế nào là các sprite tự thực hiện? Mặc dù có thể rõ ràng đối với một người có nền tảng nghệ thuật, nhưng nó không nhất thiết phải rõ ràng đối với một người kỹ thuật.

Có hai quy tắc:

  • Các bộ phận chuyển động phải được vẽ dọc theo các đường trợ giúp như hình trên
    Tất cả những đường đó giao nhau trong điểm biến mất

Lưu ý: Phần bờ biển là không đạt đến điểm biến mất. Nó dừng lại ở đâu đó ở giữa, để lại khu vực trong suốt phía sau.

  • Khu vực trống giữa đồ họa và điểm biến mất có một mục đích quan trọng
    Nó sẽ giữ các yếu tố xa hơn.

Những phần đó được thực hiện bằng cách áp dụng quy mô nhỏ hơn hai lần cho mỗi bước. Hình ảnh thu được phải liền mạch nếu kết cấu được làm tốt.

Lắp ráp hiện trường

Sau khi chúng tôi chuẩn bị tất cả tài sản của mình, chúng tôi cần đưa tất cả vào hiện trường.

Hãy để xem xem nó trông như thế nào trong Raft Challenge.

Bắt đầu từ phía dưới:

  1. Các lớp nền
    Lý lịch
    Cỏ
    Sương mù đáy
    mặt trời
    Núi
    Đường chân trời
  • Các lớp này đều tĩnh mà chúng không di chuyển
  • Bối cảnh hoạt động cho cả bầu trời và nước
  • Nền là một gradient đơn giản
    Nó kéo dài để lấp đầy toàn bộ màn hình
    Tỷ lệ khung hình bị bỏ qua
  • Chúng tôi có thể hợp nhất các lớp khác với Nền để tăng hiệu suất trừ khi chúng tôi muốn thay đổi một số thuộc tính
  • Chúng tôi có thể di chuyển mặt trời trong quá trình chơi trò chơi
     hoặc thay thế núi cho một cái gì đó khác nhau

2. Các lớp phối cảnh
Cây có phản xạ
Bờ biển
Chướng ngại vật

  • Để rõ ràng của hình ảnh trên, các lớp có nội dung tương tự đã được nhóm lại
    Đã có:
    2 lớp chướng ngại vật
    8 lớp bờ biển
    8 lớp cây với sự phản chiếu
  • Các lớp này được tăng lên 2 khi người chơi di chuyển về phía trước
  • Thứ tự của các lớp này phụ thuộc vào
    khoảng cách
    những cái gần hơn ở trên
    sự ưu tiên
    Chướng ngại vật> Bờ biển> Cây xanh

3. Nhân vật

  • Nếu chướng ngại vật ở vị trí gần nhất có thể, nó có thể có vị trí z cao hơn chính Nhân vật
    Trong trường hợp này, Trở ngại bao trùm Nhân vật, điều đáng mong đợi

4. GUI

  • Đồ họa tốt nên phụ thuộc vào ảo ảnh và thủ thuật thay vì phần cứng

Tóm lược

Bài viết này sẽ cho chúng ta một ý tưởng làm thế nào để tiếp cận vấn đề tạo tài sản cho trò chơi 2,5D và sắp xếp chúng thành một cảnh.

Bạn có thể đọc phần 2 của loạt bài này ở đây.

Về tác giả: Kamil Ziętek là Nhà phát triển iOS tại www.allinmobile.co