Obsi Tutorial

Disclamer

This page is for users who are already familiar with Lua programming language. If you want to learn lua, you might consider this cool manual: https://www.lua.org/manual/5.1/manual.html

Tutorial for Obsi

In this short tutorial, we are going to make a simple clicker with some graphics using Obsi, VSCode (you may use any IDE that supports Lua Language Server) and CraftOS-PC.

Step 1. Download and install Obsi.

The simplest way to download Obsi at the moment is by downloading the zip file of the whole repo. Just go over to the main repo and click the green button <> Code, then choose Download ZIP.

After you downloaded it, you need to go over to the save folder of CraftOS-PC (see https://www.craftos-pc.cc/docs/saves) and extract the folder from the archive into the folder with computer's id.

You should have a file structure like this:

<id>
| obsi-main
| | .vscode
| | audio
| | graphics
| | keyboard
| | mouse
| | system
| | time
| | .gitignore
| | CHANGELOG.md
| | LICENSE
| | README.md
| | obsi-logo.png
| | obsi.lua

Now, I'd like to recommend to add Obsi to your path variable on CraftOS. Here is a way how to do it by creating a startup.lua file:

startup.lua:

shell.setPath(shell.path()..":/obsi-main")

This code above appends the folder obsi-main to the path.

Step 2. Creating project structure.

Obsi has a project structure that is similar to Love2D. Your project folder should always have main.lua file that can be loaded and ran by Obsi.

Here is how the project folder should look like at very mininum:

<id>
| project-name
| | main.lua
...

Step 3. The game code.

As it was already said, Obsi is very similar to Love2D, for exception being that it was designed specifically for CC: Tweaked.

So, let's see the main.lua file.

main.lua:

local clicks = 0
local color = colors.white
local rect = {
	x = 0,
	y = 0,
	w = 20,
	h = 20
}
function obsi.load()
	obsi.graphics.setRenderer("hmon")
end

function obsi.mousePressed(x, y, button)
	if x >= rect.x and x <= rect.x+rect.w-1 and y >= rect.y and y <= rect.y+rect.h-1 then
		clicks = clicks + 1
		color = 2^math.random(0, 14)
		obsi.audio.playNote(1, "pling", 12, 2)
	end
end

function obsi.update()
	local w, h = obsi.graphics.getPixelSize()
	rect.x, rect.y = w/2-rect.w/2, h/2-rect.h/2
end

function obsi.draw()
	local w, h = obsi.graphics.getSize()
	obsi.graphics.setForegroundColor(color)
	obsi.graphics.rectangle("fill", rect.x, rect.y, rect.w, rect.h)
	local text = "Clicks: "..tostring(clicks)
	obsi.graphics.write(text, w/2-#text/2, h*0.9)
end

Here is a breakdown of the code:

a) Before obsi.load():

• initialization of local variables (clicks, color) and a single object (rect).

b) Inside obsi.load():

• setting a rendering API to hmon, which draws each pixel at a character level.

c) Inside obsi.mousePressed():

• checking if the user clicked the mouse while it was inside of a rectangle.
• if it was, then we increment clicks variable, change the color variable, play a single note with pling instrument of a pitch of 12 and volume of 2.

d) Inside obsi.update():

• set the position of the rectangle to be in the middle of the screen (remember that Obsi, just like Love2D, starts drawing things at top-left corner).

e) Inside obsi.draw():

• draw the rectangle
• write the text at the bottom-center of the screen to display the count of clicks we've made.