Luxe tip (2022.0.5) - Make a fully resizeable application

preview
1

During my time using luxe, I’ve found it not only a great framework for game development, but also for creating tool applications. The UI system is really simple to use yet robust, with almost all the controls I’d want out of the box and with the option to auto-layout when containing elements change size. Of course, when I’m making an editor or tool like this, I also want to let you resize the whole application on a whim.

To achieve this, you only need to make a few additions to what you get in the empty template.

1. settings.settings.lx - Set window to resizeable

This one’s easy: in your [project]/outline/settings.settings.lx file, change resizeable to true. This will make the window physically able to be resized.

2. app.wren - Resize cameras when window resized

In [project]/outline/app.wren, after _camera and _ui_camera are created in construct new(), add the below code. It sets up a callback that resizes the cameras to match the window size when the window is reshaped.

IO.on("engine.runtime.window.size_changed") {|type, data| 
  Camera.ortho(_camera, 0, Render.window_h(), Render.window_w(), 0, -2000, 2000)
  Camera.ortho(_ui_camera, 0, Render.window_h(), Render.window_w(), 0, -2000, 2000)
}

3. game.wren - Resize the UI when window resized

In your main game script, or where your UI lives, you’ll want to make the same callback to make sure the bounds of the UI also updates:

_ui = Entity.create(app.ui)
UI.create(_ui, 0, 0, app.width, app.height, 0, app.ui_camera)

IO.on("engine.runtime.window.size_changed") {|type, data| 
	UI.set_bounds(_ui, 0, 0, app.width, app.height, 0)
	UI.commit(_ui)
}

And that’s it! This all ensures that when you resize your game/editor’s window, the game’s resolution matches the window size as you would expect!

2 Likes