create-shapezio-mod

Welcome to create-shapezio-mod 👋

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

• text editor (vscode)
• nodejs >= 16.0.0 < 17.0.0
• yarn
• java 8+
• python 3
• git
• ffmpeg

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

• Github: @DJ1TJOO

Show your support

Give a ⭐️ if this project helped you!