Painting a Shape Object with multiple line colours

OZApps

Can a Shape object be filled with a gradient by altering the line colours? All of the colours change to the last set colour.

@Atilim, anything?

Or is the option to use a Mesh object with a gradient?

OZApps

YEP! Found that the mesh object works better for gradients, faster and more convenient. from an example provided by @Atilim.

john26

I've done exactly this in my recent game Nebula Retro. Here is the code

display.newGradRect=function(width,height,r,g,b)   local block=Shape.new()   local h,s,v=rgb2hsv(r,g,b) local l=10 local n=math.floor(width/l)   local delta=width-n*l   for i=1,n do   v=i/n*50+50   local r2,g2,b2=hsv2rgb(h,s,v) local color=rgb(r2,g2,b2)   block:beginPath() block:setFillStyle(Shape.SOLID,color) block:moveTo(-width/2+(i-1)*l,-height/2) block:lineTo(-width/2+i*l, -height/2) block:lineTo(-width/2+i*l, height/2) block:lineTo(-width/2+(i-1)*l, height/2) block:closePath() block:endPath() end   if delta>1 then   local r2,g2,b2=hsv2rgb(h,s,100)   local color=rgb(r2,g2,b2)   block:beginPath() block:setFillStyle(Shape.SOLID,color) block:moveTo(-width/2+n*l,-height/2) block:lineTo( width/2, -height/2) block:lineTo( width/2, height/2) block:lineTo(-width/2+n*l, height/2) block:closePath() block:endPath() end   stage:addChild(block) return block end

Here, hsv2rgb is a function to convert colours in hue, saturation and value format to red, green, blue. The result is a rectangle with gradient fill.

OZApps

@john26,
That's nice, but there are so many other variables in there, functions that are called in a loop. The faster way that I found is mesh

mesh = Mesh.new()   mesh:setVertices( 1, 10, 10, 2, 110, 10, 3, 110, 110, 4, 10, 110 )   mesh:setIndexBuffer( 1, 2, 3 1, 3, 4 )   mesh:setColorBuffer( color1, 1, color1, 1, color2, 1, color2, 1 )   stage:addChild(mesh)

This seemed to work fine for me to create a gradient rect of 100x100 at 10,10 with the gradient starting from color1 to color2 (Vertically), you can even have 4 colours at each corners.

Mells

I find working with this Mesh Api really simple and enjoyable.

Fog example

@OZApps
During my tests I found it better to create my meshes around the screen's top/left [0;0] to keep its container center... centered.
You probably already know it so it's not directed to you, but for a beginner at least it's good to understand that the center of the mesh's container is set at [0;0] if it's an empty Sprite, or one which parent is stage for example.

moopf

@Mells, that link doesn't appear to work?

I haven't used the mesh in anger yet, need to have a play with it.

Mells

@moopf Really? it works for me and it's located in my Dropbox public's folder so it shouldn't be a problem with permissions.
I attach it to the forum then.

Can other members confirm that the link doesn't work?

With a wrapper to make things easier to use, I think meshes have a lot of potential.

Scouser

@Mells: The link works for me & that is a cool implementation of fog & I like the image of Fuji

moopf

@Mells, you know what. It's chrome being an idiot - if I right click it's fine, if I left click it does nothing.

I've just downloaded it and given it a run but I'm not sure it's showing correctly in my player?

Mells

@Scouser
great

@moopf Maybe it has to do with the player's settings?
Player settings [Hardware] :
Orientation -> Landscape left
Resolution ->1536 x 2048 (iPad Retina)

This is how it should look like :

moopf

@Mells, nope it does the same thing with those settings. Thing is I've just remembered that I'm actually using a different version of Gideros as I'm testing some bug fixes for Atilim on packed textures. I'm wondering if there's some other change in this version that's messing with meshes - it definitely does not look nice like your image!

I've sent Atilim a message to ask him to check your project as well just in case it is an issue with that.

Mells

@moopf
I'm on Gideros 2012.09.02.
Thank you for sending him directly, I hope it helps to find if there was an hidden bug somewhere.

zvardin

@Mells That fog effect is great

atilim

Now I've fixed it. It's a bug only @moopf can see

atilim

@OZApps, also it's possible to combine texture mapping and color vertices as in @Mells' example to achieve interesting effects.

ar2rsawseen

@Mells examples like this make me understand, that I don't know anything about capabilities and options Mesh can offer

OZApps

AHHH!! between 9.0 and 9.2 the Mesh API has changed and it breaks because the earlier API was Buffer and now it is Array. I hope it does not change any further. The example above would work perfectly well if we made that change as

setIndexArray

instead of

setIndexBuffer

and

setColorArray

instead of

setColorBuffer

.

@mells, your sample is quite nice.

Mells

Hey all,
glad this sample was helpful.
I have been experimenting with the Mesh Api to produce some visual effects, I hope I have some time soon to clean things a little and post here.
Also I need to produce some original art for the sample above, so it can be shared freely as CC.