npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, πŸ‘‹, I’m Ryan HefnerΒ  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you πŸ™

Β© 2024 – Pkg Stats / Ryan Hefner

create-shapezio-mod

v0.12.9

Published

<h1 align="center">Welcome to create-shapezio-mod πŸ‘‹</h1> <p> <a href="https://www.npmjs.com/package/create-shapezio-mod" target="_blank"> <img alt="Version" src="https://img.shields.io/npm/v/create-shapezio-mod.svg"> </a> <a href="https://

Downloads

24

Readme

A cli for setting up and building a shapez.io mod

🏠 Homepage

Table of contents

  1. Usage
    1. CLI
      1. Creating a shapez.io mod
      2. Updating shapez.io
      3. Setting up a new shapez.io mod
      4. Updating shapez.io typings
    2. Buildtools
      1. Requirements
      2. Serving the mod
      3. Building the mod
    3. Creating a mod
      1. Javascript
      2. Res
      3. Css
      4. Translations
  2. Bugs
  3. Installing requirements
    1. Installing vscode
    2. Installing nodejs
    3. Installing yarn
    4. Installing java
    5. Installing python
    6. Installing git

Usage

CLI

Creating a shapez.io mod

To setup a shapez.io mod run the following command. Make sure all requirements are installed.

npx create-shapezio-mod init

It puts all project files in a new folder named shapezio-mods. Do not forget to move into this folder to run any other commands.

Next to running this command make sure that java is installed and added to path and when creating building textures python is installed.

Updating shapez.io

When developing or updating a mod there is a chance the modloader or the cli changes to update your local shapez.io and cli you can run the following command in the shapezio-mods folder.

npx create-shapezio-mod upgrade

You can choose if you only want to update the build files or shapez.io.

Setting up a new shapez.io mod

To setup more mods than just the one created on init you can use the following command. Again make sure all requirements are installed.

npx create-shapezio-mod mod

This command creates a new folder inside the src folder. There you can start working on your new mod.

Updating shapez.io typings

When updating shapez.io a types.d.ts file is created to add type support. If this files somehow gets currupted you can fix it by running the following command in the shapezio-mods folder.

npx create-shapezio-mod typings

Buildtools

Requirements

Serving the mod

If you want to test your mod while making changes you can serve the mod with shapez.io.

yarn dev

A browser tab and shapez will start. Close the browser tab and hit F5 in the shapez winow. It will automatically reload when you make a change to your mod.

Building the mod

If your mod is finished and you want to share it you can run the following command in the working directory.

yarn build

This will generate a build folder with a <mod_id>@<version>.js in it. The js file is the file you need to share it has all your images, translations, themes and css build in.

Creating a mod

When everything is installed you should have a project with a src folder and in there some other directories: js, css, translations, themes and res.

Javascript

The js folder contains all the code for your script. In the js folder there is a main.js file this is the start of your mod. You can use the cli examples or the shapez.io examples for refence. Do note that you don't need to use shapez., your editor will auto recognize all the shapez imports and import them, this way you get intellisense and autocompletion. In side the javascript you can also import images. It will import the images as a base64 string. import building1 from "../res/icons/building1.png";

Res

To change or add images or building sprites you can use the res folder. To change building sprites put them in the sprites/buildings folder. You can use the python script to generate the blueprint images or create them your self and put them in the sprites/blueprints folder.

Css

It contains a default setup for a mod. The css folder contains a main.scss here you can use your scss or css to add to shapez. If you want to add images you can use url("../res/icons/building1.png") this will link to the icon in res/icons/building1.png.

Translations

The translations folder can contain files with two letter language codes as names and ending in yaml: en.yaml. In these files you can change translations or add translations. You can have a look at the shapez.io translations to see how it works.

Bugs

Please report any bugs you find in the shapez.io modloader discord or create a new issue

Installing requirements

Installing vscode

  • Follow the instructions on https://code.visualstudio.com/docs/setup

Installing nodejs

  • Download and install nodejs from the official nodejs website: https://nodejs.org/en/blog/release/v16.16.0
  • Check if nodejs is installed correctly by running node --version
    • If not try again or search on the internet

Installing yarn

  • After installing nodejs run the following command or install via yarn's official webiste: https://classic.yarnpkg.com/lang/en/docs/install
    npm install --global yarn

Installing java

  • Download and install java from the official java website. It needs to be Node 16: https://www.oracle.com/java/technologies/downloads/
  • Check if java is installed correctly by running java -version
    • If not add java to path: https://www.java.com/en/download/help/path.html

Installing python

  • Download and install python from the official python website: https://www.python.org/downloads/

Installing git

  • Follow the install instructions from github or git: https://github.com/git-guides/install-git

Installing ffmpeg

  • Download ffmpeg: https://ffmpeg.org/download.html
  • Add ffmpeg to path: https://www.java.com/en/download/help/path.html

Author

πŸ‘€ DJ1TJOO

Show your support

Give a ⭐️ if this project helped you!