Input Fields

Input fields are text boxes that all users to type values into them. As with button, you need to provide some assets, specifically font information and a graphic to use as the cursor while a user is inputing values. Indigo's input field is quite basic, but input fields are a bit fiddly to implement. Hopefully it will either save someone some time or be useful as a reference to someone who'd like to do make something more sophisticated.

Setting up an input field is as simple as adding something like this to your view model:

import indigo.*
import indigoextras.ui.*

// Placeholder values
val assets = 
  InputFieldAssets(
    text = Text("", FontKey("my font"), Material.Bitmap(AssetName("my font sheet"))),
    cursor = Graphic(10, 5, Material.Bitmap(AssetName("cursor")))
  )

val inputField =
  InputField("<Default text>", assets)
    .makeSingleLine
    .moveTo(Point(10, 10))

Then updating it in the view model:

final case class AnotherViewModel(myInputField: InputField)
val anotherViewModel = AnotherViewModel(inputField)

anotherViewModel.myInputField.update(context)

...and drawing it:

anotherViewModel.myInputField.draw(context.gameTime, context.boundaryLocator)

Input fields will also emit an InputFieldChange event when the text they hold is altered by a user. They can also send custom events on focus / focus loss.

The full input field example is in the indigo-examples repo. <script type="text/javascript" src="input-field.md.js" defer></script> <script type="text/javascript" src="mdoc.js" defer></script>