Game. Startup Sequence
This page describes game's startup sequence, as it should be executed with each run of the game's executable on each system.
Implemented in: #4, #13, #43 and in #158.
Table of Contents:
Table of contents generated with markdown-toc.
If possible, game's logo should appear with a quick fade-in effect.
For this screen we should use original logo image, but stripped from original company name and copyright line:
Logo image should have two additional an additional text overlays:
- Location: bottom-left corner
- Format: MAJOR.MINOR.PATCH
- Additional text: no
- Look & Feel: white text with black shadow, on transparent background
-
Location: top-left corner(descoped) -
Format: just a plain text(descoped) -
Additional text: (press any key or click to continue)(descoped) -
Look & Feel: white text with black shadow, on transparent background(descoped)
If possible, both overlay texts should be displayed with black shadow.
(Translations removed due to descope of continuity message display.)
An original theme should be played in the back (once!) when displaying logo image:
The game logo should be visible for 19 seconds 7 seconds or until user (depending on platform):
- hits Esc, Space, or Enter (or presses any key, if you prefer)
- click anywhere with the screen with mouse
- taps anywhere with the screen
If possible, game logo should disappear (after 19 seconds or after user interaction), with a quick fade-out effect.
Hide logo, stop music and display the Settings view.
This functionality must be implemented for all platforms except mobile apps. In any place and in any scenario, where users can resize main application window and (at some point) can reach portrait orientation (window width smaller than window height) they must be blocked from continuing their gameplay
Only mobile apps (for Android and iOS) are excluded from this list, but must enforce landscape orientation in any scenario.
Example HTML code (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Logo Screen + Orientation Detection</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="overlay">
<div id="container">
<h1 id="content">
Our game looks TERRIBLE<br />in portrait orientation!<br /><br />
Please, rotate your device<br />to landscape orientation<br />in order to continue...<br /><br />
Thank you!
</h1>
</div>
</div>
<div id="back"></div>
</body>
<script src="code.js"></script>
</html>Example CSS styles (style.css):
@font-face {
font-family: 'Lost Pixelized Font';
src: url('lpf.woff2') format('woff2'), /* Modern Browsers */
url('lpf.otf') format('opentype'); /* Safari, Android, iOS */
font-style: normal;
font-weight: normal;
text-rendering: optimizeLegibility;
}
body, html {
height: 100%;
margin: 0;
}
#back {
background-image: url("back.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 100%;
}
#overlay {
color: #fff;
width: 100%;
height: 100%;
display: none;
z-index: 9999;
position: fixed;
background-color: rgba(0, 0, 0, 0.777);
}
#container {
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
}
#content {
color: #fff;
font-size: 6vw;
position: relative;
text-align: center;
font-family: 'Lost Pixelized Font', monospace;
}Example JS code (code.js):
function handleResize() {
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
const overlay = document.getElementById('overlay');
overlay.style.display = (windowWidth <= windowHeight) ? 'block' : 'none';
}
window.addEventListener('resize', handleResize);
handleResize();A working prototype can be found here or here: https://test.lostmine.cc/prototypes/device-orientation/.
| Source | Translation |
|---|---|
| Our game looks TERRIBLE in portrait orientation! | Nasza gra wygląda TRAGICZNIE w orientacji pionowej! |
| Please, rotate your device to landscape orientation in order to continue... | Aby kontynuować, obróć swoje urządzenie do poziomu... |
| Source | Translation |
|---|---|
| Our game looks TERRIBLE in portrait orientation! | Nasz szpil wyglōndŏ ŁOKROPNIE w ôriyntacyje piōnowyj! |
| Please, rotate your device to landscape orientation in order to continue... | Coby kōntynuować, ôbrōć swoje maszina do poziōmu... |
| Thank you! | Dziynkujymy! |
| Source | Translation |
|---|---|
| Our game looks TERRIBLE in portrait orientation! | Notre jeu a l'air TERRIBLE en orientation portrait ! |
| Please, rotate your device to landscape orientation in order to continue... | Veuillez faire pivoter votre appareil en orientation paysage pour continuer... |
| Thank you! | Merci ! |
| Source | Translation |
|---|---|
| Our game looks TERRIBLE in portrait orientation! | Unser Spiel sieht im Hochformat SCHRECKLICH aus! |
| Please, rotate your device to landscape orientation in order to continue... | Bitte drehen Sie Ihr Gerät ins Querformat, um fortzufahren... |
| Thank you! | Danke schön! |
| Source | Translation |
|---|---|
| Our game looks TERRIBLE in portrait orientation! | ¡Nuestro juego se ve TERRIBLE en orientación vertical! |
| Please, rotate your device to landscape orientation in order to continue... | Por favor, gire su dispositivo a orientación horizontal para continuar... |
| Thank you! | ¡Gracias! |
| Source | Translation |
|---|---|
| Our game looks TERRIBLE in portrait orientation! | Il nostro gioco sembra TERRIBILE in orientamento verticale! |
| Please, rotate your device to landscape orientation in order to continue... | Per favore, ruota il tuo dispositivo in orientamento orizzontale per continuare... |
| Thank you! | Grazie! |
| Source | Translation |
|---|---|
| Our game looks TERRIBLE in portrait orientation! | portret orienteshan mein hamaara gem bhayaanak dikhata hai! |
| Please, rotate your device to landscape orientation in order to continue... | krpaya, jaaree rakhane ke lie apane divais ko laindaskep orienteshan mein ghumaen... |
| Thank you! | dhanyavaad! |
| Source | Translation |
|---|---|
| Our game looks TERRIBLE in portrait orientation! | У книжковій орієнтації наша гра виглядає ЖАХЛИВО! |
| Please, rotate your device to landscape orientation in order to continue... | Щоб продовжити, поверніть пристрій у альбомну орієнтацію... |
| Thank you! | Дякую тобі! |
