Lập trình game javascript sử dụng Phaser

Bài viết này được dịch, tóm tắt và bổ sung dựa vào bài viết Phaser Tutorial: Getting Started with generator-phaser-official và JavaScript Game Programming Using Phaser. Bài viết tập trung vào những vấn đề sau:

Giới thiệu khái niệm cơ bản về Phaser.
Hướng dẫn cài đặt Phaser
Xây dựng một project with Yeoman generator-phaser-official
Cấu trúc thư mục project sau khi chạy generator
Phân tích một ví dụ để hiểu sâu hơn
Phaser là gì?

Phaser là một game framework cho desktop và mobile. Nó thì nhanh, miễn phí và là mã nguồn mở. Phiên bản Phaser hiện tại là 2.1.3. Nó hỗ trợ cho cả WebGL và Canvas. Nó có một loạt các tính năng giúp bạn trong việc phát triển game. Nó cũng giống như game framework Flixer cho ActionScript 3. Trong bài viết này, tôi sẽ xây dựng một bộ khung trò chơi với Phaser.

Cài đặt Phaser

Trước hết bạn hãy chắn chắn rằng máy tính của bạn đã được cài đặt npm. Sau đó chúng ta tiến hành cài đặt Yo thông qua câu lệnh sau:

$ npm install -g yo

Tiếp theo chúng ta cài đặt generator-phaser-official:

$ npm install -g yo generator-phaser-official

Bây giờ chúng ta đã hoàn thành xong phần cài đặt môi trường cho việc xây dựng game với Phaser.

Tạo project

Tạo thư mục project và truy cập vào nó:

$ mkdir phaser-sample && cd $_

Chạy generator

$ yo phaser-official

Trả lời nhắc nhở với các giá trị sau:

You're using the fantastic Phaser generator.
[?] What is the name of your project? phaser-sample
[?] Which Phaser version would you like to use? 2.0.1
[?] Game Display Width: 640
[?] Game Display Height: 550

Cấu trúc thư mục project sau khi generator

├── Gruntfile.js
├── assets
│ ├── preloader.gif
│ └── yeoman-logo.png
├── bower.json
├── config.json
├── css
│ └── styles.css
├── game
│ ├── main.js
│ └── states
│ ├── boot.js
│ ├── gameover.js
│ ├── menu.js
│ ├── play.js
│ └── preload.js
├── package.json
└── templates
├── _index.html.tpl
└── _main.js.tpl
Chạy câu lênh sau trong cửa sổ lệnh của thư mục phaser-sample:

$ grunt

Lệnh này sẽ biên dịch các file trong assets , chạy một máy chủ, mở trình duyệt, và làm mới trang bất cứ khi bạn lưu code của bạn.

Phân tích các thành phần chính trong project vừa tạo

Trong thư mục game có thư mục state gồm: boot.js, preload.js, menu.js, play.js
game/states/boot.js

'use strict';
  function Boot() {}

  Boot.prototype = {
    preload: function() {
       this.load.image('preloader', 'assets/loading-bar.png');
    },
    create: function() {
    },
    update: function() {
       this.game.input.maxPointers = 1;
       this.game.state.start('preload');
      }
    }
  };

module.exports = Boot
câu lệnh sau dùng để load hình ảnh, thường thì ở trong thư mục assets của project:

this.load.image(key,url);
boot.js sẽ gọi đến preload.js

game/states/preload.js

  'use strict';
  function Preload() {
    this.asset = null;
    this.ready = false;
  }

  Preload.prototype = {
    preload: function() {
      this.asset = this.add.sprite(this.awidth/2,this.height/2, 'preloader');
      this.asset.anchor.setTo(0.5, 0.5);

      this.load.onLoadComplete.addOnce(this.onLoadComplete, this);
      this.load.setPreloadSprite(this.asset);
      this.load.image('yeoman', 'assets/yeoman-logo.png');

    },
    create: function() {
      this.asset.cropEnabled = false;
    },
    update: function() {
      if(!!this.ready) {
        this.game.state.start('menu');
      }
    },
    onLoadComplete: function() {
      this.ready = true;
    }
  };
    module.exports = Preload

preload.js sẽ tiến hành thêm các ảnh, âm thanh, ... cho game bằng những câu lệnh sau:

// load images
this.load.image(key,url);  # ví dụ: this.load.image('ground', 'assets/ground.png');
// load audio
this.load.audio(key, url); # ví dụ: this.load.audio('flap', 'assets/flap.wav');
// load sprite sheet
this.load.spritesheet(key, url, frameWidth, frameHeight, numberOfFrames)# ví dụ: this.load.spritesheet('bird', 'assets/bird.png', 34,24,3);

game/states/menu.js

'use strict';
  function Menu() {}

  Menu.prototype = {
    preload: function() {

    },
    create: function() {
    },
    update: function() {
       this.game.state.start('play');
      }
    }
  };

  module.exports = Menu

menu.js sẽ cung cấp màn hình giao diện hiển thị trước khi khởi động game.

game/states/play.js

'use strict';
  function Play() {}
  Play.prototype = {
    create: function() {
    },
    update: function() {
  };

  module.exports = Play;

play.js khởi tạo các đối tượng, âm thanh và hình ảnh, các hiệu ứng, ... được sử dụng trong game

game/main.js

'use strict';

var BootState = require('./states/boot');
var GameoverState = require('./states/gameover');
var MenuState = require('./states/menu');
var PlayState = require('./states/play');
var PreloadState = require('./states/preload');

var game = new Phaser.Game(640, 550, Phaser.AUTO, 'phaser-sample');

// Game States
game.state.add('boot', BootState);
game.state.add('gameover', GameoverState);
game.state.add('menu', MenuState);
game.state.add('play', PlayState);
game.state.add('preload', PreloadState);
game.state.start('boot');

Trên đây tôi đã giới thiệu sơ lược về bố cục cơ bản của thư mục game.

Ngay từ lúc này chúng ta hãy tải và cài đặt npm và node.js. Sau đó theo hướng dẫn làm một game javascript theo ý tưởng của từng người rồi.

Các bạn có thể tham khảo việc xây dựng game Flappy Bird với Phaser tại đây. Hoặc tham khảo game: candy game

Lời Kết

Hi vọng bài viết này sẽ hữu ích với các bạn. Ngoài Phaser.js còn có rất nhiều thư viện javascript khác có thể ứng dụng trong việc làm webapp hay làm game.