Friday, June 29, 2012

Interlude 4 - A Rounded Border Class (Updated 17/01/16)


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

4 comments:

  1. Thanks for these tutorials! In this one, you call the function "RoundRect()", but in the code we copied from Sounds Plus, the function itself was called "roundRect()". I think that's why I'm having trouble running Tutorial 4. Or did I miss a step somewhere?

    ReplyDelete
    Replies
    1. Hi TC - You are welcome and thanks for commenting..

      You are correct. Lua is case sensitive so yes it makes a difference. By convention I always name classes with a capital, that way you can tell at a glance whether you are looking at the class name or an instance of the class. However, roundRect() is a function not a class and the usage here is inconsistent with Tutorial 2.

      Thanks for pointing it out. I will change it here.

      Cheers,

      D

      Delete
  2. Got this one done too! I really want to ask about how inheritance works in codea, but in looks like you are going to cover that latter. And I may sound strange but thank you for not showing us how to use this in the main class. It was a good learning experience to struggle through instanciating (sp?) the the class, truly understanding each parameter, etc. But I got it and it felt good. I had to go back the the button class and closely examine how it worked there. Thanks Again!

    ReplyDelete
    Replies
    1. Hi Josh - you are steaming along and you are welcome! When you write these tutes you never know if anyone is going to read it. I had better write some more to keep ahead of you.

      Yep, classes get covered in more depth later on. I come from the old school of FORTRAN and c which doesn't have classes, but once you get the hang of them you never go back. Codea does a really good job of abstracting away the difficulty of writing code. The graphics are rendered using OpenGL which makes it very quick and you can definitely write Apps good enough for release on the App store - which a number of people have already done.

      I think the spelling is instantiating.

      and Happy New Year!

      Delete