[NeoLemmix] Custom Low and Hi-Resolution Graphics

[WillLem]

Working With Custom Low and Hi-resolution Graphics in NeoLemmix
A guide by WillLem

The current stable version of NeoLemmix allows you to incorporate custom hi-resolution graphics into your levels and, in fact, most of your experience of the NeoLemmix Player.

To all intents and purposes, "hi-resolution" in this context essentially means that the images are exactly twice the size. So, a low-resolution 48 x 16 block will have a 96 x 32 equivalent in hi-resolution:



Of course, these would both appear the same relative size in-game.

What this means is that higher resolution images allow a greater amount of detail and complexity within the image. For instance, here is a low-res and hi-res image of a walking lemming. Note that these have been resized for the purposes of comparison. As you can see, the hi-res image (on the right) has much greater depth and detail, allowing for different shades of colour as well as a more defined shape:



You may wish to explore the possibilities of NeoLemmix's hi-resolution mode, but be unsure of where to start. That's what this post is for!

Here is a list of the elements within NeoLemmix which support both resolutions. Each one links to the relevant post below which shows you how you can customise these elements, both within your copy of the NeoLemmix Player, and for inclusion in your level packs:

Cursor
Helpers
Panel
Objects
Terrain
Lemmings

[WillLem]

Cursor

The cursor can be modified in both hi-res and low-res. Simply navigate to:

NeoLemmix/gfx/cursor (contains the low-res cursor graphics)
NeoLemmix/gfx/cursor-hr (contains the hi-res cursor graphics)

If you wish to change the colour or appearance of your cursor, simply open the file(s) in a PNG editor and customise them as you wish. Be sure to back up the originals just in case.

It is not currently possible to include customised cursors in your level packs.

[WillLem]

Helpers

The helper graphics (including fall distance ruler, pre-assigned hatch icons, and indicator text for clear physics mode) can be modified in both hi-res and low-res. Simply navigate to:

NeoLemmix/gfx/helpers (contains the low-res helper graphics)
NeoLemmix/gfx/helpers-hr (contains the hi-res helper graphics)

If you wish to change the colour or appearance of your helper graphics, simply open the file(s) in a PNG editor and customise them as you wish. Be sure to back up the originals just in case.

It is not currently possible to include customised helper graphics in your level packs.

[WillLem]

Panel

The panel graphics (including skill panels, buttons and icons) can be modified in both hi-res and low-res. Simply navigate to:

NeoLemmix/gfx/panel (contains the low-res panel graphics)
NeoLemmix/gfx/panel-hr (contains the hi-res panel graphics)

If you wish to change the colour or appearance of your panel graphics, simply open the file(s) in a PNG editor and customise them as you wish. Be sure to back up the originals just in case.

To include your customised panel graphics as part of your level pack:

• Include at least the low-res and, if applicable, also the hi-res versions in the level pack's root folder as loose files (not in a sub-folder)
• Ensure that the hi-resolution versions are renamed to (name_of_file)-hr - i.e. with a -hr suffix at the end of each filename.

NOTE: low-res images are upscaled by default in NeoLemmix's hi-res mode, so although it is not always necessary to include a hi-res version of your graphic, it is always necessary to include a low-res version.

[WillLem]

Objects

Objects are elements of a style which affect a lemming's state. They include entrance and exit hatches, traps, water, firepits, flame-throwers, teleporters & receivers, buttons and pickup skills. They are usually animated (although not always), and so contain several frames, like this:


The water graphic from the ohno_bubble style set.

Each object has a corresponding .nxmo file which details what type of object it is, the size of its trigger area, its animation, etc.

N.B. .nxmo files must be included in the low-res graphics folder alongside their relevant graphics file. However, there is no need to also include them in the hi-res graphics folder as NeoLemmix will only look for these files in the low-res graphics folder.

Objects are part of a style, along with terrain, lemming sprites (if applicable), and backgrounds. They can be found by navigating to:

NeoLemmix/styles/(name_of_style)/objects (contains the low-res object graphics)
NeoLemmix/styles/(name_of_style)/objects-hr (contains the hi-res object graphics)

Most existing styles are in low-res only. The following instructions apply if you wish to create a hi-res version of an existing object:

Instructions for creating a hi-res version of an existing low-res object. (click to show/hide)

• Firstly, create an object-hr folder within NeoLemmix>styles/(name_of_style).
• Once you've done this, you're ready to create your hi-res object graphic(s) using one of the methods below.

Whichever method you choose, be sure to place the hi-res version of your object in (name_of_style)/objects-hr and the low res version in (name_of_style)/objects. Also, ensure that both files have exactly the same name.

Method 1: Enlarge the Low-res version.

It's possible to create a hi-res version of a low-res graphic by manually resizing it by 200%. You can then edit the resulting graphic as you wish to enhance the details.

Method 2: Create the hi-res graphic from scratch.

Maybe you want to the hi-res version to look different from the low-res one, in which case you may wish to create something from scratch.

It's a generally good idea to ensure that your hi-res version is exactly double the dimensions of the low-res counterpart. So, if the low-res version is 10 x 8, the hi-res version should be 20 x 16.

Alternatively, you may wish to create an entirely new object that doesn't exist yet, or maybe you're creating your own style pack.

Instructions for creating a completely new object. (click to show/hide)

You have a choice of four options. Whichever option you choose, be sure to place the hi-res version of your object in (name_of_style)/objects-hr and the low res version in (name_of_style)/objects. Also, ensure that both files have exactly the same name.

Option 1: Create only a low-res version, and let NeoLemmix's upscaler create the hi-res version for you.

This is recommended if you're happy to create a graphic which looks good enough in low res, and you're happy to allow NeoLemmix to upscale the graphic if someone plays using your style in hi-res mode. This is a perfectly viable option, and can save you a lot of time.

However, you may not be entirely happy with the results of the upscaler, in which case one of the following options may be best for you.

Option 2: Create the hi-res version first, then resize it by 50% to get the low-res version.

This is recommended as the best option if your graphic is intended to be used in hi-resolution.

Create your object in hi-resolution, make it as detailed as you like, and once it's finished, simply use your graphics editor to resize the object by 50% - be sure to save it as a different file with exactly the same name. You may wish to make further edits to the low-res version to tidy it up depending on which scaling algorithm you used (Nearest Neighbour is generally recommended for this purpose).

Option 3: Create the low-res version first, then resize it by 200% to get the hi-res version.

There are a number of reasons you may wish to choose this option.

Firstly, it can be a good way to get the object designed quickly, then allowing you to add further detail to its hi-res counterpart after you've resized it.

Also, you may want the hi-res version to look identical to the low-res version, without any upscaling or additional detail. If this is the case, simply scale the object 200% using the Nearest Neighbour algorithm and then leave it unedited. It will look identical, but be the correct size for hi-res mode.

Either way, be sure to save both versions of the graphic with exactly the same name.

Option 4: Create the low-res and hi-res versions separately.

This option is best if you want the hi-res version of your object to look completely different from the low-res version.

Simply create the two as separate files, but ensure that they are the correct relative size (i.e. the hi-res version should be exactly double the size of the low-res version, and that they have the same name.

To include your customised object graphics as part of your level pack, you need to include the style folder alongside the pack. This can be done by sending the style to namida and/or Nessy for inclusion in the style downloads manager, or by including it as a download alongside your level pack.

If you have created hi-resolution versions of existing objects, you can either send these to the author of the style pack and they can choose whether or not they wish to include it in the official version (for orig/ohno styles, contact namida or Nessy), or you can include it in a new style titled yourname_special.

NOTE: low-res images are upscaled by default in NeoLemmix's hi-res mode, so although it is not always necessary to include a hi-res version of your graphic, it is always necessary to include a low-res version.

[WillLem]

Terrain

Terrain pieces are elements of a style which lemmings can modify. They include anything solid that the lemming is able to walk upon, dig into, or bump into. Terrain also includes steel.


(Left to right): Bricks from the ohno_brick style set, steps from the orig_marble style set, spike from the orig_fire style set, steel block from the ohno_rock style set.

Terrain pieces are single image files, and can be any shape as long as empty space within the file is set to Alpha 0 (transparent). Lemmings will interact with any part of the terrain that is not transparent.

For steel, you must include an .nxmt file alongside the low-res version of the graphic, with the same name as the steel piece. Open the .nxmt file in a text editor and simply type the word STEEL, and the terrain piece will be recognised by NeoLemmix as steel.

   N.B. .nxmt files do not need to be included with other regular terrain pieces.

   N.B. Be sure to place the .nxmt files in the low-res terrain folder - there is no need to also include it in the hi-res folder as NeoLemmix will only look for these files in the low-res folder.

Terrain pieces are part of a style, along with objects, lemming sprites (if applicable), and backgrounds. They can be found by navigating to:

NeoLemmix/styles/(name_of_style)/terrain (contains the low-res terrain graphics)
NeoLemmix/styles/(name_of_style)/terrain-hr (contains the hi-res terrain graphics)

Most existing styles are in low-res only. The following instructions apply if you wish to create a hi-res version of an existing terrain piece:

Instructions for creating a hi-res version of an existing low-res terrain piece. (click to show/hide)

• Firstly, create a terrain-hr folder within NeoLemmix>styles/(name_of_style).
• Once you've done this, you're ready to create your hi-res terrain graphic(s) using one of the methods below.

Whichever method you choose, be sure to place the hi-res version of your terrain piece in (name_of_style)/terrain-hr and the low res version in (name_of_style)/terrain. Also, ensure that both files have exactly the same name.

Method 1: Enlarge the Low-res version.

It's possible to create a hi-res version of a low-res graphic by manually resizing it by 200%. You can then edit the resulting graphic as you wish to enhance the details.

Method 2: Create the hi-res graphic from scratch.

Maybe you want to the hi-res version to look different from the low-res one, in which case you may wish to create something from scratch.

It's a generally good idea to ensure that your hi-res version is exactly double the dimensions of the low-res counterpart. So, if the low-res version is 10 x 8, the hi-res version should be 20 x 16.

Alternatively, you may wish to create an entirely new terrain piece that doesn't exist yet, or maybe you're creating your own style pack.

Instructions for creating a completely new terrain piece. (click to show/hide)

You have a choice of four options. Whichever option you choose, be sure to place the hi-res version of your terrain piece in (name_of_style)/terrain-hr and the low res version in (name_of_style)/terrain. Also, ensure that both files have exactly the same name.

Option 1: Create only a low-res version, and let NeoLemmix's upscaler create the hi-res version for you.

This is recommended if you're happy to create a terrain graphic which looks good enough in low res, and you're happy to allow NeoLemmix to upscale the graphic if someone plays using your style in hi-res mode. This is a perfectly viable option, and can save you a lot of time.

However, you may not be entirely happy with the results of the upscaler, in which case one of the following options may be best for you.

Option 2: Create the hi-res version first, then resize it by 50% to get the low-res version.

This is recommended as the best option if your graphic is intended to be used in hi-resolution.

Create your terrain piece in hi-resolution, make it as detailed as you like, and once it's finished, simply use your graphics editor to resize it by 50% - be sure to save it as a different file with exactly the same name. You may wish to make further edits to the low-res version to tidy it up depending on which scaling algorithm you used (Nearest Neighbour is generally recommended for this purpose).

Option 3: Create the low-res version first, then resize it by 200% to get the hi-res version.

There are a number of reasons you may wish to choose this option.

Firstly, it can be a good way to get the terrain piece designed quickly, then allowing you to add further detail to its hi-res counterpart after you've resized it.

Also, you may want the hi-res version to look identical to the low-res version, without any upscaling or additional detail. If this is the case, simply scale the object 200% using the Nearest Neighbour algorithm and then leave it unedited. It will look identical, but be the correct size for hi-res mode.

Either way, be sure to save both versions of the graphic with exactly the same name.

Option 4: Create the low-res and hi-res versions separately.

This option is best if you want the hi-res version of your terrain piece to look completely different from the low-res version.

Simply create the two as separate files, but ensure that they are the correct relative size (i.e. the hi-res version should be exactly double the size of the low-res version, and that they have the same name.

To include your customised terrain graphics as part of your level pack, you need to include the style folder alongside the pack. This can be done by sending the style to namida and/or Nessy for inclusion in the style downloads manager, or by including it as a download alongside your level pack.

If you have created hi-resolution versions of existing terrain graphics, you can either send these to the author of the style pack and they can choose whether or not they wish to include it in the official version (for orig/ohno styles, contact namida or Nessy), or you can include it in a new style titled yourname_special.

NOTE: low-res images are upscaled by default in NeoLemmix's hi-res mode, so although it is not always necessary to include a hi-res version of your graphic, it is always necessary to include a low-res version.

[WillLem]

Lemmings

Creating your own Lemmings sprites can be a lot of fun, and I encourage it wholeheartedly.

However, it also involves a lot of painstaking work and fine pixel editing. Consider that, if you wish to create your own look for the lemmings, unlike terrain pieces and objects which can be single files, you must produce a full sprite animation for each skill/state. Furthermore, each frame of each sprite contains both a left and right-facing lemming which must be edited independently of each other for correct shading, etc.

For example, the Basher sprite contains a whopping 32 frames:



It is only worth creating/editing your own lemmings sprites if you want them to be a different shape, or have patterned colourings.

If you simply wish to have the lemmings skin, clothes and/or hair be a different colour, there is a much quicker, easier way to do this:

Instructions for recolouring existing lemming sprites. (click to show/hide)

• Create a new style folder called yourname_examplelems. (Obviously subsitute yourname for your Lemmings Forum name and examplelems for whatever you wish to call your lemmings recolourings.
• Within your newly created style folder, create a .nxtm file titled "theme" (you can achieve this by simply copying and pasting an existing theme.nxtm file from an existing style)
• Open the theme.nxtm file in a text editor and copy & paste the following into it:

LEMMINGS default

$COLORS
  MASK xF0F060
  MINIMAP xF0F060
  BACKGROUND x000000
  ONE_WAYS x4040E0
  PICKUP_BORDER x4040E0
  PICKUP_INSIDE xF0F060

  LEMMING_SKIN xFFFFFF
  LEMMING_HAIR xFFFFFF
  LEMMING_CLOTHES xFFFFFF
  LEMMING_BUILDER_SACK xFFFFFF
  LEMMING_UMBRELLA xFFFFFF
  LEMMING_ZOMBIE_SKIN xFFFFFF
  LEMMING_ATHLETE_CLOTHES xFFFFFF
  LEMMING_ATHLETE_HAIR xFFFFFF
$END

Note that the above values for MASK - PICKUP_INSIDE are set to the default values in the orig_pillar set. These can be changed to whatever you like, but if you're only concerned about the lemming colours, then LEMMING_SKIN - LEMMING_ATHLETE_HAIR are the values that you need to change. In the above example, they're all set to xFFFFFF, which is white.

You can change each value to whichever colour you choose - just be sure to obtain the correct hex value for the corresponding colour (I recommend this website as a good way to find hex values for colours, but most decent PNG editors can also provide hex values for a chosen colour as well).

You can then apply this style as the "theme" to any level you choose using the NeoLemmix Editor, and you will see that the lemmings will take on your chosen colours when that level is played.

Lemming sprites can be any shape as long as empty space within the PNG file is set to Alpha 0 (transparent). The NeoLemmix player will interpret any non-transparent pixels within the file as being part of the lemming sprite for any given skill or state, e.g. Basher / Exiter.

Lemmings sprites are part of a style, along with objects, terrain, and backgrounds. They can be found by navigating to:

NeoLemmix/styles/(name_of_style)/lemmings (contains the low-res lemmings sprites)
NeoLemmix/styles/(name of style)/lemmings-hr (contains the hi-res lemmings sprites)

The default sprites are in styles/default. It is not recommended that you modify these without first backing up the styles/default folder in its entirety.

A set of Lemmings sprites must include a scheme.nxmi file detailing recolouring for athletes, selected lemmings and zombies, plus details of the animation for each sprite. This should ONLY be placed in (name_of_style)/lemmings - i.e. it does not need to be also placed in the hi-res folder.

Instructions for creating your own lemmings sprite set. (click to show/hide)

Just to re-iterate: if you wish to simply re-colour the default sprites, it is recommended that you follow the instructions given above.

It is also recommended that, whatever the desired result, you use the default sprite sets as a template for your work. If nothing else, these will show you where each frame of the animation needs to be placed.

You may wish to apply your chosen colours manually, or create patterned lemmings, or even customise the shape of the lemmings to include hats, different hair styles, accessories, or maybe even create a totally new shape altogether. If this is the case, be prepared to draw these things again and again and again and again and again and again. And again!

Be prepared for it to take several days or even weeks to complete this work, depending on the complexity of your re-shaping.

I recommend that you start with the Ascender sprite, as it only contains a single left & right-facing frame:



Use this to experiment with the new shape/colour of your lemmings to get the desired result.

Once you're happy, I then recommend moving on to the Walker sprite, which is only 8 frames. That way, you can get a feel for animating your Walking lemming and you can then test it in-game to see what it looks like:



TO BE CONTINUED...

To include your customised lemmings sprites as part of your level pack, you need to include the style folder alongside the pack. This can be done by sending the style to namida and/or Nessy for inclusion in the style downloads manager, or by including it as a download alongside your level pack.

NOTE: low-res images are upscaled by default in NeoLemmix's hi-res mode, so although it is not always necessary to include a hi-res version of your graphic, it is always necessary to include a low-res version.

[WillLem]

This tutorial topic had been updated but is still in progress. If you notice any mistakes or wish to comment with suggestions, please either PM me or send me a message on Discord. Thank you!