Painting a Shape Object with multiple line colours

OZApps · November 2012

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 · November 2012

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

john26 · November 2012

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 · November 2012

@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 · November 2012

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 · November 2012

@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 · November 2012

@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 · November 2012

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

moopf · November 2012

@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 · November 2012

@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 · November 2012

@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 · November 2012

@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 · November 2012

@Mells That fog effect is great

atilim · November 2012

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

atilim · November 2012

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

ar2rsawseen · November 2012

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

OZApps · November 2012

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 · November 2012

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.

Howdy, Stranger!

Categories

In this Discussion

Top Posters

Painting a Shape Object with multiple line colours

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Top Posters

Painting a Shape Object with multiple line colours

Comments