STDIO
Tìm kiếm gần đây
    • Nội dung
    • QR Code
    • 0
    • 0
    • Sao chép

    Sprite & 2D Animation

    Tìm hiểu về sprite, sprite sheet và 2D Animation trong game.
    22/05/2014
    24/09/2020
    3 phút đọc
    Sprite & 2D Animation

    Giới thiệu

    2D Animation trong game 2D dùng để tạo các chuyển động cho các nhân vật cho game sinh động hơn, để hiểu khái niệm 2D Animation không khó, ý tưởng đơn giản vẫn là vẽ tuần tự từng ảnh trong 1 đơn vị thời gian.

    Lưu trữ các ảnh rời rạc sẽ gây khó khăn trong việc quản lý các Animation, thông qua đó, có 1 công cụ khá hữu hiệu đó là Sprite sheet.

    Frame là gì?

    Frame là 1 khung hình, giả sử vẽ 1 đối tượng lên màn hình cần 1 frame hình có chứa đối tượng đó. Trường hợp vẽ 1 ảnh lớn bao trùm cả màn hình thì cũng gọi là frame.

    Frame

    Animation trong game 2D là gì?

    Animation trong game là vẽ lần lược các frame trong 1 đơn vị thời gian. Mỗi Animation hoặc nhiều Animation có thể đại diện cho 1 hành động, ứng xử cụ thể của nhân vật.

    Bao nhiêu frame cho 1 animation là đẹp?

    Tùy thuộc vào nhiều yếu tố để xác định bao nhiêu frame như kích thước của màn hình, kích thước đối tượng, bộ nhớ của thiết bị. Nếu màn hình hiển thị nhỏ, có thể sử dụng số lượng frame ít hơn do khoảng cách của sự thay đổi cũng nhỏ.

    Nếu đối tượng cần vẽ cần chi tiết, lớn và đẹp thì số lượng khung hình đỏi hỏi cần lớn hơn, thông thường chỉ cần đạt ngưỡng 24 frames/second là ổn. Nhưng có thể thử với 12 frames hoặc lớn hơn.

    Hình bên dưới cần 16 frames để mô phỏng được 1 hành động.

    animation envy sins
    16 frames

    Sprite là gì?

    Sprite là khái niệm để chỉ 1 ảnh nhỏ trong 1 ảnh lớn, ảnh lớn này có thể chứa nhiều sprite. Khi vẽ có thể vẽ 1 sprite lên màn hình.

    Hình dưới chứa 16 sprites để tạo ra chuỗi hoạt họa như trên.

    Sprite
    16 sprites

    Sprite sheet là gì?

    Sprite sheet là tập hợp của nhiều sprite bên trong nó, bao gồm các thông tin hỗ trợ định vị được các sprite trong sprite sheet, muốn vẽ được sprite trong sprite sheet cần các thông tin như: X, Y, WIDTH, HEIGHT để định vị sprite.

    Ví dụ tại thời điểm t, muốn vẽ sprite thứ 6 cần truyền tọa độ (X, Y) lẫn độ rộng WIDTH và cao HEIGHT như trong hình vẽ bên dưới.

    sprite_envy_frame_3

    Ban đầu các sprite trong sprite sheet là các ảnh đơn, sau đó có thể được tổng hợp thủ công nhưng thông thường sẽ được tổng hợp bởi phần mềm, bên cạnh gom các sprite lại phần mềm sẽ kết xuất thêm 1 file lưu thông tin để định vị các sprite trong sprite sheet hỗ trợ quá trình nạp và vẽ trong game.

    Ví dụ Sprite sheet bao gồm thông tin vẽ

    Sprite sheet pride.png

    pride.png

    Thông tin sprite trong sprite sheet

    <dict>
    	<key>anim_sins_destroy_pride_01.png</key>
    	<dict>
    		<key>frame</key>
    		<string>{{281,130},{121,124}}</string>
    		<key>offset</key>
    		<string>{0,0}</string>
    		<key>rotated</key>
    		<false/>
    		<key>sourceColorRect</key>
    		<string>{{0,0},{121,124}}</string>
    		<key>sourceSize</key>
    		<string>{121,124}</string>
    	</dict>
    
    	<key>anim_sins_destroy_pride_02.png</key>
    	<dict>
    		<key>frame</key>
    		<string>{{282,0},{121,124}}</string>
    		<key>offset</key>
    		<string>{0,0}</string>
    		<key>rotated</key>
    		<false/>
    		<key>sourceColorRect</key>
    		<string>{{0,0},{121,124}}</string>
    		<key>sourceSize</key>
    		<string>{121,124}</string>
    	</dict>
    
    	<key>anim_sins_destroy_pride_03.png</key>
    	<dict>
    		<key>frame</key>
    		<string>{{297,255},{121,124}}</string>
    		<key>offset</key>
    		<string>{0,0}</string>
    		<key>rotated</key>
    		<false/>
    		<key>sourceColorRect</key>
    		<string>{{0,0},{121,124}}</string>
    		<key>sourceSize</key>
    		<string>{121,124}</string>
    	</dict>
    
    	<key>anim_sins_destroy_pride_04.png</key>
    	<dict>
    		<key>frame</key>
    		<string>{{297,380},{120,124}}</string>
    		<key>offset</key>
    		<string>{0,0}</string>
    		<key>rotated</key>
    		<false/>
    		<key>sourceColorRect</key>
    		<string>{{0,0},{120,124}}</string>
    		<key>sourceSize</key>
    		<string>{120,124}</string>
    	</dict>
    
    	<key>anim_sins_destroy_pride_05.png</key>
    	<dict>
    		<key>frame</key>
    		<string>{{159,0},{122,129}}</string>
    		<key>offset</key>
    		<string>{0,0}</string>
    		<key>rotated</key>
    		<false/>
    		<key>sourceColorRect</key>
    		<string>{{0,0},{122,129}}</string>
    		<key>sourceSize</key>
    		<string>{122,129}</string>
    	</dict>
    
    	<key>anim_sins_destroy_pride_06.png</key>
    	<dict>
    		<key>frame</key>
    		<string>{{154,153},{126,135}}</string>
    		<key>offset</key>
    		<string>{0,0}</string>
    		<key>rotated</key>
    		<false/>
    		<key>sourceColorRect</key>
    		<string>{{0,0},{126,135}}</string>
    		<key>sourceSize</key>
    		<string>{126,135}</string>
    	</dict>
    
    	<key>anim_sins_destroy_pride_07.png</key>
    	<dict>
    		<key>frame</key>
    		<string>{{0,153},{153,143}}</string>
    		<key>offset</key>
    		<string>{0,0}</string>
    		<key>rotated</key>
    		<false/>
    		<key>sourceColorRect</key>
    		<string>{{0,0},{153,143}}</string>
    		<key>sourceSize</key>
    		<string>{153,143}</string>
    	</dict>
    
    	<key>anim_sins_destroy_pride_08.png</key>
    	<dict>
    		<key>frame</key>
    		<string>{{0,0},{158,152}}</string>
    		<key>offset</key>
    		<string>{0,0}</string>
    		<key>rotated</key>
    		<false/>
    		<key>sourceColorRect</key>
    		<string>{{0,0},{158,152}}</string>
    		<key>sourceSize</key>
    		<string>{158,152}</string>
    	</dict>
    
    	<key>anim_sins_destroy_pride_09.png</key>
    	<dict>
    		<key>frame</key>
    		<string>{{0,297},{150,130}}</string>
    		<key>offset</key>
    		<string>{0,0}</string>
    		<key>rotated</key>
    		<false/>
    		<key>sourceColorRect</key>
    		<string>{{0,0},{150,130}}</string>
    		<key>sourceSize</key>
    		<string>{150,130}</string>
    	</dict>
    
    	<key>anim_sins_destroy_pride_10.png</key>
    	<dict>
    		<key>frame</key>
    		<string>{{151,297},{145,119}}</string>
    		<key>offset</key>
    		<string>{0,0}</string>
    		<key>rotated</key>
    		<false/>
    		<key>sourceColorRect</key>
    		<string>{{0,0},{145,119}}</string>
    		<key>sourceSize</key>
    		<string>{145,119}</string>
    	</dict>
    
    	<key>anim_sins_destroy_pride_11.png</key>
    	<dict>
    		<key>frame</key>
    		<string>{{0,428},{129,82}}</string>
    		<key>offset</key>
    		<string>{0,0}</string>
    		<key>rotated</key>
    		<false/>
    		<key>sourceColorRect</key>
    		<string>{{0,0},{129,82}}</string>
    		<key>sourceSize</key>
    		<string>{129,82}</string>
    	</dict>
    
    	<key>anim_sins_destroy_pride_12.png</key>
    	<dict>
    		<key>frame</key>
    		<string>{{130,428},{124,73}}</string>
    		<key>offset</key>
    		<string>{0,0}</string>
    		<key>rotated</key>
    		<false/>
    		<key>sourceColorRect</key>
    		<string>{{0,0},{124,73}}</string>
    		<key>sourceSize</key>
    		<string>{124,73}</string>
    	</dict>
    
    	<key>anim_sins_destroy_pride_13.png</key>
    	<dict>
    		<key>frame</key>
    		<string>{{403,125},{91,47}}</string>
    		<key>offset</key>
    		<string>{0,0}</string>
    		<key>rotated</key>
    		<false/>
    		<key>sourceColorRect</key>
    		<string>{{0,0},{91,47}}</string>
    		<key>sourceSize</key>
    		<string>{91,47}</string>
    	</dict>
    
    	<key>anim_sins_destroy_pride_14.png</key>
    	<dict>
    		<key>frame</key>
    		<string>{{403,173},{77,43}}</string>
    		<key>offset</key>
    		<string>{0,0}</string>
    		<key>rotated</key>
    		<false/>
    		<key>sourceColorRect</key>
    		<string>{{0,0},{77,43}}</string>
    		<key>sourceSize</key>
    		<string>{77,43}</string>
    	</dict>
    
    	<key>anim_sins_destroy_pride_15.png</key>
    	<dict>
    		<key>frame</key>
    		<string>{{403,217},{50,33}}</string>
    		<key>offset</key>
    		<string>{0,0}</string>
    		<key>rotated</key>
    		<false/>
    		<key>sourceColorRect</key>
    		<string>{{0,0},{50,33}}</string>
    		<key>sourceSize</key>
    		<string>{50,33}</string>
    	</dict>
    </dict>
    0 Bình luận
    Lập Trình Game

    Lập Trình Game

    Kiến thức, kỹ thuật, kinh nghiệm lập trình game.

    Đề xuất

    Giới Thiệu về Sprite - Sprite Sheet - Sprite Animation
    Giới thiệu về Sprite - Sprite Sheet - Sprite Animation, hướng dẫn 1 số ...
    Sprite Animation trong DirectX 9
    Hướng dẫn tạo tập tin lưu tọa độ các tile từ một sprite sheet có sẵn và ...

    Khám phá

    Animation Trong Cocos2d-x 3.x.x
    Bài viết nằm trong loạt bài viết chương trình Tự Học Cocos2d-x 3.x.x. ...
    Load Sprite trong DirectX 9
    Hiện thực load Sprite từ cơ bản đến các thao tác nâng cao như flip, ...
    Các Khái Niệm trong Game
    Các khái niệm hữu ích từ cơ bản đến nâng cao trong lập trình game: ...
    HTML5 Sprite Animation - Tạo Đối Tượng Chuyển Động
    Tạo hiệu ứng - animation với HTML5 và canvas và sprite sheet.
    Tạo Animation với Unity
    Hướng dẫn hiện thực animation trên Unity.
    Tạo Animation Trong Cocos2d-x Với Công Cụ TexturePacker
    Giới thiệu khái niệm SpriteSheet. Hướng dẫn sử dụng TexturePacker để tạo ...
    Action Cho Sprite Trong Cocos2d-x 3.x.x
    Tìm hiểu về action của Sprite trong Cocos2d-x 3.x.x.
    Giới Thiệu Về Sprite Trong Cocos2d-x 3.x.x
    Giới thiệu tổng quan về khái niệm cơ bản, một số cách dùng để khởi tạo ...
    Khi bạn nhấn vào liên kết sản phẩm do STDIO đề xuất và mua hàng, STDIO có thể nhận được hoa hồng. Điều này hỗ trợ STDIO tạo thêm nhiều nội dung hữu ích. Tìm hiểu thêm.
    STDIO
    Trang chính
    Công ty TNHH STDIO

    30, Trịnh Đình Thảo, Hòa Thạnh, Tân Phú, Hồ Chí Minh
    +84 28.36205514 - +84 942.111912
    developer@stdio.vn

    383/1 Quang Trung, Phường 10, Quận Gò Vấp, Hồ Chí Minh
    Số giấy phép ĐKKD: 0311563559 do sở Kế hoạch và Đầu Tư TPHCM cấp ngày 23/02/2012

    ©STDIO, 2013 - 2020