This is the source code for shapez.io, an open source base building game inspired by Factorio. Your goal is to produce shapes by cutting, rotating, merging and painting parts of shapes.
- Steam Page
- Official Discord <- Highly recommended to join!
- Trello Board & Roadmap
- itch.io Page
- Free web version
- Ask in
#bugs
/#feedback
/#questions
on the Official Discord if you are not entirely sure if it's a bug etc. - Check out the trello board: https://trello.com/b/ISQncpJP/shapezio
- See if it's already there - If so, vote for it, done. I will see it. (You have to be signed in on trello)
- If not, check if it's already reported here: https://github.com/tobspr/shapez.io/issues
- If not, file a new issue here: https://github.com/tobspr/shapez.io/issues/new
- I will then have a look (This can take days or weeks) and convert it to trello, and comment with the link. You can then vote there ;)
- Make sure
ffmpeg
is on your path - Install Node.js and Yarn
- Install Java (required for textures)
- Run
yarn
in the root folder - Cd into
gulp
folder - Run
yarn
and thenyarn gulp
- it should now open in your browser
Notice: This will produce a debug build with several debugging flags enabled. If you want to disable them, modify src/js/core/config.js
.
You can use Gitpod (an Online Open Source VS Code-like IDE which is free for Open Source) for working on issues and making PRs to this project. With a single click it will start a workspace and automatically:
- clone the
shapez.io
repo. - install all of the dependencies.
- start
gulp
ingulp/
directory.
Please checkout the Translations readme.
Since this game is in the more or less early development, I will only accept pull requests which add an immediate benefit. Please understand that low quality PR's might be closed by me with a short comment explaining why.
If you want to add a new building, please understand that I can not simply add every building to the game! I recommend to talk to me before implementing anything, to make sure its actually useful. Otherwise there is a high chance of your PR not getting merged.
If you want to add a new feature or in generally contribute I recommend to get in touch with me on Discord:
The game is based on a custom engine which itself is based on the YORG.io 3 game engine (Actually it shares almost the same core). The code within the engine is relatively clean with some code for the actual game on top being hacky.
This project is based on ES5. Some ES2015 features are used but most of them are too slow, especially when polyfilled. For example, Array.prototype.forEach
is only used within non-critical loops since its slower than a plain for loop.
- Create the component file in
src/js/game/components/<name_lowercase>.js
- Create a component class (e.g.
MyFancyComponent
) whichextends Component
- Create a
static getId()
method which should return thePascalCaseName
without component (e.g.MyFancy
) - If any data needs to be persisted, create a
static getSchema()
which should return the properties to be saved (See other components) - Add a constructor. The constructor must be called with optional parameters only!
new MyFancyComponent({})
should always work. - Add any props you need in the constructor.
- Add the component in
src/js/game/component_registry.js
- Add the component in
src/js/game/entity_components.js
- Done! You can use your component now
(The easiest way is to copy an existing building)
- Create your building in
src/js/game/buildings/<my_building.js>
- Create the building meta class, e.g.
MetaMyFancyBuilding extends MetaBuilding
- Override the methods from MetaBuilding you want to override.
- Most important is
setupEntityComponents
- Add the building to
src/js/game/meta_building_registry.js
: You need to register it on the registry, and also callregisterBuildingVariant
. - Add the building to the right toolbar, e.g.
src/js/game/hud/parts/buildings_toolbar.js
:supportedBuildings
- Add a keybinding for the building in
src/js/game/key_action_mapper.js
inKEYMAPPINGS.buildings
- In
translations/base-en.yaml
add it to two sections:buildings.[my_building].XXX
(See other buildings) and alsokeybindings.mappings.[my_building]
. Be sure to do it the same way as other buildings do! - Create a icon (128x128, prefab) for your building and save it in
res/ui/buildings_icons
with the id of your building - Create a tutorial image (600x600) for your building and save it in
res/ui/building_tutorials
- In
src/css/resources.scss
add your building to$buildings
as well as$buildingAndVariants
- Done! Optional: Add a new reward for unlocking your building at some point.
- Create the class in
src/js/game/systems/<system_name>.js
- Derive it from
GameSystemWithFilter
if you want it to work on certain entities only which have the given components. Otherwise useGameSystem
to do more generic stuff. - Implement the
update()
method. - Add the system in
src/js/game/game_system_manager.js
(Tothis.systems
and also calladd
in theinternalInitSystems()
method) - If your system should draw stuff, this is a bit more complicated. Have a look at existing systems on how they do it.
This is a quick checklist, if a new building is added this points should be fulfilled:
- The translation for all variants is done and finalized
- The artwork (regular sprite) is finalized
- The blueprint sprite has been generated and is up to date
- The building has been added to the appropriate toolbar
- The building has a keybinding which makes sense
- The building has a reward assigned and is unlocked at a meaningful point
- The reward for the building has a proper translation
- The reward for the building has a proper image
- The building has a proper tutorial image assigned
- The buliding has a proper toolbar icon
- The reward requires a proper shape
- The building has a proper silhouette color
- The building has a proper matrix for being rendered on the minimap
- The building has proper statistics in the dialog
- The building properly contributes to the shapes produced analytics
- The building is properly persisted in the savegame
- The building is explained properly, ideally via an interactive tutorial
For most assets I use Adobe Photoshop, you can find them here.
All assets will be automatically rebuilt into the atlas once changed (Thanks to dengr1065!)