1
I’m making a game and I’m currently building a screen where there would be an opacity transition (fade in) and, upon completion, initiate another opacity transition.
The problem is when the first transition ends and the other begins, since the first transition accompanies the opacity of the other. And I’m redefining the CanvasRenderingContext2D.prototype.globalAlpha to draw with different transparency.
Example:
// Isso é memorizado em um bloco anterior
var alpha0 = 0, // A opacidade da primeira transição
alpha1 = 0; // A opacidade da outra
// ===========================================
// Enquanto o jogo executa, esse bloco executa
context.globalAlpha = alpha0;
// ...
context.globalAlpha = alpha1;
// ...
if(alpha0 < 1)
alpha0 += 0.1;
;else if(alpha1 < 1)
alpha1 += 0.1;
For when I draw anything after defining the current opacity of the first transition and the second transition begins I see the drawing having the current opacity of the second transition.
Take a look at this function Tween http://answall.com/a/131063/129. I think it would be better to implement something similar so as not to mix opacities?
– Sergio
@Sergio It’s great as a solution, but there’s no way to define opacity for an object, because canvas doesn’t recognize it (although I don’t use HTML elements to make the game, only the canvas element). An alternative is to take all pixels of the image/canvas and change the 'alpha' (opacity) value of each one through the JS, but this is unnecessary and heavy.
– Klaider
If you made the game in SVG maybe it would be easier. You can create a simple jsFiddle that shows the problem you are having so we can test?
– Sergio
@Sergio Hospedei on my site since he loads some audio because I’m testing... http://handoncloud.com/archerOnline/frame.html, you need to go to source
Archer.js(view-source:http://handoncloud.com/archerOnline/data/Archer.js) and go up a little until you find a function calledMainMenu, then see such aEnterFramein this function block. Although you have to wait for the game to load for the first time to see the problem on the next screen.– Klaider