Cocos Creator development is based on TypeScript, a language built to improve on JavaScript. This means that a lot of JavaScript calls and programs can be used with TypeScript. One program that we love and everyone in web development knows and uses is Node.js.
Node.js is a JavaScript runtime that allows for synchronizing with networks, making it easy to store items on the web, run actions on servers, and interact with other computers. For example, this helps you load smaller games and allow gamers to download assets off a server in the background.
But one of the issues that come with Node.js is that it comes with a ton of different packages, and not all of them are necessary for game development. Cocos Creator has been slowly adding more and more packages you can add using the npm call. Since the beginning of Cocos Creator v3.0, we have supported the use of npm packages to better integrate into the npm ecological and improve future compatibility.
If you would like to add npm packages into your game, please read our documentation on installing Node.js and installing npm packages.
In this tutorial, we'll share all the npm packages that are fully compatible With Cocos Creator 3.x and above. This does not mean others will not work, but with so many packages being built every day, we cannot check every one. This list will be updated, and I hope to add more in the future. You can see an updated list in Chinese here.
Astar-typescript
Installation call: npm install --save astar-typescript
Usage example: import astar from "astar-typescript";
A* is a graph traversal and path search algorithm, a relatively cost-efficient search module. Great for finding information and having a priority list set up for where to look.
Async
Installation call: npm install --save async
Usage example: import { forEachOf } from "async/dist/async.mjs";
This package allows you to push asynchronous code, allowing you to have other code work while the CPU processes a complex or resource-heavy issue, like getting a level for the next stage while playing your game.
Async-es
Installation call: npm install --save async-es
Example usage: import { forEachOf } from "async-es";
This is similar to async but is more for ES2015 modules.
Axios
Installation call: npm install --save axios
Example usage: import axios from "axios/dist/axios.min.js";
Axios is a promise-based HTTP client. This allows you to use XMLHttpRequest for your app. It's much better than using the basic "fetch" call.
Crypto-ts
Installation call: npm install --save crypto-ts
Example usage: import crypto from "crypto-ts";
If you need to share private information like a phone number in your app, you can do so thanks to the crypto-ts. This allows for basic encryption and decryption from client to server.
Fairygui-cc
Installation call: npm install --save fairygui-cc
Example usage: import * as fgui from "fairygui-cc";
FairyGUI is a company that helps game developers build GUIs for their games without the need to code. It's free, and Fairygui-cc is the Cocos Creator flavor of the software.
Jszip
Installation call: npm install --save jszip
Example usage: import jszip from "jszip/dist/jszip.min.js";
Want to add, edit, and extract zip files into your game? This component does it all and in JavaScript.
Lodash
Installation call: npm install --save lodash
Example usage: import array from "lodash/array.js";
This component contains a JavaScript library that manages and edits strings, arrays, and objects. It's very similar to underscore.js as being a way to provide general functional programming utilities to developers.
Lodash-es
Installation call: npm install --save lodash-es
Example usage: import zip from "lodash-es/zip.js";
Similar to lodash, but is more for ES2015 modules
Mobx
Installation call: npm install --save mobx
Example usage: import { ObservableMap, observable } from "mobx/dist/mobx.esm.js";
Mobx manages the state of an object and adopts side effects into your code. So if anything changes when observing the object, you can autorun, react, or call code when something changes.
Packo
Installation call: npm install --save pako
Example usage: npm install --save-dev @types/pako
Pako is a high-speed zlib port to JavaScript. Zlib is used for lossless data compression and decompression. Great for sending your data faster from the server to your gamers.
Rxjs
Installation call: npm install --save rxjs
Example usage: import rxjs from "rxjs/dist/bundles/rxjs.umd.js";
Rxjs is short for ReactiveX JavaScript. These tools allow for asynchronous development by building observable sequences. Great for sending information that requires server returns and having the game react to the new data.
Web3
Installation call: npm install --save web3
Example usage: import web3 from "web3/dist/web3.min.js";
This collection of libraries allows you to interact with local and remote nodes using HTTP, IPC, or WebSocket. Currently, it's hot with those working in the blockchain due to its decentralization. So you can use these to build NFT and blockchain gaming.
Whatwg-fetch
Installation call: npm install --save whatwg-fetch
Example usage: import fetch from "whatwg-fetch";
Web Hypertext Application Technology Working Group (WHATWG) has been building a great library of items to help you and those using the web. Their "fetch" function allows you to make web requests instead of using XMLHttpRequest in traditional web applications and is more compatible with older systems than most "fetch" APIs.
Xstate
Installation call: npm install --save xstate
Example usage: import xstate from "xstate/dist/xstate.js";
Xstate allows you to create, interpret and execute finite state machines and statecharts and manage them.
