07/10/2026 · VietTechies · Biên tập
Việc phát triển các ứng dụng thú cưng ảo hiển thị trên màn hình máy tính đặt ra nhiều thách thức về dựng hình và quản lý cửa sổ. Trong bài chia sẻ kỹ thuật đăng ngày 6 tháng 10 năm 2026, nhóm phát triển Mocha Casa đã chi tiết hóa kiến trúc bên dưới của ứng dụng thú cưng ảo trên hệ điều hành Windows được xây dựng bằng Electron và JavaScript. Dự án cho thấy việc tinh chỉnh quỹ đạo cửa sổ, tỷ lệ hiển thị màn hình cùng các bước chuyển đổi trạng thái bài bản giúp ngăn chặn hiện tượng lỗi hiển thị ở nhân vật hoạt hình.
Đồng bộ tọa độ màn hình với hoạt họa
Để tránh tình trạng thú cưng ảo bị trượt thiếu tự nhiên trên màn hình trong nền trong suốt, các nhà phát triển cần đồng bộ các bước hoạt họa của nhân vật với chuyển động vật lý của cửa sổ ứng dụng. Trong Mocha Casa, vị trí trên màn hình của chân thú cưng khi chạm đất bằng vị trí cửa sổ cộng với vị trí đã điều chỉnh tỷ lệ của chân trong khung hình hoạt họa. Việc bù trừ chuyển động bên trong clip hoạt họa với chuyển động vật lý của cửa sổ giúp giữ chân nhân vật luôn bám sàn. Đội ngũ phát triển nhấn mạnh việc kiểm tra từng chân trụ qua từng khung hình để chẩn đoán lỗi thay vì đánh giá toàn bộ đường nét của nhân vật. Bên cạnh đó, việc xử lý tỷ lệ hiển thị của Windows đòi hỏi các bước kiểm tra rõ ràng, vì tọa độ CSS và giá trị điểm ảnh vật lý không thể chuyển đổi trực tiếp cho nhau khi thiết lập tỷ lệ màn hình thay đổi giữa các phiên làm việc.
Quản lý chuyển cảnh và vòng đời hành động
Để chuyển cảnh mượt mà giữa các trạng thái di chuyển và nghỉ ngơi, lập trình viên cần kiểm soát cẩn thận ranh giới giữa các đoạn clip. Mocha Casa sử dụng một bộ điều phối hành động dùng chung dưới dạng máy trạng thái (state machine) nhằm tách biệt các trạng thái lặp vô tận như nghỉ ngơi hay ngủ với các hành động có thời lượng cố định. Kiến trúc này kiểm tra xem hành động mới có thể bắt đầu từ trạng thái hiện tại hay không, tránh tình trạng tương tác mới làm gián đoạn đột ngột đoạn clip đang chạy. Việc đánh giá chuyển đổi clip cũng bao gồm kiểm tra các khung hình ranh giới để phát hiện sự thay đổi độ sáng đột ngột hoặc tư thế không khớp, trong đó sự chú ý tập trung trực tiếp vào hình ảnh thú cưng thay vì mức độ sáng trung bình của toàn khung hình vốn dễ bị ảnh hưởng bởi hình nền máy tính.
Kiến trúc gói ứng dụng và quyền kiểm soát của người dùng
Mocha Casa cung cấp cho người dùng các chế độ hoạt động tùy chọn, gồm chế độ Companion nhẹ nhàng và chế độ Active sinh động hơn, giúp người dùng chủ động kiểm soát không gian làm việc bên cạnh các tùy chọn vị trí cửa sổ và ẩn/hiện ứng dụng. Phần mềm đọc các tệp gói có định dạng .mochapet và hỗ trợ hiển thị một thú cưng tại một thời điểm, đồng thời lưu trữ dữ liệu nhắc nhở hoàn toàn trên thiết bị nội bộ. Các mẫu thú cưng tùy chỉnh được tạo từ ảnh chụp thông qua công nghệ hoạt họa hỗ trợ bởi AI kết hợp với sự kiểm duyệt thủ công của đội ngũ phát triển, thay vì tạo tự động theo thời gian thực ngay trong ứng dụng. Bản cài đặt trên Windows và mẫu thú cưng thử nghiệm hiện được cung cấp hoàn toàn miễn phí.
Ảnh minh họa do AI tạo, không phải ảnh tư liệu.
Nguồn: Making a desktop pet feel present: animation, window motion, and the quiet moments