게임중 문자열 표시하기

게임중간에 글자를 게시하는 코드입니다. 하하하하핳
게임화면 위 중간에 나타났다가
3초 있다가 글이 사라집니다.

수정 배포 자유입니다. The MIT License (MIT)

게이지 바, progress Bar 만들기

progress Bar 는  SKCropNode 를 사용해서 만들 수 있습니다.

먼저  file - New - file... 을 눌러서  objective-c class 파일을 생성합니다.

이름은  proogressBar 로 했습니다. 

grogressBar.h 에  다음 코드를 넣습니다.

progressBar.m 에 다음 코드를 넣습니다.

maskNode를 설정합니다.   마스크가 씌워 진 곳만 보이는 방식입니다.
 마스크 색이 흰색이 되도록 합니다.

-(id) init 메소드 밑에 다음 코드를 작성합니다.

progressBar 모양을 세팅하는 메서드입니다.  이미지로 만들어 넣을 수 있습니다.
sprite.size가  makeNode.size 와 같아야 합니다.
anchorPoint가  왼쪽에 오도록해야 합니다. 그래야 오른쪽에서 부터 늘이고 줄일 수 있습니다.

그 밑에 다음 코드를 작성해 줍니다.

progress 값으로  원하는 비율의 값을 넣어주면   progress Bar 가 그 만큼 차는걸 볼 수 있습니다.

 사용법

다음  코드를 update: 메소드 안에 넣어 주면 실시간으로  progressBar 가 변합니다. 

kSyntheisBar 는 매크로 선언된 string 입니다.

_synthesisValue  현재 값으로 보면되고

_syntheis_Max 가 최대 값입니다. 

소스는 github 에 올라가있습니다.

하하하핳 끝 

스프라이트 킷 5. 파티클 이미터 (SKEmitterNode class)

파티클 이미터는  게임에 특수효과를 주기 위해 사용합니다.

파티클 이미터를 사용하기 위해서 Xcode5 에 있는 이미터 편집기를 사용합니다.

파티클 이미터 프로퍼티들

background

파티클이 제대로 표혐이 되는지  여러 배경에서 테스트를 할수 있습니다. 

파티클 색상이 배경과 혼합되도록 설정한경우  배경에 따라 색상이 달라질수 있어서 미리 배경색상을 미리 테스트 해보는 것이 좋습니다.

particle texture

이미터 내에서 파티클을 표현하는 이미지 입니다. 

Particle Birthrate

birthrate 노드에서 생성되는 새로운 파티클의 비율을 설정합니다.

maximum 파티클 최대 개수입니다.  0 이라면 무한히 생성됩니다.

Particle Life Cycle

start : 파티클이 생성되고  사라질때까지 시간입니다.
range  : 0과 지정된 시간 값 사이의 랜덤값을 기반으로 수명에 랜덤으로 변형을 줍니다.

Particle Position Range

 파티클이 생성되는 위치 범위를 정합니다.
예를 들어 x값이 커지면  파티클이 생성되는 위치가 중심으로 부터 넓어 지게 됩니다.

Angle

방출되는 파티클의 각도가 0도 값에서(좌표평면에서 x 축 방향) 에서 시계 방향으로 각도가 움직입니다.  

range 각도를 랜덤하게 변화시킵니다. 

Particle Speed

파티클이 생성될때 초기 속도를 정한다.
range 랜덤 편차를 준다.

Particle Acceleration

파티클이 방출된 이후 가속도 값을 줄 수 있습니다. 

Particle Scale

파티클 크기를 설정합니다.  수명동안 점점 커지게 할 수 도있고  랜덤하게 바꿀 수 도 있습니다.

Particle Rotation

파티클의 회전 속도를 설정합니다. 

 Particle Color

파티클의 수명동안 색상의 변화를 설정할 수 있습니다. 

Particle Blend Mode

파티클이 생성되는 화면의 색상들과 혼합되는 방법을 설정합니다. 

alpha - 파티클의 푸명 픽셀을 배경과 혼합한다.

add = 파티클 픽셀을 해당 배경이미지 픽셀에 더한다.

subtract - 해당 배경 이미지 픽셀에서 파티클 픽셀을 뺀다.

Multiply -파티클 픽셀에 해당 배경 이미지 픽셍르 곱하며, 더 어두운 파티클 효과가 된다.

MultiplyX2 = 표준 multiply 모드 보다 더 어두운 파티클 효과를 생성한다. 

screen - 픽셀들을 반전하고 곱하고 다시 반전하여 좀더 밝은 파티클 효과가 난다

replace - 배경과 혼합하지 않는다. 

이상 설정 방법이었습니다. 

다음 글에서 파티클 생성하고 사용하는 것을 보도록 하죠 

스프라이트 킷 4. 화면 전환 (SKTransition class)

SKTransition 클래스는 Scene 사이를 왔다갔다 할때 사용 합니다.

Tasks

Creating Transition Objects

• + crossFadeWithDuration:
• + doorsCloseHorizontalWithDuration:
• + doorsCloseVerticalWithDuration:
• + doorsOpenHorizontalWithDuration:
• + doorsOpenVerticalWithDuration:
• + doorwayWithDuration:
• + fadeWithColor:duration:
• + fadeWithDuration:
• + flipHorizontalWithDuration:
• + flipVerticalWithDuration:
• + moveInWithDirection:duration:
• + pushWithDirection:duration:
• + revealWithDirection:duration:
• + transitionWithCIFilter:duration:

Configuring Whether Scenes Are Paused During the Transition

•    pausesIncomingScene  property
•    pausesOutgoingScene  property

그냥 예제 보는게 답입니다. 

스프라이트 킷 템플릿을 선택해서 프로젝트를 생성합니다. 

Transition 이라는 이름의 프로젝트를 만들었습니다.

바로 run을 눌러보면  클릭할때마다 제트기가 빙빙 도는 scene을 볼수 있습니다. 

먼저  새로운 SKScene class 파일을 생성합니다. 

HomeScene 이라는 이름으로 클래스를 생성했습니다.

이제  viewController.m 에서 기존 scene대신 homeScene 을 임포트 하고
표시할 scene을 homeScene으로 대체합니다.

didMoveToView 메소드를 통해서  메시지를 띄웁니다.

메시지를 띄우는 skLabelNode를 만들어주는 메소드를 작성합니다.

이제 run을 눌러보면 다음 화면을 볼수 있습니다.  그러나 아직 전환은 없습니다.

touchesBegan 메소드를 작성합니다.

name 프로퍼티로 textNode를 생성한후 textNode를 사라지게 하는 액션을 넣어줍니다.
그리고 사라지고 나면  화면전환이 일어나는 코드입니다.

sceneWithSize: 는
 [[TransitionMyscene alloc]initWithSize:self.size]; 이것과 같은 뜻입니다.



이제 화면을 터치하면 전환이 일어나고 처음에 봤던 scene으로 넘어가는 것을 확인 할 수 있습니다.
끝

스프라이트킷 3. 액션 사용하기 (SKAction클래스)

액션은 화면에서 노드가 수행하는 움직임이다
회전이나  페이드인/아웃 움직임, 크기변화 등을 수행 할 수 있다.

일단 skAction class reference 입니다.

Tasks

Creating Actions That Move Nodes

• + moveByX:y:duration:
• + moveBy:duration:
• + moveTo:duration:
• + moveToX:duration:
• + moveToY:duration:
• + followPath:duration:
• + followPath:asOffset:orientToPath:duration:

Creating Actions That Rotate Nodes

• + rotateByAngle:duration:
• + rotateToAngle:duration:
• + rotateToAngle:duration:shortestUnitArc:

Creating Actions That Change a Node’s Animation Speed

• + speedBy:duration:
• + speedTo:duration:

Creating Actions That Change a Node’s Scale

• + scaleBy:duration:
• + scaleTo:duration:
• + scaleXBy:y:duration:
• + scaleXTo:y:duration:
• + scaleXTo:duration:
• + scaleYTo:duration:

Creating Actions That Change a Node’s Transparency

• + fadeInWithDuration:
• + fadeOutWithDuration:
• + fadeAlphaBy:duration:
• + fadeAlphaTo:duration:

Creating Actions That Change a Sprite Node’s Content

• + resizeByWidth:height:duration:
• + resizeToHeight:duration:
• + resizeToWidth:duration:
• + resizeToWidth:height:duration:
• + setTexture:
• + setTexture:resize:
• + animateWithTextures:timePerFrame:
• + animateWithTextures:timePerFrame:resize:restore:
• + colorizeWithColor:colorBlendFactor:duration:
• + colorizeWithColorBlendFactor:duration:

Playing Sounds

• + playSoundFileNamed:waitForCompletion:

Removing Nodes from the Scene

• + removeFromParent

Creating Actions That Perform Actions on a Node’s Child

• + runAction:onChildWithName:

Creating Actions That Combine or Repeat Other Actions

• + group:
• + sequence:
• + repeatAction:count:
• + repeatActionForever:

Creating an Action to Introduce a Delay into a Sequence

• + waitForDuration:
• + waitForDuration:withRange:

Creating Custom Actions

• + runBlock:
• + runBlock:queue:
• + customActionWithDuration:actionBlock:
• + performSelector:onTarget:

Reversing an Action

• – reversedAction

Inspecting an Action’s Animation Properties

•    speed  property
•    timingMode  property
•    duration  property

액션은 별로 설명할게 없어요

일단 property에 관해서 설명합니다

duration 

액션이 수행되는데 걸리는 시간이에요 

speed

액션이 얼마나 빨리 수행되는지 정해주는 프로퍼티입니다. 

기본값은 1이고 2를 넣으면 두배로 빨리 액션이 수행되겠네요

 timingMode

액션이 점점 빨리지던지,  빨라졌다 느려지고, 점점 느려지는 것들을 정해줍니다.

액션은 sequence, group, repeating액션으로 구분할수 있습니다.

sequence 는 차례차례 액션을 수행하게 할수 있고 , group은 병렬적수행을 할수 있고 , 

repeating Action은 반복합니다. 

바로 예제를 보도록하겠습니다. 

텍스쳐 아틀라스 사용하기 에서 작성했던 예제를 사용하도록 하겠스빈다.

나루토를 터치하면   회전하고   다른 곳을 터치하면 그 곳으로 그림자분신술하는 예제입니다.

기존 코드를 좀 바꿔줄 필요가 있습니다. 

아래 코드처럼 _narutoNode를 인스턴스 변수로 선언해주고 

기존 narutoNode를 _narutoNode로 대체합니다.

메크로를 선언합니다.

naruto_aniMyScene.m에 아래 코드를 추가해줍니다.

실행결과입니다.

SKPhysicsbody클래스 충돌,접촉, 비트 마스크

물리몸체에 body를 할당하면 자동으로  물리 몸체 끼리 충돌,접촉에관한 설정이 이루어 집니다.

물리엔진이은 물리 운동을 2가지 방법으로 처리 합니다.

1.두 body가 겹쳐지는 것을 막는 것이 충돌입니다.
2. 두 body가 겹쳐지거나  붙을 경우 접촉이라고 합니다.


따로 설정을 바꾸지 않았을 경우에  모든 물리 몸체사이에 충돌이 일어나고  접촉은 일어나지 않습니다.
그러나 코딩을 할때는 어떤 경우에는 충돌이 일어나지 말아야하고 , 접촉이 일어나야 하는 경우가 있습니다. 이것을 처리하기 위해서 3가지의 bit mask를 이용합니다.

categoryBitMask

default  0xFFFFFFFF (all bit set)

collisionBitMask

default  0xFFFFFFFF (all bit set)

contactTestBitMask

default  0x00000000 ( all bit cleared) 

접촉 처리는 

SKPhysicsContactDelegate 의 두 메소드를 사용합니다. 

Responding to Contact Events

• – didBeginContact:
• – didEndContact:

충돌이 일어나기 위해서는
bodyA 의 collisionbitmask 와  bodyB의 categoryBitMask 를 &연산한 결과가
0이 아닐경우입니다.

접촉이 일어나기 위해서는
bodyA의 category bit mask 와 bodyB의 contactTest bit mask 를 & 연산한 결과가
0이 아닐 경우 입니다.

======== 예시 ========

typedef NS_OPTIONS(int, EntityCategory) {

    

    EntityCategoryOne = 0x1   <<0,

    EntityCategoryTwo = 0x1   <<1,

    EntityCategoryThree =0x1  <<2,

    EntityCategoryFour = 0x1 <<3,

    

};

body1.physicsbody.categorybitmask = entitycategoryOne;
body2.physicsbody.categorybitmask = entitycategoryTwo;

body3.physicsbody.categorybitmask = entitycategoryThree;

body4.physicsbody.categorybitmask = entitycategoryFour;

//body1은  body2,body3와 충돌

body1.physicsbody.collisionbitmask = entitycategoryTwo | entitycategoryThree;

//body2 는 body2, body 4와 충돌 이때  body1과 충돌하지 않음

body2.physicsbody.collisionbitmask = entitycategoryTwo | entitycategoryFour;

 //body1과 body3이 접촉   이때 body3가 움직여서 접촉해야 접촉이 일어남

// body1 이 bodyA ,  body3이  bodyB

body3.physicsbody.contactTestbitmask = entitycategoryOne;

-(void) didBeginContact:(SKPhysicsContact *)contact

{

    SKSpriteNode* firstNode, *secondNode;

    

    firstNode = (SKSpriteNode*) contact.bodyA.node;

    secondNode = (SKSpriteNode*) contact.bodyB.node;

    

    if ((contact.bodyA.categoryBitMask == EntityCategoryOne)

        && (contact.bodyB.categoryBitMask == EntityCategoryThree)) {

        

        //접촉 처리

        

        

    }

    

}    

============================

SKNode글 추가 SKPhysicsBody 에 대해서

노드는 옵션으로 물리 몸체(physics body)가질 수 있습니다.

일단  skphysicsbody reference 입니다. 참고 하시고

Tasks

Creating Volume-based Physics Bodies

• + bodyWithCircleOfRadius:
• + bodyWithCircleOfRadius:center:
• + bodyWithRectangleOfSize:
• + bodyWithRectangleOfSize:center:
• + bodyWithBodies:
• + bodyWithPolygonFromPath:

Creating Edge-based Physics Bodies

• + bodyWithEdgeLoopFromRect:
• + bodyWithEdgeFromPoint:toPoint:
• + bodyWithEdgeLoopFromPath:
• + bodyWithEdgeChainFromPath:

Defining How Forces Affect a Physics Body

•    affectedByGravity  property
•    allowsRotation  property
•    dynamic  property

Defining a Body’s Physical Properties

•    mass  property
•    density  property
•    area  property
•    friction  property
•    restitution  property
•    linearDamping  property
•    angularDamping  property

Working with Collisions and Contacts

•    categoryBitMask  property
•    collisionBitMask  property
•    usesPreciseCollisionDetection  property
•    contactTestBitMask  property
• – allContactedBodies

Applying Forces and Impulses to a Physics Body

• – applyForce:
• – applyTorque:
• – applyForce:atPoint:
• – applyImpulse:
• – applyAngularImpulse:
• – applyImpulse:atPoint:

Inspecting the Physics Body’s Position and Velocity

•    velocity  property
•    angularVelocity  property
•    resting  property

Reading the Physics Body’s Node

•    node  property

Determining Which Joints Are Connected to a Physics Body

•    joints  property

기본적으로 물리몸체는 body를 할당하는 걸로 시작합니다. 

노드 객체가 생성된 상태에서 

클래스 메소드인  

Creating Volume-based Physics Bodies

• + bodyWithCircleOfRadius:
• + bodyWithCircleOfRadius:center:
• + bodyWithRectangleOfSize:
• + bodyWithRectangleOfSize:center:
• + bodyWithBodies:
• + bodyWithPolygonFromPath:

Creating Edge-based Physics Bodies

• + bodyWithEdgeLoopFromRect:
• + bodyWithEdgeFromPoint:toPoint:
• + bodyWithEdgeLoopFromPath:
• + bodyWithEdgeChainFromPath:

요따위 것들로  바디를 할당합니다.  

여기서 다른건 사용하기 쉬운데 제일 복잡하면서 효율적인 path를 사용하는 

법을 좀 알보겠습니다. 

CGFloat offsetX = self.crocodile.frame.size.width * self.crocodile.anchorPoint.x;
CGFloat offsetY = self.crocodile.frame.size.height * self.crocodile.anchorPoint.y;
 
CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, NULL, 47 - offsetX, 77 - offsetY);
CGPathAddLineToPoint(path, NULL, 5 - offsetX, 51 - offsetY);
CGPathAddLineToPoint(path, NULL, 7 - offsetX, 2 - offsetY);
CGPathAddLineToPoint(path, NULL, 78 - offsetX, 2 - offsetY);
CGPathAddLineToPoint(path, NULL, 102 - offsetX, 21 - offsetY);
 
CGPathCloseSubpath(path);
 
self.crocodile.physicsBody = [SKPhysicsBody bodyWithPolygonFromPath:path];

[self.crocodile skt_attachDebugFrameFromPath:path color:[SKColor redColor]];
CGPathRelease(path);

출처 :http://www.raywenderlich.com/

출처 :http://www.raywenderlich.com/

이렇게 빨간 색으로 그려진 것 처럼 path를 이용해서 물리몸체를 할당 할수 있습니다. 

원래 빨간 색선은 나타나지 않으나  

위에 처럼 빨간선을 보기 위해선 

[self.crocodile skt_attachDebugFrameFromPath:path color:[SKColor redColor]]; 

이게 필요합니다. 

먼저 라이브러리를 추가 해야 하구요 

이건 사용법과 설명

Note: You may have noticed a call to skt_attachDebugFrameFromPath: for most of the physics bodies. This is a method from SKNode+SKTDebugDraw, which is part of a group of Sprite Kit utilities developed by Razeware. This particular method helps with debugging physics bodies. To turn it on, openSKNode+SKTDebugDraw.m and change the line BOOL SKTDebugDrawEnabled = NO; to BOOL SKTDebugDrawEnabled = YES;. This will draw a shape that represents your physics body. Don’t forget to turn it off when you’re done!

라이브러리 파일

SKNode+SKTDebugDraw.h

SKNode+SKTDebugDraw.m

body를 할당하면 자동으로 중력의 영향을 받기 시작합니다. 

중력 크기 바꾸기 

scene.physicsworld.gravity = CGVectorMake( 0.0 , -9.8);

중력 영향 안 받기 

프로퍼티 affectedByGravity 를 바꿉니다.

node.physicsworld.affectedByGravity = NO;

이렇게 

물리 시뮬레이션 끄기 

프로퍼티 dynamic 값을 no로 설정 

무게 설정

프로퍼티 mass 값 설정 (단위 ,kg)

스프라이트 킷 렌더링 루프 

따라서,

지속적으로 확인 해야 하고  변화를 주어야 하는  코드는 

위의 세개의 메소드에 적어주면 됩니다. 

저 세개의 메소드는  계속 반복하며 돌아 갑니다. 

physicsbody의 핵심은 아마도 충돌과 접촉 이겠죠 

할 이야기가 많아서 다음글에......