Need advice: Making low-res background images not blurry

Discuss modding questions and implementation details.
Post Reply
User avatar
JIRKA_222
Posts: 9
Joined: Wed Apr 21, 2021 5:11 pm
Location: Czech Republic

Need advice: Making low-res background images not blurry

Post by JIRKA_222 »

Hello,
I am working for on a mod reimplementing the bestiary seen in one of Daggerfall's demos. I have run into a problem, when trying to load a low res background image (320 x 200). The image, that shows up in-game, is very blurry. I assume that it is caused by the default upscaling algorithm. How can I make it so, that the background will be rendered as a crisp pixel art image, instead of a blurry mess?

Here's a screenshot:
image.png
image.png (1.56 MiB) Viewed 168 times
This is what I want:
image2.png
image2.png (1.38 MiB) Viewed 168 times
Here's my code:

Code: Select all

using System;
using UnityEngine;
using DaggerfallWorkshop.Game;
using DaggerfallWorkshop.Game.UserInterface;
using DaggerfallWorkshop.Game.UserInterfaceWindows;
using DaggerfallWorkshop.Utility.AssetInjection;

namespace BestiaryMod
{
    class BestiaryUI : DaggerfallPopupWindow
    {
        const string background_texture_name = "main_background.png";

        Texture2D background_texture;

        Vector2 sizeVector;

        Panel mainPanel;
        Panel imagePanel;

        TextLabel titleLable;
        TextLabel subTitleLable1;
        TextLabel subTitleLable2;
        TextLabel subTitleLable3;
        TextLabel descriptionLable1;
        TextLabel descriptionLable2;
        TextLabel descriptionLable3;
        TextLabel descriptionLable4;
        TextLabel descriptionLable5;
        TextLabel descriptionLable6;
        TextLabel descriptionLable7;
        TextLabel descriptionLable8;

        Button exitButton;
        Button entryButton;

        public BestiaryUI(IUserInterfaceManager uiManager)
            : base(uiManager)
        {
            pauseWhileOpened = true;
            AllowCancel = false;
        }

        protected override void Setup()
        {
            base.Setup();

            sizeVector = new Vector2(320, 200);

            background_texture = DaggerfallUI.GetTextureFromResources(background_texture_name);
            if (!background_texture)
                throw new Exception("BestiaryUI: Could not load background texture.");

            ParentPanel.BackgroundColor = ScreenDimColor;

            mainPanel = DaggerfallUI.AddPanel(NativePanel, AutoSizeModes.None);
            mainPanel.Size = sizeVector;
            mainPanel.BackgroundTexture = background_texture;
            mainPanel.HorizontalAlignment = HorizontalAlignment.Center;
            mainPanel.VerticalAlignment = VerticalAlignment.Middle;

            titleLable = new TextLabel();
            titleLable.Position = new Vector2(16, 16);
            titleLable.Size = new Vector2(80, 16);
            titleLable.Name = "title_label";
            titleLable.Font = DaggerfallUI.TitleFont;
            mainPanel.Components.Add(titleLable);

            subTitleLable1 = new TextLabel();
            subTitleLable1.Position = new Vector2(144, 24);
            subTitleLable1.Size = new Vector2(40, 14);
            subTitleLable1.Name = "sub_label_1";
            subTitleLable1.Font = DaggerfallUI.LargeFont;
            mainPanel.Components.Add(subTitleLable1);

            subTitleLable2 = new TextLabel();
            subTitleLable2.Position = new Vector2(144, 38);
            subTitleLable2.Size = new Vector2(40, 14);
            subTitleLable2.Name = "sub_label_2";
            subTitleLable2.Font = DaggerfallUI.LargeFont;
            mainPanel.Components.Add(subTitleLable2);

            subTitleLable3 = new TextLabel();
            subTitleLable3.Position = new Vector2(144, 80);
            subTitleLable3.Size = new Vector2(40, 14);
            subTitleLable3.Name = "sub_label_3";
            subTitleLable3.Font = DaggerfallUI.LargeFont;
            mainPanel.Components.Add(subTitleLable3);


            descriptionLable1 = new TextLabel();
            descriptionLable1.Position = new Vector2(188, 38);
            descriptionLable1.Size = new Vector2(120, 14);
            descriptionLable1.Name = "title_label";
            mainPanel.Components.Add(descriptionLable1);

            descriptionLable2 = new TextLabel();
            descriptionLable2.Position = new Vector2(188, 52);
            descriptionLable2.Size = new Vector2(120, 14);
            descriptionLable2.Name = "title_label";
            mainPanel.Components.Add(descriptionLable2);

            descriptionLable3 = new TextLabel();
            descriptionLable3.Position = new Vector2(188, 66);
            descriptionLable3.Size = new Vector2(120, 14);
            descriptionLable3.Name = "title_label";
            mainPanel.Components.Add(descriptionLable3);

            descriptionLable4 = new TextLabel();
            descriptionLable4.Position = new Vector2(188, 80);
            descriptionLable4.Size = new Vector2(120, 14);
            descriptionLable4.Name = "title_label";
            mainPanel.Components.Add(descriptionLable4);

            descriptionLable5 = new TextLabel();
            descriptionLable5.Position = new Vector2(188, 94);
            descriptionLable5.Size = new Vector2(120, 14);
            descriptionLable5.Name = "title_label";
            mainPanel.Components.Add(descriptionLable5);

            descriptionLable6 = new TextLabel();
            descriptionLable6.Position = new Vector2(188, 108);
            descriptionLable6.Size = new Vector2(120, 14);
            descriptionLable6.Name = "title_label";
            mainPanel.Components.Add(descriptionLable6);

            descriptionLable7 = new TextLabel();
            descriptionLable7.Position = new Vector2(188, 122);
            descriptionLable7.Size = new Vector2(120, 14);
            descriptionLable7.Name = "title_label";
            mainPanel.Components.Add(descriptionLable7);

            descriptionLable8 = new TextLabel();
            descriptionLable8.Position = new Vector2(188, 136);
            descriptionLable8.Size = new Vector2(120, 14);
            descriptionLable8.Name = "title_label";
            mainPanel.Components.Add(descriptionLable8);

            exitButton = new Button();
            exitButton.Position = new Vector2(216, 194);
            exitButton.Size = new Vector2(56, 25);
            exitButton.Name = "exit_button";
            mainPanel.Components.Add(exitButton);

            entryButton = new Button();
            entryButton.Position = new Vector2(68, 194);
            entryButton.Size = new Vector2(56, 25);
            entryButton.Name = "entry_button";
            mainPanel.Components.Add(entryButton);


            titleLable.Text = "Bestiary";

            subTitleLable1.Text = "Orcs";
            subTitleLable2.Text = "Location";
            subTitleLable3.Text = "History";

            descriptionLable1.Text = "This is text label 1";
            descriptionLable2.Text = "And this is text label 2";
            descriptionLable3.Text = "This thing is text label 3";
            descriptionLable4.Text = "And this last one is text label 4";
            descriptionLable5.Text = "This is text label 5";
            descriptionLable6.Text = "And this is text label 6";
            descriptionLable7.Text = "This thing is text label 7";
            descriptionLable8.Text = "And this last one is text label 8";

            exitButton.Label.Text = "Exit";
            entryButton.Label.Text = "Entry selection";
        }

        public override void Update()
        {
            base.Update();

            if (Input.GetKeyUp(exitKey))
                CloseWindow();
        }
    }
}

User avatar
TheLacus
Posts: 1332
Joined: Wed Sep 14, 2016 6:22 pm
Contact:

Re: Need advice: Making low-res background images not blurry

Post by TheLacus »

Hi, you can set Filtermode to Point.
Mod System documentation - Learn how to create mods for Daggerfall Unity.
Modder Discussion - General help and discussion for the mod system.
Github Issues - Submit a bug report for the game, including the mod system.

User avatar
JIRKA_222
Posts: 9
Joined: Wed Apr 21, 2021 5:11 pm
Location: Czech Republic

Re: Need advice: Making low-res background images not blurry

Post by JIRKA_222 »

Hi,
do you know, why this doesn't work? (It still looks the same):

The part of the code, where I load the texture (lines 51 - 54):

Code: Select all

background_texture = DaggerfallUI.GetTextureFromResources(background_texture_name);
            if (!background_texture)
                throw new Exception("BestiaryUI: Could not load background texture.");
            background_texture.filterMode = FilterMode.Point;
The rest of my code:

Code: Select all

using System;
using UnityEngine;
using DaggerfallWorkshop.Game;
using DaggerfallWorkshop.Game.UserInterface;
using DaggerfallWorkshop.Game.UserInterfaceWindows;
using DaggerfallWorkshop.Utility.AssetInjection;

namespace BestiaryMod
{
    class BestiaryUI : DaggerfallPopupWindow
    {
        const string background_texture_name = "main_background.png";

        Texture2D background_texture;

        Vector2 sizeVector;
        Vector2 background_texture_size;

        Panel mainPanel;
        Panel imagePanel;

        TextLabel titleLable;
        TextLabel subTitleLable1;
        TextLabel subTitleLable2;
        TextLabel subTitleLable3;
        TextLabel descriptionLable1;
        TextLabel descriptionLable2;
        TextLabel descriptionLable3;
        TextLabel descriptionLable4;
        TextLabel descriptionLable5;
        TextLabel descriptionLable6;
        TextLabel descriptionLable7;
        TextLabel descriptionLable8;

        Button exitButton;
        Button entryButton;

        public BestiaryUI(IUserInterfaceManager uiManager)
            : base(uiManager)
        {
            pauseWhileOpened = true;
            AllowCancel = false;
        }

        protected override void Setup()
        {
            base.Setup();

            sizeVector = new Vector2(320, 200);

            background_texture = DaggerfallUI.GetTextureFromResources(background_texture_name);
            if (!background_texture)
                throw new Exception("BestiaryUI: Could not load background texture.");
            background_texture.filterMode = FilterMode.Point;

            ParentPanel.BackgroundColor = ScreenDimColor;

            mainPanel = DaggerfallUI.AddPanel(NativePanel, AutoSizeModes.None);
            mainPanel.Size = sizeVector;
            mainPanel.BackgroundTexture = background_texture;
            mainPanel.HorizontalAlignment = HorizontalAlignment.Center;
            mainPanel.VerticalAlignment = VerticalAlignment.Middle;

            titleLable = new TextLabel();
            titleLable.Position = new Vector2(16, 16);
            titleLable.Size = new Vector2(80, 16);
            titleLable.Name = "title_label";
            titleLable.Font = DaggerfallUI.TitleFont;
            mainPanel.Components.Add(titleLable);

            subTitleLable1 = new TextLabel();
            subTitleLable1.Position = new Vector2(144, 24);
            subTitleLable1.Size = new Vector2(40, 14);
            subTitleLable1.Name = "sub_label_1";
            subTitleLable1.Font = DaggerfallUI.LargeFont;
            mainPanel.Components.Add(subTitleLable1);

            subTitleLable2 = new TextLabel();
            subTitleLable2.Position = new Vector2(144, 38);
            subTitleLable2.Size = new Vector2(40, 14);
            subTitleLable2.Name = "sub_label_2";
            subTitleLable2.Font = DaggerfallUI.LargeFont;
            mainPanel.Components.Add(subTitleLable2);

            subTitleLable3 = new TextLabel();
            subTitleLable3.Position = new Vector2(144, 80);
            subTitleLable3.Size = new Vector2(40, 14);
            subTitleLable3.Name = "sub_label_3";
            subTitleLable3.Font = DaggerfallUI.LargeFont;
            mainPanel.Components.Add(subTitleLable3);


            descriptionLable1 = new TextLabel();
            descriptionLable1.Position = new Vector2(188, 38);
            descriptionLable1.Size = new Vector2(120, 14);
            descriptionLable1.Name = "title_label";
            mainPanel.Components.Add(descriptionLable1);

            descriptionLable2 = new TextLabel();
            descriptionLable2.Position = new Vector2(188, 52);
            descriptionLable2.Size = new Vector2(120, 14);
            descriptionLable2.Name = "title_label";
            mainPanel.Components.Add(descriptionLable2);

            descriptionLable3 = new TextLabel();
            descriptionLable3.Position = new Vector2(188, 66);
            descriptionLable3.Size = new Vector2(120, 14);
            descriptionLable3.Name = "title_label";
            mainPanel.Components.Add(descriptionLable3);

            descriptionLable4 = new TextLabel();
            descriptionLable4.Position = new Vector2(188, 80);
            descriptionLable4.Size = new Vector2(120, 14);
            descriptionLable4.Name = "title_label";
            mainPanel.Components.Add(descriptionLable4);

            descriptionLable5 = new TextLabel();
            descriptionLable5.Position = new Vector2(188, 94);
            descriptionLable5.Size = new Vector2(120, 14);
            descriptionLable5.Name = "title_label";
            mainPanel.Components.Add(descriptionLable5);

            descriptionLable6 = new TextLabel();
            descriptionLable6.Position = new Vector2(188, 108);
            descriptionLable6.Size = new Vector2(120, 14);
            descriptionLable6.Name = "title_label";
            mainPanel.Components.Add(descriptionLable6);

            descriptionLable7 = new TextLabel();
            descriptionLable7.Position = new Vector2(188, 122);
            descriptionLable7.Size = new Vector2(120, 14);
            descriptionLable7.Name = "title_label";
            mainPanel.Components.Add(descriptionLable7);

            descriptionLable8 = new TextLabel();
            descriptionLable8.Position = new Vector2(188, 136);
            descriptionLable8.Size = new Vector2(120, 14);
            descriptionLable8.Name = "title_label";
            mainPanel.Components.Add(descriptionLable8);

            exitButton = new Button();
            exitButton.Position = new Vector2(216, 194);
            exitButton.Size = new Vector2(56, 25);
            exitButton.Name = "exit_button";
            mainPanel.Components.Add(exitButton);

            entryButton = new Button();
            entryButton.Position = new Vector2(68, 194);
            entryButton.Size = new Vector2(56, 25);
            entryButton.Name = "entry_button";
            mainPanel.Components.Add(entryButton);


            titleLable.Text = "Bestiary";

            subTitleLable1.Text = "Orcs";
            subTitleLable2.Text = "Location";
            subTitleLable3.Text = "History";

            descriptionLable1.Text = "This is text label 1";
            descriptionLable2.Text = "And this is text label 2";
            descriptionLable3.Text = "This thing is text label 3";
            descriptionLable4.Text = "And this last one is text label 4";
            descriptionLable5.Text = "This is text label 5";
            descriptionLable6.Text = "And this is text label 6";
            descriptionLable7.Text = "This thing is text label 7";
            descriptionLable8.Text = "And this last one is text label 8";

            exitButton.Label.Text = "Exit";
            entryButton.Label.Text = "Entry selection";
        }

        public override void Update()
        {
            base.Update();

            if (Input.GetKeyUp(exitKey))
                CloseWindow();
        }
    }
}

User avatar
Magicono43
Posts: 647
Joined: Tue Nov 06, 2018 7:06 am

Re: Need advice: Making low-res background images not blurry

Post by Magicono43 »

Depending on how you are importing the image, you will have to change the Unity Settings for said image file to Point Filter as TheLacus mentioned. Otherwise Unity automatically compresses it to some setting that makes pixel art look blurry and terrible.

User avatar
King of Worms
Posts: 3945
Joined: Mon Oct 17, 2016 11:18 pm
Location: Scourg Barrow (CZ)
Contact:

Re: Need advice: Making low-res background images not blurry

Post by King of Worms »

Or maybe do the linear upscaling in photoshop to lets sax 6x the resolution 1920x1200. That way, even if unity applies the filters, it will stay pixelated af 😉

User avatar
JIRKA_222
Posts: 9
Joined: Wed Apr 21, 2021 5:11 pm
Location: Czech Republic

Re: Need advice: Making low-res background images not blurry

Post by JIRKA_222 »

Got it to work. Turns out, you have to set the Filter Mode (of the image) in unity inspector, not in the script (you can probably do it in the script too, somehow). Thanks for the advice.

If anyone has he same problem, this is the setting you have to change:
Untitled.png
Untitled.png (216.72 KiB) Viewed 110 times

Post Reply