1. Node를 이용하여 그리는것이 아닌 opengl의 기본 api를 1차 작업하여
좀더 쉽게 기본 선,원, 사각형 및 부드러운 곡선을 그리는 방법을 알수 있습니다.
1. 예제 분석 목적.
기존의 화면 구성 방식에서 기본도형을 화면에 그리기 위한 api를 확인
2. 확인 속성.
Primitives.drawLine == > 선그리기
Primitives.drawPoint == > 원그리기
Primitives.drawPoints == > 점을 여러개
Primitives.drawCircle == > 원그리기
Primitives.drawPoly == > 점연결하여 선그리기
Primitives.drawQuadBezier 4점 Bezier
Primitives.drawCubicBezier 3점 Bezier
3. 기본도형 그리기 소스
public void draw(GL10 gl) {
CCSize s = Director.sharedDirector().winSize();
// draw a simple line
// The default state is:
// Line Width: 1
// color: 255,255,255,255 (white, non-transparent)
// Anti-Aliased
gl.glEnable(GL10.GL_LINE_SMOOTH);
Primitives.drawLine(gl, CCPoint.ccp(0, 0), CCPoint.ccp(s.width, s.height));
// line: color, width, aliased
// glLineWidth > 1 and GL_LINE_SMOOTH are not compatible
// GL_SMOOTH_LINE_WIDTH_RANGE = (1,1) on iPhone
gl.glDisable(GL10.GL_LINE_SMOOTH);
gl.glLineWidth(5.0f);
gl.glColor4f(1.0f, 0.0f, 0.0f, 1.0f);
Primitives.drawLine(gl, CCPoint.ccp(0, s.height), CCPoint.ccp(s.width, 0));
// TIP:
// If you are going to use always the same color or width, you don't
// need to call it before every draw
//
// Remember: OpenGL is a state-machine.
// draw big point in the center
gl.glPointSize(64);
gl.glColor4f(0.0f, 0.0f, 1.0f, 0.5f);
Primitives.drawPoint(gl, s.width / 2, s.height / 2);
// draw 4 small points
CCPoint points[] = {CCPoint.ccp(60, 60), CCPoint.ccp(70, 70), CCPoint.ccp(60, 70), CCPoint.ccp(70, 60)};
gl.glPointSize(4);
gl.glColor4f(0.0f, 1.0f, 1.0f, 1.0f);
Primitives.drawPoints(gl, points, 4);
// draw a green circle with 10 segments
gl.glLineWidth(16);
gl.glColor4f(0.0f, 1.0f, 0.0f, 1.0f);
Primitives.drawCircle(gl, s.width / 2, s.height / 2, 100, 0, 10, false);
// draw a green circle with 50 segments with line to center
gl.glLineWidth(2);
gl.glColor4f(0.0f, 1.0f, 1.0f, 1.0f);
Primitives.drawCircle(gl, s.width / 2, s.height / 2, 50, CCMacros.CC_DEGREES_TO_RADIANS(90), 50, true);
// open yellow poly
gl.glColor4f(1.0f, 1.0f, 0.0f, 1.0f);
gl.glLineWidth(10);
CCPoint vertices[] = {CCPoint.ccp(0, 0), CCPoint.ccp(50, 50), CCPoint.ccp(100, 50), CCPoint.ccp(100, 100), CCPoint.ccp(50, 100)};
Primitives.drawPoly(gl, vertices, 5, false);
// closed purple poly
gl.glColor4f(1.0f, 0.0f, 1.0f, 1.0f);
gl.glLineWidth(2);
CCPoint vertices2[] = {CCPoint.ccp(30, 130), CCPoint.ccp(30, 230), CCPoint.ccp(50, 200)};
Primitives.drawPoly(gl, vertices2, 3, true);
// draw quad bezier path
Primitives.drawQuadBezier(gl, 0,s.height, s.width/2,s.height/2, s.width, s.height, 50);
// draw cubic bezier path
Primitives.drawCubicBezier(gl, s.width/2, s.height/2, s.width/2+30, s.height/2+50,
s.width/2+60, s.height/2-50, s.width, s.height/2,100);
// restore original values
gl.glLineWidth(1);
gl.glColor4f(1.0f, 1.0f, 1.0f, 1.0f);
gl.glPointSize(1);
}
기존에는 텍스쳐를 이용한 렌더링을 하였습니다. 이제 모든 그리기 라이브러리의 기초인
기본도형 그리기를 cocos2d가 어떻게 구현하는지에 대해서 나와 잇습니다.
크게 어려운 부분이 없을뿐더러 소스에는 친절한 주석이 나와있으므로 이를 간단하게 해석하는
것으로 이번 강좌는 정리하겟습니다.
// TIP:
// If you are going to use always the same color or width, you don't
// need to call it before every draw
//
// Remember: OpenGL is a state-machine.
같은 색깔이나 동일한 두께를 표현하기 위해서 매번 따로 설정할필요 없습니다.
한번 바뀐 속성은 계속 지속됩니다.
이는 opengl이 정적이기 때문입니다. 이를 잘기억하세요
// TIP:
Every CocosNode has a "draw" method.
모든 cocosNode는 "draw" 함수를 가지고 있다
In the "draw" method you put all the code that actually draws your node.
이함수 안에서 node에 실제그려지므로 여기에 코드를 놓을수 있다.
And Test1 is a subclass of TestDemo, which is a subclass of Layer, which is a subclass of CocosNode.
TestDeomo는 Layer의 서브 클래스 이고 Layer는 CoccosNode의 서브 클래스이다.
As you can see the drawing primitives aren't CocosNode objects. They are just helper
여기에서는 cocosNode의 object를 그리지 않고 기본도형을 그리기볼수 있는데 이것들은
functions that let's you draw basic things like: points, line, polygons and circles.
기본적인 도형을 그리는것을 도와주는 함수 들이다.
//
TIP:
Don't draw your stuff outside the "draw" method. Otherwise it won't get transformed.
"draw"메서드 밖에서 그리지 마세요 . 그러면 재대로 적용이 되지 않는다.
//
TIP:
If you want to rotate/translate/scale a circle or any other "primtive", you can do it by rotating
the node. eg:
this.rotation = 90;
만약 도형의 회전/이동/크기의 변화를 주고 싶다면. Node의 속성을 이용하세요