October 16, 2018, 08:36:17 am

News:

Welcome to the Platino support forum!


Hot to draw gradients?

Started by jrayon, August 21, 2015, 05:28:45 am

previous topic - next topic
Go Down

jrayon

Hey,

Is there any way to draw a gradient programmatically, just using color codes?

Thanks!
Javier

peachpellen

Hey :-)

http://www.sitepoint.com/javascript-generate-lighter-darker-color/

Take a look at that, it's only for lighter/darker but it's pretty cool - I've been using it. For other colors there's this, which I haven't had a chance to go through properly but at a glance looks viable.

For darker/lighter though the first link is definitely the way to go :-)

- Peach Pellen

jrayon

Thanks Peach!

But how do you apply it? Do you create a different sprite for each gradient level? What I want to do is a full background with a gradient (let's say to simulate a sky that may change color). Doing this with sprites looks to me a bit overwhelming.

Does Platino 3 allow to have a transparent gameview? In this case, I could use window backgroundGradient property from titanium

Thanks,
Javier

peachpellen

Hey - kind of.



That is obviously wider than you'd like and uses sprites and what I was picturing.

So, you can make your gameview transparent, however that would also make the contents of it transparent as well.

Platino 3 does have changes - allowing you to add Titanium views to the gameview and the gameview to Titanium views, not just the window. Take a look at the touchevent sample; that one shows the buttons that way.

- Peach

PS - Skimmed your feedback but please be patient as I'd like to delay replying/sharing with the team until we aren't quite so crazy with post release stuff. Thank you :-)

jrayon

Cool! I'll have a look to that sample. Maybe using a Ti.View as background is a good solution. ;)

Javier

jrayon

Just for anyone else interested on this... I tried adding a view to the gameView, but unfortunately gameView.add() adds everything to the top layer (as a HUD), so there's no chance to use the view as background of the scene or the game.

This is the code I was using:

Code Select

// Not working as I expected, the view is added on top of the gameView, covering the scene
function createBackgroundGradient() {
$.bgView = Ti.UI.createView({
backgroundGradient: {
        type: 'linear',
        startPoint: { x: '50%', y: '0%' },
        endPoint: { x: '50%', y: '100%' },
        colors: [ { color: 'red', offset: 0.0}, { color: 'blue', offset: 0.25 }, { color: 'red', offset: 1.0 } ],
    }
});
gameView.add($.bgView);
}

createBackgroundGradient();


The scene.alpha property http://docs.platino.io/#!/api/Scene-property-alpha mentions that can be used to show Ti components behind, but I couldn't get it working, and I'm afraid it's my last chance... Any idea how to user it?

thanks!
Javier

johngould

September 14, 2015, 04:01:04 am #6 Last Edit: September 14, 2015, 04:09:43 am by johngould
Javier,

I feel like this should be doable, but sure enough, when I put a game view inside a view, it completely covers it up, even without a background color or even a scene!  Weird.  I'm going to throw this one to Joseph, our gameView guru...

--John

jrayon

Thanks! That would be great, John.

The behavior I see is exactly as you described.

Javier

johngould

Okay, I spoke with Joseph and the behavior we're seeing is more or less expected.  The problem stems from the fact that while the GameView does inherit from a Ti View, there are actually two types of Ti Views, and the one we're using, of course, is the one that renders to OpenGL.  The behavior of that type of view is such that it refreshes constantly in order to allow for moving sprites and such, so if we allowed for a transparent background, it wouldn't refresh and you'd end up with sprites leaving a trail behind them as they moved.  It's actually a bit above my head in terms of technical details, but essentially, yeah, we can't do a transparent GameView background.

So... What about a view inside a GameView?  Again, due to the OpenGL-type view, this doesn't behave the way a normal view-inside-a-view behaves.  Any Ti controls will show up on the top of everything else in a GameView, because it has its own z-order that can't have Ti controls mixed in.  (Which, as I'm thinking about it, means that labels can only be on top of other controls, so yeah, text sprites are still in there and may not go away totally until we can replace them with something less buggy than a text sprite currently is but that can mix into the z-order unlike a label.)

So the long-term solution is for us to add the ability to do gradients for backgrounds in a GameView.  This is a great suggestion and we'll get that on our list for 3.x for sure!  In the meantime, I think the best I can suggest is that you make a static gradient, create a sprite with that pattern, and set that sprite to full-screen size and put it at the back of the z-order so it looks like a background.  Admittedly, this is limited as you can't dynamically change it - you would have to swap out different sprites - but depending on how complex your gradient needed to be, you could always use the color attribute to give the sprite a different color overlay.  Still somewhat limited, but it gives you some options.  I'll put together a quick demo of what I'm talking about.

Sorry I couldn't give you a better answer for now, but believe me, you've sparked some interesting conversations over here and we're looking at some really cool improvements for both sprites and the Game View that should alleviate this issue.

--John

jrayon

John, your answer is the best I could expect: a CEO worried by his user's problems. Glad to hear that this thread inspired some interesting discussion. I'll find the way but definitely the capacity to dynamically create gradients in a scene or an sprite is a very cool feature!  ;)

Thanks for your words,
javier

johngould

No problem, Javier.  I only wish I had a better answer for you!  There is a way to do a very simple color-changing gradient (I think), that I've been meaning to fiddle with.  I'll find some time tonight most likely and get you a couple of options.  Most likely not exactly what you want but should be a useful exercise.

We're looking at adding more functionality to sprites and the game view very soon.  We have a couple of things that are very high priority for v.3.1 but we'll definitely look at gradients and other visual effects.   :D

JosephAustinDev

Quote from: jrayon on August 21, 2015, 05:28:45 am
Hey,

Is there any way to draw a gradient programmatically, just using color codes?

Thanks!
Javier


Good news: there's about to be... ;)


Grainy

Quote from: JosephAustinDev on November 02, 2015, 12:44:03 am
Quote from: jrayon on August 21, 2015, 05:28:45 am
Hey,

Is there any way to draw a gradient programmatically, just using color codes?

Thanks!
Javier


Good news: there's about to be... ;)


Any update?
Nothing compared to testogen is any good.

MichaelStubbs

Quote from: johngould on September 23, 2015, 11:39:28 amNo problem, Javier.  I only wish I had a better answer for you!  There is a way to do a very simple color-changing gradient (I think), that I've been meaning to fiddle with.  I'll find some time tonight most likely and get you a couple of options.  Most likely not exactly what you want but should be a useful exercise.

We're looking at adding more functionality to sprites and the game view very soon.  We have a couple of things that are very high priority for v.3.1 but we'll definitely look at gradients and other visual effects.   :D

Have you taken into consideration the gradients and other visual effects yet? I'm new to this forum but interested in making a color-changing gradient.
Just read reviews by users of phenq

Go Up