How to draw a rectangle

[PeYMaN]

Hi,
I’m new using Cocos2d-x HTML5, I come from Corona SDK and I want to learn this powerful tool to develope my own games.

I’ve been trying to draw a white rectangle after reading the API Reference for 2.2.3 version but I have no success… Here is my code at init function:

this._super(); this.drawShapes = new cc.DrawNodeCanvas(); this.rectOrigin = new cc.Point(0, 50); this.rectDestination = new cc.Point(300, 0); this.whiteColor = new cc.Color4F(1,1,1,1); this.drawShapes.drawRect(this.rectOrigin, this.rectDestination, this.whiteColor, 1, this.whiteColor);

Someone could tell me what I am doing wrong? I think solution should be easy but I can’t deal with it…

:;qst

Thank you!

[PeYMaN]

I’ve solved this issue using the next code:

this.blank_rectangle = cc.Sprite.create(); this.blank_rectangle.setColor(cc.white()); this.blank_rectangle.setPosition(size.width / 2, 35); this.blank_rectangle.setTextureRect(cc.rect(0, 0, size.width, 70)); this.blank_rectangle.setOpacity(180); this.addChild(this.blank_rectangle, 2);

I think there is not a good way to do it however it works… Could someone tell me how to implement it correctly?

Thank you!

[lavizrap]

In cocos2d-js 3.0a2 this works:

    this.drawNode = cc.DrawNode.create();
    this.addChild(this.drawNode,100);
    this.drawNode.clear();
    this.drawNode.drawRect(new b2Vec2(100,100), new b2Vec2(300,300),
                           cc.color(255,255,255,128), 1 , cc.color(255,255,255,128) );

[PeYMaN]

@lavizrap It does not work in the 2.2.3 version… I am waiting the 3.0 final version, after its release I will start with it.

Anyway thank you for your help!

[windam82]

I tried the solution of @lavizrap using this code:

this.rectangle = cc.DrawNode.create();
this.rectangle.retain();
this.node.addChild(this.rectangle);
this.rectangle.drawRect(cc.p(50,50), cc.p(200,300), cc.color(255,0,0,255), 3, cc.color(0,255,0,255));

I’m using Cocos Creator version v1.0. Unfortunately I received this error:

Simulator : jsb: ERROR: File ..\auto\jsb_cocos2dx_auto.cpp: Line: 2944, Function: js_cocos2dx_Node_setParent
Simulator : Invalid Native Object
Simulator : C:/CocosCreator/resources/app.asar.unpacked/utils/simulator/win32//src/jsb_polyfill.js:16858:Error: Invalid Native Object

How can I solve the problem?

[stevetranby]

We use this way even in 3.x because Sprite’s can be batched. This is probably not important for cocos2d-js canvas rendering. We add a 1x1 pixel texture (with any 2x for hd, etc) that gets packed with our other textures. Wrap it up in a nice little createSpriteRect(color, size) function and then set position/opacity and add as child like you must with any node.

[Gabrui]

EDIT2:
The DrawNode is still supported in the CocosCreator API, but strangely, it isn’t listed in the API. (I almost used raw bitmap data to implement my own draw node, creating a cc.Texture2D and using initWithData( , , , ), but that was insane)
What happens is that our cc.Node is a logical node and not a renderer node, which is a _ccsg.Node (the old cocos2d-JS cc.Node), there is some information about those preserved objects.

So the trick is just to access the _sgNode object (the renderer node) inside your logical node object (the new Cocos Creator Node).

        this.rectangle = new cc.DrawNode();
        this.rectangle.drawRect(cc.p(50,50), cc.p(200,300), cc.color(255,0,0,255), 3, cc.color(0,255,0,255));
        this.node._sgNode.addChild(this.rectangle);