Creating custom design

This guide describes the most important points of creating a custom visual design for Spectrubes Infinity

Overall file structure

Hello everyone!
This guide explains how to create a custom visual design for Spectrubes Infinity from scratch. It's not as hard as it may seem!
I will use the Binary Land design as an example for this guide.

First of all, you must understand the file structure of any design for the game.
All of the designs are located in the "designs" folder, which in itself may be found in an OS-dependent location, as follows:

• Windows: %localappdata%/spectrubes_infinity/designs
  
• macOS: ~/Library/Application Support/spectrubes_infinity/designs
  
• Linux: ~/.config/spectrubes_infinity/designs

A design contains a folder with its resources and an .ini file with settings. For this example, we have a folder named "binaryland" and a corresponding "binaryland.ini" settings file. The resource folder contains things such as backgrounds, music, sound effects, sprites and fonts and is the basic element of any design.
If you care not for the structure too much, I suggest simply using this empty design template by kerj55. You don't have to change the Settings block when using this template: only the Info block will matter. Do note, however, that you won't be able to resize sprites this way.

Config ini file

1. Info block

The info block contains primary information on the design:

• [Info]
  
• Title="<Name of your custom design>"
  
• Author="<Your name or alias>"
  
• Description="<A description of your design, recommended to keep below 255 characters. The game does not word-wrap, so use \n for line breaks."
  
• WorkshopID="<The Steam Workshop ID of your design. Do NOT add, delete or edit this manually, or else you'll be unable to publish or modify your design on the Steam Workshop. This value is handled automatically by the game client."

2. Settings block

This block contains various settings relating to your design:

• [Settings]
  
• SpriteX="<The horizontal resolution of ALL of your sprites. If any sprites don't match this resolution, you won't be able to publish or use your design. This may not be below 8.>"
  
• SpriteY="<The vertical resolution of ALL of your sprites. This may also not be below 8.>"
  
• ResolutionX="<Horizontal game resolution. Note that this must fit 32 SpriteX-wide game tiles. May not be below 320.>"
  
• ResolutionY="<Vertical game resolution. Do note that this must fit 22 SpriteY-tall game tiles. Furthermore, additional information is printed at the top and bottom of the game field, which should also be accounted for. This may not be below 240.>"
  
• ScreenAlign="<Location of the game field in relation to the window. This may be left-aligned (0), centre-aligned (1) or right-aligned (2). This example uses centre-alignment.>"
  
• TextVAlign="<Location of the extra information in the game. When 0, the level name is printed at the top of the window, and the amount of turns in the bottom right. Setting this to 1 reverses thoise positions. The level name alignment is the same as ScreenAlign.>"
  
• PosRelative="<Whether to use relative sprite positions. This rotates sprites to face the direction in which the respective entity is headed. The sprites' initial rotation is used for moving to the right. You may look at an example of this in the Big Journey to Home design, which has a rotating player entity. This applies to all player-controlled cubes and may not be turned on on a per-sprite basis. To turn this on, use a value of 1, to turn it off, a value of 0. This is unused in our example, and thus, disabled.>"
  
• PosRelativeEnemy="<Same as above, but for enemy sprites.>"
  
• SmoothMove="<Smooth sprite animation during movement. It's turned on in this example. If you'd like to see a design with this switched off, the design of the original Spectrubes lacks this feature. Use 1 for on and 0 for off.>"
  
• FontSize="<Font size to use. This is applied game-wide, so consider how the whole game will look with this size. Should be 8 or above.>"
  
• FontColor="<Font colour. Applied game-wide save a few informational messages. This value is in the GML Raw format, which you may convert to using this site[chrisanselmo.com].>"
  
• FontMessageColor="<Font colour for the aforementioned informational messages.>"
  
• FontLanguage="<Whether or not the font supports cyrillic characters (1 for yes, 0 for no). If this is switched off, the game will ignore your font settings when running in Russian. Note that the Japanese version of the game completely lacks custom font support, regardless of this setting.>"
  
• MessagePosition="<Position of game messages in relation to window borders (in pixels). This allows you to align the messages and buttons.>"
  
• Zoom="<Zoom type. For small designs, this should be set to 1, which will allow the player to zoom the design up to 5x its original size. With this set to 0, the design will be configured according to the vertical resolution (360p, 480p, 720p, etc.)>"
  
• SmallMenu="<Small menu mode. You may have noticed that some menus (such as the "How to play" guide and the credits page) look wrong in your design. If this is the case, switch this on by setting it to 1, else leave it as 0. This may be beneficial to small-resolution designs such as our example.>"
  
• AnimSpeed="<Animated sprites are supported in custom designs. Switch this off (0) if your sprites are not animated. Otherwise, specify the animation speed (1 being 60 frames per second). Not all sprites have to be animated, but if you choose to animate player-controlled cubes, then you must animate all of them.>"

Main folder

Now we can review the design folder in detail.

1. Sprites

Sprites can be either static or animated. As mentioned before, if you choose to animate player-controlled cubes, you must animate all of them, or else the design won't load. Animated sprites must have the "_anim" suffix in their filename, e.g. "enemy_anim.png" for animated enemies. There are some exceptions which cannot be animated at all, this includes doors and conveyor belts. Animated sprites are stored as frame-by-frame .png strips. For instance, for a 3-frame 16x16 animation the final size of the .png will be 48x16 (where 48 = 16*3). The sprites are as follows:

• cube1.png - Primary player-controlled cube. The number indicates the colour, with 1 = light-blue, 2 = red, 3 = blue, 4 = green, 5 = purple and 6 = yellow. Each frame of animation for these sprites will consist of two sub-frames (this is necessary for non-animated sprites as well): the first being the default state, the second being the state upon death or reaching the clear zone.
  
• clearzone.png - Clear zone sprite.
  
• wall.png - Wall sprite.
  
• enemy.png - Enemy cube sprite. These are always a two-frame animation, for static enemy sprites you may simply double the first sub-frame.
  
• ice.png - Ice sprite (used in classic Spectrubes levels)
  
• door.png - Door sprite. This is always static, but contains two "frames": closed and open states of the door.
  
• button.png - The button that changes door states (used in classic Spectrubes levels)
  
• box.png - Box sprite (used in classic Spectrubes levels)
  
• trapdoor.png - Trapdoor sprite.
  
• slime.png - Slime sprite.
  
• invert.png - Inversion zone sprite.
  
• safe.png - Safe zone sprite.
  
• path.png - Conveyor belt path sprite. This is always static, but contains four "frames" corresponding to movement directions: up, right, down, left.
  
• invbut.png - Sprite of the buttons that control conveyor belts.
  
• killall.png - Sprite of the buttons that kill all enemies (bonus element from BJtH).

2. Backgrounds and other images

Besides sprites, there are several other images that can be included in a custom design:

• background.png - Game field background, on which every game element and cube is positioned. It's not recommended to make this too small, since it will cause the game to lag when trying to tile it. It is, nevertheless, recommended to tile this and not make this a single image.
  
• border.png - Game window border which surrounds the playfield. Note that this should have a playfield-sized "hole" in the middle, or else it will look wrong.
  
• menu.png - Game menu background. Shouldn't be too small or may cause the game to lag. Remember that this isn't stretched in-game, but is in the manager screens.
  
• menu_select.png - Active menu item sprite, shown to its left. Don't make this too large.
  
• message.png - Game message background. The size of this determines the size of the messages themselves, so size accordingly. If this is too small, the messages will be squashed beyond readability.
  
• preview.png - The preview image shown in Steam Workshop and the in-game design manager. The recommended size for this is 538x302, but any size is accepted and stretched accordingly.

3. Sound files and fonts.

The design contains 3 sound files:

• music.ogg - The music track looped through the entire game. There are no limits on its length. If you'd like to have several tracks in your design, just combine them into one.
  
• sound_lose.ogg - The SFX played upon collision with an enemy cube. It's recommended to keep this short, since the music will start playing again about 2 seconds after this is played.
  
• sound_win.ogg - The SFX played upon victory when transitioning to the next level. It's recommended to keep this short, since the music will start playing again about 2 seconds after this is played.

Finally, the following file represents the game font:

• font.ttf - Game font.

Publishing

When your design is ready, you should publish it on the Steam Workshop and share it with the world. You may also republish the design at any time and as often as you want, using the "Update content" button.

The Steam Workshop page will contain the preview image, the name and the description of your design. You may change these however you wish, and upload additional images of your design (such as in-game screenshots) or even a video. To ensure that these changes persist through updates, make sure to pick "no" when the game asks you whether you'd like to update the Steam Workshop information when republishing your design.

Conclusion

This guide summarizes the main aspects of creating custom visual designs for Spectrubes Infinity. I hope this helped you create a beatiful design!
Thank you for reading!

P.S. This guide may be updated in the future.

Yours, Silver Sword

[kangjiaxin131416]

llk

[Poc]

ok

[Poc]

lol