그 많았던 게임들은 다 어디로 갔을까?
여러분은 ‘플래시 게임’ 기억하시나요? Z세대라면 누구나 주니어 네이버, 야후옥, 키즈짱 등 플래시 게임 사이트를 한 번쯤은 이용해보셨을 겁니다.
출처: 와플래시 게임 아카이브, 그런데 Z세대 어린 시절을 함께한 플래시 게임은 언제부터인가 전혀 보이지 않게 됐는데요. 그 이유를 간단하게 살펴보겠습니다. 플래시 게임은 대부분 ‘어도비 플래시’라는 프로그램으로 제작됐는데요. ‘어도비 플래시’는 게임 개발을 위한 ‘어도비 플래시 프로페셔널’과 게임 실행을 위한 ‘어도비 플래시 플레이어’ 두 프로그램의 총칭입니다. 그런데 어도비 플래시는 메모리를 많이 차지했고 이에 따라 보안에 매우 취약하다는 문제로 2021년부터 서비스를 종료하게 됐습니다. 게임을 개발할 수도, 실행할 수도 없게 된 것입니다.
어도비 플래시 플레이어
누구나 쉽고 빠르게 코딩으로 게임을 만드는 방법: 스크래치 어도비 플래시의 빈자리는 HTML5로 대체됩니다. HTML5를 통해 메모리 차지를 줄여 보안 문제를 해결함과 동시에 모바일 환경에서도 이용할 수 있게 되었습니다. 스크래치도 HTML5를 기반으로 게임을 만들 수 있는 프로그래밍 언어입니다.
프로그래밍 언어? 코딩? HTML? 뭐가 뭔지 전혀 몰라도 걱정하지 마세요. 스크래치는 교육을 위해 만들어진 프로그래밍 언어로 명령을 블록처럼 연결하는 코딩 방식을 사용합니다. 얼마나 쉬운지 초등학생 코딩 교육에 쓰일 정도예요. 스크래치를 통해서 그리고 이 글을 통해서 여러분도 쉽게 게임을 만들 수 있습니다.
10분이면 게임을 만들어볼게.그럼 스크래치를 이용해서 직접 게임을 만들어볼까요? 저희가 만들어 볼 게임은 ‘장애인 회피 게임’입니다. 하늘에서 떨어지는 장애물을 키보드 조작으로 피하는 아주 간단한 게임을 만들어 봅시다.
단계 1: 스크래치 파악의 본격적인 게임 제작에 앞서 스크래치의 기본 기능을 살펴보겠습니다. 먼저 스크래치 플랫폼(https://www.scratch.mit.edu/))에 접속합니다. 게임을 저장할 수 있도록 회원가입과 로그인을 하는 것이 좋습니다. 그리고 홈페이지 상단 바의 작성을 클릭합니다.
첫 번째 영역은 코드, 모양, 소리의 영역입니다. 코드 영역에는 우리가 사용하는 명령 블록이 있습니다. 코드 유형마다 색상이 다릅니다. 모양, 소리의 영역을 통해 그림의 모양을 직접 편집하거나 소리를 조절할 수 있습니다. 두 번째 영역은 조합 영역입니다.
두 번째 영역은 조합 영역입니다. 코드 영역에서 블록을 드래그하여 조합합니다.
세 번째 영역은 미리보기 영역입니다. 게임 제작 진행 상황을 볼 수 있습니다. 상단의 녹색 깃발을 누르면 게임이 시작되고 빨간 버튼을 누르면 게임이 정지됩니다.
마우스로 직접 그림의 위치를 이동시킬 수도 있습니다.
마지막 영역은 스프라이트 영역과 스테이지 영역입니다. 여기서 스프라이트란 게임에 포함된 그림 파일을 의미합니다. 그리고 무대는 게임의 배경을 의미합니다.
여기서는 스프라이트를 선택, 삭제하고 스프라이트의 이름, 위치, 보이는지 여부, 크기, 방향을 설정할 수 있습니다.
오른쪽 하단의 고양이 아이콘에 마우스를 올려놓으면 스프라이트 창이 나타납니다. 위에서 내 컴퓨터에서 이미지 파일을 스프라이트에 업로드하기, 스크래치가 제공하는 랜덤 서프라이즈 스프라이트 꺼내기, 스프라이트 그리기, 그리고 스크래치가 제공하는 무료 스프라이트 선택 기능입니다.
고양이 아이콘 바로 옆에 있는 사진 아이콘에 마우스를 올려놓으면 배경 창이 나타납니다. 스프라이트 창과 마찬가지로 배경을 업로드하거나 깜짝 배경 꺼내기, 그리기, 그리고 선택하는 기능이 있습니다.
만약 게임에 필요한 이미지 파일을 직접 입수하기 어렵다면 이렇게 스크래치로 무료로 제공하는 스프라이트나 배경을 이용하면 됩니다.
스크래치의 기본 기능을 익혔으니 본격적으로 게임 개발에 들어가 볼까요?
게임 규칙을 설정하는 게임 규칙을 설정해 봅시다. 내가 설정한 규칙은 다음과 같습니다.
(1) 시작 버튼을 눌러 게임을 시작합니다.(2)하늘에서는 1초에 하나씩 장애물이 떨어집니다. 장애물은 바닥에 닿아서 사라집니다.(3)←→ 키보드를 이용하여 캐릭터를 이동시킵니다.(4)장애물이 캐릭터에 닿으면 게임이 종료됩니다.
이 게임에서 필요한 요소는 장애물, 캐릭터, 바닥, 그리고 게임의 배경 4가지입니다. 게임을 만들기 위해 배경이 투명한 PNG 이미지 파일을 각각 준비해주세요. 만약 이미지 파일이 없다면 스크래치로 기본적으로 제공하는 스프라이트와 배경을 이용하기만 하면 됩니다.
나는 장애물 화살과 루탄이 캐릭터, 그리고 녹색 바닥과 배경을 준비해 주었습니다.
스프라이트 & 배경 업로드 (1) 먼저 기본적으로 추가된 고양이(스프라이트1)를 삭제해 줍니다. 해당 스프라이트 옆의 휴지통을 누르면 삭제됩니다.
(2) 그럼 캐릭터, 화살, 바닥을 부르죠. 스프라이트 창에서 스프라이트를 업로드하여 컴퓨터에 저장된 이미지 파일을 스프라이트로 가져옵니다.
이미지 파일이 없는 경우 스프라이트 셀렉션에서 스크래치가 제공하는 이미지를 불러오십시오.
스프라이트가 너무 크거나 작을 경우 스프라이트 영역에서 해당 스프라이트를 선택하여 형상 영역에서 편집합니다.
(3) 백그라운드도 백그라운드에서 스프라이트와 같은 방법으로 읽습니다. 가져온 배경이 창의 크기와 맞지 않으면 셰이프 영역에서 편집해 줍니다.
(4) 미리보기 영역에서 스프라이트를 이동합니다.
코드 블록 조합하자 대망의 코딩 단계입니다. 각 스프라이트별 역할을 생각하면서 필요한 블록을 조합해 봅시다.
- 캐릭터(루탄)는 게임을 시작하면 키보드 조작에 의해 양쪽으로 움직입니다.
- (1) 게임 시작 : 게임 시작 스프라이트를 따로 만들지 않아서 미리보기 영역에 나오는 녹색 깃발을 누르면 게임 시작으로 설정해 줍니다. 따라서 녹색 깃발을 클릭했을 때 블록을 놓습니다.
- (2) 회전 방식의 제한: 캐릭터는 양쪽으로만 움직입니다. 위아래로 움직이면 게임이 제대로 작동하지 않을 거예요. 따라서 회전 방식을 좌-우로 결정하는 블록을 놓습니다.
- (3) 캐릭터 이동: 캐릭터는 게임이 끝날 때까지 계속 움직여야 합니다. 따라서 무한 반복 블록을 놓습니다. 무한 반복 블록이 없다면 한 번만 움직일 것입니다.
- 캐릭터는 좌우 방향 키에 따라 조작됩니다. 그래서 만약 왼쪽 화살표 키를 눌렀습니까? (가) 그렇다면 블록에 x좌표를 -5만 치환하는 블록을 맞춰 둡니다.
- 캐릭터 스프라이트 원본은 왼쪽을 보고 있습니다. 왼쪽으로 이동할 때 왼쪽을 볼 수 있도록 원래 그림의 방향인 90도 방향 표시 블록을 넣습니다.
- 만약 원본이 오른쪽을 보고 있다면 -90도 방향 표시 블록을 넣어주세요.
- 왼쪽도 마찬가지로 만약 오른쪽 화살표 키를 눌렀는가? (가)라면 블록에 x좌표를 5만 전환을 맞춰 둡니다. 캐릭터 스프라이트 원본이 왼쪽을 보고 있으니 -90도 방향을 표시 블록을 넣고 오른쪽을 보도록 하겠습니다. – 90도로 좌우 반전시키는 것입니다.
- 만약 원본이 오른쪽을 보고 있다면 90도 방향 표시 블록을 넣어주세요.
미리보기 영역을 통해서 중간 점검을 해볼까요? 녹색 깃발을 누르고 좌우 방향 키를 누르면 캐릭터가 이동하는 모습을 확인할 수 있습니다.
2. 장애물(화살) 장애물은 게임을 시작하면 하늘에서 무작위로 떨어집니다. 장애물이 바닥에 닿으면 게임이 계속되지만 캐릭터에 닿으면 게임이 종료됩니다.
(1) 숨기기: 우리가 스프라이트를 업로드하기 위해 놓은 장애물이 계속 위에 떠 있으면 곤란하네요. 녹색 깃발을 클릭했을 때 블록에 숨기는 블록을 맞춰 게임을 시작하면 장애물이 숨도록 설정합니다.(2)복제하기: 장애물을 여러 개 떨어뜨리기 위해서는 장애물을 계속 복제해야 합니다. 따라서 무한 반복 블록에 자신의 복제 블록을 맞춥니다. 1초에 1회, 정기적으로 복제되도록 1초 기다리는 블록을 놓습니다.
(3) 복제 후: 복제된 장애물을 코딩하기 위해 복제되었을 때 블록을 분리합니다. 복제된 장애물은 랜덤 장소에서 떨어집니다. 따라서 X:-230에서 230 사이의 난수 y:140()로 이동하는 블록을 두고 장애물을 이동시킵니다. 그리고 숨겨둔 장애물을 보여주기 위해 보이는 블록을 놓습니다.그럼 장애물을 떨어뜨려봅시다. 장애물은 게임이 끝날 때까지 계속 떨어집니다. 따라서 무한 반복 블록에 y 좌표를 -5만 바꾸는 블록을 맞춥니다.장애물이 캐릭터에 닿으면 게임이 끝납니다. 그래서 만약 캐릭터(루탄이)를 건드렸는가?(가)라면 블록에 멈추거나 모두 블록을 맞춰 둡니다.만약 장애물이 캐릭터에 닿지 않고 바닥까지 내려오면 바닥에 닿은 장애물은 사라져 버립니다. 그렇지 않으면 바닥에 화살이 계속 쌓입니다. 그러니까, 만약 바닥에 닿았습니까? (가) 그렇다면, 블록에 이 복제 삭제 블록을 맞추어 둡니다.
이것으로 게임이 완성되었습니다. 어때요, 정말 쉽지 않아요?
종료하려면 게임의 모든 코딩이 끝났습니다. 상단 바에서 게임 이름을 변경하고 게임을 컴퓨터 파일로 저장할 수 있습니다. 그럼 프로젝트 페이지를 볼까요?
프로젝트 페이지에서는 게임의 사용 방법과 참고 사항 및 참가자를 입력할 수 있습니다. 그리고 완성된 게임의 링크를 복사하여 공유할 수 있습니다.
게임 개발 너도 할 수 있어.클러치를 통해 코딩을 전혀 몰랐던 여러분도 추억의 게임을 개발할 수 있게 되었습니다. 게임을 직접 구성하는 만큼 코딩 기초를 공부하기에는 안성맞춤입니다. 장애물 회피 게임이 지루하다면 다른 게임도 쉽게 만들 수 있습니다. 스크래치 사이트에서는 다양한 게임, 애니메이션 등을 만드는 튜토리얼(https://scratch.mit.edu/projects/716936514/editor))을 무료로 제공하고 있습니다.하지만 본래 목적이 ‘교육용’인 만큼 섬세한 프로그래밍은 어렵다는 한계가 있습니다. 스크래치를 통해 게임 개발에 흥미를 느끼신 분들께는 파이썬 공부를 추천드리며, 파이썬은 다른 언어들에 비해 비교적 문법이 쉽고 간결하여 코딩 초보자들에게 적합합니다. 게다가 스크래치를 접한 분이라면 비교적 쉽게 공부할 수 있을 것 같습니다.
아직도 코딩, 게임 개발이 어렵게 느껴지시나요? 세상에는 어려운 일이 없습니다. 모르는 게 있을 뿐이에요. 코딩을 모르는 여러분 스크래치와 함께 시작해 보세요.
국비지원으로 게임개발 시작 >> 내일배움단 게임개발종합반