저수준 사용자 인터페이스 프로그래밍 Lecture #6

강의 목차 저수준 API의 구조를 이해하고 저수준 사용자 인터페이스를 구현하는 방법을 알아본다. 저수준의 사용자 인터페이스를 지원하는 Canvas 클래스를 알아본다. 2차원 그래픽 기능을 제공하는 Graphics 클래스를 알아본다. Graphics 클래스에서 제공하는 색상 지정, 폰트 지정, 좌표 이동, 도형/문자열/이미지 그리기, 클리핑 기능을 알아본다. Mobile Programming

Javax.microedition.lcdui 저수준 사용자 인터페이스 (1) 저수준 사용자 인터페이스 프로그래밍 Canvas 클래스 상속 Graphics 클래스 이용 자유로운 그래픽 처리 가능 키 패드의 숫자 키를 이용해 이벤트 처리 가능 Command Graphics Displayable Display Screen Canvas TextBox List Alert Form Javax.microedition.lcdui Javax.microedition.lcdui.gam GameCanvas [그림 5-1] 미들렛 API 구조 Mobile Programming

저수준 사용자 인터페이스 (2) 모바일 게임의 일반적인 구성도 게임실행  회사 로고  공지사항  게임 타이틀이 사운드와 함께 나타난다. 게임 타이틀  메인 메뉴 화면 메인 메뉴 화면 게임시작, 게임설명, 랭킹보기 등의 항목이 제공 게임시작 항목을 선택하면 게임 초기 화면으로 들어간다. 게임 초기 화면 사용자와 상호작용 시간, 점수 등의 게임관련 정보가 함께 제공 게임 진행 주어진 조건을 만족하면 다음 단계로 그렇지 못하면 게임이 종료 Mobile Programming

저수준 사용자 인터페이스 (3) 모바일 게임 구성 예: 게임 START 회사 로고 공지 사항 게임 타이틀 메인 메뉴 게임 종료 게임 시작 게임 설명 랭킹보기 환경 설정 게임 문의 혼자 하기 둘이 하기 게임 진행 게임 오버 게임 조작 정보 이용료 네트워크 랭킹 사운드 Y/N 진동 Y/N Mobile Programming

Canvas 클래스 (1) Canvas 클래스 키 이벤트를 처리하고 디스플레이로 이동하여 그래픽을 출력하는데 사용하는 기본 클래스 응용 프로그램의 그래픽 출력 지원 응용 프로그램으로의 입력 이벤트 전달 Displayable 클래스 상속 주요 메소드 그래픽 출력 호출 paint() 키 및 포인터 입력 이벤트 처리 keyPressed() keyepeated() keyReleased() 등 Mobile Programming

Canvas 클래스 (2) 상하 좌우 버튼을 이용한 이벤트 처리 프로그램 검은색 사각형 커서를 화면 중앙에 출력하고 상하좌우 버튼 입력을 받아 각 방향으로 3픽셀씩 이동시키는 프로그램 그래픽 출력 기반의 프로그램 2개의 파일로 구성 MIDlet 클래스를 상속받는 클래스 Canvas 클래스를 상속받는 클래스 실행 결과  Mobile Programming

Canvas 클래스 (3) 상하 좌우 버튼을 이용한 이벤트 처리 프로그램 (계속) 01 import javax.microedition.midlet.*; 02 import javax.microedition.lcdui.*; 03 04 public class CanvasTestMIDlet extends MIDlet implements CommandListener { 05 private Command exit_cmd; 06 07 public CanvasTestMIDlet() { 08 exit_cmd = new Command("EXIT", Command.EXIT, 1); 09 } 10 public void startApp() { 11 PlayGroundCanvas ground = new PlayGroundCanvas(); 12 ground.addCommand(exit_cmd); 13 ground.setCommandListener(this); 14 Display display = Display.getDisplay(this); 15 display.setCurrent(ground); 16 } 17 public void pauseApp() { } 18 public void destroyApp(boolean unconditional) { } 19 public void commandAction(Command cmd, Displayable s) { 20 if(cmd == exit_cmd) { 21 destroyApp(true); 22 notifyDestroyed(); 23 } 24 } 25 } [예제 5-2]PlayGroundCanvas.java Mobile Programming

Canvas 클래스 (4) 상하 좌우 버튼을 이용한 이벤트 처리 프로그램 (계속) 01 import javax.microedition.lcdui.*; 02 public class PlayGroundCanvas extends Canvas { 03 int x, y; 04 public PlayGroundCanvas() { 05 x = getWidth() / 2; 06 y = getHeight() / 2; 07 } 08 public void paint(Graphics g) { 09 // 배경을 흰색(0xffffff)으로 한다. 10 g.setColor(0xffffff); 11 g.fillRect(0, 0, getWidth(), getHeight()); 12 // 검은색(0x000000)으로 사각형을 그린다. 13 g.setColor(0x000000); 14 g.fillRect(x-3, y-3, 20, 20); 15 } 16 public void keyPressed(int keycode) { 17 switch(getGameAction(keycode)) { 18 case LEFT: x -= 3; break; 19 case RIGHT: x += 3; break; 20 case UP: y -= 3; break; 21 case DOWN: y += 3; break; 22 } 23 repaint(); 24 } 25 } [예제 5-2] PlayGroundCanvas.java Mobile Programming

Canvas 클래스 주요 메소드 (1) 키 입력 관련 메소드 키 이름의 종류 게임 동작으로 제공되는 키 이름 getKeyName(int nKeyCode) – 키 이름의 문자열 반환 getKeyCode(iny gameAction) – 게임 동작의 키 코드값 반환 getGameAction(int nKeyCode) – 키 코드의 게임 동작값 반환 키 이름의 종류 KEY_NUM0, KEY_NUM1, KEY_NUM2, KEY_NUM3, KEY_NUM4, KEY_NUM5, KEY_NUM6, KEY_NUM7, KEY_NUM8, KEY_NUM9, KEY_STAR, KEY_POUND 게임 동작으로 제공되는 키 이름 UP, DOWN, LEFT, RIGHT, FIRE, GAME_A, GAME_B, GAME_C, GAME_D Mobile Programming

Canvas 클래스 주요 메서드 (2) 게임 동작과 키 이름 맵핑 화살표 키와 게임 관련 이벤트가 필요한 프로그램에서의 이식성을 고려하여 게임 동작을 맵핑하여 지원 Mobile Programming

Canvas 클래스 주요 메서드 (3) 키 데모 프로그램 선택된 키에 대한 이름, 문자, 코드번호, 게임동작을 표시 01 import javax.microedition.lcdui.*; 02 03 class KeyDemoCanvas extends Canvas { 04 int keyCode; 05 public void paint(Graphics g) { 06 g.setGrayScale(255); 07 g.fillRect(0, 0, getWidth(), getHeight()); 08 g.setGrayScale(0); 09 int y = 10; 10 y = write(g, y, "선택한 키의 주요 정보를 알려줍니다."); 11 y = write(g, y, "아무키나 선택해 보세요!!"); 12 y = write(g, y, "====================="); 13 if(keyCode == 0) return; 14 y = write(g, y, "선택한 키의 이름 : "+getKeyName(keyCode)); 15 y = write(g, y, "문자 : "+ ((keyCode < 0) ? "지원안함" : ""+(char) keyCode)); 16 y = write(g, y, "코드번호 : " + keyCode); 17 18 String gameAction; 19 switch(getGameAction(keyCode)) { 20 case LEFT: gameAction = "LEFT"; 21 break; 22 case RIGHT: gameAction = "RIGHT"; 23 break; [예제 5-3] class KeyDemoCanvas Mobile Programming

Canvas 클래스 주요 메서드 (4) 키 데모 프로그램 (계속) [예제 5-3] class KeyDemoCanvas 24 case UP: gameAction = "UP"; 25 break; 26 case DOWN: gameAction = "DOWN"; 27 break; 28 case FIRE: gameAction = "FIRE"; 29 break; 30 case GAME_A: gameAction = "GAME_A"; 31 break; 32 case GAME_B: gameAction = "GAME_B"; 33 break; 34 case GAME_C: gameAction = "GAME_C"; 35 break; 36 case GAME_D: gameAction = "GAME_D"; 37 break; 38 default: gameAction = "지원안함"; 39 } 40 write(g, y, "게임동작 : "+gameAction); 41 } 42 public void keyPressed(int keyCode) { 43 this.keyCode = keyCode; 44 repaint(); 45 } 46 public int write(Graphics g, int y, String s) { 47 g.drawString(s, 10, y, Graphics.LEFT|Graphics.TOP); 48 return y + g.getFont().getHeight(); 49 } 50 } [예제 5-3] class KeyDemoCanvas Mobile Programming

Graphics 클래스 (1) Graphics 클래스 2차원 그래픽 기능을 제공 주요 기능 색상 지정 폰트 지정 좌표 값 평행 이동 도형 그리기 & 채우기 문자열 출력 이미지 출력 클리핑 Mobile Programming

Graphics 클래스 (2) 색상 지정하기 예: g.setColor(255, 255, 255) g.setColor(0xffffff) g.setColor(16777215) g.setColor(g.getDisplayColor(0x00ff00)); // 녹색 Mobile Programming

Graphics 클래스 (3) 색상 처리 프로그램: [예제 5-4] ColorTestCanvas.java 01 import javax.microedition.lcdui.*; 02 public class ColorTestCanvas extends Canvas { 03 int color; 04 public void paint(Graphics g) { 05 g.setColor(255, 0, 0); // 빨간색 06 g.fillRect(getWidth()/2-110, getHeight()/2-120, 2240, 240); 07 color = g.getColor(); 08 System.out.println("getColor = " + color); 09 System.out.println("getDisplayColor = " + g.getDisplayColor(color)); 10 11 g.setColor(g.getDisplayColor(0x00ff00)); // 녹색 12 g.fillRect(getWidth()/2-80, getHeight()/2-80, 160, 160); 13 color = g.getColor(); 14 System.out.println("getColor = " + color); 15 System.out.println("getDisplayColor = " + g.getDisplayColor(0x00ff00)); 16 17 g.setColor(255); // 파란색 18 g.fillRect(getWidth()/2-40, getHeight()/2-40, 80, 80); 19 color = g.getColor(); 20 System.out.println("getColor = " + color); 21 System.out.println("getDisplayColor = " + g.getDisplayColor(255)); 22 } 23 } [예제 5-4] ColorTestCanvas.java Mobile Programming

Graphics 클래스 (4) 폰트 지정하기 관련 메소드 폰트 속성 지정 Font largeFont = Font.getFont(Font.FACE_MONOSPACE, Font.STYLE_BOLD|Font.STYLE_ITALIC, Font.SIZE_LARGE); g.setFont(largeFont); Mobile Programming

Graphics 클래스 (5) 폰트 처리 프로그램: 예제 5-5 참조 실행 결과 ➊ ➋ ➌ ➍ Mobile Programming

Graphics 클래스 (6) 좌표값 평행 이동하기 관련 메소드 예: g.translate(100, 100); (0, 0) (0, 0) (-100, -100) g.translate(100, 100); int xp = g.getTranslateX(); int yp = g.getTranslateY(); Mobile Programming

Graphics 클래스 (7) 도형 그리기와 채우기 관련 메소드 Mobile Programming

Graphics 클래스 (8) 도형 그리기와 채우기 drawLine() public void drawLine(int x1, int y1, int x2, int y2) setStrokeStyle() 선의 종류 지정 Graphics.SOILD - 실선 Grahics.DOTTED – 점선 예: g.drawLine(20, 50, 200, 50); g.setStrokeStyle(Graphics.DOTTED); g.drawLine(20, 100, 200, 100); Mobile Programming

Graphics 클래스 (9) 도형 그리기와 채우기 drawRect() / fillRect() drawRoundRect() / fillRoundRect() g.drawRect(10, 30, 100, 100); g.setStrokeStyle(Graphics.DOTTED); g.drawRect(120, 30, 100, 100); g.fillRect(10, 150, 100, 100); g.drawRoundRect(10, 50, 200, 200, 70, 100); Mobile Programming

Graphics 클래스 (10) 도형 그리기와 채우기 drawArc() / fillArc() fillTriangle() g.drawArc(5, 5, 220, 270, 10, 135); g.drawArc(5, 5, 220, 270, 0, 360); g.fillTriangle(120, 30, 10, 250, 230, 250); Mobile Programming

Graphics 클래스 (11) 다양한 도형 그리기 프로그램 : 예제 5-6 참조 실행 결과 Mobile Programming

Graphics 클래스 (12) 문자열과 이미지 출력 관련 메소드 Mobile Programming

Graphics 클래스 (13) 문자열 출력 g.drawString("아무키나 누르세요", getWidth()/2, 250, Graphics.TOP | Graphics.HCENTER); g.drawSubstring("아무키나 누르세요", 5, 4, getWidth()/2, 270, Graphics.TOP | Graphics.HCENTER); Mobile Programming

Graphics 클래스 (14) 이미지 출력 drawImage( ) 예: public void drawImage(Image img, int x, int y, int anchor) img : 화면에 출력되는 이미지 x : 앵커 포인트의 x 좌표 값 y : 앵커 포인트의 y 좌표 값 anchor : 이미지를 화면에 배치할 앵커 포인트 예: try { bg_img = Image.createImage("/images/logo/00.png"); } catch(IOException e) { e.printStackTrace(); } g.drawImage(bg_img, getWidth()/2, getHeight()/2, Graphics.VCENTER | Graphics.HCENTER); Mobile Programming

Graphics 클래스 (15) 앵커 포인트 문자열 이미지 Mobile Programming

Graphics 클래스 (16) 문자열 그리기 프로그램 [예제 5-7] DrawStringCanvas.java 06 String explainText[] = {"< 이용안내 >", "이 게임은 이용시", "별도의 비용이", "발생하지 않는 단독형", "게임입니다.", "안심하고 이용하세요.", "아무키나 누르세요"}; ….. 11 public void paint(Graphics g) { 12 g.setColor(255, 255, 255); 13 g.drawRect(0, 0, getWidth(), getHeight()); 14 g.setColor(255, 0, 0); 15 g.setFont(largeFont); 16 g.drawString(explainText[0], getWidth()/2, 35, Graphics.TOP | Graphics.HCENTER); 17 g.setColor(0, 0, 0); 18 int y = 85; 19 g.setFont(italicFont); 20 for(byte i=1; i < explainText.length-1; i++) { 21 g.drawString(explainText[i], getWidth()/2, y, 22 y+=20; 23 } 24 g.setColor(0, 0, 255); 25 g.setFont(largeFont); 26 g.drawString(explainText[6], getWidth()/2, y+50, 27 } 28 } [예제 5-7] DrawStringCanvas.java Mobile Programming

Graphics 클래스 (17) 이미지 그리기 프로그램 : 예제 5-8 참조 실행 결과 Mobile Programming

Graphics 클래스 (18) 클리핑(Clipping) 특정 부분만 화면에 출력 관련 메소드 Mobile Programming

Graphics 클래스 (19) 클리핑을 이용한 동영상 프로그램 : 예제 5-9 참조 실행 결과 1 2 3 10 1 2 3 10 Mobile Programming