It looks like you're new here. If you want to get involved, click one of these buttons!
Ever have the need to put some "tutorial cards" on the screen that users can paw through to learn the basics of your app? Just feed this class a collection of images and you're ready to go.
Tutorial = class()
-- A simple class for building tutorial style page controls
-- Mark Sumner
function Tutorial:init(w, h, images)
self.page = 1
self.images = images
self.show = false
self.ox = 0
self.h = h
self.w = w
end
function Tutorial:draw()
pushStyle()
fill(255, 255, 255, 66)
rect(0, 0, WIDTH, HEIGHT)
noTint()
clip(WIDTH / 2 - self.w / 2, HEIGHT / 2 - self.h / 2, self.w, self.h)
sprite(self.images[self.page], WIDTH / 2 - self.ox, HEIGHT / 2, self.w,
self.h)
if self.page < #self.images then
sprite(self.images[self.page + 1], WIDTH / 2 - self.ox + self.w +
20, HEIGHT / 2, self.w, self.h)
end
if self.page > 1 then
sprite(self.images[self.page - 1], WIDTH / 2 - self.ox -
self.w - 20, HEIGHT / 2, self.w, self.h)
end
clip()
fill(0, 0, 0, 63)
noStroke()
for i = 1, #self.images do
ellipse(WIDTH / 2 - (#self.images / 2 - i) * 40,
HEIGHT / 2 - self.h / 2 - 30, 15)
end
fill(255, 255, 255, 255)
ellipse(WIDTH / 2 - (#self.images / 2 - self.page) * 40,
HEIGHT / 2 - self.h / 2 - 30, 15)
popStyle()
end
function Tutorial:touched(touch)
if touch.state == BEGAN then
self.ox = 0
end
if touch.state == MOVING then
self.ox = self.ox - touch.deltaX
if self.ox > self.w * .8 then
self.page = self.page + 1
self.ox = 0
end
if self.ox < - self.w * .8 then
self.page = self.page - 1
self.ox = 0
end
if self.page == 1 and self.ox < - self.w / 4 then
self.ox = - self.w / 4
end
if self.page == #self.images and self.ox > self.w / 4 then
self.ox = self.w / 4
end
end
if touch.state == ENDED then
if self.ox > self.w / 3 and self.page < #self.images then
self.page = self.page + 1
end
if self.ox < - self.w / 3 and self.page > 1 then
self.page = self.page - 1
end
self.ox = 0
end
end
Comments
Just realized after posting this that it made use of the Button class from Cider.
I've edited the code now so there should be no dependencies.
nice,how to make Codea's reference style?
Very nice.
A very minor thing, but a noStroke() before you draw the "progress circles" gives a cleaner look
Thanks, @west. I've added that line to the code.