Game. Common Elements

Table of Contents:

• Full-Screen Box
  • Info Box
    • Dimensions
    • Remarks
    • Code
  • Error Screen

Table of contents generated with markdown-toc.

Full-Screen Box

Info Box

Implemented in #58.

In several places and situations in our game we will be using a full screen info box.

Dimensions

Element	gX, gY	gW, gH	aX, aY	aW, aH	Image
Textbox	18, 14	315, 98	192, 158	3456, 1080
Image	24, 19	138, 88	257, 213	1512, 971
Main Text Area	166, 19	161, 88	1812, 213	1771, 970
Extra Text Area	18, 118	315, 23	193, 1302	3456, 259
First Button	125, 151	48, 13	1369, 1659	519, 140
Second Button	178, 151	48, 13	1952, 1659	519, 140
Button Separator	173, 151	5, 13	1888, 1659	64, 140
First Button Text	127, 153	44, 9	1390, 1680	476, 97
Second Button Text	180, 153	44, 9	1974, 1680	476, 97

Definitions:

• gX, gY → in-game location; gW, gH → in-game dimensions;
• aX, aY → absolute (4K resolution) location; aW, aH → absolute (4K resolution) dimensions

Remarks

Some key remarks to take into account:

1. As in the example, the above table assumes two buttons-set. If one or three buttons are needed then they must use the same dimensions, button separator and vertical location (as in the above table) and for horizontal location they must be simply centered between margins.

2. Main text may contain up to eight lines of a text. Extra text may contain up to two lines of a text. There may be up to three functional buttons at the bottom of the screen.

3. All text boxes (Main Text Area, Extra Text Area and buttons' texts) have the following common attributes:

   • margin: 0 px
   • padding: 0 px
   • text-align: center
   • vertical-align: middle or line-height = height

4. Both text areas has standard line-height of 42 pt. Buttons uses non standard line-height: 38 pt.

5. The texts' colors are as follows:

   • Main Text Area: #CFAE6D
   • Extra Text Area: #EFEFEF
   • Buttons' texts (and background): #000000

6. This screen (and any other screen based on it) is considered a system-screen and therefore it has colors always the same. It never goes through Day-Night Cycle.

7. It is assumed that the entire info box screen will be build out of single elements and hence the table above. If full background screenshot is needed instead then this file might be used as a base.

8. Even though this is based on text boxes, we consider this screen as an info box. All the elements must be disabled from editing, selecting text, etc. For the end-player this screens should look like a full-screen image with clickable buttons.

9. Please, make sure that buttons are generated using <img /> or <div></div> elements and not <button> element. As in original game clicking such button must have no visual effect (when using real buttons, a short inset-outset animation / state switch can be seen).

Some examples and assets can be found here: Game. Info Box.zip.

Code

We need an separate method to display this info box that takes the following parameters (or has the following example call):

async function showInfo() {
    const result = await customInfoBox(
        "imageNameOrInfoBoxType",
        "Hello, this is a main text!",
        "And, this is some optional extra text...",
        ["First Button Text", "Second Button Text", "Third Button Text"]
    );

    console.log("User clicked:", result);
}

showInfo();

To reproduce the example image we would have to call:

async function showInfo() {
    const result = await customInfoBox(
        "gameOverDefeat",
        "Lorem ipsum dolor sit amet, consecte-tur adipiscing elit. Sed non risus. Sus-pendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.",
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus",
        ["One", "Two"]
    );

    console.log("User clicked:", result);
}

showInfo();

Some remarks:

1. This method must be called synchronously meaning that game flow must be stopped before user clicks any button.

2. Method must support key presses internally, when running desktop or web version of our game:

   • If there is only one button requested → pressing Enter acts as clicking it
   • If there are two buttons → pressing Enter acts as above and pressing Esc acts as clicking the second button
   • If there are three buttons → the scheme is the same as above and the third button has no keyboard shortcut

3. We use tokens only (or we can call them info box's types), so just an image name, without extension and path. Code responsible for rendering the info box should provide missing elements (path, extension) so the requested image (info box's type) is correctly displayed.

These are just idea examples. Please, work your own solution and provide the actual function call and other details to the Displaying Messages section. Thank you.

Error Screen

Based on the above common info-box we can design error message screen:

It uses the same assets assets with only different image. It uses our default in-game font.