Application GUI Questions

Hi everyone.

– Background Info

I’m pretty new to Codea and LUA. I’ve been playing around with it for a while, been doing the tutorials that I could find online (Wish there were more) and been working towards a pet project of mine: An interactive D&D Character Sheet.

I’ve been using the Cider 7 GUI tools by Mark to do some rough prototyping and will eventually want to make my own custom gui using custom graphics. I’m also using a State Machine that I got through the Codea Community. Though I’m wondering if what I’m doing is the most efficient and whether it will scale to what I want the app to end up doing.

– Questions

  1. Is there a way to add transitions/animations to a gui using a state machine? E.g. One screen slides to the left as another comes in to view simultaneously, ending in the position of the original screen.
    (One solution I could think of which I believe is probably inefficient is to add a variable to each elements x and y position which tweens on and off screen while drawing both screens at the same time during said transition.)
  2. I’ve been reading up on the speed benefits of using meshes. Would this apply to GUI elements as well? Especially if said GUI elements move around?
  3. Has anyone written any code of or have code examples of a state machine that can transition from one scene to another?

Thanks in advance for any and all sagely advice :slight_smile:

1/ you could print your screens into an image with setContex, then tween those 2 images only.
2/ mesh are the fastest. But precomputing images and spriting them around is not dramatically worse (x2?) and much simpler.
3/ …

Thanks for the reply Jmv.

The context idea looks interesting. Do you mean physically print screen (apple button and power button) for every slide/state/screen? Or is it a function that could turn whatever is currently drawn on the canvas in to an image?

Cool. Meshes are then not a worry ^_^.

@ZaphodBreeblebox you would need to sprite (quickest way of drawing images) them in to an image (this is what Jmv38 meant by print) using setContext(imageyouwanttoprintto) sprite(img) setContext()

@ZaphodBreeblebox - this is how setContext works, it makes an off screen drawing

s1=image(w,h) --whatever size you want
setContext(s1) --start drawing on s1
  --now draw what goes on this screen
setContext()  --stop drawing

--repeat for the second screen s2
--then you can sprite s1 and s2 on the screen, moving them across

setContext lets you draw to an image instead of the screen, so you can perform any drawing operations as you would normally and they will be applied to an image, not the screen.

It’s most commonly used to draw everything once to an image and then draw that image to the screen

@Luatee, @Ignatz, @JakAttak.

Thanks for the comments!
I’ll definitely be playing around with the setContext command today. I’ll probably write a function that hooks in to the Scene Selector class I got on the Codea Community (Finite State Machine) and will post whatever comes out of that over here.

My current work on GUI :

I try to put code on Github soon, and remake a video of the result on iPad.

@HyroVitalyProtago that is amazing, reminds me of the android home screen transitions on some home applications (nova etc if you have android)

@HyroVitalyProtago, very impressive! And I’ll assume it runs much smoother on an actual iPad without recording going on.

@Luatee Thanks ! And yes, reminds me some transitions on android too.
@JakAttak Thanks too ! 15fps in this video, 60fps on my iPad Air.

Bows down to Hyro’s awesome transitions
Man those are looking sexy! Makes me feel silly for the little progress that I’ve been trying to make. Everything done in LUA/Codea or is there Objective C involved?

@ZaphodBreeblebox Thanks ! Everything is done in Lua (the best language of the world =P)

@HyroVitalyProtago +1 scripting languages will be the future for the software revolution, after we finish with our hardware revolution.