Skip to content

Obsi Tutorial

simadude edited this page Oct 31, 2023 · 2 revisions

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.

Obsi Installer.

Right now, you can install Obsi by using the Obsi Installer. All you have to do is to go over to your working ComputerCraft instance and run pastebin run WaaN2LzZ. You will then need to say y to download the whole repo, choose the path (or leave empty to choose the default) where you want to install Obsi, and then optionally agree to send the telemetry.

Download ZIP archive.

The other way to install Obsi 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

Adding Obsi to the path

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. If you installed Obsi into some other folder, then make sure to put the correct path there instead!

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.