Need advice: Making low-res background images not blurry

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

Need advice: Making low-res background images not blurry

Post by Shapur »

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 1132 times
This is what I want:
image2.png
image2.png (1.38 MiB) Viewed 1132 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();
        }
    }
}
Link to my github here.
And here is my nexus profile.

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

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

Post by TheLacus »

Hi, you can set Filtermode to Point.

User avatar
Shapur
Posts: 154
Joined: Wed Apr 21, 2021 5:11 pm
Location: Czech Republic
Contact:

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

Post by Shapur »

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();
        }
    }
}
Link to my github here.
And here is my nexus profile.

User avatar
Magicono43
Posts: 1139
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: 4752
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
Shapur
Posts: 154
Joined: Wed Apr 21, 2021 5:11 pm
Location: Czech Republic
Contact:

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

Post by Shapur »

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 1074 times
Link to my github here.
And here is my nexus profile.

Post Reply