Lone Knight

Lone Knight is the first videogame experiment made by Giovanni and Nicola Ariutti inspired by Mark Ferrari and Tim e Adrien Soret works in order to take part to the itch.io Flying Toast With Jam.

Here you can find the original version of the game while here you can try an updated version.

screen shot

Tech notes

Lone Knight is a web app that takes advantage of the HTML5 canvas object strength. Like the old ‘80 and ‘90 s videogames, the indexed colors and Palette Shifting techniques are implemented.

aseprite

The artwork has been made by Giovanni on the basis of an old flash animation project. The images have been converted in pixel art paintings using Aseprite. The code has been written by Nicola.

comparison

The very first videogame version resolution is 320x240 pixels, with a pseudocolor palette with 256 colors.

Game assets:

spritesheet

parallax

The images are converted in JSON, so they can be parsed by the JavaScript code.

This conversion has been also useful to include in the same element file different information regarding the local pseudocolor palettes (8 for each element).

Here’s a snippet of a JSON file used in the game:

[
  {
    "width" : 640,
    "height" : 240,
    "nSprites" : 12,
    "Time" : 504,
    "palettes": [
      /* palette 0 */
      [[255, 0, 0], [35, 47, 71], ..., [39, 47, 83], [0, 0, 43]],

      /* palette 1 */
      [[255, 0, 0], [11, 23, 43], ..., [21, 27, 49], [7, 0, 23]],

      /* palette 2 */
      [[255, 0, 0], [17, 25, 49], ..., [16, 33, 71], [33, 41, 85]],

      /* palette 3 */
      [[255, 0, 0], [215, 201, 56], ..., [103, 103, 135], [255, 211, 171]],

      /* palette 4 */
      [[255, 0, 0], [223, 215, 83], ..., [163, 139, 135], [254, 226, 198]],

      /* palette 5 */
      [[255, 0, 0], [247, 239, 87], ..., [255, 215, 191], [119, 92, 108]],

      /* palette 6 */
      [[255, 0, 0], [254, 201, 102], ..., [253, 190, 125], [212, 94, 95]],

      /* palette 7 */
      [[255, 0, 0], [27, 39, 62], ..., [28, 34, 61], [7, 0, 33]]
    ],
    "indexes" : [0, 0, 0, 1, 6, 6, 6, 8, 1, 2, ... ] /* indexes array */
  }
]

Palette Shifting

As time goes by, every color in the main pseudocolor palette is given as the interpolation between the 8 different local palettes corresponding colors.

Every local pseudocolor palette entry represent one of the element colors at a given hour of the day. Entry 0 is always the key color; Here’s an example:

00:00 09:00
sky cielo_00_AM cielo_09_AM
palette palette cielo 00 AM palette cielo 09 AM
mountains 1 montagne2_00_AM montagne2_09_AM
palette palette montagne2 00 AM palette montagne2 09 AM
mountains 2 montagne1_00_AM montagne1_09_AM
palette palette montagne1 00 AM palette montagne1 09 AM
grass prato_00_AM prato_09_AM
palette palette prato 00 AM palette prato 09 AM
knight cavaliere_00_AM cavaliere_09_AM
palette palette cavaliere 00 AM palette cavaliere 09 AM
total totale_00_AM totale_09_AM

Thus, thanks to this technique, every pixels is colored with the appropriate nuance according to the time flow.

debug image

Future improvements

As an homage to the old videogames, the next improvement will be the introduction of the color cycling feature.

Download

If you are interested in examine the source code for this project, you can fint it on our GitHub repository!


If you find this article useful and you like it, please leave a comment below: let us know what do you think about it, we'd really appreciate it. Thank you very much and, as always, stay tuned for more to come!