수 년 동안 지켜봐도 제 자리 걸음만 하는 분들을 많이 보게 됩니다.  여기에 대한 이유도 다양하겠지만, 근본적인 문제 하나만을 언급해 보려고 합니다.

프로그래밍 공부는 두 가지로 나뉩니다.  다른 공부도 비슷하겠지요.

• 지식 습득 및 이해
• 훈련

• 훈련은 체계를 가지고 있어야 합니다.
• 훈련은 피드백을 통해서 돌아보고 교정하는 과정의 반복입니다.

cocos2d-x 강의에 앞서서 설치 과정을 설명하려고 합니다.  이 것들이 버전이 달라질 때마다 사용법이 바뀌어서 강의 준비하다가 한 참을 헤매고 말았습니다 ㅡ.ㅡ;

강의는

• https://www.facebook.com/codeway/posts/281042138725260
• 2014년 4월 16일 오후 2시부터 시작합니다.
• 참가자는
• 듀얼 모니터가 있어야 합니다.  없으시면, 아이폰이나 안드로이드 폰 또는 해당 OS의 테블릿이 필요합니다.
• 한쪽은 강의 내용을 보고 한 쪽은 실습을 합니다.
• 문제가 발생하면 강사가 원격으로 수정해 드립니다.
• 참가 신청은 위의 링크를 참고 하시기 바랍니다.
• 기타
• Cocos2d-x 입문 강의입니다.
• 강의 내용은 http://www.raywenderlich.com/25736 따라하기 입니다.
• 기존 강의와 달리 이번 강의는 실습을 포함합니다. 그로 인해서 선착순으로 20명만 모집합니다.

강의에 사용 할 리소스

Cocos2DSimpleGameResourcePack.zip

1. 다운로드

• http://www.cocos2d-x.org/download 에서 cocos2d-x-3.0rc1 를 다운 받고 압축을 풉니다.

• 비주얼 스튜디오 2012를 설치합니다.  
• 이번 강의에서 사용 할 버전입니다.
• 무료 버전을 사용하셔도 됩니다.
• build 폴더에 있는 cocos2d-win32.vc2012.sln 파일을 비주얼 스튜디오에서 엽니다.
• [그림 1]과 같이 솔루션 전체를 빌드합니다.
• 시간이 오래 걸립니다.  막간에 게임 한 판? ㅡ.ㅡa

• 콤멘드 창을 엽니다.  (관리자 권한이어야 한다는 글을 본적이 있습니다.  일단 저는 그렇게 했습니다 ^^)
• cocos2d-x 가 설치 된 위치에서 setup.py 를 실행합니다.  (phtyton 설치 되어야 합니다)
• [그림 2]처럼 무엇인가 물어보면 그냥 엔터를 칩니다.
• 컴퓨터를 껐다가 다시 켜라고 합니다.  일단 그렇게 합니다 ㅡ.ㅡ;
• 재부팅이 되면, 다시 콤멘트 창을 열고 "cocos2d-x-3.0rc1\tools\cocos2d-console\bin" 폴더로 이동합니다.  (이 폴더가 Path에 저장되어 있으면, 프로젝트 파일을 저장 할 위치에서 진행 하셔도 됩니다.
• 아래와 같은 형식으로 프로젝트를 생성합니다.  
• D:...> cocos new 프로젝트명 -p 패키지명 -l cpp -d "프로젝트 저장 할 위치"
• [그림 3]과 같이 파일이 생성되면, 비주얼 스튜디오에서 열어서 실행 해 봅니다. 역시 오래 걸립니다.
• 저의 경우에는 "..\HelloWorld\proj.win32" 폴더 안에 "HelloWorld.sln" 파일을 엽니다.
• [그림 4]와 같이 "HelloWorld" 프로그램이 실행 되면 준비가 완료 된 것 입니다.

[그림 2]

[그림 3]

[그림 4]

최대한 쉬운 용어를 사용하면서 프로그래밍이 무엇인지에 대한 이해를 돕기 위해 글을 작성했습니다.  이 글은 프로그래밍에 대해 잘 모르는 부모님들과 아이들을 위해서 쓰여졌습니다.

아이들에게 프로그래밍을 가르치는 것은 상당히 매력적인 일입니다.  마치 모두가 자신의 아이들이 피아니스트가 되기를 바라고 피아노 학원에 보내거나, 화가가 되기를 바라고 미술 학원에 보내는 것은 아닌 것처럼, 프로그래밍을 가르친다고 반드시 프로그래머를 목표로 할 필요는 없습니다.  

아이들은 프로그래밍을 통해서 문제 해결 방법과 사고력, 창조력과 추상화 능력 그리고 수학적인 감각을 익힐 수가 있습니다.  무엇보다도 컴퓨터가 아이에게 유해한 존재가 되지 않고 흥미를 유발하면서도 아이에게 유익한 도구가 될 수 있도록 합니다.

마법의 램프

컴퓨터는 우리가 시킨대로 무엇이든(?) 일해주는 친절한 기계입니다.  마치 마법의 램프와 같습니다.  램프 속에는 작은 요정들이 우리가 시킨 일을 대신 처리해 줍니다.  요정들이 어떻게 일하는 지 보이지도 않고, 알 필요도 없습니다.  다만, 우리는 이 마법의 램프에게 우리가 원하는 일을 알려주기만 하면 됩니다.  그리고, 컴퓨터는 우리의 상상보다 많은 일을 우리 대신 처리해 줄 수 있습니다.

하지만, 프로그램이라는 신청서를 작성해야 하며, 작성법에 정확하게 맞춰서 제출하지 않으면 어떤 부탁도 들어주지 않습니다.

구식 램프에게 일 시키기

오래 전부터 "절차적 프로그래밍"이라는 방법으로 프로그램을 작성하는 기법이 있었습니다.  용어 자체를 외우려고 힘 들일 필요는 없습니다.

이 구식 방법은 우리가 원하는 일을 한 줄 한 줄 적어 나가는 것이 전부입니다.  아래는 우리의 첫 번 째 프로그램입니다.  청소 로봇에게 집을 청소하도록 지시하는 것이 목적입니다.

  청소해

간단하죠?  그런데 막상 일을 시켜보니 문제가 발생하였습니다.  오랫 동안 집을 비워놨더니 온 집안이 지저분한 상태입니다.  그래서, 청소를 반복적으로 시키기로 합니다.  아래는 우리의 두 번 째 프로그램입니다.

  반복해 여기서부터
    청소해
  여기까지

여기서부터..여기까지 사이에 있는 지시 사항을 로봇이 반복하기 시작합니다.  그런데, 또 다시 문제가 발견됩니다.  집이 상당히 깨끗한데도 새벽까지 내내 쉬지 않고 로봇이 청소를 합니다.  잠을 설치고 나서야 다시 우리의 세 번 째 프로그램을 작성합니다.

  반복해 여기서부터
    만약 방이 지저분하면 청소해
  여기까지

오!  멋지게 로봇이 작동합니다.  위의 프로그램들은 실제 프로그래머가 하는 일과 동일합니다.  제가 취미로 만들고 있는 어린이를 위한 프로그래밍 개발툴을 이용하면 위의 프로그램을 제시하는 것만으로 로봇이 방을 청소하는 것을 확인 할 수 있습니다.  다만, 아직 완성도가 떨어져서 한 참을 더 기다려야 할 것 같습니다 ^^;

프로그래밍은 한 번에 끝나지 않는다

위에서 예를 보였듯이 프로그래밍은 한 번에 끝나는 경우가 거의 없습니다.  처음 만들 때 미처 생각하지 못한 상황을 나중에 발견하는 경우가 종종 있습니다.  그래서 일반적으로 프로그래밍은 아래의 절차를 따른다고 봐도 무방합니다.

[그림 1] 프로그래밍을 작성하는 순서

• 어떻게 만들 것인지 설계를 합니다.
• 설계를 토대로 프로그램을 작성합니다.  다시 설명드리면, 프로그램이란 램프에게 전달하는 작업 지시서입니다.
• 프로그램이 제대로 동작하는 검증(테스트)합니다.
• 만족한다면 프로그램을 사용하시면 됩니다.
• 무엇인가 부족한 것이 발견되면 다시 설계를 하고 작성하고 검증하는 과정을 계속 반복합니다.

신식 램프에게 일 시키기

이번에는 조금 더 세련 된 방법으로 프로그램을 작성해보도록 하겠습니다.  "이벤트 기반 프로그래밍 (Event Driven Programming)"이라는 방식입니다.

아래는 기존의 청소 프로그램을 이벤트 기반으로 다시 작성한 것입니다.

[그림 2] 이벤트 기반으로 작성된 청소 프로그램

• 이벤트는 무엇을 실행하기 위한 조건으로 생각하시면 됩니다.
• [그림 2]에서는 "방이 더러우면" 이란 조건이 만족되는 상황이 감지되면, 청소하라는 의미가 됩니다.
• 주로 "~~하면, ~~해라" 형식으로 프로그램을 작성하게 됩니다.
• 이해하기 쉽고 프로그램을 작성하기 쉬운 장점이 있습니다.
• 이벤트 기반 프로그래밍을 한다고 해서 기존의 절차적인 프로그래밍 기법을 완전히 버린 것이 아닙니다.  조금 더 구식(절차적) 램프의 개선했다고 생각하시면 됩니다.  여전히 구식 램프의 기능은 그대로 사용 할 수 있으며, 추가적으로 신식(이벤트) 램프의 기능을 사용하실 수 있는 방법이라고 생각하시면 됩니다.

프로그래밍 세계의 산업 혁명

이번에 소개해드릴 방법은 프로그래밍 세계의 산업 혁명에 가까운 발견으로 꼽을 수 있는 "객체 지향적 프로그래밍 (Object Oriented Programming)"입니다.  수 년 간 프로그래밍에 대한 경험을 쌓아 온 전문가들에게도 살짝 어려운 방법입니다.

램프(컴퓨터) 안에 로봇 공장을 만들고 로봇을 생산해서 일을 시키는 방법이 바로 객체 지향적 프로그래밍(OOP)입니다.  공장은 얼마든지 원하는 대로 로봇을 만들어 낼 수가 있습니다.  이때, 우리는 공장이 만들어 낼 로봇이 어떤 기능과 특징을 가져야 하는 지에 대해 신청서(프로그램)를 제출해야 합니다.  따라서, 모든 공장은 신청서를 토대로 제 각기 다른 종류의 로봇을 생산할 수 있습니다. 

이에 대한 전문용어는 아래와 같습니다.  역시 용어를 외우는데 힘들이실 필요 없습니다 ^^*

• 로봇 공장의 전문용어: 클래스 (Class)
• 로봇의 전문용어: 객체 (Object)
• 로봇의 기능: 메소드 (Method)
• 로봇의 특징: 속성 (Property)

이제 오늘의 마지막 프로그램을 객체지향적 프로그래밍을 이용해서 작성해보도록 하겠습니다.

  로봇 := 로봇공장에 주문
  로봇 . 청소해

"반복하라"는 명령어도 없고, "만약 방이 더러우면"이라는 조건을 생각하지도 않았기 때문에 프로그램을 다시 작성해야 할 까요?  그럴 수도 있고, 아닐 수도 있습니다.  위에서 이미 설명한대로 로봇공장 또한 우리가 신청서(프로그램)을 작성해서 만들어야 합니다.  이때, "청소해"하면 방이 더러울 때만 청소하라고 신청서를 작성하면 됩니다.

이러한 방법이 가진 이점 중에 하나는 바로 "분업화"입니다.  누군가 공장을 이미 만들어 놓은 경우 우리는 "청소해"를 구체적으로 어떻게 작성해야하는 지는 알 필요가 없습니다.  친절하게도 동료 개발자가 "이 로봇은 "청소해하면 알아서 하니까 그냥 써도 돼!"라고 했다면, 우리는 단지 위에처럼만 하면 되는 것 입니다.

이런 장점을 이용해서 큰 규모의 프로그램을 작성할 때, 여러 개발자들이 쉽게 협력할 수 있는 방법이 생겼기 때문에 객체 지향적 프로그램을 "프로그래밍 세계의 산업 혁명"이라고 표현 한 것입니다.

아래는 청소하는 방법이 다를 경우 각각 다른 로봇을 생산해서 청소하는 프로그램 작성의 예입니다.  공장에서 로봇만 찍어내서 시키면 되니까 상당히 편리합니다.

  진공 청소 로봇 := 진공 청소 로봇공장에 주문
  물 청소 로봇 := 물 청소 로봇공장에 주문

  진공 청소 로봇 . 청소해
  물 청소 로봇 . 청소해

의도적으로 ":=", "." 와 같은 기호의 설명은 피했습니다.  아직은 아실 필요 없으며, "신청서 작성 요령이 그렇구나"하고 넘어가시면 됩니다.  신청서 작성 요령은 프로그래밍 언어마다 다릅니다.  마치 우리가 한국어와 영어 등이 있듯이, 프로그래밍을 작성하는 형식(언어)에도 여러 가지가 있습니다.

마치면서

지금까지 우리는, 현재 프로그래밍의 세 가지 큰 흐름에 대해서 훝어 봤습니다.  구식 램프, 신식 램프 그리고 산업 혁명에 이르기까지 실제로는 엄청난 내용을 다룬 것 입니다.  이제 여러분들은 위에서 설명한 세 가지 프로그래밍 방법에 대한 구체적인 공부를 하셔야 할 시간입니다.

[준비과정]

• http://ryulib.tistory.com/329 를 먼저 보시고 오세요

[소스 1]

Ship.Visible = true;
Ship.Left = 0;
Ship.Top  = 0;
Ship.Start();

var repeaterForShip = createRepeater( 5000 );

repeaterForShip.OnInterval = on_RepeatForShip;
    
function on_RepeatForShip() {
  if (Keyboard.IsUp)   Ship.Top = Ship.Top - 1;
  if (Keyboard.IsDown) Ship.Top = Ship.Top + 1;

  if (Ship.Top < 0) Ship.Top = 0;
  if (Ship.Bottom > Screen.Bottom) Ship.Bottom = Screen.Bottom;
}    

var repeaterForMissile = createRepeater( 2000 );

repeaterForMissile.OnInterval = on_RepeatForMissile;
    
function on_RepeatForMissile() {
  if (Missile.Visible) {
    Missile.Left = Missile.Left + 1;
    
    if (Missile.IsOutOfScreen) Missile.Visible = false;
    
    return;
  }

  if (Keyboard.IsFire && Ship.Visible) {
    Missile.Left = Ship.Right;
    Missile.CenterY  = Ship.CenterY;
    Missile.Visible = true;

    soundFire();
  }
}

Asteroids.Start();

var repeaterForAsteroids = createRepeater( 4000 );

repeaterForAsteroids.OnInterval = on_RepeatForAsteroids;
    
function on_RepeatForAsteroids() {
  Asteroids.Move( 1 );
}

function loop() {

}

[Run 버턴을 클릭합니다]

[설명]

40-48: 라인이 추가되었습니다.  방식은 동일하기 때문에 특징적인 부분만 설명을 하도록 하겠습니다.

40: 라인에서는 혹성들을 관리하는 콤포넌트인 Asteroids의 애니메이션 동작을 시작하도록 합니다.  화면에 혹성이 나타나면 빙글 빙글 돌게 됩니다.

47: 라인에서는 Repeater에 지정 된 시간마다 한 칸 씩 화면에 보이는 혹성들을 앞으로 이동하게 합니다.

[소스 2]

Ship.Visible = true;
Ship.Left = 0;
Ship.Top  = 0;
Ship.Start();

var repeaterForShip = createRepeater( 5000 );

repeaterForShip.OnInterval = on_RepeatForShip;
    
function on_RepeatForShip() {
  if (Keyboard.IsUp)   Ship.Top = Ship.Top - 1;
  if (Keyboard.IsDown) Ship.Top = Ship.Top + 1;

  if (Ship.Top < 0) Ship.Top = 0;
  if (Ship.Bottom > Screen.Bottom) Ship.Bottom = Screen.Bottom;
}    

var repeaterForMissile = createRepeater( 2000 );

repeaterForMissile.OnInterval = on_RepeatForMissile;
    
function on_RepeatForMissile() {
  if (Missile.Visible) {
    Missile.Left = Missile.Left + 1;
    
    if (Missile.IsOutOfScreen) Missile.Visible = false;
    
    return;
  }

  if (Keyboard.IsFire && Ship.Visible) {
    Missile.Left = Ship.Right;
    Missile.CenterY  = Ship.CenterY;
    Missile.Visible = true;

    soundFire();
  }
}

Asteroids.Start();

var repeaterForAsteroids = createRepeater( 4000 );

repeaterForAsteroids.OnInterval = on_RepeatForAsteroids;
    
function on_RepeatForAsteroids() {
  Asteroids.Move( 1 );

  if (Asteroids.CheckCollision(Missile)) {
    Missile.Visible = false;
    soundBoom();
  }

  if (Asteroids.CheckCollision(Ship)) {
    Ship.Visible = false;
    soundBoom();
  }
}

function loop() {

}

[Run 버턴을 클릭합니다]

[설명]

새로 추가 된 코드 위주로 설명 드리겠습니다.

49: 라인에 보시면 if 문의 괄호 안에 Asteroids.CheckCollision(Missile) 라고 되어 있습니다.  혹성 중에 하나라도 미사일과 부디치면 괄호 안이 true가 됩니다.  그러면 50-51: 라인이 실행 됩니다.  또한, 충동이 있다면 혹성이 그 자리에 서서 폭발하도록 콤포넌트 내부에서 자동으로 처리해 줍니다.

50: 라인에서는 미사일의 Visible 속성을 false로 변경합니다.  이제 미사일은 화면에 보이지 않게 됩니다.

51: 라인에서는 폭발음을 출력합니다.  soundBoom 함수도 JetBoy 프로젝트에서만 제공됩니다.

54: 라인에서는 우주선과 혹성 중에 하나가 부디치면 같은 동작을 하게 됩니다.  이번에는 우주선을 보이지 않도록 하고, 폭발음을 출력합니다.

우주선이 보이지 않으면 게임은 종료되며, 다시 시작하실려면 Run 버텅을 다시 클릭하시면 됩니다.

[소스 3]

Ship.Visible = true;
Ship.Left = 0;
Ship.Top  = 0;
Ship.Start();

var repeaterForShip = createRepeater( 5000 );

repeaterForShip.OnInterval = on_RepeatForShip;
    
function on_RepeatForShip() {
  if (Keyboard.IsUp)   Ship.Top = Ship.Top - 1;
  if (Keyboard.IsDown) Ship.Top = Ship.Top + 1;

  if (Ship.Top < 0) Ship.Top = 0;
  if (Ship.Bottom > Screen.Bottom) Ship.Bottom = Screen.Bottom;
}    

var repeaterForMissile = createRepeater( 2000 );

repeaterForMissile.OnInterval = on_RepeatForMissile;
    
function on_RepeatForMissile() {
  if (Missile.Visible) {
    Missile.Left = Missile.Left + 1;
    
    if (Missile.IsOutOfScreen) Missile.Visible = false;
    
    return;
  }

  if (Keyboard.IsFire && Ship.Visible) {
    Missile.Left = Ship.Right;
    Missile.CenterY  = Ship.CenterY;
    Missile.Visible = true;

    soundFire();
  }
}

Asteroids.Start();

var repeaterForAsteroids = createRepeater( 4000 );

repeaterForAsteroids.OnInterval = on_RepeatForAsteroids;
    
function on_RepeatForAsteroids() {
  Asteroids.Move( 1 );

  if (Asteroids.CheckCollision(Missile)) {
    Missile.Visible = false;
    soundBoom();
  }

  if (Asteroids.CheckCollision(Ship)) {
    Ship.Visible = false;
    soundBoom();
  }
}

function shutdown() {
  Asteroids.Stop();
}

function loop() {

}

[Run 버턴을 클릭합니다]

[설명]

76-78: 라인이 추가 되었습니다.

76: 라인에 보시면 함수의 이름이 shutdown으로 되어 있습니다.  이 함수는 Stop 버턴이 눌리거나 프로그램이 종료 되었을 때 실행 됩니다.  Run 버턴을 클릭하셔도 일단 실행 중에 있었다면, shutdown 함수가 실행 된 이후에 프로그램이 실행 됩니다.

77: 라인은 프로그램이 종료하기 전에 혹성들의 애니메이션 동작을 멈추고, 혹성을 화면에서 사라지도록 합니다.

[마무리]

이로써 JetBoy 게임을 함께 만들어 보았습니다.  프로그래밍 자체가 익숙하지 않으신 분들은 외워서라도 지금까지의 코드를 스스로 작성 할 수 있을 때까지 반복하시길 권합니다.  기본적인 것들이 몸에 배어서 자연스럽게 코드를 작성 할 수 있게되면 앞으로 공부가 보다 쉽고 효율적으로 진행 될 수 있습니다.

[준비과정]

• http://ryulib.tistory.com/328 를 먼저 보시고 오세요

[소스 1]

Ship.Visible = true;
Ship.Left = 0;
Ship.Top  = 0;
Ship.Start();

var repeaterForShip = createRepeater( 5000 );

repeaterForShip.OnInterval = on_RepeatForShip;
    
function on_RepeatForShip() {
  if (Keyboard.IsUp)   Ship.Top = Ship.Top - 1;
  if (Keyboard.IsDown) Ship.Top = Ship.Top + 1;

  if (Ship.Top < 0) Ship.Top = 0;
  if (Ship.Bottom > Screen.Bottom) Ship.Bottom = Screen.Bottom;
}    

var repeaterForMissile = createRepeater( 2000 );

repeaterForMissile.OnInterval = on_RepeatForMissile;
    
function on_RepeatForMissile() {
}

function loop() {

}

[Run 버턴을 클릭합니다]

[설명]

18-23: 라인을 보시면, 우주선의 경우와 마찬가지로 미사일을 일정한 시간마다 동작 시키기 위해서 Repeater를 생성하고 OnInterval 함수를 연결해 주고 있습니다.  아직은 on_RepeatForMissile 함수 안에 아무것도 없기 때문에 어떤 변화도 없습니다.  

18: 라인에 보시면 createRepeater 함수의 괄호 안에 2000 이 지정되어 있습니다.  우주선보다 작은 시간 마다 반복 될 것이기 때문에 미사일 처리 속도는 우주선의 처리보다 빠를 것 입니다.

[소스 2]

Ship.Visible = true;
Ship.Left = 0;
Ship.Top  = 0;
Ship.Start();

var repeaterForShip = createRepeater( 5000 );

repeaterForShip.OnInterval = on_RepeatForShip;
    
function on_RepeatForShip() {
  if (Keyboard.IsUp)   Ship.Top = Ship.Top - 1;
  if (Keyboard.IsDown) Ship.Top = Ship.Top + 1;

  if (Ship.Top < 0) Ship.Top = 0;
  if (Ship.Bottom > Screen.Bottom) Ship.Bottom = Screen.Bottom;
}    

var repeaterForMissile = createRepeater( 2000 );

repeaterForMissile.OnInterval = on_RepeatForMissile;
    
function on_RepeatForMissile() {
  if (Keyboard.IsFire && Ship.Visible) {
    Missile.Left = Ship.Right;
    Missile.CenterY  = Ship.CenterY;
    Missile.Visible = true;

    soundFire();
  }
}

function loop() {

}

[Run 버턴을 클릭합니다]

• 키보드의 스페이스 바를 클릭 해보세요.

[설명]

Ship.Visible = true;
Ship.Left = 0;
Ship.Top  = 0;
Ship.Start();

var repeaterForShip = createRepeater( 5000 );

repeaterForShip.OnInterval = on_RepeatForShip;
    
function on_RepeatForShip() {
  if (Keyboard.IsUp)   Ship.Top = Ship.Top - 1;
  if (Keyboard.IsDown) Ship.Top = Ship.Top + 1;

  if (Ship.Top < 0) Ship.Top = 0;
  if (Ship.Bottom > Screen.Bottom) Ship.Bottom = Screen.Bottom;
}    

var repeaterForMissile = createRepeater( 2000 );

repeaterForMissile.OnInterval = on_RepeatForMissile;
    
function on_RepeatForMissile() {
  if (Missile.Visible) {
    Missile.Left = Missile.Left + 1;
    
    if (Missile.IsOutOfScreen) Missile.Visible = false;
    
    return;
  }

  if (Keyboard.IsFire && Ship.Visible) {
    Missile.Left = Ship.Right;
    Missile.CenterY  = Ship.CenterY;
    Missile.Visible = true;

    soundFire();
  }
}

function loop() {

}

24: 라인에서는 미사일의 Left 속성을 한 칸 씩 앞으로 전진 시키고 있습니다.

26: 미사일이 화면 밖으로 나가면 Missile.Visible = false; 가 실행 됩니다.  이로써 23: 라인은 앞으로 더 이상 실행되지 않을 것 입니다.

28: 라인에서는 처음 보는 return 나타났습니다.  return이 나타나면, 함수 밖으로 나가게 됩니다.  즉, 함수의 나머지 부분은 실행되지 않습니다.

미사일이 화면에 보이는 경우에는 23: 라인의 조건이 맞아서 24-28: 라인이 실행됩니다.  그러나, 28: 라인이 실행되면 바로 함수가 끝나기 때문에 31-37: 라인은 실행되지 않습니다.

하지만, 미사일이 보이지 않는 경우에는 31-37: 라인만 실행 될 것 입니다.

[마무리]

이로써 미사일 발사 처리까지 완료하였습니다.  새로 나타난 문법들에 유의해서 스스로 코드를 작성해 보시면서 익혀보시기 바랍니다.

[준비과정]

• http://www.helloworld.or.kr/ 에 들어가셔서 Run 버턴을 클릭합니다.
• HelloWorld 어플리케이션이 실행되면, 화면 밑에 JetBoy 밑에 있는 Run 버턴을 클릭합니다.
• 이제 모든 소스를 지우고 아래 내용을 하나씩 따라해보시기 바랍니다.

[소스 1]

Ship.Visible = true;
Ship.Left = 0;
Ship.Top  = 0;
Ship.Start();

[Run 버턴을 클릭합니다]

[설명]

Ship은 미리 제공되는 콤포넌트입니다.  다만, JetBoy 프로젝트 모듈에서만 제공되기 때문에 다른 프로젝트에서는 사용 하실 수가 없습니다.  앞으로 나오는 미사일과 혹성들도 마찬가지 입니다.  이들은 나중에 여러분들이 스스로 만들 수가 있습니다.  이것에 대해서는 다음에 공부하도록 하겠습니다.

1: 라인에서는 Ship 콤포넌트의 Visible 속성을 true로 변경합니다.  이로써 우주선이 화면에 보이기 시작합니다.  만약 Ship.Visible = false 로 변경한다면 화면에 나타나지 않게 됩니다.

2-3: 라인에서는 Ship 콤포넌트의 Left, Top 속성을 각각 0으로 변경합니다.  우주선은 화면의 왼쪽 맨 윗 쪽에 자리 잡게 됩니다.

4: 라인에서는 Ship 콤포넌트의 애니메이션 동작을 시작하게 됩니다.  우주선의 불꽃이 움직이면서 날아가는 느낌이 나도록 해줍니다.

[소스 2]

Ship.Visible = true;
Ship.Left = 0;
Ship.Top  = 0;
Ship.Start();

function loop() {
}

[Run 버턴을 클릭합니다]

[설명]

6-7: 라인에서보면 함수가 추가되었습니다.  함수 이름을 loop라고 하면 Stop 버턴이 클릭되기 전까지 계속 반복 됩니다.  하지만, 함수 안에 아무것도 없기 때문에 아직은 아무 변화도 나타나지 않습니다.

[소스 3]

Ship.Visible = true;
Ship.Left = 0;
Ship.Top  = 0;
Ship.Start();

function loop() {
  if (Keyboard.IsUp)   Ship.Top = Ship.Top - 1;
  if (Keyboard.IsDown) Ship.Top = Ship.Top + 1;
}

[Run 버턴을 클릭합니다]

[설명]

7-8: 라인에 보면 함수 안에 코드를 추가한 내용이 보입니다.  이 두 라인은 Stop 버턴이 클릭되기 전까지 계속 반복 됩니다.

7: 라인에서는 이전에 배운 if 문이 나타납니다.  괄호 안에 있는 내용이 진실이면 뒤에 오는 문장이 실행됩니다.  따라서, Keyboard.IsUp 이 진실(true)이라면, Ship.Top = Ship.Top - 1; 문장이 실행됩니다.  Ship 콤포넌트의 Top 속성으로 현재 Top이 가진 값에 1 만큼 빼고 난 결과를 대입(복사)합니다.  화면은 윗 쪽으로 갈 수록 숫자가 낮아지기 때문에 우주선이 위로 올라가게 됩니다.

Keyboard는 미리 제공되는 콤포넌트입니다.

8: 라인에서는 7: 라인과 반대로 Top 속성에 1을 계속 더하게 됩니다.  즉, 우주선이 아래로 내려오게 됩니다.

Run 버턴을 클릭하셨다면, 키보드에서 화살표 키 중 윗쪽 화살표와 아랫쪽 화살표를 눌러보시기 바랍니다.  우주선이 위 아래로 정신 없이 움직입니다.  심지어 화면 밖으로 사라지기도 합니다.

[소스 4]

Ship.Visible = true;
Ship.Left = 0;
Ship.Top  = 0;
Ship.Start();

function loop() {
  if (Keyboard.IsUp)   Ship.Top = Ship.Top - 1;
  if (Keyboard.IsDown) Ship.Top = Ship.Top + 1;

  if (Ship.Top < 0) Ship.Top = 0;
  if (Ship.Bottom > Screen.Bottom) Ship.Bottom = Screen.Bottom;
}

[Run 버턴을 클릭합니다]

[설명]

10: 라인에서는 괄호 안에 (Ship.Top < 0) 이라고 되어 있습니다.  즉, 우주선의 Top 속성이 0보다 더 작은 경우에 뒤에 오는 문장인 Ship.Top = 0; 이 실행 됩니다.  결국 0보다 작은 경우에는 0으로 다시 대입(복사)되기 때문에 우주선은 0보다 작은 값을 가질 수 없게 됩니다.  이제 윗 쪽으로 사라지는 일이 없어집니다.

11: 라인에서는 괄호 안에 (Ship.Bottom > Screen.Bottom) 라고 되어 있습니다.  즉, 우주선의 바닥이 화면의 바닥보다 더 밑에 있다면, 다음 문장인 Ship.Bottom = Screen.Bottom; 이 실행 됩니다.  결국 화면의 바닥보다 더 밑으로 내려 갈 수 없게 됩니다.

[소스 5]

Ship.Visible = true;
Ship.Left = 0;
Ship.Top  = 0;
Ship.Start();

var repeaterForShip = createRepeater( 5000 );

repeaterForShip.OnInterval = on_RepeatForShip;
    
function on_RepeatForShip() {
  if (Keyboard.IsUp)   Ship.Top = Ship.Top - 1;
  if (Keyboard.IsDown) Ship.Top = Ship.Top + 1;

  if (Ship.Top < 0) Ship.Top = 0;
  if (Ship.Bottom > Screen.Bottom) Ship.Bottom = Screen.Bottom;
}    

function loop() {

}

[Run 버턴을 클릭합니다]

[설명]

우주선이 너무 빠르게 움직이기 때문에 이번에는 우주선의 속도를 조절 할 수 있도록 코드를 변경하였습니다.

6: 라인에서는 createRepeater() 함수(function)를 통해서 Repeater 콤포넌트를 생성합니다.  Repeater 콤포넌트는 지정 된 시간마다 다른 함수를 반복해서 실행해주는 기능이 있습니다.  () 안에 있는 숫자가 반복되는 시간을 나타냅니다.  5000은 "5/1000" 초를 의미합니다.  0.005 초 마다 한 번씩 실행 된다는 의미입니다.  숫자를 변경하면 우주선이 움직이는 속도가 달라집니다.  생생 된 콤포넌트는 = (대입문)을 통해서 repeaterForShip 변수(보관함)에 저장 됩니다. 

8: 라인에서는 repeaterForShip 콤포넌트의 OnInterval 속성을 on_RepeatForShip로 지정합니다.  이제 정해진 시간 마다 on_RepeatForShip 함수를 찾아서 실행합니다.  on_RepeatForShip 함수는 10-16: 라인에 있습니다.

10-16: 라인에서는 on_RepeatForShip 함수가 정의되어 있습니다.  이전에 loop 함수에 있던 코드가 그대로 옮겨진 것을 보실 수가 있습니다.  동작은 이전과 동일 합니다.

[마무리]

얼마 되지 않은 코드이지만, 코드를 변경해 가면서 이런 저런 실험을 해보시기 바랍니다.

http://www.helloworld.or.kr/

아들에게 프로그래밍을 가르치기 위해서 만들었던 개발툴 중의 현재 버전입니다.  원래는 제가 만든 스크립트 언어를 사용했지만 ㅡ.ㅡa  이내 파스칼 스크립트 오픈 소스를 사용하다가, 이번에 자바 스크립트로 변경하였습니다.

아직은 프로토타입일 뿐이고, 일반 공개를 위해서 틈틈히 개량 할 예정입니다 ^^;

위의 링크를 클릭하시고, Run 버턴을 누르신 후, 프로그램을 한 번만 설치하시면 됩니다.  프로그램 설치를 꺼려하시는 분들을 위해서 압축 파일 버전을 아래와 같이 올립니다.

HelloWorld.7z

만든 이유는 아이들에게 프로그래밍을 가리치면서 몇 가지 문제를 겪다 보니, 이를 개선하기 위해서입니다.

• 처음에는 스크래치를 가르쳐 봤습니다.
• 스크래치는 쉽게 이해 할 수 있는 장점이 있지만 한계도 명확합니다.  금새 실증을 내고 맙니다.
• 그 다음에는 델파이(파스칼)을 가르쳐 봤습니다.
• 쓸만한 성과를 내는 데까지 알아야 할 것들이 너무 많습니다.
• 이러 저러한 고민 끝에
• 미리 만들어진 블록을 조립하면서 쉽게 성과를 내고 재미있는 수업을 만들 수 있어야 한다.
• 프로그래밍은 (적어도 아직까지는) 문자를 통해서 처리해야 보다 효과적이다.  스크래치와 같은 방식은 쉽게 적응하고 이해 할 수 있지만, 복잡한 문제에는 적합하지 않다.  그리고, 아이들은 정체되어 있는 수업에 금새 질린다.
• 결론적으로
• 언어는 쉽게 쓸 수 있는 스크립트를 선택
• 미리 만들어진 콤포넌트를 조합해서 게임 등을 작성하는 수업 방식
• 실력이 성장하면, 스스로 콤포넌트 제작

프로그래밍 입문

프로그래밍을 처음 하시는 분들을 위한 강의 입니다. 다양한 언어에 대한 맛보기를 진행 할 예정입니다. 자신에게 적합한 언어를 찾으시는데 도움이 되시길 바랍니다 ^^*

• 최대한 불필요한 설명을 피하고 짧고 이해하기 쉽게 작성하려고 노력하였습니다.
• 일단 한 번은 가볍게 보세요.
• 이해가 안되면 너무 깊게 파지 마시고, 따라하기를 통해서 천천히 익숙해 지세요.
• 이해가 되더라도 제시 된 예제는 동영상을 안보고 스스로 할 수 있을 때까지 반복하세요.
• 반복 하실 때에는 스스로 변화를 주면서 프로그램을 다듬어 보세요.

맛보기

맛보기는 프로그래밍을 본격적으로 시작하시기 전에, 여러 가지 컴퓨터 프로그래밍 언어를 맛보면서, 자신에게 맞는 언어를 찾는데 도움이 되시길 바라면서 작성하였습니다.

완전 초보를 위한 글

• 아빠! 프로그래밍이 모에요?: http://ryulib.tistory.com/331

스크래치

• 프로그래밍 시작하기
  • 프로그래밍에 익숙하지 않은 분들이 쉽게 배울 수 있는 스크래치에 대한 기본적인 설명을 합니다.
  • 스크채치 사이트 바로가기: http://scratch.mit.edu/
  • 동영상 강의 보기: https://www.youtube.com/watch?v=EYpq_RYHoio
• 간단한 게임 만들기 (똥 피하기 게임)
  • 만들 게임 맛보기: http://scratch.mit.edu/projects/10110542/
    • 위의 링크를 클릭하시고, 화면의 초록색 깃발을 클릭하시면 게임이 시작됩니다.
    • 왼쪽, 오른쪽 화살표 키를 눌러서 내려오는 똥을 피하는 게임입니다.
  • 동영상 강의 보기: https://www.youtube.com/watch?v=Ojt01hU2884

HelloWorld.or.kr (자바스크립트)

• 자바스크립의 초간단 문법 훝어보기
  • HelloWorld 프로그램을 통해서 자바스크립트 기본문법을 설명합니다.
    • 다음 진행 할 예제를 위해서 정말 중요한 문법 몇 가지만 빠르게 훝어 봅니다.
    • 이후 예제를 통해서 반복하면서 확장 학습을 진행 할 것 입니다.
    • 예제는 게임 등 흥미로운 주제를 이용 할 예정입니다.
  • HelloWorld 프로그램 사용하기: http://www.helloworld.or.kr/
  • 동영상 강의 보기: http://youtu.be/lQk1edjuMXc
• 슈팅 게임 JetBoy 만들기
  • HelloWorld 프로그램을 통해서 간단한 슈팅 게임을 만들어 봅니다.
  • 동영상 및 문서 자료
    • http://ryulib.tistory.com/328
    • http://ryulib.tistory.com/329
    • http://ryulib.tistory.com/330

C

• C 언어 훑어보기
  • C 프로그래밍 입문자를 위해서 맛보기 수업을 진행합니다.
  • 동영상 강의 보기: http://youtu.be/RWhM3N7txG0

기타

• 제가 만든 다른 프로그래밍 동영상 강좌
  http://ryulib.tistory.com/notice/15