Image/texture without get effected by environement

Armory Engine General
1

I like to add some Textures as a UI and steering controls (for mobile). But the images won’t look the same as if I view them in paint or something like that.

I disabled, that they get effected by shadows/cast shadows, but it doesn’t really change that much.
The material is a normal Diffuse BSDF, with color set to Image texture.
The image with transparency looks the same ugly as the textures without transparency.

Does someone have a solution for this?

2

First try the Principled Shader. That way you can add the metal and roughness to get a better PBR experiance.

3

I know what he means, they need to be un-filtered and not use lighting - like a Blender Render Shadeless material.

I am looking for the same thing.

Brian

1 Like
4

You can use a Canvas to get this and use elements as buttons, etc. but as far as I know you can’t turn on/off UI elements using nodes yet.

Brian

5

Ahh, sorry I misunderstood what he was after.

6

Yeah, in unity there is a designation for this too.

7

Yeah, exactly what I am looking for.

8

I will try to experiment with the canvas but I’m a real beginner with this great armory tool. :expressionless:

9

So for UI textures I was having the same issue. I haven’t found any way to do shadeless on a 3D object yet. There is an example, but I can’t figure out what is actually making the objects shadeless and I can’t tell if it has to apply to the entire scene.

I had to manually render the images to the screen using the onRender2D callback in a trait:

public function new() {
        super();

        kha.Assets.loadImageFromPath("logo1.png", true, function(i:kha.Image) {
            this.logo = i;
            notifyOnRender2D(render2DLogo);
        });
    }

    function render2DLogo(g:kha.graphics2.Graphics) {
        g.begin(false);

        var vw = iron.App.w();
        var vh = iron.App.h();
        var aspectRatio = logo.width/logo.height;
        var w = vw * 0.8;
        var h = w/aspectRatio;
        var x = (vw-w)/2;
        var y = (vh-h)/2;

        g.drawImage(this.logo, x, y, w, h);

        g.end();
    }

This will draw the logo1.png image centered in the middle of the screen with a 10% of the width of the screen padding on each side.

Using a Canvas trait on the camera would be another way to do it, but the Canvas editor doesn’t work quite right on Linux yet so I had to do it manually. With Canvas you can use the builtin UI editor to build out the elements that you want on the screen and you can interact with them in a script trait.

One more note: there is a builtin script trait ( example ) that renders virtual joysticks to the screen for use with mobile devices. That might be enough for your use-case, and if it isn’t you can just copy the trait and modify it to your use-case.

1 Like
10

Thanks for the answer! I will try this script out, as soon as I work further on my project.