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