Trong bài trước — Lập trình với sự hiểu biết — Tôi đã giải thích tại sao Đồ họa Rùa lại tuyệt vời để tìm hiểu về cách thế giới vận hành, thông qua lập trình. Trong bài đăng này, chúng tôi sẽ lập trình hoạt hình cơ bản của riêng mình bằng cách sử dụng mô-đun con rùa của Python
hoạt hình
Tất cả hoạt hình [thực sự là tất cả các hình ảnh chuyển động] về cơ bản không gì khác hơn là các hình ảnh liên tiếp được hiển thị nhanh đến mức nó mô phỏng chuyển động liên tục. Mỗi bức tranh được gọi là một khung hình. Mỗi khung hình phải hơi khác so với khung hình trước đó và nhanh chóng hiển thị lần lượt các khung hình này đến khung hình khác tạo ảo giác về chuyển động liên tục, do đó, từ 'animate' có nghĩa là 'làm sống động'. Các khung hình phải được hiển thị ở tốc độ khoảng 12 khung hình/giây [khung hình/giây] trở lên để một người có thể trải nghiệm chúng dưới dạng hoạt ảnh. Phim hiện đại thường sử dụng 24 khung hình mỗi giây
Hoạt hình với rùa Python
Bây giờ, hãy tạo hoạt ảnh cơ bản của riêng chúng ta bằng cách sử dụng mô-đun rùa của Python. một hình vuông di chuyển trên màn hình, bắt đầu từ bên trái và di chuyển sang bên phải
Một hình vuông hoạt hình
Bây giờ, hãy nghĩ về cách hoạt hình hoạt động như một loạt các hình ảnh hơi khác nhau. Để tạo ảo giác về một hình vuông duy nhất di chuyển sang phải, chúng ta sẽ cần vẽ rất nhiều hình vuông, mỗi hình vuông nằm ở vị trí hơi lệch về bên phải so với hình trước đó và hiển thị nhanh những hình này. Vì vậy, những gì mã của chúng tôi cần làm là xóa hình vuông trước đó, sau đó vẽ một hình vuông mới và di chuyển sang phải, trước khi bắt đầu lại
Điều đầu tiên chúng ta cần làm là vẽ một hình vuông. Hãy đưa code vẽ hình vuông vào hàm riêng để dễ đọc code hơn. Chúng tôi cũng sẽ đảm bảo rằng màn hình có kích thước cụ thể để có thể di chuyển con rùa ra khỏi màn hình một cách chính xác. Chúng tôi sẽ di chuyển con rùa ra khỏi màn hình, ở bên trái. Sau đó, chúng tôi sẽ triển khai thuật toán hoạt hình ở trên, nơi chúng tôi liên tục xóa hình vuông trước đó, vẽ hình vuông mới và di chuyển về phía trước một chút [khi một con rùa mới bắt đầu hướng về bên phải màn hình]
import turtle
screen = turtle.Screen[] # create a new screen
screen.setup[500,500] # 500 x 500 window
don = turtle.Turtle[] # create a new [ninja] turtle
don.speed[0] # make it move faster
def draw_square[] : # a function that draws one square
for side in range[4] :
don.forward[100]
don.left[90]
don.penup[] # go off-screen on the left
don.goto[-350, 0]
don.pendown[]
while True : # now do this repeatedly, to animate :
don.clear[] # - clear all the turtle's previous drawings
draw_square[] # - draw a square
don.forward[10] # - move forward a bit
Kiểm soát khung
Chúng ta có thể thấy rằng nó thực sự trông giống như một hình vuông duy nhất đang di chuyển trên màn hình, nhưng hoạt ảnh cũng có vẻ hơi bị hỏng. Đó là kết quả của các khung riêng lẻ của chúng tôi - trong đoạn mã trên, màn hình quyết định khi nào cập nhật hình ảnh và điều đó thường ở giữa một hình vuông được vẽ, vì vậy các khung của chúng tôi chỉ có rất nhiều ô vuông có thể nhìn thấy
Chúng ta cần kiểm soát rằng một khung chỉ được hiển thị sau khi một hình vuông đã được hoàn thành. Điều này có thể được thực hiện bằng cách trước tiên yêu cầu màn hình không tự động hiển thị bất kỳ thứ gì, với screen.tracer[0]
, sau đó yêu cầu màn hình hiển thị [dưới dạng một khung hình trong hoạt ảnh của chúng ta] chỉ sau khi một ô vuông đã được hoàn thành, với screen.update[]
Kiểm soát tốc độ
Một điều khác mà bây giờ chúng ta cần phải làm, đó là tiến về phía trước với một khoảng cách nhỏ hơn nhiều mỗi lần. Lý do là, khi màn hình chọn thời điểm hiển thị khung hình, nó đã sử dụng nhiều khung hình để hiển thị hình vẽ của mỗi ô vuông, có thể là 10, do đó chuyển động tịnh tiến chỉ thực sự xảy ra sau mỗi khung hình thứ 10. Nếu tốc độ khung hình của hoạt ảnh của chúng tôi cũng là 10 khung hình/giây, điều đó có nghĩa là chuyển động về phía trước chỉ xảy ra một lần mỗi giây. Trong khi khi chúng tôi chọn hiển thị khung theo cách thủ công chỉ sau khi hoàn thành một ô vuông, thì 10 khung hình hiện có nghĩa là 10 ô vuông thay vì chỉ 1 và chuyển động về phía trước sau đó diễn ra 10 lần mỗi giây thay vì một lần. Vì vậy, khi có nhiều chuyển động về phía trước hơn diễn ra với cùng một lượng khung hình, hình vuông có vẻ như chuyển động về phía trước nhanh hơn rất nhiều. Do đó, chúng tôi phải giảm khoảng cách di chuyển giữa mỗi khung hình để hình vuông hoạt động trở lại về phía trước với tốc độ chậm hơn, hợp lý
hoạt hình hoàn chỉnh
Cuối cùng, hãy ẩn chú rùa đi, để chúng ta chỉ nhìn thấy các hình vẽ vuông và làm cho nét bút đậm hơn một chút
import turtle
screen = turtle.Screen[]
screen.setup[500,500]
screen.tracer[0] # tell screen to not show automatically
don = turtle.Turtle[]
don.speed[0]
don.width[3]
don.hideturtle[] # hide donatello, we only want to see the drawing
def draw_square[] :
for side in range[4] :
don.forward[100]
don.left[90]
don.penup[]
don.goto[-350, 0]
don.pendown[]
while True :
don.clear[]
draw_square[]
screen.update[] # only now show the screen, as one of the frames
don.forward[0.02]
Hoạt hình với sprite
Có một cách thậm chí còn dễ dàng hơn, nhưng chúng tôi đã không bắt đầu với nó vì tốt hơn hết là bạn nên hiểu các nguyên tắc cơ bản bất cứ khi nào bạn có cơ hội. Cách dễ dàng hơn là chúng ta không tự vẽ hình con rùa mà chỉ dùng một hình ảnh làm hình con rùa. Điều đó có thể được thực hiện với sự kết hợp giữa chức năng addshape["yourImage.gif"]
của màn hình và chức năng shape["yourImage.gif"]
của con rùa. Nó phải là một. gif, các loại tệp khác không được phép. Bạn có thể sử dụng một hình ảnh động. gif, nhưng rùa sẽ chỉ sử dụng khung đầu tiên và bỏ qua phần còn lại, vì vậy, tốt hơn là sử dụng khung không hoạt hình. ảnh gif. Chuỗi mà bạn truyền vào hai hàm là vị trí của. gif liên quan đến thư mục lưu chương trình [chỉ có nghĩa là tên tệp nếu chúng nằm trong cùng một thư mục, như bên dưới]
import turtle
screen = turtle.Screen[]
screen.setup[500,500]
screen.tracer[0]
screen.addshape["fireball.gif"] # register the image with the screen as a shape
don = turtle.Turtle[]
don.speed[0]
don.shape["fireball.gif"] # now set the turtle's shape to it
don.penup[]
don.goto[-350, 0]
while True :
screen.update[]
don.forward[0.01]
mô phỏng tương tác
Trong bài đăng này, chúng tôi đã tạo một hình vuông hoạt hình chỉ cần di chuyển sang bên phải, bằng cách vẽ nhiều hình vuông, mỗi hình vuông ở bên phải hình trước một chút. Điều gì sẽ xảy ra nếu chúng ta muốn mô phỏng một đối tượng tương tác với một đối tượng khác, giống như một quả bóng nảy trên sàn? . Nói cách khác, bạn có thể coi các khung hình của hoạt hình là những bức ảnh được chụp nhiều lần trong một giây — đó chính xác là công việc mà một máy quay phim thực sự làm.
Trò chơi
Đó là nó cho hoạt hình. Giờ đây, chúng tôi cũng đã đặt nền móng cho trò chơi, vì trò chơi cũng là mô phỏng chỉ sử dụng hoạt ảnh cho tất cả đồ họa chuyển động. Trong bài đăng tiếp theo — Trò chơi có đồ họa rùa — chúng ta sẽ tìm hiểu chi tiết, sau đó tiến hành tạo trò chơi của riêng mình