DuskWorks

An interactive 3D mobile phone in DuskEngine (draft)

This is the first ever article about anything DuskEngine, really.

Note that since DuskEngine is in very early development,

Rendering

The whole phone adventure starts here:

-- lua
function MobilePhoneOS:Initialize()
    -- snip
    self.phoneUI = Engine.CreateStandaloneGameUI(
        Assets.UIs.MobilePhoneUI, 
        self.screenPixelSizeX, -- the viewport size...
        self.screenPixelSizeY -- ... for the UI
        -- it's also used as the rendered 
        -- texture size at the moment
    )
    --snip
end

Note the line that says Assets.UIs.MobilePhoneUI. This references the UI-type asset called MobilePhoneUI.

Since UIs in DuskEngine are assets, they come with a dedicated editor window.

Thus, the phone UI itself has been built ahead of time, so in the scripts we only need to instantiate it and then we can use it. What CreateStandaloneGameUI does internally is it creates and returns an instance of:

For now, standalone UIs created this way assume they'll be rendered to a texture so they tell the IRenderer instance to expect to have to render them as soon as they're created.

The IRenderer responds with a numeric ID that the standalone UI wrapper will hold on to. It's basically IRenderer's way of saying "ok, I'm all good to render you, here's your ID, use it whenever you want to refer to the end result".

In order to get the texture to show up on the phone's screen, we'll call:

-- lua
self.phoneScreenEntity:RenderWithGameUITexture(
    self.phoneUI:GetRenderableID()
)

What this does internally is it attaches a:

// C++
struct RenderWithGameUiTexture
{
    RenderableGameUiId Id{};
};

component to the phone screen entity. This is a component that is checked for by the renderer and it overrides the Albedo texture that is present in the selected material for that entity. We're using the ID we received previously from the renderer here, so when it comes time to render the phone screen, instead of the material's texture, it will use the UI texture.

Interaction

Using the mouse to interact with the UI on the phone involves raycasting.

Firefly in the Dusk🌙