Coming from Canvas

Cyberience · January 2013

I am coming froma Canvas Modelled Language, like HTML5 and just trying to get to grips with LUA, I know the principles of loading a canvase, writing to the hidden canvas and then once finished rendering placing it scalled into view, but a little confused by the Object way done in Gideros, Can somone simply describe what the modal is for handling the display of Graphics and Sprites?

BJG · January 2013

Hi Cyberience -

I'm new to Gideros myself, but I'll have a crack at answering your question and someone will correct me if I'm barking up the wrong tree.

"Object" is a term from Object Oriented Programming (OOP), and to start with it will be helpful to get a grounding in that. Lua isn't exactly an OOP language, but it kind of emulates one.

Gideros adds a bunch of functions which are modelled on Actionscript 3, so that's also useful to know. I'm currently juggling "Programming in Lua" (Roberto Ierusalimschy), and "Learning Actionscript 3" (Rich Shupe) along with the Gideros documentation. One of the forum members who posts as OZApps has also written an introductory book on Lua which includes a section on Gideros - see here:

http://www.apress.com/9781430246626

To answer your question, you have the idea of a hierarchy of containers descending from the "stage" which kind of represents the display. The stage holds sub-containers called "sprites" which in turn can hold bitmaps and shapes drawn within Gideros.

A shape or bitmap can be added as the "child" of a sprite by using its "addChild" method. Likewise, the sprite can be added to the stage, or display, by using the stage's addChild method. The graphics within the sprite can then be concealed or revealed by removing them as the sprite's children and adding them again. If you study the built-in examples like "Bird Animation" (bitmaps) and "Drag Me" (shapes) you'll hopefully start to get the idea...

techdojo · January 2013

Basically to sum up what @BJG said, Gideros uses what's known as a "retained mode" approach. The idea is that the engine "retains" a list of what to draw (just like flash does), you tell the engine what to draw by adding your objects (basically anything based on a Sprite) to a base "stage" object which the engine keeps track of, then every frame behind the scenes the engine starts with the stage and "walks" the hierarchy - ie draws all the objects and their children to create your view.

Think of it a bit like the DOM in HTML5, Canvas on the other hand is what's know as a "direct mode" approach and you have to specify what you want to draw each frame by issuing the draw calls in the right order.

Each approach has it's pro's and con's, Codea on the iPad for instance uses a "direct" approach and can be more flexible - especially for things like particle systems and having to replicate lot's of sprites, but you generally have to write more code and keeping a clean separation between logic and rendering is harder.

Hope this helps.

john26 · January 2013

I'd like to clear up a bit of confusion of the word object. Gideros uses "display objects" which are images you set on screen and then move around, scale, rotate and delete. However, this is completely different from the "objects" in object oriented programming. Gideros does not force you to use an OO approach when programming. There is support for OO but you don't have to program that way. Fundamentally, Lua is not OO, but the Gideros developers have added a layer of code that lets it emulate OO which you can use or not depending on your preferences.

BJG · January 2013

The idea of OOP in Lua predates Gideros though; it's described by Lerusalimschy, one of its architects.

http://www.lua.org/pil/16.html

Cyberience · January 2013

OK got it Thanks Guys, and then if I have different pages, I just set up Stages, Display one stage and hide the other. adding and removing or positioning child components as I go, then I may ask apart from the order of writing, like on a canvas the last drawn, with whatever alpha and colour or image you select, will be on top. Is there an order or Z-Index to move items forward and backwards, for example if I move a sprite in front of another, and then simulate going behind it I just change the index or do I need to redraw in a new order?

OZApps · January 2013

@Cyberience, because of the way the drawing takes place there is an index but you cannot access it with the zIndex property, however you can use the addChild method to move a display object in the z-order. There is also the function addChildAt where you can specify an index as to where you want to position the child in the z-order.

The best part is that you do not have to call the draw method explicitly (unless it is a shape object) and they are redrawn as you change the display attributes of the objects.

Cyberience · January 2013

Thanks OZ.
What I am looking at now is how to control the event, I am used to firing a call back where an animation may occur via a count down, so if the count goes down to 0(Zero) the routine doesn't call back, and it stops, in effect only animating when something needs to animate, I don't see how the animation or timed events are controlled. I am looking at the bird sample, and I see a child adding the sequences. but I don't see how the animation is cycled? I am still reading through the docs at the moment, so not started any coding, it may become more clear to me as I proceed.

Regards

OZApps · January 2013

you might want to look at the addEventListener and the dispatchEvent with custom events, so when your countdown timer reaches 0, you can set up a callback and dispatch a "complete" event.

Howdy, Stranger!

Categories

In this Discussion

Top Posters

Coming from Canvas

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Top Posters

Coming from Canvas

Comments