Tạo BitMap Font Bằng ShoeBox Cho cocos2dx

Giới thiệu

Trong quá trình làm game, điển hình là các game trên nền tảng di động, việc tối ưu hóa tài nguyên là 1 vấn đề  hết sức cấp thiết. Tối ưu hóa tài nguyên giúp game tải nhanh hơn, chạy mượt mà hơn, nhất là với các máy có cấu hình yếu. Giảm thiểu tài nguyên các văn bản trong game là vấn đề mà ít ai khi bước chân vào lập trình game nghĩ tới. Bitmap Font là giải pháp sẽ được đem ra bàn luận trong bài viết này.

Tiền đề bài viết

Trong quá trình tham gia project Sins cùng với các thành viên của STDIO Training. Được sự phân công, hướng dẫn từ anh La Kiến Vinh tìm hiểu về Bitmap Font, cách tạo và sử dụng Bitmap Font. Tôi viết bài viết này với mong muốn chia sẻ các kỹ thuật được sử dụng trong quá trình phát triển Sins, cũng như mong muốn các bạn có thêm tài liệu tham khảo cho quá trình phát triển game của bản thân sau này.

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

Bài viết hướng đến tất cả các lập trình viên mới bắt đầu làm game, đang phát triển game trong Cocos2d-x và có kiến thức cơ bản về Photoshop. Các đối tượng khác có thể xem đây là một tài liệu tham khảo.

Bitmap Font là gì?

Bitmap Font là một dạng font chữ. Mỗi ký tự trong Bitmap Font được tạo ra từ một mảng các pixel. Nói cách khác mỗi ký tự trong Bitmap Font là một sprite hình ảnh.

Ưu điểm

Nhẹ, nhanh và render tốt.

Cách tạo ra dễ hơn các loại khác.

Cấu hình font chính xác khi hiển thị.

Nhược điểm

Việc phóng to/thu nhỏ Bitmap Font thường làm cho các ký tự bị biến dạng, nhất là khi phóng to, các ký tự sẽ bị răng cưa, không mịn.

Cách sử dụng Bitmap Font trong cocos2d-x

Các bạn có thể tham khảo bài viết UI - Phần 1: Khái Niệm Và Một Số Đối Tượng Để Thiết Kế UI Trong Cocos2d-x 3.x.x.

Hướng dẫn tạo Bitmap Font bằng ShoeBox

Cài đặt ShoeBox

Để sử dụng được ShoeBox các bạn cần cài đặt Adobe AIR trước, link tải tại đây.

Các bạn vào địa chỉ này để tải phiên bản mới nhất của phần mềm về và cài đặt vào máy.

Tạo font bằng Photoshop

Trong Photoshop, các bạn tạo 1 file mới, thêm text vào bằng công cụ Type Tool   của Photoshop và xóa background. Chỉnh hiệu ứng theo ý thích của bản thân.

Mở ShoeBox, chuột phải icon Bitmap Font để vào Setting. Copy tất cả ký tự trong khung Txt Chars.

Các bạn cũng có thể thực hiện thao tác tương tự như trên bằng cách click chuột trái vào icon Bitmap Font. Dán vào dữ liệu đã copy vào phần text trong Photoshop, chỉnh khoảng cách giữa các ký tự cách xa ra (khung đỏ) ta được kết quả như sau:

Chỉnh lại kích thước file ảnh (Image -> Canvas Size…) sao cho file ảnh chứa hết tất cả các ký tự. Lưu thành một file định dạng PNG, ví dụ: BMFont.png.

Kéo file BMFont.png vào icon Bitmap Font của ShoeBox.

Và kết quả:

Kiểm tra lại kết quả và nhấn Save Font.

(Theo https://www.stdio.vn)