[Slide] 세상에서 가장 간단한 안드로이드 게임 - 그리기

안녕하세요. 호랑인 입니다.

이번 포스팅은 쉽습니다. 저번 포스팅이 조금 많은 내용을 우겨넣은 듯한 감이 없지 않아 있었는데, 한 가지 정말 다행인 점은 저 부분은 앞으로 거의 모든 앱을 만드는데에 있어서 필수적이고 공통적인 부분이라는 점입니다.

우선 저번에 만들었던 두개의 함수인 draw( ) 와 update( ) 를 만들어 봅시다.

당장은 draw( ) 부터 만들겠습니다. 업데이트를 할 그림이 우선 있어야 하니까요.

    @Override
    public void draw(Canvas canvas){
        super.draw(canvas);
        if(canvas != null){
            canvas.drawColor(Color.WHITE);
            Paint paint = new Paint();
            paint.setColor(Color.rgb(250, 0, 0));
            canvas.drawRect(0, 0, 100, 100, paint);
        }
    }

위의 코드를 넣어봅시다. 코드는 크게 두 가지 역할을 갖고 있습니다.

1. canvas.drawColor(Color.WHITE) 는 배경을 하얗게 칠해줍니다.

2. Paint object를 하나 만들어줍니다. 이는 어떤 object (Rectangle, Circle 등등)에 색을 입힐 때 사용합니다.

3. Paint object에 색을 입력해줍니다. 저는 빨간색을 넣어줬습니다. 색은 rgb (alpha도 추가 가능) 을 넣어줄 수 있습니다.

4. canvas.draw... 까지만 치시면 다양한 함수들과 그 overriding 이 보이실 겁니다. 일단 slide라는 앱은 가장 단순한 앱을 만드는 것이 목적이므로, drawRect 를 씁니다.

drawRect 함수는 왼쪽위의 x, y, 오른쪽 아래의 x, y, 마지막으로 paint object를 input으로 받습니다.

자, 여기까지 하셨으면, 이제 빨간 사각형이 하나 나왔을 것입니다. 이제 이걸 움직여봅시다.

객체를 움직이는 등의 활동을 할 때에 사용하는 것이 바로 update 함수입니다. 이 함수를 통해 이 다음 frame 에서는 어떤 변화가 만들어져야 하는지를 계산합니다.

하.지.만 이 전에 android 에서의 좌표계를 아셔야 합니다.

그림으로 그릴 필요조차 없이 간단합니다. 왼쪽 위가 (0,0) 입니다. 그리고 오른쪽이 +x, 아래쪽이 +y 입니다. 아래쪽이 +y이라는 점이 가끔 헷갈려서 문제가 자주 발생합니다. (혼천의 앱에서 북극성이 아래쪽에 나타났었던 현상이 바로 이 예입니다.)

이제 update 함수를 만들어봅시다.

만들기에 앞서, 이 GameView object에 상자의 위치를 저장할 변수를 만들어 줍시다. 상자의 크기도 말이죠.

public class GameView extends SurfaceView implements SurfaceHolder.Callback {
 
    private int x;
    private int y;
    private int box_size;

그리고 이들을 초기화 해주어야죠. (생성자에 추가)

    public GameView(Context context){
        super(context);
        getHolder().addCallback(this);
        thread = new MainThread(getHolder(), this);
 
        x = 0;
        y = 0;
        box_size = 100;

자, 우선 update 함수를 아래와 같이 만들어 봅시다.

    public void update(int width, int height){
        x += 1;
        y += 1;
    }

그리고 실행 시켜 보시면, 상자가 오른쪽 아래로 이동할 껍니다.

슬슬 게임 같아 지지 않나요?

----------------------------------------------------------------------------------------

원래 여기에서 마치려 했지만, 조금 더 추가하도록 하겠습니다.

현재 완성된 "게임"을 보면, 뭔가 아쉬운 부분이 딱 보입니다. 바로, 상자가 화면 밖으로 나간 뒤에는 아무것도 없다는 점입니다. 이를 보완해보죠. 단순하게, 튀겨 다니게 하는 걸 만들고, 이번 포스팅을 마치도록 하겠습니다.

public class GameView extends SurfaceView implements SurfaceHolder.Callback {
 
    private final int MAX_TOUCH_COUNT = 100000;
    private MainThread thread;
 
    private int x;
    private int y;
    private float vel_x;
    private float vel_y;
    private int box_size;
 
    private int VIEW_WIDTH;
    private int VIEW_HEIGHT;

변수를 조금 추가했습니다. 생성자 초기화도 해주세요 ~!

vel_x, vel_y 는 상자의 x 방향과 y 방향 속도를 저장하는 데에 쓰일 것입니다. 왜냐하면, 튀긴 다음에는 속도가 바귀어야 하기 때문이죠. 한 가지 말씀드리자면, vel_x, vel_y 는 10 정도로 초기화하는 것이 예쁩니다.

VIEW_WIDTH, VIEW_HEIGHT 는 화면 크기를 저장하는데에 사용될 것입니다.

이제, 벽에 튀기는 연산을 해주는 함수를 만들어 봅시다. 직사각형이기 때문에 매우 간단한데요, x 좌표, y 좌표, 상자 크기, WIDTH, HEIGHT 값을 사용해서 다음과 같이 설정해주시면 됩니다.

    public void check_boundary(){
        if(this.x >= this.VIEW_WIDTH-this.box_size){
            this.x = this.VIEW_WIDTH - this.box_size;
            this.vel_x = - this.vel_x;
        }
        if(this.y >= this.VIEW_HEIGHT-this.box_size){
            this.y = this.VIEW_HEIGHT - this.box_size;
            this.vel_y = - this.vel_y;
        }
        if(this.x <= 0){
            this.x = 0;
            this.vel_x = - this.vel_x;
        }
        if(this.y <= 0){
            this.y = 0;
            this.vel_y = - this.vel_y;
        }
    }

내용을 보면, x 나 y 좌표가 0보다 작으면, 왼쪽이나 위의 벽에 부딪힌 것이므로, 속도의 방향을 뒤집고, 그 반대일 때에도 그리하라는 내용입니다. 주의하실 점은 오른쪽과 아래의 벽은 상자의 크기를 고려하셔야 한다는 점입니다.

또한, 이 경우 this. 은 모두 다 빼셔도 문제 없을 것입니다. python 코딩하던 습관이 나와버린 것이니, 무시해주세요.

위의 함수를 update() 함수에서 실행하면 됩니다.

    public void update(int width, int height){
        VIEW_WIDTH = width;
        VIEW_HEIGHT = height;
        x += vel_x;
        y += vel_y;
        check_boundary();
    }

위처럼, this. 부분은 생략하셔도 됩니다.

자, 이제 통통 튀어다니는 사각형을 만들었습니다 ! (와아아아아)

이제 곰곰히 생각을 보십쇼. 창의력이 중요해지는 순간입니다. 여러분은 이제 뭘 할 수 있나요?

1. 많은 종류의 다각형을 원하는 크기로 그릴 수 있습니다.

2. 다각형에게 원하는 색을 줄 수 있고, 이를 시간에 따라 바꿀 수 있습니다.

3. 다각형의 크기를 원하는 데로 바꿀 수 있습니다.

4. 다각형의 운동을 변화시킬 수 있으며, 특히나 가장자리와의 충돌을 조절할 수 있습니다.

이것만으로도 거의 모든 것을 만들 수 있습니다. 하지만, 분명히 더 필요한 능력들이 존재합니다.

1. 사용자의 입력을 받을 수가 없습니다. - 터치, 키보드 등

2. 사진을 넣고 싶으면, 이를 다각형으로 그려야 하나요? (당연하지만 아닙니다.)

3. 소리를 넣고 싶습니다.

위의 "하지 못하는 것들" 은 차차 다루겠지만, 보시다시피 이제 남은 것은 상상력 뿐입니다. slide 게임의 미래를 결정하는 것은 당신의 상상력 하나에 모든 것이 걸려 있습니다.

1. 색이 변하는 것을 예쁘게 하고 싶다. 배경색도 같이 변화시켜서 예쁘게 하자. - 요새 뜨는 디자인 좋은 게임들의 기초.

2. 터치를 통해 원하는 방향으로 토스하면서 놀자 - 에어 하키와 같은 게임의 기초, objective를 넣어서 게임성을 더 살릴 수도 있음.

3. 크기를 키우거나, 더 많은 다각형을 쉽게 그리고 놀 수 있게 하자 - 그림판의 기초

4. 이것으로 물건을 부수고, 중력 효과 등을 넣어보자 - 앵그리버드의 기초

등등 여러분은 모든 것을 할 수 있습니다. 대신 좋은 아이디어를 낼 사람, 그림을 그릴 사람 등 많은 사람이 필요로 합니다.

실제로 이 draw() 기능을 어떻게 활용하는지 궁금하시다면 여기로 가주세요.

결론: 창의력이 가장 중요하다. 하지만 인맥이 없으면, 이 또한 부질 없다. 코딩 실력은 그저 부수적인 것일 뿐이다.

감사합니다. 이만 줄이겠습니다.