Question about accesibility features

General
1

I just learned about this engine, played the demo game. It looks cool and I am interested in learning more and making something myself, but first I have some questions.
Is it possible to:

  • give the player the ability to adjust text size?
  • Give the player an option to change the scaling the UI?
  • have a different modes, like a high contrast mode or a colorblind mode?
  • have the player choose the font themselves from a couple of options (such as switching to a dyslectic friendly font)
    I played the demo game in the browser and I would have liked an option to make everything bigger in order to read the text more comfortably, “CTRL +” did not work to enlarge everything.
    I am not a coder, just a random disabled artist, so I have no idea how I would go about implementing such features myself.
1 Like
2

The demo is a bit out of date as I haven’t rebuilt it in a while, so some of the recent features don’t appear in it. I need to rebuild and update it:

Yes it’s a thing now there’s a slider in the game menu

image
image1282Ă—709 97.3 KB

The font size slider scales a lot of things, but not everything. Games are designed on a fixed size/ratio of things, so scaling the whole UI doesn’t really work (if you increase the size of the dialogue panel, does the viewport have to become smaller?)

I generally have made the default CSS of the engine to use REM units as much as possible, which scale as a multiplier of the base body font size. Moving the font size slider in game settings changes that base body font size, which will make most things scale with it.

Not specifically, but that kind of stuff would be up to the game to implement. I recently made an example game with theme-swapping that can dynamically swap between different versions of the layout (which mean being able to load different versions of CSS files, and also the config).

Using this you could create multiple “themes” that change the font or various colors via CSS, like how the example changes a few colors and things in CSS.

Then you could let the players choose them either by adding custom settings, or for a more simple way by having some kind of choice menu at the start of your game that lets people pick. Or even idk an item in the inventory which on use launches a dialogue to pick accessibility options.

Generally you can add whatever CSS you want, so a lot of things could be done. And if some things aren’t properly scaling with rem you can always change the CSS to make them do what you want.

Also I probably should make font selection a feature in the engine. but in the meantime you could do it with the theme swapping like above

3

Also if you do want to make colorblind modes, the way I’d do it is by creating css variables for common colors (there’s already a bunch of CSS variables in narrat that you can use as a base).

So if you create a variable, in each theme you could change its value. For example

Default CSS file (your main.css):

:root {
  --text-color(white);
  --font-family: 'Helvetica', sans-serif, 'Arial', 'sans-serif';
  --my-custom-color: orange;
}

.button {
  background-color: var(--my-custom-color);
}

The text-color and font-family ones are already used by narrat, but you can also create new ones and use in your own CSS

Then you can have your different themes which just need to give different values to variables:

Other theme css file:

:root {
  --text-color(cyan);
  --font-family: 'OpenDyslexic', sans-serif, 'Arial', 'sans-serif';
  --my-custom-color: white;
}

To add extra fonts to be able to use them in CSS, see using custom fonts

4

Thanks a lot for your detailed and informative response! I am very happy that all of those things will be possible. Now I just have to sit down and learn a bit and then hopefully make a game myself :smiley: