Interlude 4.1 Yes it is a bit of a Hack...
For our splash screen Tutorial we wanted to include a nice rounded border. To that end the following extends the roundRect() function that we have used in previous tutorials (to create a button). There are much more elegant ways to achieve this (e.g. using a mesh) but this has the advantage of simplicity. Once we have covered meshes we will rewrite this class. Another alternative would be to extend the roundRect() function to include a variable which determines if the roundRect is filled or not.
Interlude 4.2 The Rounded Border Class
This class relies on the roundRect() function, so you must include that to use RoundBorder(). The concept is very simple. We just draw two rounded rectangles, one inside the other. The inner rectangle is smaller by a factor of borderWidth. The larger rectangle is drawn using the borderColour and the inner using the fillColour.
RoundBorder = class() function RoundBorder:init(x, y, w, h, borderWidth, borderColour, fillColour) -- you can accept and set parameters here -- Set dimensions of the outer "border" round rectangle self.x = x self.y = y self.w = w self.h = h self.r = 30 self.borderWidth = borderWidth self.borderColour = borderColour self.fillColour = fillColour -- Set dimensions of the inner "background" round rectangle inX = self.x + self.borderWidth inY = self.y + self.borderWidth inW = self.w - 2 * self.borderWidth inH = self.h - 2 * self.borderWidth end function RoundBorder:draw() -- Codea does not automatically call this method -- Do the right thing and save the graphic context pushStyle() -- Start by drawing the outer Rounded Rectangle, this will become the border. fill(self.borderColour) roundRect(self.x, self.y, self.w, self.h, self.r) -- Then draw the inner rectangle using the fill colour fill(self.fillColour) roundRect(inX, inY, inW, inH, self.r) -- Return the graphic context to the way it was when entering this function popStyle() end