[11- 遊戲製作] 使用模組介紹

什麼是NPM

下面是官網上對於NPM的說明

Use npm to install, share, and distribute code; manage dependencies in your projects; and share & receive feedback with others.

簡而言之，NPM是一個套件管理的工具，我們可以使用npm來建立、分享、發佈模組，並且於其平台上分享、接收其他人對模組的反饋。

NPM創造了node的生態圈，我們可以在其官網上搜尋、下載、安裝、使用、並管理我們所需要的模組。

模組的選擇

一般而言，在選擇npm的模組時，要去注意一下這個模組的開發者是否有持續在更新、維護模組內容。並從單周下載量，來評估這個套件的普及度，一般很多人在用的套件會較可信賴。
由於node的生態圈現在還算是個戰國時代，有許多在上面分享的模組很有可能過了一陣子發現了bug，套件的開發者卻已經沒在維護了，我們還得要去研究套件本身是否有某些程式碼會造成這bug，會讓我們在開發時的成本大大增加。

上圖中的weekly download、last publish以及下圖中的Dependents（有多少專案使用這個模組）都是我們要去觀察一個套件的指標。

另外網路上相關教學、使用手冊完整度、網路論壇討論度、是否適合我們的專案，也是我們可拿來做選擇模組的考量點。

我所選擇的套件 – 環境與部署相關

run-sequence：可讓gulp的task循序被執行。

    var gulp = require('gulp');
    var runSequence = require("run-sequence");
    gulp.task("build-web", function () {
    runSequence(
        'firstJob',
        'secondJob',
        ['otherJob1', 'otherJob2'],
        function (error) {
            if (error) {
                console.log(error.message);
            } else {
                console.log('success');
            }
        }
    );
});

var gulp = require('gulp');

var runSequence = require("run-sequence");

gulp.task("build-web", function () {

runSequence(

'firstJob',

'secondJob',

['otherJob1', 'otherJob2'],

function (error) {

if (error) {

console.log(error.message);

} else {

console.log('success');

}

);

});

del：可以去刪除本機的檔案。

var gulp = require('gulp'); const del = require("del"); gulp.task('clean', (cb) => { return del(["build"], cb); });

1
2
3
4
5

var gulp = require('gulp');
const del = require("del");
gulp.task('clean', (cb) => {
return del(["build"], cb);
});
gulp：可以編寫complier時要做的動作的腳本

var gulp = require('gulp'); const del = require("del"); gulp.task('job1', () => { //some task write here });

1
2
3
4
5

var gulp = require('gulp');
const del = require("del");
gulp.task('job1', () => {
//some task write here
});

gulp-typescript：可以使用gulp來呼叫TypeScript的API去將typescript轉為js

	var ts = require('gulp-typescript');
        var gulp = require('gulp');
        var tsProject = ts.createProject('tsconfig.json');
	gulp.task('build',  function() {
	    return tsResult.js.pipe(gulp.dest('build'));
	});

var ts = require('gulp-typescript');

var gulp = require('gulp');

var tsProject = ts.createProject('tsconfig.json');

gulp.task('build', function() {

return tsResult.js.pipe(gulp.dest('build'));

});

gulp-sourcemaps：可以產生一份xxx.ts.map的檔案，我們可以在debug時連到原始的ts檔案去做偵錯。

browser-sync：可以同步瀏覽器，當有檔案被更新時瀏覽器會自動重新整理。

var gulp = require('gulp');
const browserSync = require('browser-sync');
gulp.task('launch-web', ['build-web'], function () {
    browserSync({
        open: true,
        port: 8001,
        files: ["./build/**/*.{html,htm,css,js,json}"],
        server: {
            "baseDir": "./build"
        }
    });
});

var gulp = require('gulp');

const browserSync = require('browser-sync');

gulp.task('launch-web', ['build-web'], function () {

browserSync({

open: true,

port: 8001,

files: ["./build/**/*.{html,htm,css,js,json}"],

server: {

"baseDir": "./build"

}

});

我所選擇的套件 – 開發用Library

systemjs：這個套件能夠用模組化的方式來加載檔案，我們只需要在開頭打上下面的程式碼，systemJS就會自動去下載相對路徑的js檔案。

import {Loader} from "../core/Loader";

1	import {Loader} from "../core/Loader";

但是若要使用systemJS，則必需在html裡面輸入下面的程式碼，去設定要載入的路徑以及載入檔案的附檔名。

var game;
$(function () {
    SystemJS.config({
        baseURL: "",
        packages: {
            "/": { defaultExtension: "js" }
        }
    });
    //載入第一個要執行的檔案
    SystemJS.import('Main').then(function (m) {
        m.Main.prototype.initGame();
    });
});

var game;

$(function () {

SystemJS.config({

baseURL: "",

packages: {

"/": { defaultExtension: "js" }

}

});

//載入第一個要執行的檔案

SystemJS.import('Main').then(function (m) {

m.Main.prototype.initGame();

});

pixi.js：本系列文章最主要要使用的2D遊戲引擎
jquery：大家應該都很熟悉，可以更方便的與html的DOM元件做互動。在開發網頁遊戲時，常常會有某些GUI元件，若使用html來做會更加容易，如線上使用者列表、聊天視窗等…。這時候我們通常會在網頁上重疊兩個div元件，下面那一層放canvas，上面則疊上一層html div元件。如loading page時常是用這樣的方式來製作。妥善的利用canvas與html間不同的優勢，會讓遊戲開發上更加的容易。
typescript：TypeScript程式物件導向的特性能讓我們在寫TypeScript的時候，有像是寫強型別的語言一樣輕鬆自在，IDE也可以幫忙檢查基本的錯誤。
gsap：一個很好用的tween工具，官網GreenSock裡有非常詳細的使用說明，手冊的範例非常的清楚，在這邊也能夠直接預覽特效的樣子。

Claire's Blog

[11- 遊戲製作] 使用模組介紹

什麼是NPM

模組的選擇

我所選擇的套件 – 環境與部署相關

我所選擇的套件 – 開發用Library

發佈留言