Theme Creation

Better Questing allows modpack makers (as well as anyone else) to create custom themes for their packs.

For a video tutorial, see here:

For a written tutorial, keep reading.

To get started, you will need to set up some folders in your Minecraft directory. From the config folder, navigate/make

config\betterquesting\resources(your pack's name, no spaces)\textures\gui

You do not need to exactly follow that format, but this lets you differentiate if you plan on making a custom texture or image for anything else in the quest book.

In the folder named after your pack, make a new .json file titled "bq_themes". To get started, lead the file with:

  {
    "themeID": "packname:themename",
    "themeName": "Theme Name",
    "themeParent": "none",

This tells the game what your theme name is as well as its ID so that it shows up in the quest book. After that, you will put the main portion of you file.

    {
      "betterquesting:panel_main":
      {
        "atlas": "packname:textures/gui/image_file.png",
        "bounds": [0, 0, 48, 48],
        "padding": [8, 8, 8, 8],
        "sliceMode": 1,
        "textureType": "betterquesting:texture_sliced"
      },
      "betterquesting:aux_frame_0":
      {
        "textureType": "betterquesting:texture_sliced",
        "atlas": "packname:textures/gui/image_file.png",
        "bounds": [60, 0, 24, 24],
        "padding": [4, 4, 4, 4],
        "sliceMode": 1
      },
      "betterquesting:scroll_v_bg":
      {
        "textureType": "betterquesting:texture_sliced",
        "atlas": "packname:textures/gui/image_file.png",
        "bounds": [96, 0, 8, 8],
        "padding": [2, 2, 2, 2],
        "sliceMode": 2
      },
      "betterquesting:scroll_v_0":
      {
        "textureType": "betterquesting:texture_sliced",
        "atlas": "packname:textures/gui/image_file.png",
        "bounds": [104, 0, 8, 8],
        "padding": [3, 3, 3, 3],
        "sliceMode": 2
      },
      "betterquesting:scroll_v_1":
      {
        "textureType": "betterquesting:texture_sliced",
        "atlas": "packname:textures/gui/image_file.png",
        "bounds": [112, 0, 8, 8],
        "padding": [3, 3, 3, 3],
        "sliceMode": 2
      },
      "betterquesting:scroll_v_2":
      {
        "textureType": "betterquesting:texture_sliced",
        "atlas": "packname:textures/gui/image_file.png",
        "bounds": [120, 0, 8, 8],
        "padding": [3, 3, 3, 3],
        "sliceMode": 2
      },
      "betterquesting:btn_normal_0":
      {
        "textureType": "betterquesting:texture_sliced",
        "atlas": "packname:textures/gui/image_file.png",
        "bounds": [48, 0, 12, 12],
        "padding": [5, 5, 5, 5],
        "sliceMode": 1
      },
      "betterquesting:btn_normal_1":
      {
        "textureType": "betterquesting:texture_sliced",
        "atlas": "packname:textures/gui/image_file.png",
        "bounds": [48, 12, 12, 12],
        "padding": [5, 5, 5, 5],
        "sliceMode": 1
      },
      "betterquesting:btn_normal_2":
      {
        "textureType": "betterquesting:texture_sliced",
        "atlas": "packname:textures/gui/image_file.png",
        "bounds": [48, 24, 12, 12],        
        "padding": [4, 4, 4, 4],
        "sliceMode": 1
      },
      "betterquesting:quest_main_0":
      {
        "textureType": "betterquesting:texture_simple",
        "atlas": "packname:textures/gui/image_file.png",
        "bounds": [60, 24, 16, 16]
      },
      "betterquesting:quest_main_1":
      {
        "textureType": "betterquesting:texture_simple",
        "atlas": "packname:textures/gui/image_file.png",
        "bounds": [60, 24, 16, 16]
      },
      "betterquesting:quest_main_2":
      {
        "textureType": "betterquesting:texture_simple",
        "atlas": "packname:textures/gui/image_file.png",
        "bounds": [60, 24, 16, 16]
      },
      "betterquesting:quest_main_3":
      {
        "textureType": "betterquesting:texture_simple",
        "atlas": "packname:textures/gui/image_file.png",
        "bounds": [60, 24, 16, 16]
      },
      "betterquesting:quest_norm_0":
      {
        "textureType": "betterquesting:texture_simple",
        "atlas": "packname:textures/gui/image_file.png",
        "bounds": [60, 40, 16, 16]
      },
      "betterquesting:quest_norm_1":
      {
        "textureType": "betterquesting:texture_simple",
        "atlas": "packname:textures/gui/image_file.png",
        "bounds": [60, 40, 16, 16]
      },
      "betterquesting:quest_norm_2":
      {
        "textureType": "betterquesting:texture_simple",
        "atlas": "packname:textures/gui/image_file.png",
        "bounds": [60, 40, 16, 16]
      },
      "betterquesting:quest_norm_3":
      {
        "textureType": "betterquesting:texture_simple",
        "atlas": "packname:textures/gui/image_file.png",
        "bounds": [60, 40, 16, 16]
      }
    },

Each part changes a different feature of the quest book. panel_main: the background image of the quest book aux_frame: the background for the quests scroll: these impact the scroll bar. Its background and the various states it can have. btn_normal: the buttons for the quest tabs and other gui buttons quest_main and quest_normal: the main and normal quests, respectively.

The image you make will need to be on a canvas whose size is a square with sides of a power of 2 of 256 pixels or larger. (512, 1024, 2048, etc). Generally speaking, 256 is plenty of space unless you want to make the entire background image not loop. The image file will be saved in the gui folder you made earlier.

The first thing you will decide on is if you want a looping texture or a static texture. Most of the assets in the quest book loop, so you will want the sliced mode for those textures. Only the quest icons are simple mode in most cases. The atlas determines the directory for your image file. Simply route from your pack name to the gui folder using a colon after the pack name and forward slashes for the other parts. At the end make sure to put the name of your image file.

The bounds determine the boundaries of each asset. In order, the numbers determine: Pixels from the left Pixels from the top Width Height

So let's say you decided to make a 16x16 image that starts 8 pixels from the left and 4 pixels from the top. While starting at 0,0 is ideal, you can only use that for one asset. The bounds for this would be "8, 4, 16, 16".

The last portion of the textures is the slicing. If you selected a simple texture, there will be no slicing. However, most of the assets do typically use slicing. Slicing determines how the image loops. The padding determines the "border" the slicing takes.

Let's say you wanted to use a Stone Bricks on the inside of the quest gui. The default texture is 16x16, so you will have that be the center. In addition, you want an 8 pixel border around the outside, some nice pillary lines and some shrunk Chiseled Stone Bricks on the corners. You draw everything out and have a 32x32 texture ready to go. The padding needs to be set to 8,8,8,8 to encompass the border, and then the Stone Bricks will loop on the inside. The 16 tall pillar will loop on itself, while the corner Chiseled Bricks stay put. This extends to fit the entire window. Lastly, the slice mode determines how the slicing works. Slicing of 0 will just make the image extend to fit the window, which defeats the purpose of making it loop, so it is only situationally useful. A slice mode of 1 will tile your assets to fit, so it is optimal for this design. A slice mode of 2 slices and stretches the edges and center, which also has its own uses.

The last part of the file determines the colors. These determine the text colors throughout the book, and are fairly self-explanatory.

    {
      "betterquesting:text_header":
      {
        "colorType": "betterquesting:color_static",
        "color": "FFFFFF"
      },
      "betterquesting:text_main":
      {
        "colorType": "betterquesting:color_static",
        "color": "FFFFFF"
      },
      "betterquesting:gui_divider":
      {
        "colorType": "betterquesting:color_static",
        "color": "000000"
      },
      "betterquesting:grid_major":
      {
        "colorType": "betterquesting:color_static",
        "color": "000000"
      },
      "betterquesting:grid_minor":
      {
        "colorType": "betterquesting:color_static",
        "color": "000000"
      }
    }
  }
]

If you want to add more themes, simply put a comma after the last brace and push the bracket down to fit another in (not including the bracket at the top in the second theme either, obviously).