|
|
Line 1: |
Line 1: |
− | <h1 id="toc29">Dialogs - Customizing your UI experience</h1>
| + | =How it all fits together= |
| | | |
− | <h2 id="toc30">Drawing Dialogs</h2>
| + | ==Global Variables== |
− | <p>The draw code for dialogs can be customized by overriding the drawDialog(s) function in your custom dialog class. The passed 's' represents the passed sdl surface. Always use this to draw. Though the Dialog class has a Dialog.surface property, it is the whole dialog surface including the borders and title. The passed s is just the internal surface of the dialog.</p> | + | <p>These objects are global and are available from anywhere in the program:</p> |
| | | |
− | <p>To draw text, 3 functions are provided on the surface for drawing of text:<br />
| |
| | | |
| | | |
| <table> | | <table> |
| <tr> | | <tr> |
− | <th>Function</th> | + | <th>Object</th> |
− | <th>Use</th>
| + | |
− | </tr>
| + | |
− | <tr>
| + | |
− | <td>drawString</td>
| + | |
− | <td>Draws uncolored strings.</td>
| + | |
− | </tr>
| + | |
− | <tr>
| + | |
− | <td>drawColoredString</td>
| + | |
− | <td>Draws colored strings.</td>
| + | |
− | </tr>
| + | |
− | <tr>
| + | |
− | <td>drawColoredStringCentered</td>
| + | |
− | <td>Draws centered colored strings.</td>
| + | |
− | </tr>
| + | |
− | </table>
| + | |
− | | + | |
− | </p>
| + | |
− | | + | |
− | <p>To illustrate, here is code from ToME's CharacterSheet.lua:</p>
| + | |
− | | + | |
− | | + | |
− | <pre> local h = 0
| + | |
− | local w = 0
| + | |
− | s:drawString(self.font, "Sex: "..game.player.descriptor.sex, w, h, 0, 200, 255) h = h + self.font_h
| + | |
− | s:drawString(self.font, "Race: "..game.player.descriptor.subrace, w, h, 0, 200, 255) h = h + self.font_h
| + | |
− | s:drawString(self.font, "Class: "..game.player.descriptor.subclass, w, h, 0, 200, 255) h = h + self.font_h
| + | |
− | h = h + self.font_h
| + | |
− | s:drawColorString(self.font, "Level: #00ff00#"..game.player.level, w, h, 255, 255, 255) h = h + self.font_h
| + | |
− | s:drawColorString(self.font, ("Exp: #00ff00#%2d%%"):format(100 * cur_exp / max_exp), w, h, 255, 255, 255) h = h + self.font_h
| + | |
− | s:drawColorString(self.font, ("Gold: #00ff00#%0.2f"):format(game.player.money), w, h, 255, 255, 255) h = h + self.font_h </pre>
| + | |
− | | + | |
− | <p>The parameters for all 3 drawstring methods are identical, and are as follows:</p>
| + | |
− | | + | |
− | | + | |
− | | + | |
− | <table>
| + | |
− | <tr>
| + | |
− | <th>Parameter</th>
| + | |
− | <th>Use</th>
| + | |
− | </tr>
| + | |
− | <tr>
| + | |
− | <td>font</td>
| + | |
− | <td>Font object. Unless you want to draw different parts of your dialog with different fonts, this will always be self.font (the dialog's set font).</td>
| + | |
− | </tr>
| + | |
− | <tr>
| + | |
− | <td>v</td>
| + | |
− | <td>Text. The ColorString variants recognise the replacement #xxxxxx#. This is a color code value, with 2 characters per r, g and b in hex(0-f). Lua text:format() method is advised to output numbers.</td>
| + | |
− | </tr>
| + | |
− | <tr>
| + | |
− | <td>x</td>
| + | |
− | <td>x position coordinate of text. Unless its a monospaced font, every character can potentially have a different width.</td>
| + | |
− | </tr>
| + | |
− | <tr>
| + | |
− | <td>y</td>
| + | |
− | <td>y position coordinate of text. self.font:lineSkip() can be used to get the font height.</td>
| + | |
− | </tr>
| + | |
− | <tr>
| + | |
− | <td>r</td>
| + | |
− | <td>Red color value of text. (0-255)</td>
| + | |
− | </tr>
| + | |
− | <tr>
| + | |
− | <td>g</td>
| + | |
− | <td>Green color value of text. (0-255)</td>
| + | |
− | </tr>
| + | |
− | <tr>
| + | |
− | <td>b</td>
| + | |
− | <td>Blue color value of text. (0-255)</td>
| + | |
− | </tr>
| + | |
− | </table>
| + | |
− | | + | |
− | | + | |
− | <h2 id="toc31">Drawing Images</h2>
| + | |
− | <p>To load an image the simpliest way is to do:<br />
| + | |
− | | + | |
− | <pre> local img = core.display.loadImage("/data/..../foo.png") </pre>
| + | |
− | | + | |
− | </p>
| + | |
− | | + | |
− | <p>Then you can draw it on an other surface with:<br />
| + | |
− | | + | |
− | <pre> dest:merge(img, x, y) </pre>
| + | |
− | | + | |
− | </p>
| + | |
− | | + | |
− | <p>You can also directly display a surface on screen:<br />
| + | |
− | | + | |
− | <pre> img:toScreen(x, y) </pre>
| + | |
− | | + | |
− | </p>
| + | |
− | | + | |
− | <p>If the surface wont change later you can make an opengl texture from it to speed up rendering:<br />
| + | |
− | | + | |
− | <pre> local tex = im:glTexture() </pre>
| + | |
− | | + | |
− | <br />
| + | |
− | and display it:<br />
| + | |
− | | + | |
− | <pre> tex:toScreen(x, y, w, h) </pre>
| + | |
− | | + | |
− | <br />
| + | |
− | You can actually update the texture if the surface changes (this is how dialogs work internally) this is faster than just drawing the surface.</p>
| + | |
− | | + | |
− | | + | |
− | <h2 id="toc32">Player Display</h2>
| + | |
− | <p>Player Displays is the quick summary of stats you get on the left side while playing. This is related to dialogs, but this class does not inherit from the dialog class.</p>
| + | |
− | | + | |
− | <p>ToME implements this by defining a display() function in the PlayerDisplay.lua class and calling it in game:display(), updating the surface whenever the player's changed property is true.</p>
| + | |
− | | + | |
− | | + | |
− | <h2 id="toc33">Registering and Displaying Dialogs</h2>
| + | |
− | <p>Displaying dialogs from code is simple:</p>
| + | |
− | | + | |
− | | + | |
− | <pre> local d = CustomDialog.new()
| + | |
− | game:registerDialog(d) </pre>
| + | |
− | | + | |
− | <p>To remove it(usually called from the dialog itself):</p>
| + | |
− | | + | |
− | | + | |
− | <pre> game:unregisterDialog(self) </pre>
| + | |
− | | + | |
− | <p>This will set the dialog to open and display. If key or mousebindings are set for the dialog, these will also be made current. Note that dialogs do not automatically pause the game. In real-time games the action will continue, and even in turn-based games, animations and particles will continue in the background.</p>
| + | |
− | | + | |
− | <p>Most Dialogs will also need keyboard or mouse bindings. You use the following methods to define these in the dialog's init() function:</p>
| + | |
− | | + | |
− | | + | |
− | | + | |
− | <table>
| + | |
− | <tr>
| + | |
− | <th>Method</th>
| + | |
| <th>Purpose</th> | | <th>Purpose</th> |
| </tr> | | </tr> |
| <tr> | | <tr> |
− | <td>keyCommands(KeyCommands, KeyBinds)</td> | + | <td>game</td> |
− | <td>Sets keyboard keys recognised by this dialog. KeyCommands and KeyBinds are tables containing keyboard binding functions.</td> | + | <td>This is your game class, core of your game and allows access to pretty much any other object in the game.</td> |
| </tr> | | </tr> |
| <tr> | | <tr> |
− | <td>mouseZones(zones)</td> | + | <td>world</td> |
− | <td>Sets a table of mouse zones recognised by the dialog. Note that the x and y coordinates are automatically offset by the dialog's extents.</td> | + | <td>This is your world class. By default this doesn't do much, but a custom world class allows persistance between new characters and savefiles. Think history, or bones files.</td> |
| </tr> | | </tr> |
− | </table>
| |
− |
| |
− |
| |
− | <h3 id="toc34">Keyboard Input</h3>
| |
− | <p>Manually setting keyCommands are strongly unadvised. Use keyBindings whenever possible, since these can be remapped by the user. There are however some exceptions:</p>
| |
− |
| |
− |
| |
− |
| |
− | <table>
| |
| <tr> | | <tr> |
− | <th>keyCommand</th>
| + | <td>profile</td> |
− | <th>Effect</th>
| + | <td>This is the player profile.</td> |
− | </tr>
| + | |
− | <tr>
| + | |
− | <td>_ _DEFAULT</td>
| + | |
− | <td>Matches any key press.</td>
| + | |
− | </tr>
| + | |
− | <tr>
| + | |
− | <td>_ _TEXTINPUT</td> | + | |
− | <td>Used to receive alphanumeric text from keyboard.</td> | + | |
| </tr> | | </tr> |
| </table> | | </table> |
| | | |
− | <p>This example code is taken from ToME's DeathDialog.lua:</p>
| |
| | | |
| + | Go back to [[T4 Modules Howto Guide]] |
| | | |
− | <pre> self:keyCommands({
| + | {{Module Guides}} |
− | __TEXTINPUT = function(c)
| + | |
− | if c == 'd' or c == 'D' then
| + | |
− | self:dump()
| + | |
− | end
| + | |
− | end,
| + | |
− | }, {
| + | |
− | ACCEPT = "EXIT",
| + | |
− | EXIT = function()
| + | |
− | game:unregisterDialog(self)
| + | |
− | end,
| + | |
− | }) </pre> | + | |
− | | + | |
− | Go back to [[T4 Modules Howto Guide]]
| + | |