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.
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.