A versatile template overlay for wplace.live
Find a file
thatfrozenfrog 8f6732bafa Simplify installation instructions with one-click install links
This is because Tampermonkey automagically detect whether raw js files are being opened and redirect user to installation page. We might need a custom build action to update the links though.

- Replace manual download and drag process with direct install links
- Remove unnecessary screenshots and dashboard steps
2025-08-09 21:53:29 +07:00
.github/workflows Fixed commit description bug in build.yml 2025-07-31 04:52:37 -04:00
build Added red box overlay 2025-07-29 16:31:43 -04:00
dist Release version; Merge pull request #17 from CpdnCristiano/fix-template-pixel-offset 2025-08-02 16:40:34 +00:00
docs Simplify installation instructions with one-click install links 2025-08-09 21:53:29 +07:00
src Release version; Merge pull request #17 from CpdnCristiano/fix-template-pixel-offset 2025-08-02 16:40:34 +00:00
.gitattributes Initial commit 2025-07-23 17:47:49 -04:00
.gitignore Added css map for consistent mapping during patches 2025-07-29 13:39:26 -04:00
LICENSE.txt Updated README.md and other github files 2025-07-24 04:07:08 -04:00
package-lock.json Fix template pixel offset calculation 2025-08-02 08:43:16 -03:00
package.json Release version; Merge pull request #17 from CpdnCristiano/fix-template-pixel-offset 2025-08-02 16:40:34 +00:00

Blue Marble Enable 'Developer Mode'
  • One-click install: Click this link to install Blue Marble directly: Install Blue Marble
    TamperMonkey will automatically detect the userscript and prompt you to install it.
  • span="99">Discord Banner
    Overview
    Script Settings
    Template Settings
    How Versioning Works
    Licenses
    FAQ
    How do I hide the overlay?
    Why do game notifications appear on top of the overlay?

    Blue Marble

    Latest Version Latest Release Software License: MPL-2.0 Contact Me WakaTime Total Patches Total Lines of Code Total Comments Compression Build CodeQL

    Overview

    Welcome to Blue Marble! Blue Marble is a userscript for the website wplace.live. If you like this userscript, please the repository!

    Installation Instructions

    Supported Browsers Unupported Browsers

    Blue Marble has been verified to work on mobile devices. Blue Marble was designed on Chrome, but Blue Marble might work on "unsupported" browsers not listed above. Some versions/forks of FireFox work. Some versions/forks of FireFox do not work.
    Installation instructions for Blue Marble are below. Click the arrows to expand the instructions you want to see. Blue text is a link.

    Computer - Chrome (Click to Expand)
    1. Install the TamperMonkey plugin for Chrome.
      Click the 'Add extention' button
    2. Right-click the extention.
      Enter the 'Manage Extention' menu
    3. Left-click "Manage Extension."
    4. Enable "Developer Mode."
      Enable 'Developer Mode' and 'Allow user scripts'
    5. Enable "Allow user scripts."
    6. One-click install: Click this link to install Blue Marble directly: Install Blue Marble
      TamperMonkey will automatically detect the userscript and prompt you to install it.
    7. Refresh the wplace.live webpage.
    Computer - Edge (Click to Expand)
    1. Install the TamperMonkey plugin for Microsoft Edge.
      Click the 'Get' button
    2. Right-click the extention.
      Enter the 'Manage Extention' menu
    3. Left-click "Manage Extension."
    4. Enable "Developer Mode."
      Enable 'Developer Mode'
    5. Download the BlueMarble.user.js file in the "assets" of the latest release.
    6. Open the TamperMonkey Dashboard.
      Enter the TamperMonkey 'Dashboard'
    7. Drag the BlueMarble.user.js file inside the dashboard of TamperMonkey.
      Drag the userscript into the dashboard
    8. Click the "Install" button to install Blue Marble.
      Click the 'Install' button
    9. Enable Blue Marble inside the TamperMonkey dashboard.
      Enable Blue Marble
    10. Refresh the wplace.live webpage.
    Computer - FireFox (Click to Expand)
    1. Install the TamperMonkey plugin for FireFox.
      Click the 'Add to FireFox' button
    2. One-click install: Click this link to install Blue Marble directly: Install Blue Marble
      TamperMonkey will automatically detect the userscript and prompt you to install it.
    3. Refresh the wplace.live webpage.

    Template Instructions

    Blue Marble will display your template as the same size. If your image is 500 pixels tall and 300 pixels wide, the template will be 500 pixels tall and 300 pixels wide. Here is the instructions to display a template image on the canvas:

    1. Find the pixel of the top left corner. Fill in Tl X, Tl Y, Px X, and Px Y with the coordinates. You can use the "Pin" icon to auto-fill the coordinates after clicking the pixel.
      Find template coordinates
    2. Upload a PNG or WEBP image.
    3. Click the "Enable" button.

    Script Settings

    There are many settings available for the Blue Marble userscript! Through these settings, you can control how the script behaves.

    Template Settings

    Transparent Pixels

    Templates for Blue Marble work slightly different from normal. Since there is a "Transparent" color, and transparent pixels in templates are typically ignored, your template should have a custom color to signify "Transparent" colored pixels. If a specific pixel can be any color, it should be transparent in the template. If a specific pixel should be "Transparent" color, it should have the #deface hex color. Any #deface colored pixel in your template will be interpereted as the "Transparent" color. Any transparent colored pixel in your template will be interpereted as ignored.

    Coordinates

    Tile Coordinates

    The coordinate system for wplace.live is unique. Instead of all pixels having a global coordinate number (x, y), the coordinate number is relative to the tile. This means you need to know the tile number and the coordinate number to do anything. In Blue Marble, the tile coordinates and the pixel coordinates are displayed when you click on a pixel. These are the coordinates you should use for aligning a template.
    Where to find tile coordinates

    Template Coordinates

    The template is aligned from the top left corner of the template. You can auto-fill this position using the "pin" icon next to the coordinate input boxes.

    How Versioning Works

    The versioning system for this userscript follows the Semantic Versioning rules. As such, it is formatted in an X.Y.Z format where:

    • X is the major version. This is incremented when a non-backward compatible update is pushed. This is for new features that break previous versions of the userscript. Additionally, if wplace.live breaks the userscript, this will be incremented.
    • Y is the minor version. This is incremented whenever I push to GitHub. This is for stable bug-fixes and new (non-breaking) features.
    • Z is the patch version. This is incremented whenever I launch a development version of the userscript to test a patch. This is for unstable bug-fixes/features.

    Licenses

    (Below, all mentions of the "userscript" refer to the "Blue Marble" userscript made by SwingTheVine)
    Most of this userscript is licensed under the Mozilla Public License Version 2.0 (MPL-2.0). All software, code, and libraries in this repository are licensed under the MPL-2.0 license. However, the "Blue Marble" image in this userscript is owned by NASA and is licensed under the Creative Commons 0 1.0 Universal (CC0 1.0) license.

    FAQ

    Is Blue Marble malware?

    A: Blue Marble does not contain malicious code. The Blue Marble code can be found in the src/ folder. If you worry about Blue Marble being malware, you can read the code, then bundle it yourself using the tools in build/.

    How can Blue Marble place pixels for me?

    A: Unfortunatly, Blue Marble will not support the automatic placement of pixels without user interaction.

    How do I hide the overlay?

    A: Turn the userscript off and refresh the page.

    Why do game notifications appear on top of the overlay?

    A: Game notifications only appear when they need immediate attention. Therefore, they have priority over the overlay (which typically needs no attention).