JS Creating solid color sprite

cocos2d-x JavaScript
1

I want to do something like the following to create a solid color sprite. The following code does not work but gives an idea of what I want to achieve. The sprites that I am trying to create will be dynamically sized and colored, creating sprites with an image is not suitable.

    var size = cc.winSize;

    var sprite = new cc.Sprite();
    sprite.setColor(cc.color(255,0,0,0));
    sprite.width = 100;
    sprite.height = 100;
    sprite.x = size.width / 2;
    sprite.y = size.height / 2;
    this.addChild(sprite);
2

Don’t know if you can create a solid colour sprite like you are trying to do, but before trying anything else, be aware that the colour you are setting your sprite has an alpha value of 0, which means it will not be visible. For cc.color(), the fourth value is the alpha; that is cc.color(red, green, blue, alpha). The lower the alpha value, the more transparent it is.

But if that doesn’t work I just always use LayerColor. Code would be something like var layer = new cc.LayerColor(cc.color(255, 0, 0, 255)); for a red “sprite”.

You also need to use layer.ignoreAnchorPointForPosition(false); or else it will always have an anchor point of (0, 0), and then you need to change the anchor point to (0.5, 0.5) (the center) or wherever you want it to be.

3

Only with 1 pixel size image
see example in :

look for SpriteBackGround Object in the source file lines 19 and 44

4

@grimfate The LayerColor suggestion is perfect as I can attach EventListeners to it. Initially I tried to attach an EventListener to a solid colour DrawNode which failed so I tried a Sprite.

The alpha value in the actual code was 255, I messed it up while formatting the question.

@Meir_yanovich where in the example can you have a 1 pixel solid colour sprite? Looking at it all sprites seem to be initialised with a PNG.

5

@Bushstar
More clearly it can be explained in my ZigZag tutorial on site .
The res.Blank_png is 1 pixel black png

    setGameOverScreen:function()
    	{
                    //Set 1 pixel png
    		this.gameOverScreen = new cc.Sprite(res.Blank_png); 
                    // Set the size of the sprite 
    		this.gameOverScreen.setTextureRect(cc.rect(0, 0, this.visibleSize.width - 50, this.visibleSize.height/3));
                    // Set Sprite backround color 
    		this.gameOverScreen.setColor(cc.color(100, 255, 255));
                    
    		this.gameOverScreen.setOpacity(200);
    		this.gameOverScreen.setPosition(this.visibleSize.width / 2, this.visibleSize.height / 2);
    		this.gameOverScreen.setLocalZOrder(this.zCount + 3);
    		this.addChild(this.gameOverScreen);
     	 
    		var labelGameOver =  new cc.LabelTTF("Game Over Try Again! ","Arial", 44, cc.size(this.gameOverScreen.getContentSize().width / 2,this.gameOverScreen.getContentSize().height /2), cc.TEXT_ALIGNMENT_CENTER); 
    		labelGameOver.color = cc.color.BLACK;   
    		labelGameOver.setPosition(cc.p(this.gameOverScreen.getContentSize().width / 2,
    			this.gameOverScreen.getContentSize().height/2));
    		labelGameOver.setLocalZOrder(this.zCount + 4);
    		this.gameOverScreen.addChild(labelGameOver);

    		this.setGameOverScreenVisible(false);

    	},
6

Thanks. I get it now, to make my code work I needed to pass a blank image to the constructor and to set the size of my sprite I needed to use setTextureRect. My code is now as follows.

    var size = cc.winSize;

    var sprite = new cc.Sprite(res.Blank_png);
    sprite.setColor(cc.color(255,0,0,255));
    sprite.setTextureRect(cc.rect(0, 0, 200, 100));
    sprite.x = size.width / 2;
    sprite.y = size.height / 2;
    this.addChild(sprite);