Skip to main content

Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
TagsGame Engines

Pixelbox

Create 2D games in JavaScript, made easier · By Cedric Stoquer

How to build from commandline?

A topic by Matt Kimball created May 10, 2020 Views: 276 Replies: 6
Viewing posts 1 to 2

I would like to build my index.js from the commandline. I would also like to build with a modified Pixelbox core.

I have tried to run browserify on bootstrap.js from Pixelbox core, but I haven't been able to get this to work so far. It looks like there are many values which are intended to be substituted in (like __PROJECT_DATA__) and I'm not sure how to do that properly.

Is there a way to do this?

What you're trying to do is going against the normal workflow of Pixelbox, and I would not recommend it.
Can I ask what you are trying to achieve? There might be another solution available, or it could be an opportunity for a new feature.


You can make modifications directly to the pixelbox package in node_modules/pixelbox. Be careful since the package may be overwritten by the "Project > Update libraries" command.

Building the game from command line should also be possible, but some setup are required. 

For example, let's say you want to build with Webpack. Here's how the webpack.config,js should look (notice the raw-loader for .vert and .frag files, and the use of external for electron):

const path = require('path');
module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: { path: path.resolve(__dirname, 'build'), filename: 'index.js', },
    module: { rules: [
        { test: /\.vert$/i, use: [{ loader: 'raw-loader', options: { esModule: false } }] },
        { test: /\.frag$/i, use: [{ loader: 'raw-loader', options: { esModule: false } }] },
    ], },
    externals: ['electron']
};

The index,js in your project needs to define a bunch of constants that Pixelbox needs (the most non-obvious one being __PROJECT_DATA__ as it contains the assets map and settings that are normally automatically generated), and then require the bootstrap:

window.DEBUG = true;
window.__USE_CORE__ = true
window.__USE_WEBGL__ = true
window.__MINI_TEXT__ = true
window.__KEYBOARD__ = true
window.__GAMEPAD__ = false
window.__USE_AUDIO__ = false
window.__USE_TRACKER__ = false
window.__USE_BLEEPER__ = false
window.__USE_TINA__ = false
window.__CUSTOM_LOADER__ = false
window.__HAS_ATLAS__ = false
window.__NO_CONTEXT_MENU__ = true
window.__BUILD_TYPE__ = 'pixelbox'
window.__PROJECT_DATA__ = {     dat: {         palette: null,         tilesheet: null,         maps: { _type: "maps", maps: [] }     },     root: "assets/",     img: ["palette.png", "tilesheet.png"],     snd: [],     settings: {         name: "PixelboxProject",         screen: {             fullscreen: false,             resizable: true,             keepAspectRatio: false,             width: 128,             height: 128,             pixelSize: { width: 4, height: 4 }         },         tileSize: { width: 8, height: 8 },         palette: { file: "palette" },         controls: { up: 38, down: 40, left: 37, right: 39, A: 32, B: 88 },         touchEvent: { multiTouch: false, disableContextMenu: true, hideMousePointer: false },         gamepad: { analogToDpad: true, deadZone: 0.5 },         loader: { colors: ["#140C1C", "#DEEED6"] }     }
} require('pixelbox/bootstrap')

I also had to modify the main.js to expose the update function the ES6 way, or Webpack would complain:

function update() {
    // ...
}
export { update }

Again, I would definitely not recommend to go this way. This solution might break with future versions of Pixelbox.

If you can explain why you want to build from command line, I might be able to advise a better solution or add a new feature to Pixelbox.

(1 edit)

Thanks for the instructions, even if they are not recommended.

There are several reasons I want to build from the commandline:

  1. I am using Typescript, and when I am iterating I run the Typescript compiler from the commandline, and then use the ‘Run’ menu item in Pixelbox. It is slightly annoying to have two steps to see my code changes, instead of one step. If I can build from the commandline, I can have a shell script do both things.

  2. Using either the ‘Run’ menu or built-in web server is very slow. When I use the built-in web server, index.js takes 19 seconds to load. When I am using nginx running locally with an already built index.js, it loads instantly. I don’t know why this is so slow, but I am guessing building on the commandline will be faster than what Pixelbox is doing.

  3. Touchscreen events as implemented in pointerEvents are broken. I wanted to see if I can fix them by modifying the Pixelbox core source code. It’s not clear to me how I can use my own modified version of Pixelbox core from within the Pixelbox UI. I figured this would be easy to do if I am building from the commandline.

FYI, I am developing on a Chromebook, using the Linux version of Pixelbox. I wonder if this has anything to do with why generating index.js happens so slowly.

Thanks for your response

  1. TypeScript is a language that I want to support in the future. Unfortunately I have almost no experience with TypeScript, so it might take some time before I can get something working
  2. 19 seconds sounds like a lot of time indeed. Do you have the "Add ES6 polyfills" option checked in Project > Settings > Components? I noticed this made the build process much slower. Babel transpiling also add quite some time to the build. If your TypeScript compiler generate ES5 JavaScript, try to change the scripting language option from "ES6" to "ES5" in Project > Settings > General and see if this improve the build time.
  3. I suggest to copy the nodes_module/pixelbox/pointerEvents/index.js file into your project, and require this file directly. This way you'll avoid loosing your changes if you make modifications. PointerEvent module is not yet mature. If you managed to find the problem please consider opening an issue and/or doing a pull request to the pixelbox repository ;)

If you still consider building from command line, then generating the __PROJECT_DATA__ object will probably be the biggest struggle. It might be possible to expose the function that is doing this, and make it available to custom scripts.

(+1)

Pull request for fixing touch support in pointerEvents opened here: https://github.com/cstoquer/pixelbox/pull/17

Thanks!