Let's focus on the code that you wrote for the background layer. Why did we have to wrap it on this ActorFrame?
return Def.ActorFrame{
Def.Quad{
OnCommand=function(self)
self:FullScreen():diffuse(Color.Blue)
end
}
}
If you remember from Anatomy Of A Screen, we've specified some rules to take in consideration when building a Screen, like always having to return a table. Well, any kind of Actor can be considered a table, because they technically are, but the ActorFrames serve a quite useful feature: They're containers for other Actors.
return Def.ActorFrame{
-- This Actorframe will be located at the center of the screen.
OnCommand=function(self)
self:Center()
end,
-- Now, every object here will START at that center.
Def.Quad{
OnCommand=function(self)
self:zoomto(64,64):diffuse(Color.Blue):spin()
end
},
Def.BitmapText{
Font="Common Normal",
Text="I'm a new actor!",
OnCommand=function(self)
self:y(30)
end
}
}
You can think of ActorFrames like a box, where you can put stuff in, and if you move them, whatever is inside will move with them too. this is quite useful if you want to organize Actors with specific purposes. Maybe an ActorFrame for the header, one for display song information, maybe a list, etc. You can even stack ActorFrames on those ActorFrames.
You can add more Actors into an ActorFrame in a few ways, which are based on Lua's method of appending onto an existing table, you can look at these methods on the ActorFrame's definition page.
Now that we know the rundown on ActorFrames, how about we start adding images to the theme?