International 5-days Graphics Programming Workshop

using Cocos-2d-x

DAY 1

Trident College of Information Technology

Takao WADA

1. About me

2. OpenGL Overview

3. Introduction of Cocos-2d-x

4. Installation and setup the development environment

5. Run a sample programs of Cocos-2d-x

6. Create a simple shader program

7. Work

Agenda

Takao WadaE-mail: jiroshino@gmail.comFB: https://www.facebook.com/takao.wada.50URL: http://www.drjiro.com/

Lecturer of Trident College of Information Technology Teach game programming at TRIDENT about 20 years. 3DProgramming and Smartphone games based on

many languages, C, C++, Java, etc. IGDA Nagoya-Chapter Chair

About me

OpenGL is a famous graphics API for Desktop. Runs on many platform, Windows, MacOS, Linux, Web, etc.

OpenGL ES is a subset of OpenGL for embedded platform, iOS, Android, game consoles, etc.

Versions 1.0 – Fixed function, OpenGL 1.3 1.1 - OpenGL 1.5 2.0 - Shader based, OpenGL 2.0 3.0 - OpenGL 4.3 3.1 – Latest version

OpenGL ES Overview

Graphics pipeline

VertexProcessing Rasterize

r

FragmentProcessing

Meshvertices

Transformedvertices

fragments

Vertex shader Fragment shader

Vertices can be transformed by programmable shaders

Vertex shader Vertex transformation (Model,View,Projection, etc.) Vertex lighting

Fragment shader Texture mapping Pixel based lighting

Shader

Detail pipeline

Vertex Shader

TriangleAssembly

ViewportClipping

RasterizerFragmentShader

FrameBuffer

Textures

Vertex data

TransformedVertex data

Triangledata

Screen spaceTriangle data

Fragmentdata

Pixeldata

Multi-platform framework for building 2D games Main site http://www.cocos2d-x.org Based on cocos2d-iphone (Objective-C base) Uses C++ Works on iOS, Android, Windows Phone, OS X,

Windows and Linux.

Cocos-2d-x

Install cocos-2d-x1. Download zip file from http://www.cocos2d-x.org/2. Current version is 3.2Alpha0 (cocos2d-x-3.2alpha0.zip).3. Extract the file downloaded file.4. Move the extracted folder to your Document folder

Install Python1. Download python-2.7.7.msi (Latest for version 2 series) from

https://www.python.org/2. Click and run setup. By default, it is installed in C:\Python273. Set the path environment variable for Windows using the

control panel

Installation of Cocos-2d-x

Invoke the command prompt from the menu Run the python script to install related files

1. > cd cocos-2d-x-3.2alpha0

2. > python download-deps.py Run the python script to setup the environment

1. > python setup.py Asking for Android, skip them

Create a project folder for your developments1. > cd ..

2. > mkdir projects Quit from the command prompt

Setup cocos-2d-x

Invoke the command prompt from the menu again Create a new project

> cd projects > cocos new MyGame -p jp.ac.trident.mygame -l cpp

Open the project in the Visual Studio 2013 Invoke Explorer Click MyGame\proj.win32\MyGame.sln Build and run

First cocos-2d-x Applocation

cpp-tests project Move to “build” folder Click “cocos2d-win32.vc2012.sln” Build and run

Power of Cocos-2d-x

Copy the sample project “WSSample1” Build and run

Sample program using Cocos-2d-x and shaders

Using a shader in cocos-2d-x

bool ShaderScene::init(){

// create a node with vertices and shadersauto shaderNode = ShaderNode::shaderNodeWithVertex(

"Shaders/vertex.vsh", "Shaders/fragment.fsh");// Set the position and sizeshaderNode->setPosition(Vec2(size.width / 2, size.height / 2));shaderNode->setContentSize(Size(size.width / 2, size.height / 2));

// Add a node to the sceneaddChild(shaderNode);

return true;}

Using a shader in cocos-2d-x

void ShaderNode::onDraw(const Mat4 &transform, uint32_t flags){

GLfloat vertices[6] = {0, 0, 0.5f, 0, 0.5f, 0.5f

};

auto glProgramState = getGLProgramState();// Pass the position parameter to the vertex shader’s attribute variableglProgramState->setVertexAttribPointer(

"a_position", 2, GL_FLOAT, GL_FALSE, 0, vertices);glProgramState->apply(transform);// Draw a triangleglDrawArrays(GL_TRIANGLES, 0, 3);

CC_INCREMENT_GL_DRAWN_BATCHES_AND_VERTICES(1, 3);}

Main variable types

OpenGL Variable Types

GL Type bytes

GL_BYTEGL_UNSIGNED_BYTEGL_SHORTGL_UNSIGNED_SHORTGL_FIXEDGL_FLOAT

1122

3232

OpenGL Primitives

GL_POINTS Draw points

GL_LINES Draw Lines

GL_LINE_STRIP Draw Lines forming a strip

GL_LINE_LOOP Draw Lines closing a loop

GL_TRIANGLES Draw Triangles

GL_TRIANGLE_STRIP

Draw Triangles forming a strip

GL_TRIANGLE_FAN

Draw Triangles forming a fan

"a_position” – name of the vertex attribute 2 – number of components per vertex (Here, (x,y)) GL_FLOAT – data type GL_FALSE – normalize (GL_TRUE), converted (GL_FALSE) 0 – vertex stride, byte offset vertices – pointer to the first component in the vertex array

setVertexAttribPointer functionin cocos-2d-x

Passes its parameters to the generic OpenGL ES function.

glVertexAttribPointer("a_position", 2, GL_FLOAT, GL_FALSE, 0, vertices);

A vertex can include its position, color, texture coordinate, normal vector, etc.

Most parameters are float. Color is represented by RGBA, float (0.0 – 1.0) x4

or unsigned byte (0 - 255)x4

Vertex format

Shader variables attribute – passed from vertex stream by the parent

program, position, color, texture coordinate,etc. uniform – global variable from a parent language (C/C++) varying – pass the variable from a vertex shader to a

fragment shader

OpenGL ES Shader

Get the model vertex position and transform and pass to the fragment shader gl_Position is reserved variable of the OpenGL ES shader for the

transformed position Attribute variable, a_position, is defined in the Cocos-2d-x for the

vertex position

A Simple vertex shader program

attribute vec4 a_position;

void main(){ gl_Position = a_position;}

Draw a triangle with white color gl_FragColor is reserved variable of the OpenGL ES shader for the

decided color

A simple fragment shader program

void main(void) { gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);}

To draw a rectangle, draw 2 triangles

Draw a rectangle

GLfloat vertices[12] = { // x y 0.0f, 0.0f, // First triangle 0.5f, 0.0f, 0.5f, 0.5f, 0.5f, 0.5f, // Second triangle 0.0f, 0.5f, 0.0f, 0.0f};

// snip

glDrawArrays(GL_TRIANGLES, 0, 6);

Y

X

0.5

0.50

1. Draw a triangle

2. Draw a square Hint: 2 triangles

3. Draw a full-sized square

Work 1-1

Using a varying variable to pass colors from the vertex shader to the fragment shader

Using vertex color in a shader program

attribute vec4 a_position;attribute vec4 a_ color;

varying vec4 v_color;

void main(){ gl_Position a_position; v_color = a_color;}

varying vec4 v_color;

void main(void) { gl_FragColor = v_color;}

Vertex shader Fragment shader

Add color to a vertexPosition x

y

Color R

G

B

A

Position x

y

Color R

G

B

Position x

y

Color R

G

B

A

GLfloat vertices[18] = { // x y R G B A 0.0f, 0.0f, 1.0f, 0.0f, 0.0f, 1.0f, 0.5f, 0.0f, 0.0f, 1.0f, 0.0f, 1.0f, 0.5f, 0.5f, 0.0f, 0.0f, 1.0f, 1.0f};

glProgramState->setVertexAttribPointer("a_position”, 2, GL_FLOAT, GL_FALSE, 24, vertices);glProgramState->setVertexAttribPointer("a_color", 4, GL_FLOAT, GL_FALSE, 24, vertices + 2);

Stridefloat x 6 = 24 bytes

Stridefloat x 6 = 24 bytes

Offsetfloat x 2 = 8 bytes

vertices

vertices + 2

1. Add an attribute for color to the vertex format

2. Change the color(s) of vertices Change the same color for all vertices Change the different color for each vertex

Work 1-2

Apply graphics image to the geometry Texture coordinates are normalized

Texture mapping

U

V

0

0

1

1

1. Add an attribute for texture coordinate to the vertex format

2. Draw a image (texture) inside the shape

Work 1-3

Add texture coordinate to the vertexPosition x

y

Color R

G

B

A

Texture coordinate U

V

Position x

y

Color R

G

B

A

Texture coordinate U

V

snip…

Stridefloat x 8 = 32 bytes Stride

32 bytes

Offsetvertices

Stride32 bytes

Offset

vertices+2

vertices+6

Cont’dbool NewShaderNode::initWithVertex(const std::string &vert, const std::string &frag,

Texture2D* texture){// snip… getGLProgramState()->setUniformTexture("u_texture0", texture);// snip…}// snip…void NewShaderNode::onDraw(const Mat4 &transform, uint32_t flags){ GLfloat vertices[48] = { // x y R G B A U V 0.0f, 0.0f, 1.0f, 0.0f, 0.0f, 1.0f, 0.0f, 1.0f, 0.5f, 0.0f, 0.0f, 1.0f, 0.0f, 1.0f, 1.0f, 1.0f, 0.5f, 0.5f, 0.0f, 0.0f, 1.0f, 1.0f, 1.0f, 0.0f, 0.5f, 0.5f, 0.0f, 0.0f, 1.0f, 1.0f, 1.0f, 0.0f, 0.0f, 0.5f, 0.0f, 1.0f, 0.0f, 1.0f, 1.0f, 1.0f, 0.0f, 0.0f, 1.0f, 0.0f, 0.0f, 1.0f, 0.0f, 1.0f };// snip… glProgramState->setVertexAttribPointer("a_position”, 2, GL_FLOAT, GL_FALSE, 32, vertices); glProgramState->setVertexAttribPointer("a_color”, 4, GL_FLOAT, GL_FALSE, 32, vertices + 2); glProgramState->setVertexAttribPointer("a_texCoord”, 2, GL_FLOAT, GL_FALSE, 32, vertices + 6);

glDrawArrays(GL_TRIANGLES, 0, 6);}

Using a uniform variable to pass texture from the parent program to the fragment shader

Using texture in a shader program

attribute vec4 a_position;attribute vec4 a_ color;attribute vec2 a_texCoord;

varying vec4 v_color;varying vec2 v_texCoord;

void main(){ gl_Position a_position; v_color = a_color; v_texCoord = a_texCoord;}

uniform sampler2D u_texture0;

varying vec4 v_color;varying vec2 v_texCoord;

void main(void) { gl_FragColor = texture2D(u_texture0, v_texCoord);}

Vertex shader Fragment shader