Drawing basics
Posted: 12 Apr 2020, 12:58
Introduction
Have you ever wanted to draw some image or text onto your screen?
If that's the case you came to the right place as I will tech you how to use drawing functions in Lua!
This tutorial is written for people who are familiar with JSON, if you are not I would highly recommend learning that first!
I made sure to include as much examples to make it easy to understand.
Any code in this tutorial is allowed to use without permission.
Getting started
Before you can start drawing images do a few things.
First you have to include a Lua script into your JSON file which can be done quite simply:
Now open your Lua script in my case it would be "tutorial.lua".
Now you have to write the following inside the Lua script:
I will breakdown what all of this means.
function -> Block of code that will be run when called
script:update -> Will tell TheoTown when to call the function (more information in Drawing methods)
stuff -> Not actual code; just a placeholder
end -> End the function
Drawing methods
There are 2 ways of drawing images or text on your screen:
script:update vs script:overlay
the difference would be:
script:update
This is the simplest drawing function since you don't need anything to use it.
If you understand JSON you can think of it like:
Unlike JSON you have to remember the order since it doesn't tell you what value goes where, but you can write it much more faster.
So for example if you write:
This draws the text "Hello Lua!" at x = 100 and y = 100!
Now if you want to play around with font size you can put one of these in fontSize
Drawing images
Drawing images will require a little bit more work than text, but it's definitely more fun!
Let's say you wanted to draw this image of a bear. First you would need to add an image as a form of an animation in your JSON file:
Now you will need to load your image as a draft in Lua.
Simply put a draft is a JSON object like a building or in this case an animation.
You have to load it in to use it inside a Lua script.
Since you load a animation, which can have multiple frame you must specify the frame you want to display with getFrame()
as it can only display one frame at a time, Drawing animations with multiple frames are possible but
a little complicated so it won't be in this tutorial.
script:init will be called when the game is initializing (loading). You have to load in drafts during initialization or you can't use them in
other game stages.
If you don't know what "image" is, it is a variable that holds the draft that we loaded.
Now let's use the image drawing function:
Adding it in our code will look like:
Set drawing color, opacity etc...
Plain text is boring, let's spice things up by adding some color to it using setColor():
As you can see that the color applied on everything.
The reason why is that setColor() applies to everything under it, so to fix that you need to use:
Examples
If you prefer learning by looking or playing around with examples I have a few for you:
Have you ever wanted to draw some image or text onto your screen?
If that's the case you came to the right place as I will tech you how to use drawing functions in Lua!
This tutorial is written for people who are familiar with JSON, if you are not I would highly recommend learning that first!
I made sure to include as much examples to make it easy to understand.
Any code in this tutorial is allowed to use without permission.
Getting started
Before you can start drawing images do a few things.
First you have to include a Lua script into your JSON file which can be done quite simply:
Code: Select all
[{
"id":"$drawing_tutorial",
"type":"script",
"script":"tutorial.lua"
}]
Now you have to write the following inside the Lua script:
Code: Select all
function script:update()
stuff
end
function -> Block of code that will be run when called
script:update -> Will tell TheoTown when to call the function (more information in Drawing methods)
stuff -> Not actual code; just a placeholder
end -> End the function
Drawing methods
There are 2 ways of drawing images or text on your screen:
script:update vs script:overlay
the difference would be:
script:update
- Will only be drawn when in a city.
- Draws under game UI.
- Will always be drawn whether in a city or not.
- Draws over game UI.
This is the simplest drawing function since you don't need anything to use it.
Code: Select all
Drawing.drawText(text,x,y,fontSize)
Code: Select all
//JSON format
"Drawing":[
"drawText":{"text":text, "x":x, "y":y, "size":fontSize}
]
So for example if you write:
Code: Select all
function script:update()
Drawing.drawText("Hello Lua!",100,100)
end
Code: Select all
TheoTown.RESOURCES.skin.fontSmall
TheoTown.RESOURCES.skin.fontDefault -- This one will be used by default
TheoTown.RESOURCES.skin.fontBig
--example:
Drawing.drawText("Hello Lua!",100,100,TheoTown.RESOURCES.skin.fontBig) --This will draw "Hello Lua!" but bigger!
Drawing images will require a little bit more work than text, but it's definitely more fun!
Let's say you wanted to draw this image of a bear. First you would need to add an image as a form of an animation in your JSON file:
Code: Select all
[{
"id":"$drawing_tutorial",
"type":"script",
"script":"tutorial.lua"
},{
"id":"$art_bear", //the image to display
"type":"animation",
"frames":[{"bmp":"art.png"}]
}]
Simply put a draft is a JSON object like a building or in this case an animation.
You have to load it in to use it inside a Lua script.
Code: Select all
name = Draft.getDraft(id):getFrame(frameNumber)
as it can only display one frame at a time, Drawing animations with multiple frames are possible but
a little complicated so it won't be in this tutorial.
Code: Select all
function script:init()
image = Draft.getDraft("$art_bear"):getFrame(1) --Do not forget the getFrame(1). Common error for me :P
end
other game stages.
If you don't know what "image" is, it is a variable that holds the draft that we loaded.
Now let's use the image drawing function:
Code: Select all
Drawing.drawImage(draft,x,y)
Code: Select all
function script:init()
image = Draft.getDraft("$art_bear"):getFrame(1)
end
function script:update()
Drawing.drawText("Hello Lua!",100,100)
Drawing.drawImage(image,200,100)
end
Plain text is boring, let's spice things up by adding some color to it using setColor():
Code: Select all
Drawing.setColor(r,g,b)
Code: Select all
function script:init()
image = Draft.getDraft("$art_bear"):getFrame(1)
end
function script:update()
Drawing.setColor(0,255,0) --Make it green to make me look like I know what I am doing!
Drawing.drawText("Hello Lua!",100,100)
Drawing.drawImage(image,200,100)
end
The reason why is that setColor() applies to everything under it, so to fix that you need to use:
Code: Select all
Drawing.reset()
Code: Select all
...
Drawing.setColor(0,255,0) --Make it green to make me look like I know what I am doing!
Drawing.setAlpha(0.5) --lets also set the opacity to 50%
Drawing.drawText("Hello Lua!",100,100)
Drawing.reset() --This should isolate setColor() to drawText() only
...
If you prefer learning by looking or playing around with examples I have a few for you:
move imitation
blinking images