1. 실전 이미지 처리 프로그래밍 Lecture #10

2. 강의 목차 ▶ 실제 게임을 구현하는 데 필요한 화면 구성을 알아본다. ▶ Canvas 클래스와 Graphics 클래스를 이용해 가장 기본적인 게임 화면을 하나씩 직접 구현해 본다. 2Mobile Programming

3. 이미지 처리 개요 (1) ▶ 모바일 게임의 주요 화면 예 3Mobile Programming (e) 게임 로딩 (f) 게임 시작 I (g) 게임 시작 II (h) 게임 시작 III (a) 로고 (b) 공지사항 (c) 게임 타이틀 (d) 메인 메뉴

4. 이미지 처리 개요 (2) ▶ 이미지 처리 관련된 화면 프로그래밍 ▷ (a) 로고 ▷ (b) 공지사항 ▷ (e) 게임 로딩 4Mobile Programming

5. 게임 타이틀 화면 제작 (1) ▶ 로고가 조금씩 나타나는 애니메이션 형식의 로고 화면 ▶ 필요 기능 및 리소스 ▷ 로고 이미지 생성하고 그리기 ▷ 스레드 처리하기 ▷ 색상 및 도형 그리기 ▷ 리소스 : (logo.png 파일 ) 5Mobile Programming

6. 게임 타이틀 화면 제작 (2) ▶ 이미지 생성 ▷ Image 클래스의 createImage( ) 메소드 이용 try { logo_img = Image.createImage("/images/title/logo.png"); // 로고 } catch(IOException e) { System.out.println(" 이미지 파일을 생성할 수 없습니다."); } ▷ 예외 처리 IOException try ~ catch 문 이용 6Mobile Programming

7. 게임 타이틀 화면 제작 (3) ▶ 이미지 그리기 ▷ Graphics 클래스의 drawImage( ) 메소드 이용 g.drawImage(logo_img, getWidth( )/2, getHeight( )/2, Graphics.VCENTER | Graphics.HCENTER); ▶ 스레드 처리하기 ▷ 로고 이미지 반복 처리 ▷ 스레드 처리 과정 ➊ Runnable 인터페이스 구현 [ 예제 8-2] 의 05 행 ➋ 스레드 객체 변수 선언 [ 예제 8-2] 의 08 행 ➌ 스레드 생성 [ 예제 8-2] 의 20 행 ➍ thread.start( ); 호출 [ 예제 8-2] 의 21 행 ➎ run( ) 호출 [ 예제 8-2] 의 23~32 행 7Mobile Programming

8. 게임 타이틀 화면 제작 (4) ➊ Runnable 인터페이스 구현 public class LogoCanvas extends Canvas implements Runnable { ➋ 스레드 객체 변수 선언 private Thread thread; ➌ 스레드 생성 thread = new Thread(this); ➍ thread.start( ); 호출 thread.start( ); ➎ run( ) 호출 public void run( ) { while(true) { try { thread.sleep(200); } catch(InterruptedException e) { System.out.println(e); } repaint( ); // paint( ) 호출 } 8Mobile Programming

9. 게임 타이틀 화면 제작 (5) ▶ 색상 지정하기 g.setColor(255, 255, 255); ▷ 흰색이 지정되어 이후의 그래픽은 모두 흰색으로 처리 ▷ 다른 색으로 처리하고 싶으면 원하는 색상을 다시 지정 ▶ 도형 그리기 g.fillRect(0, 0, getWidth(), getHeight()); ▷ 화면 전체를 흰색으로 채움 9Mobile Programming

10. 게임 타이틀 화면 제작 (6) 10Mobile Programming 01 import javax.microedition.midlet.*; 02 import javax.microedition.lcdui.*; 03 04 public class LoadingMIDlet extends MIDlet { 05 private Display hiddenDisplay = null; 06 private LoadingCanvas hiddenCanvas = null; 07 public LoadingMIDlet( ) { 08 hiddenDisplay = Display.getDisplay(this); 09 hiddenCanvas = new LoadingCanvas( ); 10 } 11 final public void startApp( ){ 12 hiddenDisplay.setCurrent(hiddenCanvas); 13 } 14 final public void pauseApp( ) { } 15 final public void resumeApp( ){ } 16 final public void destroyApp(boolean flag) { 17 } 18 final public void quit( ) { 19 destroyApp(false); 20 notifyDestroyed( ); 21 } 22 } [ 예제 8-1] LoadingMIDlet.java

11. 게임 타이틀 화면 제작 (7) 11Mobile Programming 01 import javax.microedition.lcdui.*; 02 import java.io.*; 03 import javax.microedition.media.*; 04 05 public class LogoCanvas extends Canvas implements Runnable { 06 private int logoCount; 07 private byte gameState; 08 private Thread thread; 09 private Image logo_img; 10 static final byte g_LOGO = 1; 11 12 public LogoCanvas( ) { 13 14 try { 15 logo_img = Image.createImage("/images/title/logo.png"); // 로고 16 } catch(IOException e) { 17 System.out.println(" 이미지 파일을 생성할 수 없습니다."); 18} [ 예제 8-2] LogoCanvas.java

12. 게임 타이틀 화면 제작 (8) 12Mobile Programming 19 gameState = g_LOGO; 20 thread = new Thread(this); 21 thread.start( ); // run( ) 호출 22 } 23 public void run( ) { 24 while(true){ 25 try{ 26 thread.sleep(200); 27 }catch(InterruptedException e){ 28 System.out.println(e); 29 } 30 repaint( ); // paint( ) 호출 31 } 32} 33 public void paint(Graphics g) { 34 if(gameState == g_LOGO) { 35 draw_logo(g); 36 } 37 } [ 예제 8-2] LogoCanvas.java

13. 게임 타이틀 화면 제작 (9) 13Mobile Programming 38 public void draw_logo(Graphics g) { 39 g.setColor(255,255,255); // 흰색 40 g.fillRect(0, 0, getWidth( ), getHeight( )); // 전체 화면을 흰색으로 41 g.drawImage(logo_img, getWidth( )/2, getHeight( )/2, Graphics.VCENTER | Graphics.HCENTER); 42 int x = getWidth( )/2 - logo_img.getWidth( )/2; 43 int y = getHeight( )/2 - logo_img.getHeight( )/2; 44 g.fillRect(x, y, logo_img.getWidth( ), logo_img.getHeight( )/2-logoCount); 45 g.fillRect(x, getHeight( )/2+logoCount, logo_img.getWidth( ), logo_img.getHeight( )/2-logoCount); 46 if(logoCount < logo_img.getHeight( )/2) logoCount+=1; 47 } 48 } [ 예제 8-2] LogoCanvas.java

14. 공지사항 화면 제작 (1) ▶ 공지사항 화면 제작 ▶ 필요 기능 및 리소스 ▷ 이미지 그리기 ▷ 문자열 그리기 ▷ 이벤트 처리 ▷ 리소스 : 배경 이미지 (bg_img.png 파일 ) 14Mobile Programming

15. 공지사항 화면 제작 (2) ▶ 이미지 그리기 bg_img = Image.createImage("/images/title/bg_img.png"); // 배경... g.drawImage(bg_img, getWidth( )/2, getHeight( )/2, Graphics.VCENTER | Graphics.HCENTER); g.setColor(0, 255, 0); g.fillRect(25, 25, getWidth( )-50, getHeight( )-50); ▷ 배경 이미지 생성 ▷ 배경 이미지 그리기 ▷ 색상 지정 : 녹색 ▷ 녹색 사각형 가로 : getWidth( )-50 세로 : getHeight( )-50 ▷ [ 예제 8-3] 의 24 행, 65~67 행 참조 15Mobile Programming

16. 공지사항 화면 제작 (3) ▶ 문자열 그리기 } else if(gameState == g_NOTICE) { draw_notice(g);... public void draw_notice(Graphics g) {... g.drawString(explainText[6], getWidth()/2, y+50, Graphics.TOP | Graphics.HCENTE R); ▷ 예제 8-3 47~48 행, 62 행, 80 행 참조 16Mobile Programming

17. 공지사항 화면 제작 (4) ▶ 이벤트 처리하기 ▷ 명령어 이벤트 처리 소프트 버튼 이용 화면을 이동시키는데 이용 CommandListener 인터페이스를 이용 commandAction() 메소드를 호출해 처리 ▷ 키 이벤트 처리 상하 좌우 버튼 중앙의 FIRE 키 몇 개의 게임 키를 이용 getGameAction() 메소드를 호출해 처리 –keyPressed(int keyCode) –keyReleased(int keyCode) –keyRepeated(int keyCode) 17Mobile Programming

18. 공지사항 화면 제작 (5) ▶ 키 이벤트 처리 예 public void keyPressed(int keyCode) { int gameAction = getGameAction(keyCode); switch(gameAction) { case UP:... break; case DOWN:... break; case LEFT:... break; case RIGHT:... break; default:... break; } ▷ keyPressed() 메소드를 이용 사용자가 선택한 keyCode 값을 가져온다. ▷ getGameAction() 메소드를 이용 keyCode 에 매핑되는 gameAction 값을 가져온다. ▷ gameAction 값에 따라 게임 동작 구현 18Mobile Programming

19. 공지사항 화면 제작 (6) 19Mobile Programming 01 import javax.microedition.lcdui.*; 02 import javax.microedition.media.*; 03 import java.io.*; 04 05 public class NoticeCanvas extends Canvas implements Runnable { 06 private int logoCount; 07 private byte gameState; 08 private Thread thread; 09 private Image logo_img; 10 private Image bg_img; 11 static final byte g_LOGO = 1; 12 static final byte g_NOTICE = 2; 13 static final byte g_LOADING = 3; 14 private Font largeFont; 15 private Font italicFont; 16 String explainText[] = {" ", " 이 게임은 이용 시 ", " 별도의 비용이 ", " 발생하지 않는 단동형 ", " 게임입니다.", " 안심하고 이용하세요.", " 아무 키나 누르세요."}; 17 /* 이벤트 처리 */ 18 private boolean isKeyPressed = false; 19 private int keyCode; 20 [ 예제 8-3] NoticeCanvas.java

20. 공지사항 화면 제작 (7) 20Mobile Programming 21 public NoticeCanvas( ) { 22 try { 23 logo_img = Image.createImage("/images/title/logo.png"); // 로고 24 bg_img = Image.createImage("/images/title/bg_img.png"); // 배경 25 } catch(IOException e) { 26 System.out.println(" 이미지 파일을 생성할 수 없습니다."); 27 } 28 largeFont = Font.getFont(Font.FACE_MONOSPACE, Font.STYLE_PLAIN, Font.SIZE_LARGE); 29 italicFont = Font.getFont(Font.FACE_PROPORTIONAL, Font.STYLE_ITALIC | Font.STYLE_UNDERLINED, Font.SIZE_LARGE); 30 gameState = g_LOGO; 31 thread = new Thread(this); 32 thread.start( ); // run( ) 호출 33 } 34 public void run( ) { 35 while(true) { 36 try { 37 thread.sleep(200); 38 } catch(InterruptedException e) { 39 System.out.println(e); 40 } 41 repaint( ); // paint( ) 호출 42 } 43 } [ 예제 8-3] NoticeCanvas.java

21. 공지사항 화면 제작 (8) 21Mobile Programming 44 public void paint(Graphics g) { 45 if(gameState == g_LOGO) { 46 draw_logo(g); 47 } else if(gameState == g_NOTICE) { 48 draw_notice(g); 49 } 50 } 51 public void draw_logo(Graphics g) { 52 g.setColor(255, 255, 255); // 흰색 53 g.fillRect(0, 0, getWidth( ), getHeight( )); // 전체 화면을 흰색으로 54 g.drawImage(logo_img, getWidth( )/2, getHeight( )/2, Graphics.VCENTER | Graphics.HCENTER); 55 int x = getWidth( )/2 - logo_img.getWidth( )/2; 56 int y = getHeight( )/2 - logo_img.getHeight( )/2; 57 g.fillRect(x, y, logo_img.getWidth( ), logo_img.getHeight( )/2-logoCount); 58 g.fillRect(x, getHeight( )/2+logoCount, logo_img.getWidth( ), logo_img.getHeight( )/2-logoCount); 59 if(logoCount < logo_img.getHeight( )/2) logoCount+=1; 60 else gameState = g_NOTICE; 61 } [ 예제 8-3] NoticeCanvas.java

22. 공지사항 화면 제작 (9) 22Mobile Programming 62 public void draw_notice(Graphics g) { 63 g.setColor(255, 255, 255); 64 g.fillRect(0, 0, getWidth( ), getHeight( )); 65 g.drawImage(bg_img, getWidth( )/2, getHeight( )/2, Graphics.VCENTER | Graphics.HCENTER); 66 g.setColor(0, 255, 0); 67 g.fillRect(25, 25, getWidth( )-50, getHeight( )-50); 68 g.setColor(255, 0, 0); 69 g.setFont(largeFont); 70 g.drawString(explainText[0], getWidth( )/2, 35, Graphics.TOP | Graphics.HCENTER); 71 g.setColor(0, 0, 0); 72 int y = 85; 73 g.setFont(italicFont); 74 for(byte i=1; i < explainText.length-1; i++) { 75 g.drawString(explainText[i], getWidth( )/2, y, Graphics.TOP | Graphics.HCENTER); 76 y+=20; 77 } [ 예제 8-3] NoticeCanvas.java

23. 공지사항 화면 제작 (9) 23Mobile Programming 78 g.setColor(0, 0, 255); 79 g.setFont(largeFont); 80 g.drawString(explainText[6], getWidth( )/2, y+50, Graphics.TOP | Graphics.HCENTER); 81 if(isKeyPressed) { 82 switch(getGameAction(keyCode)) { 83 default: 84 gameState = g_LOADING; 85 } 86 } 87 } 88 public void keyPressed(int keyCode) { 89 isKeyPressed = true; 90 this.keyCode = keyCode; 91 } 92 } [ 예제 8-3] NoticeCanvas.java

24. 게임로딩 화면 제작 (1) ▶ 모바일 게임 화면이 나타나는 순서 ▷ 로고 화면 → 공지사항 → 게임 타이틀 → 메인 메뉴 → 게임 로딩 → 게 임 시작 ▷ 게임 타이틀, 메인 메뉴, 게임 시작 화면 : 9 장에서 설명 ▶ 게임 로딩 화면을 만드는 이유 ▷ 게임을 초기화하는데 시간이 걸린다. 게임 시작 전 변수들의 초기값 설정 관련 이미지 생성 ▷ 지루함을 방지하려고 로딩 화면을 두게 된다. 24Mobile Programming

25. 게임로딩 화면 제작 (2) ▶ 로딩 화면 ▶ 필요 기능 및 리소스 ▷ 로딩 애니메이션 ▷ 리소스 : (loading.png 파일 ) 25Mobile Programming

26. 게임로딩 화면 제작 (3) ▶ 로딩 화면 예 01 public void draw_loading(Graphics g) { 02 g.setColor(0, 255, 0); 03 g.fillRect(0, 0, width, height); 04 g.drawImage(loading_img, width/2, height/2, Graphics.VCENTER | Graphics.HCENTER); 05 int x = width/2 - loading_img.getWidth( )/2; 06 int y = height/2 - loading_img.getHeight( )/2; 07 g.fillRect(x, y, loading_img.getWidth(), loading_img.getHeight()/2 - logoCount); 08 g.fillRect(x, height/2 + logoCount, loading_img.getWidth(), loading_img.getHeight( )/2 - logoCount); 09 if(logoCount < 7) logoCount += 1; 10 else logoCount + =2; 11 if(logoCount >= 18) { 12 gameState = g_NEXT; 13 logoCount = 0; 14 } 15 } 26Mobile Programming 01~15 행 : 로딩 애니메이션 화면 만들기. 02 행 : 현재 색상을 녹색으로 설정한다. 03 행 : 화면 전체를 녹색으로 설정한다. 04 행 : 로딩 이미지를 화면 중앙에 그린다. 05~06 행 : 화면 중앙에 위치한 로딩 이미지의 좌측 상단 X, Y 좌표 값을 계산한다. 07~10 행 : logoCount 값이 0 부터 6 까지는 1 씩, 7 에서 18 까지는 2 씩 증가시키면서 화면 중앙부터 로딩 이미지가 조금씩 나타나게 한다. 11~14 행 : 로딩 이미지가 화면에 다 나타나면, 게임 시작 화면이 나타나도록 gameState 를 g_READY_GO 로 변경한다.

27. 게임로딩 화면 제작 (4) 27Mobile Programming 001 import javax.microedition.lcdui.*; 002 import javax.microedition.media.*; 003 import java.io.*; 004 005 public class GameLoadingCanvas extends Canvas implements Runnable { 006 private int logoCount; 007 private byte gameState; 008 private Thread thread; 009 private Image logo_img; 010 private Image loading_img; 011 private Image bg_img; 012 static final byte g_LOGO = 1; 013 static final byte g_NOTICE = 2; 014 static final byte g_LOADING = 3; 015 static final byte g_NEXT = 4; 016 private Font largeFont; 017 private Font italicFont; 018 String explainText[] = {" ", " 이 게임은 이용 시 ", " 별도의 비용이 ", " 발생하지 않는 단동형 ", " 게임입니다.", " 안심하고 이용하세요.", " 아무 키나 누르세요."}; [ 예제 8-4] GameLoadingCanvas.java

28. 게임로딩 화면 제작 (5) 28Mobile Programming 019 /* 이벤트 처리 */ 020 private boolean isKeyPressed = false; 021 private int keyCode; 022 private int width, height; 023 024 public GameLoadingCanvas( ) { 025 width = getWidth( ); 026 height = getHeight( ); 027 try { 028 logo_img = Image.createImage("/images/title/logo.png"); // 로고 029 bg_img = Image.createImage ("/images/title/bg_img.png"); // 배경 030 loading_img = Image.createImage("/images/menu/loading.png"); // 로딩 031 } catch (IOException e) { 032 System.out.println(" 이미지 파일을 생성할 수 없습니다."); 033 } 034 largeFont = Font.getFont(Font.FACE_MONOSPACE, Font.STYLE_PLAIN, Font.SIZE_LARGE); 035 italicFont = Font.getFont(Font.FACE_PROPORTIONAL, Font.STYLE_ITALIC | Font.STYLE_UNDERLINED, Font.SIZE_LARGE); 036 gameState = g_LOGO; 037 thread = new Thread(this); 038 thread.start( ); // run( ) 호출 039 } [ 예제 8-4] GameLoadingCanvas.java

29. 게임로딩 화면 제작 (6) 29Mobile Programming 040 public void run( ) { 041 while(true) { 042 try { 043 Thread.sleep(200); 044 } catch(InterruptedException e) { 045 System.out.println(e); 046 } 047 repaint( ); // paint( ) 호출 048 } 049 } 050 public void paint(Graphics g) { 051 if(gameState == g_LOGO) { 052 draw_logo(g); 053 } else if(gameState == g_NOTICE) { 054 draw_notice(g); 055 } else if(gameState == g_LOADING) { 056 draw_loading(g); 057 } 058 } [ 예제 8-4] GameLoadingCanvas.java

30. 게임로딩 화면 제작 (7) 30Mobile Programming 059 public void draw_logo(Graphics g) { 060 g.setColor(255, 255, 255); // 흰색 061 g.fillRect(0, 0, getWidth( ), getHeight( )); // 전체 화면을 흰색으로 062 g.drawImage(logo_img, getWidth( )/2, getHeight( )/2, Graphics.VCENTER | Graphics.HCENTER); 063 int x = getWidth( )/2 - logo_img.getWidth( )/2; 064 int y = getHeight( )/2 - logo_img.getHeight( )/2; 065 g.fillRect(x, y, logo_img.getWidth( ), logo_img.getHeight( )/2-logoCount); 066 g.fillRect(x, getHeight( )/2+logoCount, logo_img.getWidth( ), logo_img.getHeight( )/2-logoCount); 067 if(logoCount < logo_img.getHeight( )/2) logoCount+=1; 068 else gameState = g_NOTICE; 069 } 070 public void draw_notice(Graphics g) { 071 g.setColor(255, 255, 255); 072 g.fillRect(0, 0, getWidth( ), getHeight( )); 073 g.drawImage(bg_img, getWidth( )/2, getHeight( )/2, Graphics.VCENTER | Graphics.HCENTER); 074 g.setColor(0, 255, 0); 075 g.fillRect(25, 25, getWidth( )-50, getHeight( )-50); 076 g.setColor(255, 0, 0); [ 예제 8-4] GameLoadingCanvas.java

31. 게임로딩 화면 제작 (8) 31Mobile Programming 077 g.setFont(largeFont); 078 g.drawString(explainText[0], getWidth( )/2, 35, Graphics.TOP | Graphics.HCENTER); 079 g.setColor(0, 0, 0); 080 int y = 85; 081 g.setFont(italicFont); 082 for(byte i=1; i < explainText.length-1; i++) { 083 g.drawString(explainText[i], getWidth( )/2, y, Graphics.TOP | Graphics.HCENTER); 084 y+=20; 085 } 086 g.setColor(0, 0, 255); 087 g.setFont(largeFont); 088 g.drawString(explainText[6], getWidth( )/2, y+50, Graphics.TOP | Graphics.HCENTER); 089 if(isKeyPressed) { 090 switch(getGameAction(keyCode)) { 091 default: 092 gameState = g_LOADING; 093 } 094 } 095 } [ 예제 8-4] GameLoadingCanvas.java

32. 게임로딩 화면 제작 (9) 32Mobile Programming 096 public void draw_loading(Graphics g) { 097 g.setColor(0, 255, 0); 098 g.fillRect(0, 0, width, height); 099 g.drawImage(loading_img, width/2, height/2, Graphics.VCENTER|Graphics.HCENTER); 100 int x = width/2 - loading_img.getWidth( )/2; 101 int y = height/2 - loading_img.getHeight( )/2; 102 g.fillRect(x, y, loading_img.getWidth( ), loading_img.getHeight( )/2 - logoCount); 103 g.fillRect(x, height/2+logoCount, loading_img.getWidth( ), loading_img.getHeight( )/2-logoCount); 104 if(logoCount < 7) logoCount += 1; 105 else logoCount+=2; 106 if(logoCount >= 18) { 107 gameState = g_NEXT; 108 logoCount = 0; 109 } 110 } 111 public void keyPressed(int keyCode) { 112 isKeyPressed = true; 113 this.keyCode = keyCode; 114 logoCount = 0; 115 } 116 } [ 예제 8-4] GameLoadingCanvas.java