Giao diện đồ họa người dùng trong tiếng Anh gọi tắt là GUI (Graphical User Interface) là một thuật ngữ trong ngành điện toán, tin học. Đó là một cách giao tiếp với máy tính hay các thiết bị điện tử bằng hình ảnh và chữ viết thay vì chỉ là các dòng lệnh đơn thuần. Python dùng ý niệm này để vẽ, làm chuyển động các hình vẽ, làm game (trò chơi điện tử) …Muốn vậy, bạn cần một phần mềm (software) hay chương trình có tên PYGAME mà bạn có thể tải xuống và cài đặt lên máy bạn. Muốn có Pygame bạn nên install Python 3.2.5 vì apps này tương thích với Pygame.
Vào http://pygame.org/download.stml rồi bấm chọn downloads và trong phần windows bạn click điạ chỉ sau để tải xuống máy bạn: http://www.pygame.org/win32-py3.1.msi .
Sau khi đã tãi xuống, bạn double click để install pygame. Khi máy hỏi bạn Install for all users hay Install just for me, bạn nên chọn For all users. Sau cùng bạn chọn Python 3.2 from registry và bấm Next và sau cùng là Finish. Cài đặt thành công, mỗi khi cần viết chương trình có animation (hoạt hình) bạn chỉ phải “nhập cảng” nó vào chương trình bằng lệnh import pygame.
Sau đây là một số ví dụ sử dụng Pygame để làm hình ảnh chuyển động. Thông qua những ví dụ này các bạn/trẻ biết thêm một số hàm của Python & Pygame nữa.
1) Vẽ một chấm (dot) bằng Pygame:
# ShowDot.py
import pygame # 1
pygame.init() # 2
screen = pygame.display.set_mode([800,600]) # 3
keep_going = True # Boolean
GREEN = (0,255,0) # bộ màu RGB cho màu GREEN # 4
radius = 50 # bán kính của dot
while keep_going: # vòng loop while khi keep_going còn là True
for event in pygame.event.get(): # 5
if event.type == pygame.QUIT: # 6
keep_going = False
pygame.draw.circle(screen, GREEN, (100,100), radius) # 7
pygame.display.update() #8
pygame.quit()
Chú thích:
# 1: nhập Pygame
# 2: lệnh này để khởi động (initialize) Pygame
# 3: tạo một cửa sổ bề ngang 800 pixels và bề cao 600 pixels trên màn hình
# 4: bộ màu Red, Green, Blue mang trị số từ 0 đến 255 để pha màu Green
# 5: Pygame test xem sự kiện (event) người sử dụng đưa vào là gì? ( Bấm chuột, mũi tên, ENTER hay là dấu X đỏ để đóng cửa sổ?…)
# 6 : Nếu là bấm dấu X đỏ (QUIT) thì cho keep_going=False để dứt, ra khỏi vòng While loop
# 7: Vẽ một vòng tròn trên screen, màu xanh GREEN, tâm ở toạ độ (100, 100) và bán kính radius là 50) .
# 8: Để refresh (làm tươi, sạch) lại màn hình
Cho Run chương trình sẽ thấy kết quả như sau:
Chú thích thêm về khái niệm “toạ độ” trong Pygame. Trong Pygame cũng như trong các software để làm hoạt hình khác, tọa độ của Pygame (0,0) không ở giữa màn hình mà ở góc trên, bên trái. Xem hình 8-2:
2) Vẽ cái mặt cười:
Thay vì cái chấm xanh lè như trên, ta sửa chương trình cho vẽ một cái mặt cười:
# ShowPic.py
import pygame # nhập Pygame
pygame.init()
screen = pygame.display.set_mode([800,600]) # màn hình: ngang 800 cao 6oo pixels
keep_going = True
pic = pygame.image.load("CrazySmile.bmp") # load hình có tên CrazySmile trên máy bạn vào và assign vào biến có tên là pic # 1
while keep_going: # Game loop
for event in pygame.event.get():
if event.type == pygame.QUIT: nếu bạn nhấn nút X đỏ vào để đóng
keep_going = False
screen.blit(pic, (100,100)) # 2
pygame.display.update()
pygame.quit() # Exit
Chú thích
# 1: Thực ra bạn muốn load hình ảnh nào thay cho cái mặt cười cũng được miễn là bạn đã lưu nó trong folder mà bạn chứa những files .py (files python của bạn). Thực tập: bạn cho trẻ nạp một hình nào chúng thích, lấy từ internet rồi lưu vào folder nói trên. Chẳng hạn lấy hình Mickey hay Sony hay ảnh của chúng.
# 2: để chuyển hình đến toạ độ (100, 100). Dùng từ blit, không dùng draw. Blit là di chuyển chớp nhoáng trong bộ nhớ (ký ức, memory) của máy.
2) Cho ảnh chuyển động:
Walt Disney vua hoạt hoạ ngày xưa vẽ được những phim hoạt hình nổi tiếng như Bạch Tuyết và bảy chú lùn, Mickey, Donald v.v…bằng cách vẽ hàng ngàn bức hình, mỗi hình khác nhau chút xíu rồi để những bức hình đó chồng lên nhau rồi quay phim thành ra như hình chuyển động khi chiếu ra nhanh. Mỗi bức hình như vậy gọi là một khung (frame). Bây giờ cách làm phim hoạt hình trên máy điện toán cũng tương tự như vậy. Người ta vẽ một hình rồi xóa màn hình, cho nó nhích tới một chút rồi lại vẽ nó lại. Cứ như thế thành ra như hình chuyển động.
#SmileyMove.py
import pygame
pygame.init()
screen = pygame.display.set_mode([600,600]) # màn hình để vẽ 600, 600
keep_going = True
pic = pygame.image.load("CrazySmile.bmp") # load ảnh CrazySmile vào biến pic để gọi cho gọn
picx = 0 # toạ độ đầu tiên của ảnh pic: picx và picy
picy = 0
BLACK = (0,0,0)
timer = pygame.time.Clock() # 1 : Đồng hồ đếm thời gian chuyển động
while keep_going: # Game loop
for event in pygame.event.get():
if event.type == pygame.QUIT:
keep_going = False
picx += 1 # Di chuyển ảnh, mỗi lần thêm 1 pixel vào hoành độ x của pic
picy += 1 # Di chuyển ảnh, mỗi lần thêm 1 pixel vào tung độ y của pic
screen.fill(BLACK) # Clear màn hình thành đen
screen.blit(pic, (picx,picy))
pygame.display.update()
timer.tick(60) # 2: Giới hạn 60 fps (frames mỗi giây)
pygame.quit() # Exit
Chú thích:
# 1: pygame.time.Clock(): hàm này tạo ra một biến tên timer, nó cho phép ta ngưng lại mỗi lúc một chút suốt vòng lặp của game và chờ đủ lâu để chắc chắn là ta không vẽ quá một số khung (hình) nào đó trong một giây.
# 2: hàm tick(argument) : cho ta giới hạn khung hình xuất hiện mỗi giây. Tăng giảm số trong argument của hàm này sẽ làm hình chuyển động nhanh hay chậm hơn.
Bài tập: Bạn cho trẻ sửa argument trên thành 300 xem ảnh có chuyển động nhanh hơn không.
Kết quả: Hình 8-4:
4) Tránh cho ảnh “va vào tường” (ra khỏi màn hình)
Tọa độ của hình vẽ là ở ngay góc trái của hình. Nếu hoành độ picx của hình + chiều rộng của hình > 600 (hay 800 trong chương trình sau) thì hình sẽ “va vào tường” bên phải của màn hình và ra khỏi màn hình. Hoặc nếu picx<0 thì hình sẽ “va vào tường” bên trái màn hình và ra khỏi màn hình luôn. Tương tự, nếu tung độ picy cuả hình + chiều cao của hình > 600, hình sẽ “va vào tường” dưới đáy màn hình hay nếu picy<0 thì hình sẽ “va vào tường” trên cùng của màn hình và ra khỏi màn hình.
Chiều ngang của hình Pygameget sẽ cho bằng hàm get_width() và chiều cao hình bằng get_height().
5) Cho ảnh dội lại
Để tránh cho chú cuội (hình mặt cười) này không bị u đầu vì va vào tường hay biến mất khỏi màn hình vì những lý do kể trên, ta phải cho hình dội ngược lại. Trong những ví dụ trước, mỗi khi vẽ xong 1 frame, ta cho toạ độ picx và picy tăng lên 1: (picx += 1 và picy +=1).
Giả sử ta gọi biến speed (tự bạn cho tên) là vận tốc di chuyển của hình tức là bao nhiêu dots (pixels) nhích tới để hiện ra frame kế. Mỗi khi cho hiện ra 1 frame hình ta cho hình nhích tới 1 speed. (picx +=speedx và picy +=speedy). Nhưng nếu xảy ra va chạm như trên, để khỏi bị u đầu xứt trán thì ta phải cho ảnh dội lại bằng cách cho speedx = –speedx và speedy = –speedy. Trong chương trình sau ta cho speed=à màn hình để vẽ là 800×600
Sau đây là chương trình để bạn hiểu rõ hơn và biết thêm một số functions mới của Pygame:
# SmileyBounce2.py
import pygame # Setup
pygame.init()
screen = pygame.display.set_mode([800,600]) # màn hình để vẽ 800 x 600
keep_going = True # Boolean
pic = pygame.image.load("CrazySmile.bmp") # Ảnh ta load vào biến pic cho gọn cái tên CrazySmile.bmp dài quá
picx = 0
picy = 0
BLACK = (0,0,0)
timer = pygame.time.Clock()
speedx = 5 # vận tốc di chuyển hoành độ
speedy = 5 # vận tốc di chuyển tung độ
while keep_going: # Game loop
for event in pygame.event.get():
if event.type == pygame.QUIT: # khi event là nhấn nút X đỏ ở góc hình thì cho:
keep_going = False
picx += speedx
picy += speedy
if picx <= 0 or picx + pic.get_width() >= 800:
speedx = -speedx # cho hình dội lại
if picy <= 0 or picy + pic.get_height() >= 600:
speedy = -speedy # cho hình dội lại
#screen.fill(BLACK)
screen.blit(pic, (picx, picy))
pygame.display.update()
timer.tick(60)
pygame.quit() # Exit
Run->Run Module chương trình trên, sẽ cho kết quả như hình sau:
(Chú Cuội hết u đầu, sứt trán)