Getting Started >> A first app (Kivy tutorial)

https://kivy.org/docs/tutorials/pong.html

kivy 홈페이지에서 튜토리얼을 제공한다. kivy에서 설명하고 있는 a first app은 Pong Game이다. 볼을 쳐서 상대편 벽에 닿게 하면 승! 하는 게임이다. 이 first app을 만들면서 kivy app 개발에서 두고두고 써먹을 수 있는 정교하고 유용한 개념들을 배울 수 있다고 소개하고 있다.

튜토리얼을 시작해보자!

튜토리얼 시작 전 체크리스트!
1. Kivy install
2. You know how to run a basic kivy application. See the Create an application.

if you have read the programming guide, and understand both basic Widget concepts (A Simple Paint App) and basic concepts of the kv language (Kv language), you can probably skip the first 2 steps and go straight to step 3.

나는 체크리스트 1,2번 중 2번을 해야 했고, 아래 설명대로 programming guide를 읽지 않았기 때문에 모든 step을 거쳐야한다.

https://kivy.org/docs/guide/basic.html#create-an-application

import kivy
kivy.require('1.0.6') # replace with your current kivy version !


from kivy.app import App
from kivy.uix.label import Label




class MyApp(App):


    def build(self):
        return Label(text='Hello world')




if __name__ == '__main__':
    MyApp().run()

위 코드를 실행시키는 것이  목표였다. 그런데 내가 깐 kivy의 version을 몰라서 구글에 'how to know my kivy version'

을 검색했다. 

import kivy

print(kivy.__version__)

위 코드를 pycharm의 임시 프로젝트에 실행해 보니 1.10.0 이라고 나왔다.

어쨌든 첫번째 create-an-application을 실행해 보니

위와 같은 창이 떴다. 

문서에서 Kivy App Life Cycle을 다이어그램으로 소개하고, 코드를 라인별로 설명한다.

4. from kivy.app import App
만들고자 하는 앱이 App 이라는 클래스를 상속받아야 한다. App이라는 클래스는 kivy를 설치한 경로에 app.py라는 이름으로 존재한다. 참고로 그 app.py 파일을 열어서 코드를 읽어보길 권하고 있는데 파일 열자마자 코드가 너무 많아서 놀랐다... Kivy는 python 기반이고 문서화로 Sphinx를 사용하기 때문에 각각의 클래스에 대한 설명이 실제 그 python file에 적혀있다. (Sphinx는 Python Documentation Generator의 한 종류인 것 같은데 나중에 더 자세히 알아봐야 겠다.) python 코드가 아직 눈에 잘 들어올리가 없다. 우선 파일을 닫아버렸다. python 기본 문법부터 시급히 익혀야 겠다고 느꼈다.

5. from kivy.uix.label import Label
여기서 주목해야 할 것은 packages/classes가 적힌 순서이다. uix 모듈은 레이아웃과 위젯같은 user interface 요소를 구성하는 섹션이다.

8. class MyApp(App):

이 Kivy App의 Base class를 정의하는 부분이다. MyApp이라는 클래스 이름은 바꿀 수 있다.

10.    def build(self):

11.        return Label(text='Hello world')

Kivy life cycle을 보면 build()라고 적혀있는 요소를 볼 수 있다. 이 함수는 Root Widget을 초기화하고 반환한다. 11번 라인에서 알 수 있뜻이 'Hello World' 텍스트와 함께 라벨을 초기화하고 그 인스턴스를 반환한다. 이 라벨은 이 앱의 Root Widget이 된다.

14. if __name__ == '__main__':
15.     MyApp().run()

이 코드를 통해서 MyApp은 초기화되고 run() 메소드가 호출된다. Kivy application을 초기화하고 시작한다.

                                                                                                                    

이어서 위 코드를 이용해서 user name과 password를 입력하는 화면이 나타나는 어플리케이션 예제가 등장한다.

from kivy.app import App
from kivy.uix.gridlayout import GridLayout
from kivy.uix.label import Label
from kivy.uix.textinput import TextInput




class LoginScreen(GridLayout):


    def __init__(self, **kwargs):
        super(LoginScreen, self).__init__(**kwargs)
        self.cols = 2
        self.add_widget(Label(text='User Name'))
        self.username = TextInput(multiline=False)
        self.add_widget(self.username)
        self.add_widget(Label(text='password'))
        self.password = TextInput(password=True, multiline=False)
        self.add_widget(self.password)




class MyApp(App):


    def build(self):
        return LoginScreen()




if __name__ == '__main__':
    MyApp().run()

결론적으로 위와 같은 화면이 출력되었다.

9~17 라인을 보고 코드의 의미를 어느 정도 추측할 수 있었다.

       11. self.cols = 2        //column 2개          
       12. self.add_widget(Label(text='User Name'))     //User Name이라는 문구가 삽입된 라벨을 위젯으로 설정
       13. self.username = TextInput(multiline=False)   //사용자에게 user name 입력 받음
       14. self.add_widget(self.username)               //위젯에 TextInput 부분을 추가
       15. self.add_widget(Label(text='password'))      //password라는 문구가 삽입된 라벨
       16. self.password = TextInput(password=True, multiline=False)
       17. self.add_widget(self.password)

궁금해서 14라인을 주석 처리 해봤더니,

위와 같이 변했다. 열의 개수를 2로 설정했고 User name을 입력받는 TextInput을 위젯에 추가하지 않았더니 1행 2열에 password Label이 위치하게 되었다. 이어서 위젯에 추가한 password TextInput이 오게 되어 위와 같은 모양이 되었다.

Try re-sizing the window and you will see that the widgets on screen adjust themselves according to the size of the window without you having to do anything. This is because widgets use size hinting by default.

윈도우 창이 re-sizing될 수 있는 이유는 위젯이 기본적으로 size hinting을 사용하기 때문이라고 설명하고 있다. 힌팅이라는 것은 출력 품질에 문제가 생기는 현상을 해결하기 위해 거치는 과정을 말하는 것 같다. 즉 kivy의 widget이 re-sizing을 위한 알고리즘을 가지고 있다는 뜻이 된다.

kivy doc에서 말하는 A fisrt app = Pong Game을 만들기 전에 체크해야 할 사항 2가지를 이로써 모두 해보았다.

if you have read the programming guide, and understand both basic Widget concepts (A Simple Paint App) and basic concepts of the kv language (Kv language), you can probably skip the first 2 steps and go straight to step 3.

다음 포스팅에서는 여기서 권유하는 대로 위젯과 kv 언어의 기본 개념을 익힌 후 본격적으로 Pong Game을 만들어보도록 할 것이다~!