Game Studio
Liên kế mạng xã hội

Game Studio


UI Phần I: Khái Niệm Và Một Số Đối Tượng Để Thiết Kế UI Trong Cocos2d-x 3.x.x

Giới thiệu

UI không chỉ có phục vụ trong ngành công nghiệp game mà còn phục vụ cho rất nhiều ngành công nghiệp khác. Một game có một UI và một ý tưởng tốt sẽ rất hấp dẫn người chơi. Trong bài này tôi và bạn sẽ tìm hiểu về UI và một số đối tượng sử dụng để thiết kế UI trong Cocos2d-x 3.4

Tiền đề bài viết

Bài viết này là bài viết nằm trong những loạt bài viết của tôi về tổng quan làm game 2D sử dụng Cocos2d-x 3.4.

Đối tượng hướng đến

Bài viết này tôi hướng đến những lập trình viên mới bắt đầu tìm hiểu và học tập làm game 2D bằng Cocos2d-x.

UI là gì?

Là viết tắt của User Interface(Giao diện người dùng). UI bao gồmm các mục như Labels, Buttons,Menus, Sliders Views, đây là những thứ có trên Screen(Màn hình hiển thị). Điều quan trọng trong thiết kế UI là phải hiểu được yêu cầu của người dùng và nó đóng góp một phần quan trọng trong việc thành công của game.

Thành phần UI

Bố cục

Quy định những đối tượng nào được hiển thị, được đặt ở vị trí nào?

Màu sắc

Phải thể hiện được thương hiệu game của bạn và tạo một sự thúc đẩy, khuyến khích cho người dùng.

Kiểu chữ và cỡ chữ

Một dòng chữ có kiểu chữ và cỡ chữ tốt khả năng hấp dẫn thị giác con người. Và đặc biệt chú ý, một dòng chữ là một dòng mà người dùng có thể đọc được, tránh lạm dụng việc cách điệu và mục đích của dòng chữ đó để sử dụng kiểu chữ và cỡ chữ cho phù hợp.

Đồ họa

Muốn hấp dẫn người chơi thì trước tiên bạn phải tạo cho họ một cảm giác tốt. Ý tưởng game tốt thêm đẹp mắt chính là sức hấp dẫn không thể bỏ qua với những người chơi.

Thiết kế UI

Để mang lại cho người chơi một cảm giác tốt nhất, bạn cần phải hiểu sở thích của người chơi(đại đa số), thói quen của họ. Các yếu tố để thiết kế một UI đẹp là: Tính đơn giản hóa, tính nhất quán.

Tính đơn giản hóa

Một UI tuyệt với là một UI có tính dễ sử dụng, đặc biệt là đối với những người mới.

Tính nhất quán

Nếu game của bạn có trên nhiều nền tảng di động khác nhau hay là câp nhật phiên bản mới, bạn nên chú ý về tính nhất quán này. Ví dụ như button play, pause, exit game. Nó giúp người dùng tiếp cận nhanh hơn.

Một số đối tượng trong Cocos2d-x dùng để thiết kế UI

Label

Là đối tượng được sử đụng để tạo ra những dòng thông tin, văn bản.

Label BMF font

Là loại Label Bitmap Font, các kí tự trong một Bitmap Font được tạo từ một ma trận các dấu chấm và là một Sprite.

Ưu điểm

Nhanh và dẽ sử dụng. Vì mỗi kí tự trong Label là một Sprite, có nghĩa rằng những kí từ này có thể được  Rotated, Scaled, Tinted.

Nhược điểm

Không thể mở rộng vì nó đòi hỏi một cỡ chữ riêng biệt cho từng kích thước kí tự.

Khởi tạo

Để tạo một Label BMFont bạn cần hai phần. file có định dạng .fnt và một đại diện hình ảnh của mỗi kí tự trong định dạng .png

  1. // Label BMFont
  2. auto gameLabel = Label::createWithBMFont("bitmap.fnt", "LabelBMFont");

Label TTF

Là loại Label True Type Font.

Ưu điểm

Không cần phải một file font riêng biệt cho mỗi kích thước và màu sắc, vì vậy việc tạo ra một  Label với một cỡ chữ đúng múc đích của bạn rất dễ dàng.

Nhược điểm

Tuy nó linh hoạt hơn một Font Bitmap nhưng việc Render lên Screen sẽ chậm hơn và việc thay đổi các thuộc tính của kí tự như kích thước là một việc tốn thời gian xử lý.

Khởi tạo

Để tạo một Label TTF bạn cần tên file Font TrueType, chuỗi văn bản và kích thước của văn bản đó.

  1. // Label TTF
  2. auto gameLabel = Label::create("LabelTTF", "arial.ttf", 24);

TTF Config

Nếu trong game của bạn sử dụng nhiều Label có cùng một kích cỡ, kiểu chữ thì bạn có thể tạo ra mộtTTFConfig để quản lý chúng dễ dàng hơn. Một đối tượng TTFConfig cho phép bạn thiết lập các thuộc tính của Label.

  1. // Khởi tọa một Label TTFConfig có tên là labelConfig.
  2. TTFConfig labelConfig;
  3.  
  4. // Thiết lập các thuộc tính cho labelConfig.
  5. // Kiểu chữ.
  6. labelConfig.fontFilePath = "arial.ttf";
  7.  
  8. // Kích cỡ chữ.
  9. labelConfig.fontSize = 30;
  10.  
  11. // Một số thuộc tính khác của Label.
  12. labelConfig.glyphs = GlyphCollection::DYNAMIC;
  13. labelConfig.outlineSize = 0;
  14. labelConfig.customGlyphs = nullptr;
  15. labelConfig.distanceFieldEnabled = false;
  16.  
  17. // Khởi tạo một Label có tên là gameLabel và sử dụng TTFConfig.
  18. auto gameLabel = Label::createWithTTF(labelConfig, "LabelTTF from TTFConfig");

Label SystemFont

Là loại Label giống Label TTF nhưng bạn không thể thay đổi thuộc tính của nó. Nếu bạn cần một Label nhưng một hệ thống hay quy tắc, hãy sử dụng nó.

  1. // Label SystemFont
  2. auto gameLabel = Label::createWithSystemFont("Label using SystemFont", "arial.ttf", 24);

Label Effect

Bạn có thể tạo một số hiệu ứng cho Label của bạn nhằm cho nó thêm đẹp mắt. Không phải tất cả các font chữ đều hỗ trơ hiệu ứng. Một số loại hiệu ứng như shadow, outline, glow. Bạn có thể sử dụng nhiều hiệu ứng cho một Label.

Hiệu ứng shadow

  1. // Khởi tạo một Label TTF có tên là gameLabel.
  2. auto gameLabel = Label::create("LabelTTF with Shadow", "arial.ttf", 24);
  3.  
  4. // Hiệu ứng shadow.
  5. gameLabel->enableShadow();

Hiệu ứng outline

  1. // Khởi tạo một Label TFF có tên là gameLabel.
  2. auto gameLabel = Label::create("LabelTTF with Outline", "arial.ttf", 24);
  3.  
  4. // Hiệu ứng outline
  5. gameLabel->enableOutline(Color4B::WHITE, 1));

Hiệu ứng glow

  1. // Khởi tạo một Label TFF có tên là gameLabel.
  2. auto gameLabel = Label::create("LabelTTF with Glow", "arial.ttf", 24);
  3.  
  4. // Hiệu ứng glow.
  5. gameLabel->enableGlow(Color4B::YELLOW);

Kết quả

Tham khảo

http://www.cocos2d-x.org

Theo: Stdio