Forums » Help » How to change the alpha on some objects, not all

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?

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

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

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.

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?

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;
            },

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

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();
	},