shapez/README.md

102 lines
6.1 KiB
Markdown
Raw Normal View History

2020-05-09 16:45:23 +02:00
# shapez.io
2020-05-09 16:52:01 +02:00
2020-05-14 09:37:11 +02:00
<img src="https://i.imgur.com/Y5Z2iqQ.png" alt="shapez.io Logo">
2020-05-12 09:09:23 +02:00
2020-05-26 18:33:37 +02:00
This is the source code for shapez.io, an open source base building game inspired by Factorio.
2020-05-09 16:52:01 +02:00
Your goal is to produce shapes by cutting, rotating, merging and painting parts of shapes.
- [Trello Board & Roadmap](https://trello.com/b/ISQncpJP/shapezio)
- [Free web version](https://shapez.io)
- [itch.io Page](https://tobspr.itch.io/shapezio)
- [Steam Page](https://steam.shapez.io)
- [Official Discord](https://discord.com/invite/HN7EVzV) <- _Highly recommended to join!_
2020-05-09 16:52:01 +02:00
## Reporting issues, suggestions, feedback, bugs
1. Ask in `#bugs` / `#feedback` / `#questions` on the [Official Discord](https://discord.com/invite/HN7EVzV) if you are not entirely sure if it's a bug etc.
2. Check out the trello board: https://trello.com/b/ISQncpJP/shapezio
2020-07-18 16:06:23 +02:00
3. See if it's already there - If so, vote for it, done. I will see it. (You have to be signed in on trello)
4. If not, check if it's already reported here: https://github.com/tobspr/shapez.io/issues
2020-07-18 20:40:40 +02:00
5. If not, file a new issue here: https://github.com/tobspr/shapez.io/issues/new
6. 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 ;)
2020-05-09 16:52:01 +02:00
## Building
- Make sure git `git lfs` extension is on your path
- Run `git lfs pull` to download sound assets
2020-05-26 18:33:37 +02:00
- Make sure `ffmpeg` is on your path
2020-06-13 18:00:25 +02:00
- Install Node.js and Yarn
- Run `yarn` in the root folder
- Cd into `gulp` folder
- Run `yarn` and then `yarn gulp` - it should now open in your browser
2020-05-09 16:52:01 +02:00
2020-05-26 18:33:37 +02:00
**Notice**: This will produce a debug build with several debugging flags enabled. If you want to disable them, modify `config.js`.
2020-05-09 16:52:01 +02:00
2020-06-10 12:30:31 +02:00
## Helping translate
2020-06-10 12:45:27 +02:00
Please checkout the [Translations readme](translations/).
2020-06-10 12:30:31 +02:00
2020-05-09 16:52:01 +02:00
## Contributing
2020-05-12 09:09:23 +02:00
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.
2020-05-29 07:44:03 +02:00
**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.
2020-05-26 18:33:37 +02:00
If you want to add a new feature or in generally contribute I recommend to get in touch with me on Discord:
2020-05-12 09:09:23 +02:00
<a href="https://discord.com/invite/HN7EVzV" target="_blank">
<img src="https://i.imgur.com/SoawBhW.png" alt="discord logo" width="100">
</a>
2020-05-09 16:52:01 +02:00
### Code
2020-07-27 11:12:36 +02:00
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).
2020-05-12 09:09:23 +02:00
The code within the engine is relatively clean with some code for the actual game on top being hacky.
2020-05-09 16:52:01 +02:00
2020-05-26 18:33:37 +02:00
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.
2020-05-15 12:54:01 +02:00
2020-08-12 20:34:00 +02:00
#### Adding a new component
1. Create the component file in `src/js/game/components/<name_lowercase>.js`
2. Create a component class (e.g. `MyFancyComponent`) which `extends Component`
3. Create a `static getId()` method which should return the `PascalCaseName` without component (e.g. `MyFancy`)
2020-08-12 20:34:00 +02:00
4. If any data needs to be persisted, create a `static getSchema()` which should return the properties to be saved (See other components)
5. Add a constructor. **The constructor must be called with optional parameters only!** `new MyFancyComponent({})` should always work.
6. Add any props you need in the constructor.
7. Add the component in `src/js/game/component_registry.js`
2020-09-19 07:49:17 +02:00
8. Add the component in `src/js/game/entity_components.js`
2020-08-12 20:34:00 +02:00
9. Done! You can use your component now
#### Adding a new building
(The easiest way is to copy an existing building)
1. Create your building in `src/js/game/buildings/<my_building.js>`
2. Create the building meta class, e.g. `MetaMyFancyBuilding extends MetaBuilding`
3. Override the methods from MetaBuilding you want to override.
4. Most important is `setupEntityComponents`
5. Add the building to `src/js/game/meta_building_registry.js`: You need to register it on the registry, and also call `registerBuildingVariant`.
6. Add the building to the right toolbar, e.g. `src/js/game/hud/parts/buildings_toolbar.js`:`supportedBuildings`
7. Add a keybinding for the building in `src/js/game/key_action_mapper.js` in `KEYMAPPINGS.buildings`
8. In `translations/base-en.yaml` add it to two sections: `buildings.[my_building].XXX` (See other buildings) and also `keybindings.mappings.[my_building]`. Be sure to do it the same way as other buildings do!
9. Create a icon (128x128, [prefab](https://github.com/tobspr/shapez.io-artwork/blob/master/ui/toolbar-icons.psd)) for your building and save it in `res/ui/buildings_icons` with the id of your building
10. Create a tutorial image (600x600) for your building and save it in `res/ui/building_tutorials`
11. In `src/css/resources.scss` add your building to `$buildings` as well as `$buildingAndVariants`
2020-08-12 20:34:00 +02:00
12. Done! Optional: Add a new reward for unlocking your building at some point.
#### Adding a new game system
1. Create the class in `src/js/game/systems/<system_name>.js`
2. Derive it from `GameSystemWithFilter` if you want it to work on certain entities only which have the given components. Otherwise use `GameSystem` to do more generic stuff.
3. Implement the `update()` method.
4. Add the system in `src/js/game/game_system_manager.js` (To `this.systems` and also call `add` in the `internalInitSystems()` method)
5. If your system should draw stuff, this is a bit more complicated. Have a look at existing systems on how they do it.
2020-05-09 16:52:01 +02:00
### Assets
2020-05-26 18:33:37 +02:00
For most assets I use Adobe Photoshop, you can find them in `assets/`.
2020-09-19 07:49:17 +02:00
You will need a <a href="https://www.codeandweb.com/texturepacker" target="_blank">Texture Packer</a> license in order to regenerate the atlas. If you don't have one but want to contribute assets, let me know and I might compile it for you. I'm currently switching to an open source solution but I can't give an estimate when that's done.
<img src="https://i.imgur.com/W25Fkl0.png" alt="shapez.io Screenshot">