{"id":13534270,"url":"https://github.com/cstoquer/pixelbox","last_synced_at":"2026-02-26T11:50:51.192Z","repository":{"id":49519897,"uuid":"49579165","full_name":"cstoquer/pixelbox","owner":"cstoquer","description":"A sandbox framework to fast-prototype tile-based games in HTML5 and JavaScript","archived":false,"fork":false,"pushed_at":"2024-03-01T17:07:25.000Z","size":1114,"stargazers_count":481,"open_issues_count":14,"forks_count":37,"subscribers_count":23,"default_branch":"master","last_synced_at":"2025-10-21T00:18:35.062Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cstoquer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-01-13T14:33:57.000Z","updated_at":"2025-10-17T09:28:17.000Z","dependencies_parsed_at":"2024-06-21T03:53:13.237Z","dependency_job_id":"f6110534-dd7c-4c01-accd-b010f46853ca","html_url":"https://github.com/cstoquer/pixelbox","commit_stats":{"total_commits":336,"total_committers":8,"mean_commits":42.0,"dds":"0.14880952380952384","last_synced_commit":"1ba769dfb571e9a38a455d97b4abdb1439b72360"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/cstoquer/pixelbox","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cstoquer%2Fpixelbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cstoquer%2Fpixelbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cstoquer%2Fpixelbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cstoquer%2Fpixelbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cstoquer","download_url":"https://codeload.github.com/cstoquer/pixelbox/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cstoquer%2Fpixelbox/sbom","scorecard":{"id":311419,"data":{"date":"2025-08-11","repo":{"name":"github.com/cstoquer/pixelbox","commit":"1ba769dfb571e9a38a455d97b4abdb1439b72360"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Code-Review","score":0,"reason":"Found 2/28 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 4 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}}]},"last_synced_at":"2025-08-17T23:14:15.399Z","repository_id":49519897,"created_at":"2025-08-17T23:14:15.400Z","updated_at":"2025-08-17T23:14:15.400Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29858451,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-26T08:51:08.701Z","status":"ssl_error","status_checked_at":"2026-02-26T08:50:19.607Z","response_time":89,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T07:01:29.260Z","updated_at":"2026-02-26T11:50:51.148Z","avatar_url":"https://github.com/cstoquer.png","language":"JavaScript","readme":"![pixelbox](https://user-images.githubusercontent.com/2462139/77128117-527e4d80-6a92-11ea-9347-ae262e520620.png)\n\n\n### A sandbox framework to fast-prototype tile-based games\n\n\nPixelbox takes inspiration from fantasy consoles like [PICO8](http://www.lexaloffle.com/pico-8.php) and game creation frameworks like Unity3D.\n\n# Install\n\nFrom version 2, the Pixelbox package no longer includes the editor. Instead, the editor is now a standalone application that can be downloaded [on Itch.io](https://cstoquer.itch.io/pixelbox).\n\n\n\n# Use\n\nA Pixelbox project has the following structure:\n```\nassets/\n ├── tilesheet.png\n ├── palette.png\n └── maps.json\naudio/\nbuild/\nsrc/\n └── main.js\ntools/\nnode_modules/\nproject.pixelbox\npackage.json\nindex.html\n```\n\n - `assets/` is where game assets go (images, text files, JSON)\n - `audio/` is where sounds and music go\n - `src/` is the source code folder, and `main.js` is the entry file of the game\n\n# Programming with pixelbox\n\n### Program structure\n\nThe game entry point is the `src/main.js` file. If you provide an `exports.update` function, Pixelbox will call it every frame.\n\nBuilding is done using [browserify](http://browserify.org/) which gives you access to `require` (or `import`) and `exports` to easily modularize your project.\n\n### Assets\n\nPixelbox automatically loads all assets at startup, before executing the game code. All supported files added inside the `assets/` directory will be available in the `assets` global object. The structure follows the structure of the directory. For instance, the file located in `assets/sprites/player.png` will be accessible with `assets.sprites.player`.\n\nSupported files include:\n - images (`.png`, `.jpg`)\n - JSON formatted data (`.json`)\n - plain text files (`.txt`, `.css`, `.vert`, `.frag`)\n\nYou have direct access to the content of JSON files.\n\nBecause files are loaded inside the `assets` object and refered wthout their extension, you cannot have a file and a directory with the same name inside the same directory.\n\n# Pixelbox API\n\nPixelbox exposes the following methods directly on the global scope:\n\n### Drawing graphics\n\n - `cls()` clear screen with *paper* color\n - `sprite(n, x, y [,flipH [,flipV [, flipR]]])` draw sprite number `n` on screen at pixel position `(x, y)`\n `flipH` and `flipV` can be used to flip sprites horizontally or vertically, `flipR` adds a 90 degree clockwise rotation\n - `draw(image, x, y [,flipH [,flipV [, flipR]]])` draw an *Image*, *Texture* or *TileMap* on screen at pixel position `(x, y)`\n - `tilesheet(image)` change image used as default tilesheet\n - `rect(x, y, w, h)` stroke a rectangle with *pen* color\n - `rectf(x, y, w, h)` fill a rectangle with *paper* color\n - `camera(x, y)` scroll add further drawing by provided position\n\n### Printing text\n\nPixelbox has a predefined *\"minitext\"* bitmap font that you can use to print text on screen or in textures. *Minitext* is available by default, but can be disabled in the project settings.\n\n - `print(text, [x, y])` if x, y is provided, print `text` at pixel position (`x`, `y`);\nelse print text at cursor current position\n - `println(text)` print `text` and feed new line;\nwhen the cursor reaches the bottom of the screen, vertical scroll is applied\n(just like it would happen in a terminal)\n - `locate(i, j)` set cursor position at column `i` line `j`\n - `pen(colorId)` set text color to `colorId` in color palette\n - `paper(colorId)` set paper color to `colorId` in color palette\n\n### User controls\n\n - `btn` state of the buttons — by default, available buttons are: `up`, `down`, `left`, `right`, `A`, `B` (buttons names and binding can be configured in the project settings)\n - `btnp` whether button has been pressed during current frame\n - `btnr` whether button has been released during current frame\n\n### Playing sound\n\n - `sfx('sound');` play the sound.mp3 file in `audio/` folder\n - `music('bgm');` play the bgm.mp3 file in loop; if another music is already playing, it will cross fade to the new music; if no `soundId` is provided, music stops\n\n [AudioManager](https://github.com/Wizcorp/AudioManager) is the module that handles audio\nloading and playback. You have access to its instance on `audioManager`.\n\n### Other utility functions\n\n - `clamp(value, min, max)` clip a value between min and max\n - `chr$(n)` return a character from code `n`\n - `random(n)` return a random **integer** between 0 and n\n - `inherits(Child, Parent)` make class *Child* inherit from class *Parent*\n\n# Pixelbox components\n\n## Texture\n\nTexture is a canvas that can be drawn, and inside which things can be drawn. In Canvas2D mode, it is implemented with a HTML canvas. In WebGL mode, it is implemented with a GLTexture2D.\n\nThe main screen (accessible by the global variable `$screen`) is an instance of Texture and most of its methods are accessible from the global scope.\n\nTo create new texture, you need to require the `Texture` module:\n```javascript\nvar Texture = require('pixelbox/Texture');\nvar texture = new Texture(128, 128); // create a new texture of 128 by 128 pixels\n```\n\n#### Texture settings\n\n```javascript\ntexture.resize(width, height);\ntexture.setPalette(palette);\ntexture.pen(colorIndex); // set PEN color index from palette (pen is used for text and stroke)\ntexture.paper(colorIndex); // set PAPER color index from palette (paper is used for fill)\ntexture.setTilesheet(tilesheet); // set tilesheet used for this texture\n```\n\nA tilesheet is an Image containing 256 sprites organized in a 16 x 16 grid (the size of the tilesheet depend of the sprite size you set for your game).\n\n\n#### Rendering\n\n```javascript\ntexture.clear(); // clear texture (it becomes transparent)\ntexture.cls(); // clear screen (the whole texture is filled with the PAPER color)\ntexture.sprite(sprite, x, y, flipH, flipV, flipR); // draw a sprite from current tilesheet in the texture\ntexture.draw((img, x, y, flipH, flipV, flipR); // draw an image (or Texture or Map) in the texture\ntexture.rect(x, y, width, height); // stroke a rectangle\ntexture.rectf(x, y, width, height); // fill a rectangle\n```\n\n#### Printing text\n\n```javascript\ntexture.locate(i, j); // set text cursor to specified location\ntexture.print(text, x, y); // print some text\ntexture.println(text); // print some text and feed a new line\n```\n\n## Tile Maps\n\nPixelbox has a built-in `TileMap` component.\nA TileMap consist of:\n - A name\n - A tilesheet — when the tilesheet is changed, the whole map will be redrawn with the new tilesheet\n - A grid of sprites from the tilesheet plus few flags to flip or rotate sprites\n\nOnce created, a tile map is rendered in one draw call only.\n\nTileMap can be used to render a level made of sprites, or just to store game data.\n\nYou can create tile maps from your game code; But usually, you will be using Pixelbox's tools (see the Tools section below) to create and manage your maps as game assets. A map can then be retrieved by its name with Pixelbox's `getMap` function. The tile map can then be drawn on screen (or in another Texture), modified, copied, pasted, resized, etc.\n\nWhen stored in assets, the map is compressed to Pixelbox format to reduce file size.\n\n#### Get tile map\n\n```javascript\nvar map = getMap('mapName'); // get a tile map by its name\n```\n\nTo create new maps, you need to require the `Map` module:\n```javascript\nvar TileMap = require('pixelbox/TileMap');\nvar map = new TileMap(16, 16); // create a new tile map of 16 by 16 tiles\n```\n\n#### Draw map\n\n```javascript\nmap.draw(x, y);  // draw map on screen at [x, y] position\ndraw(map, x, y); // idem, using the global draw function\ntexture.draw(map, x, y); // draw a map in another texture\nmap.setTilesheet(tilesheet); // set tilesheet to use for this map\n                             // The whole map is redrawn when calling this function\n```\n\n#### Access map content\n\n```javascript\nmap.get(x, y); // returns the Tile at position [x, y]. null if empty\nmap.set(x, y, tile, flipH, flipV, flipR, flagA, flagB); // add a tile\nmap.remove(x, y); // remove tile at position [x, y]. (set it to null)\nmap.find(tile, flagA, flagB); // find all tiles with specified properties\n```\n\n#### Modifying maps programatically\n\n```javascript\nmap.resize(width, height); // resize the map (size unit is tiles)\nmap.clear(); // Reset the whole map content by setting all its tiles to null\nvar mapCopy = map.copy(x, y, width, height); // copy this map to a new one\n               // x, y, width, height can be specified to copy only a rectangular part of the map\nmap.paste(mapCopy, x, y, merge); // paste map data in the map at position offset [x, y]\n               // if 'merge' flag is set, then null tiles will not overwrite current map tile\n```\n\n## Gamepad\n\nThe `gamepad` module allows for easy access to gamepads if the browser supports it. When the gamepad feature is enabled in the project settings, you get access to these objects on the global scope:\n```javascript\ngamepads[id]; // get gamepad state. id is a number in the range [0..4] (4 is computer keyboard)\ngamepad; // Merge states of all gamepads and return a global gamepad state.\n```\n\nGamepad state works like keyboard controls: You get the state of each button, button presses and button releases, plus the values of analog controls.\n\n```javascript\nvar state = gamepads[0]; // get state of gamepad id 0\n\n// buttons:\nstate.btn.A; // state of A button\nstate.btn.B; // state of B button\nstate.btn.X; // state of X button\nstate.btn.Y; // state of Y button\nstate.btn.start; // state of 'start' button\nstate.btn.back;  // state of 'back' button\nstate.btn.up;    // directionnal pad's up button\nstate.btn.down;  // directionnal pad's down button\nstate.btn.left;  // directionnal pad's left button\nstate.btn.right; // directionnal pad's right button\nstate.btn.lb; // left bumper button\nstate.btn.rb; // right bumper button\nstate.btn.lt; // left trigger button\nstate.btn.rt; // right trigger button\n\n// button press and release.\n// the structure is the same as state.btn but the values are true only\n// on button press or release.\nstate.btnp; // button press\nstate.btnr; // button release\n\n// analog values\nstate.x  // x axe value (first stick horizontal)\nstate.y  // y axe value (first stick vertical)\nstate.z  // z axe value (second stick horizontal)\nstate.w  // w axe value (second stick vertical)\nstate.lt // left trigger analog value\nstate.rt // right trigger analog value\n```\n\n## PataTracker\n\nPixelbox editor is bundled with a music tracker called *PataTracker*.\nThe tracker player must be enabled in the project settings. Player allows to directly plays the songs in the `json` formatted tracker files.\n\nPataTracker player is exposed as a `patatracker` global variable.\n```js\npatatracker.playSong(songNumber);\npatatracker.stop();\n```\n\nPataTracker automatically loads the project's album data (`assets/patatracker.json`). If you need to load a different album, you can do it with the following API:\n```js\npatatracker.loadData(data);\n```\n\n## Bleeper\n\nBleeper is the sound effect editor of Pixelbox. Like for PataTracker, it must be enabled in the project settings.\nNote that Bleeper depends on the *AudioManager* component.\n\nThere are several ways to play Bleeper sounds:\n\n#### Named sounds\nIf the sound is named, it is accessible on the `assets` global, and automatically added to AudioManager.\n```js\n// from assets global\nassets.bleeper.mySound.play(volume, panoramic, pitch); // all parameters optional\n\n// using audioManager\nsfx('mySound', volume, panoramic, pitch); // using default channel\naudioManager.playSound('sfx', 'mySound', volume, panoramic, pitch);\n```\n\n#### Using bleeper module\nThe Bleeper module exposes an array of all sounds defined in the program.\n```js\nvar bleeper = require('pixelbox/bleeper');\nbleeper.sounds[3].play(volume, panoramic, pitch);\n```\n","funding_links":[],"categories":["JavaScript","Libraries"],"sub_categories":["JavaScript"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcstoquer%2Fpixelbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcstoquer%2Fpixelbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcstoquer%2Fpixelbox/lists"}