
Security News
Browserslist-rs Gets Major Refactor, Cutting Binary Size by Over 1MB
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.
create-webgame
Advanced tools
Generate a web game project.
To create a new web game project, all you need is npm:
npm init webgame
webpack's loader system is used to import files into your game. Your game will come with loaders for a few filetypes by default, such as images, fonts, and CSS.
If you need to load other types of files during the build, see awesome-webpack for a huge list of loaders of many filetypes.
To demonstrate how to add one of these loaders to your project, let's take raw-loader
for example. It allows you to import any file as a String. Let's add it to your project.
npm install raw-loader --save-dev
Then open up webpack.config.js
and add this object to the rules
array. You'll see several other loaders already in the array, simply add this one to the end of the array.
{
test: /\.txt$/i,
use: 'raw-loader',
},
TODO: test these instructions
If you wish to publish your game to NPM, remove the private
flag from package.json
and follow a blog post like this one which steps through how to publish a package to NPM.
watch
doesn't recompileThis is usually due to editor configuration. Please see webpack's suggestions for how to disable "safe write" in your editor's configuration.
TODO: write some docs on how to use HMR. An example in three.js of using HMR for live-refreshing shaders and textures would be excellent.
Under the tight pressure of a game jam, the extra work of setting up HMR probably isn't worth it, unless you know you're going to put a lot of work into a single shader, or texture. In that case, being able to save the shader or texture and have it show up immediately in the game is worth the up-front cost of setting up HMR.
If your game has some code, or some assets, that you don't need to load right away, you can lazy-load it as follows. This can be a nice optimization to get your main menu up as fast as possible, while other assets download in the background.
TODO: test and expand on these steps ( https://webpack.js.org/guides/code-splitting/#dynamic-imports )
const lazyLoadedAsset = require("promise?global!./a-lazy-asset.js");
await lazyLoadedAsset;
This feature is powered by webpack's promise-loader.
It's recommended that you leave the index.js
file untouched, and implement your game within game.js
. The purpose of index.js
is to set up a few things before your game starts, such as a Promise polyfill and browser feature detections.
FAQs
Generate a web game project.
We found that create-webgame demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.
Research
Security News
Eight new malicious Firefox extensions impersonate games, steal OAuth tokens, hijack sessions, and exploit browser permissions to spy on users.
Security News
The official Go SDK for the Model Context Protocol is in development, with a stable, production-ready release expected by August 2025.