Application. Building
Table of Contents:
Table of contents generated with markdown-toc.
When completed successfully, your compiled code should be available to be run in many platforms.
All builds must be prepared on corresponding OSes. I.e. you are not able to build MacOS version on Linux system.
To build Windows version of our game you need to:
- run
npm build - copy contents of x64 subfolder in .webpack folder to .webpack root folder
- run
npm build:dist
First command generates correct webpack (electron-builder has problems with that).
Second command builds correct version that should be used by public.
All steps needs to be performed on Windows system.
To build MacOS version of our game you need to:
- run
npm build:dist
All steps needs to be performed on MacOS system.
To build Linux version of our game you need to:
- run
npm build:dist
All steps needs to be performed on Linux system.
TBC.
TBC.
Implemented in: #110 and #113.
To build web version run on PC npm run build:web:mac for mac, npm run build:web:linux for linux and npm run build:web:win for windows. Contents of .webpack folder then is your build for web, as they are static files readable by your browser. Open index.html file from renderer directory in browser and it will work. If you cannot see index.html in renderer folder or favicon.png in main_window folder, run copy index.html ./.webpack/x64/renderer && copy ./src/favicon.png ./.webpack/x64/renderer/main_window in windows, cp index.html ./.webpack/x64/renderer && cp ./src/favicon.png ./.webpack/x64/renderer/main_window in linux and cp index.html ./.webpack/arm64/renderer && cp ./src/favicon512.png ./.webpack/arm64/renderer/main_window/favicon.png in mac.
Setting own icon for an application build with Electron involves a number of steps described in here.
Note that this chapter includes necessary assets only. All the instructions for setting app icons and installer icons can be found in the Electron guide.
Assets are provided matching Electron's supported formats.
| 1156x1156 pixels | 1024x1024 pixels | 512x512 pixels | 256x256 pixels | |
|---|---|---|---|---|
| Platform | (base source) | macOS Retina | macOS regular + Linux | Windows |
| Icon |  |
 |
 |
 |
| Regular | i1156.png |
i1024.pngi1024.icns
|
i512.pngi512.icns
|
i256.pngi256.icns
|
| Transparent | i1156t.png |
i1024t.pngi1024t.icns
|
i512t.pngi512t.icns
|
i256t.pngi256t.icns
|
Please, note that the filenames for each icon file has been shortened above for clarity of the table. You should always refer to Electron guide to learn how
We need to test how icons with transparency will look on each platform to decide whether we use such or regular instead. However, initial tests with RealFaviconGenerator (below) have proven that using transparent version of the icon is not the best idea.
Implemented in: #115.
Since we are developing an Electron app, we strictly follow its Custom App Icons guide in order to generate and set app icons and installer icons for all supported platforms.
Implemented in: #116.
Web version of our game is a typical static website and therefore uses a favicon mechanism instead.
Favicon package was generated using RealFaviconGenerator in two versions:
-
Transparent favicon icons set (
favicon-transparent.zip) -
Non-transparent favicon icons set (
favicon-regular.zip)
Note that RealFaviconGenerator offers a tremendous set of options in order to configure favicon generation process matching your needs as much as possible. If the above files are not sufficient for any reason, use the base source image and generate your own set.
To install favicon you should:
-
Download your package (above links)
-
Extract package in the root of web version of the game (i.e. https://play.lostmine.cc/favicon.ico file, etc.)
-
Insert the following code in the
<head>section of your pages:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">- Once your web-version is deployed check your favicon
Implemented in: #117.
Note that by default Electron doesn't support mobile apps, so adding own icon to the mobile artifacts (i.e. .ipa, .apk) meant for mobile app shops isn't supported by the default Electron guide and must be handled by us separately.
