Page 1 of 1

Guide to customising module looks

Posted: Sun Mar 24, 2013 3:51 am
by Grey
Since I answered this question for someone else I figure I should paste it here too... It's a guide for newcomers to setting up the visuals in their own module. Makes extensive reference to my own modules. Some things might be wrong though! Feel free to suggest corrections or additions.


Base Style

In load.lua you can change the style of all menus and dialogue boxes in the game. Like this:

local UIBase = require "engine.ui.Base"
UIBase.ui = "stone"


Instead of stone you can also have simple and metal.

Base Font

In your load.lua file you can set the base font. Check out Mosaic to see this in action. It has the following code:

local size = 18
UIBase.font = core.display.newFont("/data/font/DroidSans.ttf", size)
UIBase.font_bold = core.display.newFont("/data/font/DroidSans.ttf", size)
UIBase.font_mono = core.display.newFont("/data/font/DroidSansMono.ttf", size)
UIBase.font_bold:setStyle("bold")
UIBase.font_h = UIBase.font:lineSkip()
UIBase.font_bold_h = UIBase.font_bold:lineSkip()
UIBase.font_mono_w = UIBase.font_mono:size(" ")
UIBase.font_mono_h = UIBase.font_mono:lineSkip()+2


To get different fonts you can download ttf font files and put them in data/font to use them. I like DroidSansMono for the map as it's a fixed width font with a nice @ symbol... Monaco is quite nice for general text.

Player Display

For a player info/stats box which shows current HP etc you need a file called PlayerDisplay.lua in your class folder. All of my T-Engine games have one of these, and it's different in each one depending on each interface. Run from the Shadow has something standard, but if you're after something with tooltips check out the implementation in Rogue Rage or Mosaic. You can see a "self.font" declaration near the start of the PlayerDisplay.lua file - it lets you set a different font type and size for this display.

PlayerDisplay declares the size of its little pane in init(). In Run from the Shadow:

local gw, gh = core.display.size()
self:resize(1, gh - 99, 234, 85)


gw and gh in this are the whole screen size, and the resize bases itself on these. The self:resize numbers are (starting x, starting y, width, height). You can see in the display() box that every piece of text has a width and height starting point within the pane, and that it advances each line by self.font_h +4 (font size plus a few extra pixels). It might need some fiddelry to get this exactly as you like.

Game.lua calls on the PlayerDisplay to appear. It has the line:

local PlayerDisplay = require "mod.class.PlayerDisplay"

near the start to allow Game.lua to reference functions in the PlayerDisplay file (this is a common feature of the T-Engine - you have to "require" things in files to use their functions). Then in run() it has the line:

self.player_display = PlayerDisplay.new()

And that's it! Nothing else required to get an info/stats box implemented. I'm not sure about graphical HP bars and the like, but others on the forums have done them and I'm sure they can help.

Log Display

Now for the log display you need the line:

local LogDisplay = require "engine.LogDisplay"

in your Game.lua.

You can see in Game.lua under run() is the following line:

self.logdisplay = LogDisplay.new(290, self.h - 105, self.w - 695, 99, nil, nil, nil, {255,255,255}, {30,30,30})

The full description of these parameters is here, under init:
http://www.te4.org/docs/t-engine4/1.0.0 ... splay.html

So it's (x, y, w, h, max, fontname, fontsize, color, bgcolor). Set nil to fontname/fontsize and it just uses the default. Not sure what max is - I guess maximum lines. Then you need the following line in run():

self.log = function(...) self.logdisplay(...) end

And any call to the call can be done as follows:

self.log("#CCCCCC#Welcome to #888888#Run from the Shadow#CCCCCC#.")

You can add variables into the text like this:

self.log("You hit the %s for %d damage.", target.name,dam)

Note that if sending a message to the log in code outside the Game.lua file you have to use game.log("blah"). This is another common thing in the T-Engine - if you want to use code from other files to have to require that file and use the name of that file when calling that function. Same with variable from that file.

There's also a self.logSeen function and self.logPlayer function - I can't remember what they do :-/

Flying Text

For flying text (damage numbers popping up on hit etc) you need

local FlyingText = require "engine.FlyingText"

in your Game.lua too. Then you need these in run()

local flysize = 32
self.flyers = FlyingText.new("/data/font/VeraMono.ttf", flysize, "/data/font/VeraMono.ttf", flysize + 3)
self.flyers:enableShadow(0.6)
self:setFlyingText(self.flyers)


So this sets the font size etc as you like. When you want to use a flyer to appear at some point then you can call:

game.flyers:add(x, y, duration, xdir, ydir, ("Level %d"):format(player.level), {235,220,160})

x and y are the position on screen (a handy tool is to use "local x,y = game.level.map:getTileToScreen(target.x, target.y)" to get a creature's exact position).
"duration" is the time on screen before it disappears. 55 is good for a short piece of text, 20-30 for a quick number.

xdir and ydir govern the text movement speed and direction. 0,0 means it stays still, 0,1 means it moves down slowly, -5,0 means it moves left very fast, etc. I often use "(rng.range(0,2)-1) * 0.5, -3" for combat flyouts so you get them going in slightly different directions each hit.

The last two variables are for the message itself (a number, a symbol, a variable, whatever) and the colour.

Re: Guide to customising module looks

Posted: Sun Mar 24, 2013 6:57 pm
by Overlord
Just posting to say thanks for this Grey this is something i needed to change for my game but havent gotten around to it so now all the info is in one tidy place cheers! :D

Re: Guide to customising module looks

Posted: Fri Apr 05, 2013 10:01 pm
by benstox
This is another common thing in the T-Engine - if you want to use code from other files to have to require that file and use the name of that file when calling that function. Same with variable from that file.
Not sure I understood this bit. If one file in my module uses code from another file... let's say I need to do matrix multiplication... and a file 'matrix.lua' codes that for me, where does the T-Engine look for my file when I

Code: Select all

require "matrix"
somewhere in my module? Probably a naive question...

Re: Guide to customising module looks

Posted: Fri Apr 05, 2013 10:14 pm
by Grey
You would have to call "require mod.class.matrix" if it's in the class folder. You can have a string of dots as the file structure - "require mod.data.calculations.matrix" for instance.

Re: Guide to customising module looks

Posted: Fri Apr 05, 2013 11:23 pm
by benstox
Thanks! That worked for me with double quotes around the file structure:

Code: Select all

require "mod.class.matrix"