Impact

This forum is read only and just serves as an archive. If you have any questions, please post them on github.com/phoboslab/impact

1 decade ago by DaveVoyles

I'm using someone else's JS files for my parallax star backgrounds, so mine appear like this:

# http://gamealchemist.co.nf/Particles/StarField2/StarField2Demo.html?800 #

The trouble I run into however, is that it affects the globalAlpha, and that's what gives the stars that twinkling effect. Unfortunately, it also adjusts the alpha on all my images in the game.

How can I only affect the alpha of the stars?

1 decade ago by stillen

Can you post the code or source that makes the effect? It'd be easier to help seeing what's going on in the code

1 decade ago by DaveVoyles

Sure thing, sorry for being so vague there:

Starfield.js
  draw: function () {
            var width1 = Math.round(4 * this.fakeZ * this.fakeZ);
            if (width1 > 2) {
                this.drawContext.fillStyle = colors[this.colorIndex];
                this.drawContext.globalAlpha = 0.4 + 0.6 * Math.abs(Math.cos(this.timeShift + Date.now() / 200));
                this.drawContext.fillRect(Math.round(this.x), Math.round(this.y), 3.2, 3.2);
            } else {
                this.drawContext.fillStyle = colors[this.colorIndex];
                this.drawContext.globalAlpha = 0.4 + 0.6 * Math.abs(Math.cos(this.timeShift + Date.now() / 200));
                this.drawContext.fillRect(Math.round(this.x), Math.round(this.y), 1.2, 1.2);
            }
            },

Main.js
        draw: function () {
            this.parent();
            ig.system.clear(this.clearColor);
            this.starSparkle.draw(ig.system.context); // This is the stars
            this.drawHUD();
            this.drawMenu();
            this.scanlines.draw(0, 0);
        },

So oddly enough, if I add:

ig.system.context.globalAlpha = 1;

to the end of my draw() in my player class, then everything else looks fine (stars sparkle correctly, and nothing else is affected), BUT, my player begins to flash and change transparency.

I saw this response from Dominick, but tried everything I could, and didn't get any success:
http://impactjs.com/forums/help/background-layer-fades

1 decade ago by stillen

Have you tried this in your player draw:
draw: function () {
    ig.system.context.globalAlpha = 1;
    this.parent();
}

I'm not at my computer to test this, just thinking out loud honestly.

1 decade ago by DaveVoyles

I'm still getting that same issue.


// Just commented out to show you that I tried both locations.
    draw: function () {
     //   ig.system.context.globalAlpha = 1;
        this.parent();
        this.drawBulletTimeText();
        this.drawUI();
        this.drawBossText();
        this.draw_pu_BU_Text();
        this.draw_pu_Life_Text();
        this.draw_pu_Turret_Text();
     //   ig.system.context.globalAlpha = 1;
    },

I also tried placing that between each function in my Main.js draw call, and yielded the same results:
        draw: function () {
            this.parent();
            this.drawHUD();
            this.drawMenu();
            this.scanlines.draw(0, 0);
            this.starSparkle.draw(ig.system.context);
        },

Is there a difference between this.drawContext.globalAlpha and ig.system.globalAlpha?

1 decade ago by DaveVoyles

I found the culprit -- I had to go through each file in my project and look for where it was setting the globalAlpha to something other than 1, and check to see if it was ever NOT resetting it back to 1 after the draw loop was finished.

In my parallax starfield background, I was doing exactly that. Notice the "this.drawContext.globalAlpha = 1; at the bottom there -- I just added it, and not it works fine :).

        draw: function () {
            var width1 = Math.round(4 * this.fakeZ * this.fakeZ);
            if (width1 > 2) {
                // draw the star image.
                //this.drawContext.drawImage(this.starImage, Math.round(this.x), Math.round(this.y), width1, width1);
                this.drawContext.fillStyle = colors[this.colorIndex];
                this.drawContext.globalAlpha = 0.4 + 0.6 * Math.abs(Math.cos(this.timeShift + Date.now() / 200));
               //this.drawContext.fillStyle = '#e8e8e8';
                this.drawContext.fillRect(Math.round(this.x), Math.round(this.y), 3.2, 3.2);
            } else {
                // too small star : just draw a point
                //    this.drawContext.fillStyle = '#e8e8e8';
                this.drawContext.fillStyle = colors[this.colorIndex];
                this.drawContext.globalAlpha = 0.4 + 0.6 * Math.abs(Math.cos(this.timeShift + Date.now() / 200));
                this.drawContext.fillRect(Math.round(this.x), Math.round(this.y), 1.2, 1.2);
            }
               this.drawContext.globalAlpha =1;
            },

1 decade ago by Joncom

@DaveVoyles: Glad you got that sorted out.
Very cool looking parallax stars!!

1 decade ago by stahlmanDesign

To change the opacity or alpha of an entity, in its draw method change this.currentAnim.alpha

draw: function(){
		this.currentAnim.alpha = 0.5; 
		this.parent();
	},
Page 1 of 1
« first « previous next › last »