PixiJS Lession 1 Giới thiệu và cách cài đặt

Nếu hỏi ngoài Unity và Cocos2Dx là 2 framework nổi tiếng để làm game ra, còn framework nào khác không, thì KINGDOM NVHAI sẽ giới thiệu cho mọi người PixiJS. Đây cũng là một framework làm game 2D khá nổi tiếng, được nhiều công ty sử dụng.

PixiJS install and create project

Trang chủ PixiJS: http://www.pixijs.com/
Document hoàn chỉnh: https://github.com/kittykatattack/learningPixi#introduction
Hướng dẫn cài đặt: https://github.com/pixijs/pixi.js
Đường link dẫn thư viện pixi.js và các trình duyệt hỗ trợ: https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build

Giới thiệu trong phần Introduction

_ Pixi là một công cụ dựng hình 2D cực nhanh.
_ Giúp bạn hiển thị, hiệu ứng và quản lý đồ họa tương tác để bạn dễ dàng tạo game và ứng dụng bằng JavaScript và các công nghệ HTML5 khác.
_ Cung cấp hệ thống animation sprites.
_ Dành cho bất kỳ ai biết về HTML và Javascript. Không cần phải là chuyên gia.

Cách cài đặt và tạo project

Chương trình cần có:
_ NodeJS
_ Visual Studio Code

Đầu tiên, bạn tạo 1 thư mục tên là tutorial có cấu trúc như sau:
_ index.html để làm giao diện web chính.
_ style.css để thiết kế CSS.
_ app.js là file Javascript chính để giao tiếp với PixiJS
_ images chứa file ảnh. Hãy tìm ảnh rat.png bỏ vào đây.

PixiJS install and create project

Dựa vào hướng dẫn cài đặt, vào Visual Studio Code mở terminal bằng [Ctrl+`] và gõ

npm install pixi.js

node_modules sẽ xuất hiện trong project cùng với thư mục pixi.js

Thiết kế HTML

Index.html sẽ như thế này

PixiJS install and create project

Đường link dẫn đến file pixi.min.js phiên bản 4.7.1 đã được dẫn. Để tải phiên bản mới nhất, vào link đường dẫn thư viện pixi.js và các trình duyệt hỗ trợ. Bạn có thể download file về nếu muốn code mà không cần Internet.

App.js

Giờ là phần quan trọng nhất. File app.js của bạn như sau:

PIXI.utils.sayHello();

// Xét kích thước cho thẻ div ở HTML. Mọi hoạt động sẽ nằm trong thẻ div này.
var renderer = PIXI.autoDetectRenderer(512,512,{
transparent: true,
resolution: 1
});
document.getElementById(‘display’).appendChild(renderer.view);

// Tạo object stage gọi link ảnh.
var stage = new PIXI.Container();
PIXI.loader
.add(“images/rat.png”)
.load(setup);

var rat;

// Hàm cài đặt. Đưa hình vào như một sprite, xét kích cỡ, anchor point, scale và gọi hàm vòng lặp animation
function setup() {
rat = new PIXI.Sprite(
PIXI.loader.resources[“images/rat.png”].texture
)

stage.addChild(rat);
rat.anchor.set(0.5, 0.5);
rat.scale.set(0.4, 0.4);
rat.x = renderer.width / 2;
rat.y = renderer.height / 2;

animationLoop();
};

// Vòng lặp animation. Mỗi lần lặp, hình ảnh sẽ quay 0.01 độ
function animationLoop() {
requestAnimationFrame(animationLoop);

rat.rotation += 0.01;

renderer.render(stage);
}

Kết quả bạn sẽ có hình đen xoay vòng tròn.

PixiJS install and create project

Cài đặt http-server

Để giải quyết, bạn cần cài http-server
Mở terminal lên, gõ lệnh

npm install -g http-server

PixiJS install and create project

Phím nóng Window+R để vào thư mục C:\Users\Win10\AppData\Roaming\npm\node_modules
Bạn sẽ thấy http-server được cài vào NodeJS
Cuối cùng, hãy chọn đường link localhost hiện ra trong terminal. Trong hình là http://127.0.0.1:8081 để xem kết quả.

PixiJS install and create project

Như vậy, mọi người đã biết cách làm hiệu ứng đơn giản bằng PixiJS.

Leave a Comment