LUDUMDARE 43

1. About

1.1 Game Plot

You are the leader of a small village in this very hostile world you need to decide if you will pay tribute to the gods or stand on your own against plagues that visit this world every year. Manage your villagers assign them to work so they can gather resources for sacrifices or village development. Or leave them idle so they can multiply and sacrifice them to permanently weaken creatures disturbing this world.

1.2 Examples

You can check this project here: The greatest sacrifice - ludumdare 43

You can also check benchmarking subproject where I check efficiency of different approaches to solving encountered optimization problems.

2. Project

2.1 Installation

npm i

2.2 Running

npm run game:build:prod
npm run game:start

2.3 Developing

This project uses InversifyJS for dependency injection React to provide web interface, and Phaser as sound and asset management. I treat it as proof of concept that all those technologies can be connected via dependency injection.

Everything is builded via Webpack with some default setup provided from xes-webpack-core. This project helps me to figure out what default configuration should be provided by xes-webpack-core.

Potentially reusable parts are places under src folder. Game specific files are placed under game folder. As this is work in progress files and their location will change drastically.

2.3.1 Serving

npm run game:serve

or

npm run game:serve:https

2.4 Translations I18N

2.4.1 Extracting

For extracting translation string into pot files run:

npm run game:xi18n

Then under game/locales/messages.pot you can fin newly extracted segments you can use them to update already translated segments in game/locales/messages.#lang#.po or add new translations.

2.4.2 Adding new translations

TODO: create single source of true for language configuration

src/lib/interfaces.ts add new locale string to LanguageType. Then update locale selection components.

2.5 Developing benchmarks

You can check benchmarks code in benchmarks folder. To run in development mode:

npm run benchmarks:serve

To build for production:

npm run benchmarks:build:prod
npm run benchmarks:start

3. Useful Tips

3.1 Usefull links

• react typescript cheetsheet

• analyze module code duplication

3.2 Game development

• MDN web docs - game development

3.3 Webpack

If we need to handle some vendors libraries that do not work well with standard webpack module exports and imports we have few options to choose from:

• if you want to export some variable from vendor library with webpack use inlined export-loader
• if you want to import some dependency into vendor library with webpack use inlined import-loader
• if you want to expose to global scope some variable in vendor library with webpack use inlined expose-loader

3.4 Developing service workers

Links:

• easy way to add service worker caching with workbox actually used in this project
• article about service worker on CSS Tricks
• for generating ssl certificates research mkcert

3.5 Handling download progress

To be able to visualize progress of downloading modules splitted by weback I needed to use ChunkProgressWebpackPlugin it converts request for lazy loaded modules into XHR request. Unfortunately it didn't handle correctly progress of downloading gziped content. In general in chrome when downloading gziped content we get lengthComputable === false so we need to send additional header info with uncompressed data size as suggested in stackoverflow.

This solution requires to create own server that can add those additional data or not show precentage progress of downloading if this additional data is not available.

3.6 Playfab

3.7 Caveats

• Why I don't use Function.bind and instead use instance functions when it supposed to be more optimized? this in Typescript

4. TODO:

• Data Storage Redux
• Dependency Injection Modules with InversifyJS
• Theming - ability to choose layout styles from some predefined set of themes
• Audio manager - module for handling playing music and sounds
• Preloader - reduce initial download size to what is only needed to display loader
• I18n - add ability to translate application UI extracting translation segments to be translated with Poedit and switch language dynamically by application user
• Fullscreen - handle switching to full screen view
• ServiceWorker - cache application for running offline
• Configuration view component handling configuration of audio and theming
• Large-Allocation header
• connect react router history to redux store
• separate audio from phaser or init phaser in compact mode
• add about view
• work on phaser states
• analytics with gtag vs google tag manager
• research open id
• connect playfab
• use immer
• web monetization