Skip to main content

Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
TagsGame Engines

Using canvases to draw colored text?

A topic by treegravy created 16 days ago Views: 82 Replies: 4
Viewing posts 1 to 3
(1 edit) (+1)

Ive been trying to figure out how to do this for hours now, looking through Decker’s documentation, through the code in the dialog.deck module, experimenting with trying to write the code myself, and so on, but I have just for the life of me not been able to figure out how to do this one very simple thing (my coding experience is not with any language that has any similar syntax to Lil….) I want to be able to draw colored text on a (potentially also colored) static canvas, like how the dialog module allows you to do with fcolor and bcolor, to make what appears to be a field but with colored text. That’s all. I want there also to be able to be multiple like this that can co-exist at once, so simply importing the dd module did not work for my use case (or, at least, i couldn’t get it to work for this use case trying on my own.)

(+2)

I made a contraption that does pretty much this! https://itch.io/post/11184423

It'll let you put coloured text in a box, under the hood it's drawing it on a canvas.

If it doesn't quite fit your use case then taking a look at the code may be instructive!

(+1)

Exactly what i needed!!! Lifesaver! Thank you so much!!!

Developer(+1)

From a scripting perspective, what you may have been stuck on is the ".pattern" attribute of canvas widgets, which controls the pattern or color used for subsequent drawing operations.

As described in All About Color, Decker represents various solid colors and textured fills with pattern indices. Here's how the default palette and patterns look:


Given a canvas named "c", we can open the Listener and interactively issue some drawing operations:

c.pattern:35
c.rect[10,10 30,20]


(Remember: Shift+Enter evaluates a code snippet)

To draw colored text on a colored background, set the pattern, then fill the canvas, then set the pattern again, and finally draw the text:

c.pattern:33
c.rect[0,0 c.size]
c.pattern:35
c.text["Some words" 10,10]


The Canvas Interface section of the Decker reference manual briefly describes all the drawing operations that are available. As a convenience, there is a constantdictionary named "colors" which maps logical names to each of the solid color pattern indices; if you haven't customized your palette you can use these to make your code a little easier to read:

c.pattern:colors.yellow
c.rect[0,0 c.size]
c.pattern:colors.red
c.text["Some words" 10,10]

Text layout can get a bit complicated. If you specify an (x,y,width,height) rectangle as the second argument to canvas.text[], Decker will apply word-wrap within that rectangle, and the third argument can indicate an "anchor" for text alignment within thatbox:

rpos:10,10
rsize:70,30
c.pattern:colors.yellow
c.rect[0,0 c.size]
c.pattern:colors.red
c.box[rpos rsize]
c.text["Longer text which will need to wrap" rpos,rsize "center"]


There's some additional information about measuring text in All About Fonts.

Does any of that help? Any questions?

(+2)

This is extremely helpful!!!! Thank you!!