18
A játékfejlesztés alapjai a keretrendszerrel Lőrincz Vilmos Webstar Csoport Kft. 2013.04.25.

CCSprite *sprite = [CCSprite spriteWithFile:@”ball.png”]; [sprite runAction: [CCRepeatForever actionWithAction: [CCSequence actions: [CCEaseIn

Embed Size (px)

Citation preview

Page 1: CCSprite *sprite = [CCSprite spriteWithFile:@”ball.png”]; [sprite runAction: [CCRepeatForever actionWithAction: [CCSequence actions: [CCEaseIn

A játékfejlesztés alapjai a

keretrendszerrel

Lőrincz VilmosWebstar Csoport Kft.2013.04.25.

Page 2: CCSprite *sprite = [CCSprite spriteWithFile:@”ball.png”]; [sprite runAction: [CCRepeatForever actionWithAction: [CCSequence actions: [CCEaseIn

Kiválasztás

Page 3: CCSprite *sprite = [CCSprite spriteWithFile:@”ball.png”]; [sprite runAction: [CCRepeatForever actionWithAction: [CCSequence actions: [CCEaseIn

Objective CKomponensek

éstámogatás

Editor támogatás

✔ ✘

Kényelmes✔ ✘

ARC nincs ✘

Előnyök, hátrányok

Page 4: CCSprite *sprite = [CCSprite spriteWithFile:@”ball.png”]; [sprite runAction: [CCRepeatForever actionWithAction: [CCSequence actions: [CCEaseIn

UIKit.framework

FelépítésCCDirector:UIViewController

CCSceneCCScene

CCLayer CCMenu

CCParticleSystem

CCSpriteBatchNode

CCSpriteCCSpriteCCSpriteCCSpriteCCSpriteCCSpriteCCSpriteCCSpriteCCSpriteCCSprite

UIWindow

UINavigationController

CCMenuItemCCMenuItemCCMenuItemCCMenuItem

CCLayerColor

CCScene

:CCNode

CCSpriteCCSpriteCCSpriteCCSpriteCCSpriteCCSpriteCCSpriteCCSpriteCCSprite

Page 5: CCSprite *sprite = [CCSprite spriteWithFile:@”ball.png”]; [sprite runAction: [CCRepeatForever actionWithAction: [CCSequence actions: [CCEaseIn

CCSpriteBatchNode

CCSpriteCCSpriteCCSpriteCCSpriteCCSpriteCCSpriteCCSpriteCCSpriteCCSpriteCCSprite

CCSpriteCCMenu

CCMenuItem CCMenuItem

CCLayer

CCScene a gyakorlatban

Page 6: CCSprite *sprite = [CCSprite spriteWithFile:@”ball.png”]; [sprite runAction: [CCRepeatForever actionWithAction: [CCSequence actions: [CCEaseIn

Update és drawupdate

draw draw

update

draw draw

update

draw draw

update

draw draw

update

draw draw

update

draw draw

idő

CCNode

Page 7: CCSprite *sprite = [CCSprite spriteWithFile:@”ball.png”]; [sprite runAction: [CCRepeatForever actionWithAction: [CCSequence actions: [CCEaseIn

Actions- forgatás- mozgatás- torzítás- átlátszóság- színezés- animáció…

Page 8: CCSprite *sprite = [CCSprite spriteWithFile:@”ball.png”]; [sprite runAction: [CCRepeatForever actionWithAction: [CCSequence actions: [CCEaseIn

Action példaCCSprite *sprite = [CCSprite spriteWithFile:@”ball.png”];[sprite runAction:

[CCRepeatForever actionWithAction:[CCSequence actions:

[CCEaseIn actionWithAction:[CCRotateBy

actionWithDuration:0.5 angle:30.0] rate:2],[CCEaseOut actionWithAction:

[CCRotateBy actionWithDuration:0.5 angle:-30.0]

rate:2],nil

]]

];

Page 9: CCSprite *sprite = [CCSprite spriteWithFile:@”ball.png”]; [sprite runAction: [CCRepeatForever actionWithAction: [CCSequence actions: [CCEaseIn
Page 10: CCSprite *sprite = [CCSprite spriteWithFile:@”ball.png”]; [sprite runAction: [CCRepeatForever actionWithAction: [CCSequence actions: [CCEaseIn

1.x OpenGLES 1.1- összes iPhone,- összes iPod Touch,- összes iPad

2.x OpenGLES 2.0- iPhone 3GS-től, - iPod Touch 3.

generációtól, - összes iPad

Page 11: CCSprite *sprite = [CCSprite spriteWithFile:@”ball.png”]; [sprite runAction: [CCRepeatForever actionWithAction: [CCSequence actions: [CCEaseIn

Egy sprite létrehozásaCocos2DCCSprite *sprite = [CCSprite spriteWithFile:@”ball.png”];

Page 12: CCSprite *sprite = [CCSprite spriteWithFile:@”ball.png”]; [sprite runAction: [CCRepeatForever actionWithAction: [CCSequence actions: [CCEaseIn

Egy sprite létrehozásaOpenGLES 2.0glGenVertexArrays(1, &_vao);glBindVertexArray(_vao);

glGenBuffers(1, &_vbo);glBindBuffer(GL_ARRAY_BUFFER, _vbo);glBufferData(GL_ARRAY_BUFFER, sizeof(ccV2F_C4B_T2F) * _bufferCapacity, _buffer, GL_STREAM_DRAW);

glEnableVertexAttribArray(kCCVertexAttrib_Position);glVertexAttribPointer(kCCVertexAttrib_Position, 2, GL_FLOAT, GL_FALSE, sizeof(ccV2F_C4B_T2F), (GLvoid *) offsetof(ccV2F_C4B_T2F, vertices));

glEnableVertexAttribArray(kCCVertexAttrib_Color);glVertexAttribPointer(kCCVertexAttrib_Color, 4, GL_UNSIGNED_BYTE, GL_TRUE, sizeof(ccV2F_C4B_T2F), (GLvoid *) offsetof(ccV2F_C4B_T2F, colors));

glEnableVertexAttribArray(kCCVertexAttrib_TexCoords);glVertexAttribPointer(kCCVertexAttrib_TexCoords, 2, GL_FLOAT, GL_FALSE, sizeof(ccV2F_C4B_T2F), (GLvoid *) offsetof(ccV2F_C4B_T2F, texCoords));

glBindBuffer(GL_ARRAY_BUFFER, 0);glBindVertexArray(0);...glActiveTexture( GL_TEXTURE0 + textureUnit );glBindTexture(GL_TEXTURE_2D, textureId );glGenerateMipmap(GL_TEXTURE_2D);glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_NEAREST);glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);...

ccColor4B color = (ccColor4B){255, 255, 255, 255};vertices[0] = {{ 0.0, 100.0}, color, {0.0, 1.0}};vertices[1] = {{ 0.0, 0.0}, color, {0.0, 0.0}};vertices[2] = {{100.0, 100.0}, color, {1.0, 1.0}};vertices[3] = {{ 0.0, 0.0}, color, {0.0, 0.0}};vertices[4] = {{100.0, 100.0}, color, {1.0, 1.0}};vertices[5] = {{100.0, 0.0}, color, {1.0, 0.0}};

Page 13: CCSprite *sprite = [CCSprite spriteWithFile:@”ball.png”]; [sprite runAction: [CCRepeatForever actionWithAction: [CCSequence actions: [CCEaseIn

Sprite-manipuláció

Cocos2D- elforgatás,- kicsinyítés, nagyítás,- eltolás,- nyírás (skew)

- átlátszóság,- textúra színezése, torzítása

OpenGLES 2.0- mátrixtranszformáció

- shader-ek és blending

Page 14: CCSprite *sprite = [CCSprite spriteWithFile:@”ball.png”]; [sprite runAction: [CCRepeatForever actionWithAction: [CCSequence actions: [CCEaseIn

Forgatás OpenGLES alatt

OpenGLES 1.1

OpenGLES 2.0

glRotatef(m_currentAngle, 0, 0, 1);

float radians = m_currentAngle * Pi / 180.0f;float s = sinf(radians);float c = cosf(radians);float zRotation[16] = { c, s, 0, 0, -s, c, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 };

GLint modelviewUniform = glGetUniformLocation(m_simpleProgram, "CC_MVPMatrix");glUniformMatrix4fv(modelviewUniform, 1, 0, &zRotation[0]);

Page 15: CCSprite *sprite = [CCSprite spriteWithFile:@”ball.png”]; [sprite runAction: [CCRepeatForever actionWithAction: [CCSequence actions: [CCEaseIn

OpenGL Shading LanguageOpenGLES 2.0 alatt

uniform mat4 CC_MVPMatrix;

attribute vec4 a_position;attribute vec2 a_texCoord;attribute vec4 a_color;

varying lowp vec4 v_fragmentColor;varying mediump vec2 v_texCoord;

void main(){

gl_Position = CC_MVPMatrix * a_position;

v_fragmentColor = a_color;v_texCoord = a_texCoord;

}

Vertex shader Fragment shadervarying vec4 v_fragmentColor;varying vec2 v_texCoord;uniform sampler2D CC_Texture0;

void main(){

lowp vec4 color = v_fragmentColor * texture2D(CC_Texture0, v_texCoord);

gl_FragColor = color;}

Page 16: CCSprite *sprite = [CCSprite spriteWithFile:@”ball.png”]; [sprite runAction: [CCRepeatForever actionWithAction: [CCSequence actions: [CCEaseIn

Ami kimaradt…

Cocos2D- particle-ök- hangkezelés- fontkezelés- texture map kezelés- egyszerű formák rajzolása- Cocos2D Android és HTML5 alatt- CocosBuilder

OpenGL- szinte minden

Page 17: CCSprite *sprite = [CCSprite spriteWithFile:@”ball.png”]; [sprite runAction: [CCRepeatForever actionWithAction: [CCSequence actions: [CCEaseIn

Kérdések?

Page 18: CCSprite *sprite = [CCSprite spriteWithFile:@”ball.png”]; [sprite runAction: [CCRepeatForever actionWithAction: [CCSequence actions: [CCEaseIn

Köszönöm a figyelmet!