Tài trợ bài viết này và giới thiệu dịch vụ, sản phẩm, thương hiệu, nhu cầu tuyển dụng của doanh nghiệp đến với cộng đồng.
Bùi Trung Hiế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.
Nội dung bài viết

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.

001_01

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.

001_02

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 001_03  của Photoshop và xóa background. Chỉnh hiệu ứng theo ý thích của bản thân.

001_04

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

001_05

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:

001_06

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.

BMFont

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

001_07

Và kết quả:

001_08

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

Các lưu ý

Các ký tự trong file BMFont.png phải có 1 khoảng cách nhất định.

Kích thước của file BMFont.png tối đa là 8191 x 2048 pixels.

Có thể xuống dòng nếu chuỗi ký tự quá dài, nhưng giữa các dòng với nhau cũng cần 1 khoảng cách.

Nếu các ký tự gán dính với nhau, các bạn nên tăng thêm khoảng cách giữa các ký tự và các dòng.

Tham khảo thêm

http://renderhjs.net/shoebox/bitmapFont.htm - Hướng dẫn và các tham số, tiếng Anh - 26/10/2015

http://kvazars.com/littera/  - Tạo Bitmap Font online, đơn giản, ít tùy biến - 26/10/2015

THẢO LUẬN
ĐÓNG