Cách làm sprite. Bước cuối cùng là viết mã jQuery để tạo hoạt ảnh. Tại sao nên sử dụng CSS sprite
Ưu điểm của việc sử dụng CSS sprites là gì? Hãy tưởng tượng rằng bạn có sáu hình ảnh được sử dụng trong bố cục của một trang web và trình duyệt cần tải tất cả chúng một cách riêng biệt. Nếu chúng được kết hợp thành một hình ảnh, bạn có thể tăng tốc độ tải lên đáng kể. Điều này sẽ giảm số lượng lệnh gọi máy chủ cần thiết để hiển thị một trang, giúp trang web của bạn nhanh hơn.
Thay vì tải sáu hình ảnh, bây giờ nó sẽ tải một hình ảnh. Trong đó ưu điểm của CSS yêu tinh
Hầu hết các trang web sử dụng một số hình ảnh nhỏ. Hình nền, mũi tên, biểu tượng, mục menu, v.v. Những hình ảnh nhỏ này thực sự tạo ra sự khác biệt khi bạn xem xét tác động của chúng đến tốc độ tải trang.
Mỗi hình ảnh phải được tải lên. Trình duyệt phải yêu cầu máy chủ cung cấp một hình ảnh, máy chủ phải gửi nó và sau đó trình duyệt phải hiển thị nó. Nếu chỉ là một hoặc hai hình ảnh, vấn đề đặc biệt sẽ không phát sinh. Nhưng vì có nhiều hình ảnh được tải hơn nên điều này ảnh hưởng tiêu cực đến tốc độ tải trang.
Giải pháp là sử dụng các sprite, kết hợp nhiều cái nhỏ thành một hình ảnh, để các trang web có thể tải nhanh hơn nhiều.
Cách kết hợp hình ảnh thành spriteCó hai bước chính để tạo CSS sprite. Đầu tiên bạn phải tạo một hình ảnh và sau đó đặt nó.
Kết hợp hình ảnhGiả sử chúng ta có hai hình ảnh muốn kết hợp thành một. Để tạo sprite, chúng ta cần biết kích thước của hình ảnh. Chúng ta sẽ xem xét một ví dụ trong đó cả hai hình ảnh đều có cùng kích thước (50 x 50 pixel):
Để kết hợp chúng, chúng ta cần tạo một hình ảnh có kích thước 100 x 50 pixel. Hãy gọi nó là "sprite.png". Bây giờ chúng ta đã có hình ảnh được hợp nhất, chúng ta có thể sử dụng thông tin của nó để hiển thị chính xác trên trang web.
Hình ảnh được hợp nhất có chiều rộng 50 pixel và chiều cao 100 pixel. Vì vậy, chúng ta có thể nói rằng hình ảnh đầu tiên (cái loa) nằm ở 50 pixel trên cùng của hình ảnh mới và hình ảnh thứ hai (mặt cười) nằm ở 50 pixel dưới cùng của hình ảnh. Chúng tôi sẽ hiển thị nửa trên của hình ảnh khi bạn cần hiển thị loa và nửa dưới khi bạn cần hiển thị khuôn mặt cười. Thực hiện tạo CSS sprite:
Trong ví dụ này chúng ta sẽ sử dụng hình ảnh làm hinh nên nằm ở phần tử div. Chúng tôi sẽ tạo những cái trống thẻ divđể hiển thị hình ảnh. Nếu chúng tôi cần hiển thị hình ảnh của một cái loa trên trang của mình, chúng tôi sẽ sử dụng lớp CSS “cái loa”:
Loa (chiều rộng:50px; chiều cao:50px; nền:url(images/sprite.png) 0 0px;)
Mã CSS ở trên chỉ định chiều rộng và chiều cao của hình ảnh loa phóng thanh (50 x 50 pixel), nó cũng gọi hình ảnh "sprite.png", được hợp nhất. Phần “0 0px” của mã chịu trách nhiệm hiển thị sprite. Chỉ định hình ảnh bắt đầu ở "0 0px" có nghĩa là nó phải được hiển thị ở 0 pixel trên trục X và 0 pixel trên trục Y. Điều này có nghĩa là “bắt đầu xuất hình ảnh từ trên cùng” và “bắt đầu xuất hình ảnh từ bên trái”.
Vì chúng tôi đã xác định chiều rộng và chiều cao của hình ảnh trong CSS nên chỉ 50 pixel trên cùng (nơi đặt loa phóng thanh) sẽ được hiển thị. Vì vậy, mặt cười sẽ không được nhìn thấy chút nào. Bây giờ hãy hiển thị một khuôn mặt cười và xem mã CSS của sprite thay đổi như thế nào. Chúng ta sẽ tạo một lớp CSS có tên là "smile":
Nụ cười (chiều rộng:50px; chiều cao:50px; nền:url(images/sprite.png) 0 -50px;)
Lưu ý rằng chúng tôi vẫn chỉ định cùng chiều rộng và chiều cao, gọi cùng một hình ảnh, nhưng chúng tôi đã thay đổi phần này: "0 -50px". Bằng cách này, chúng tôi chỉ định rằng hình ảnh sẽ bắt đầu ở mức thấp hơn 50 pixel so với điểm tọa độ bắt đầu (-50px ). Bởi vì thiết kế khuôn mặt cười không bắt đầu ngay từ đầu mà là 50 pixel tính từ đầu của hình ảnh được hợp nhất.
Bây giờ CSS đã được chỉ định, chúng ta có thể gọi div bất cứ nơi nào chúng ta cần để hiển thị hình ảnh. Nơi chúng tôi cần hiển thị một cái loa, chúng tôi đặt một cái loa trống khối div với lớp "cái loa":
Khi chúng ta cần hiển thị một mặt cười, chúng ta đặt một div với lớp “smile”:
Đây là nguyên tắc cơ bản về cách tạo CSS sprite. Có nhiều cách để thực hiện điều này và tốt hơn hết bạn nên chọn cách phù hợp với mình nhất. Trong bài viết này, chúng tôi đã trình bày cách hoạt động của sprite nhưng không đi sâu vào chi tiết về chúng.
Bản dịch của bài viết “Cách sử dụng CSS sprites” được nhóm dự án thân thiện chuẩn bị.
Xin chào các bạn thân mến. Hôm nay chúng tôi sẽ tiếp tục tối ưu hóa hình ảnh trên trang web của mình để tăng tốc độ tải. Như bạn nhớ từ năm 2017, chúng tôi đã học cách tối ưu hóa bất kỳ hình ảnh nào cho trang web, cả hình ảnh riêng lẻ và hàng loạt.
Và hôm nay chủ đề của chúng tôi cũng tập trung vào việc tối ưu hóa hình ảnh, nhưng phức tạp hơn nhiều so với lần trước. Cụ thể là hôm nay tôi sẽ kể và chỉ cho các bạn cách tạo CSS spriteđể tăng tốc độ tải trang web. Chính công nghệ này có thể làm tăng đáng kể tốc độ tải trang.
CSS sprite là gìNhìn chung, công nghệ sprite lần đầu tiên được phát minh bởi các nhà làm phim hoạt hình tại Disney. Sau đó công nghệ này bắt đầu được sử dụng tích cực trong trò chơi máy tính và cuối cùng là thiết kế web.
Trong hoạt hình và trò chơi máy tính, công nghệ sprite cho phép bạn phủ các nhân vật và điều khiển hành động của họ trên nền của cảnh đã hoàn thành.
Trong thiết kế web, các họa tiết cho phép bạn thao tác với hình ảnh và hiệu ứng hình ảnh. Ví dụ: trên trang web của tôi. Ban đầu, bạn nhìn thấy một hình ảnh, nhưng khi di chuyển chuột qua tên lửa, bạn sẽ thấy một hình ảnh khác. Nhưng thực chất đó chỉ là một hình ảnh.
Đây là toàn bộ quan điểm của các họa tiết CSS.
Tại sao nên sử dụng CSS spriteTất nhiên là để tăng tốc độ tải trang. Hãy lấy blog của tôi làm ví dụ. Nếu bạn nhìn kỹ, có nhiều yếu tố thiết kế trên blog của tôi được trình bày dưới dạng các tệp (hình ảnh) riêng biệt.
Các yếu tố thiết kế có thể được thay thế bằng một sprite
TRONG tổng cộngđây là 19 hình ảnh riêng lẻ. Tất cả đều được tối ưu hóa và nặng rất ít. Và điều này là rất tốt. Nhưng số lượng hình ảnh tuyệt đối tạo ra 19 Yêu cầu HTTP ov đến máy chủ. Và tất cả những phản hồi yêu cầu này làm chậm quá trình tải trang web. Hoặc bạn có thể thay thế 19 hình ảnh này bằng một hoặc hai hình ảnh.
Do đó, khối lượng hình ảnh được tải xuống và số lượng yêu cầu tới máy chủ sẽ giảm đi. Và do đó tốc độ tải trang web tăng lên.
Những hình ảnh nào nên được kết hợp thành các họa tiết CSS?Không cần thiết phải nghĩ rằng tất cả các hình ảnh nên được kết hợp. Điều này hoàn toàn không cần thiết. Để tìm ra những hình ảnh nào nên được kết hợp, tôi khuyên bạn nên sử dụng dịch vụ GTmetrix vốn đã quen thuộc.
Tại đây bạn cũng có thể xem các đề xuất để tạo các họa tiết. Hay đúng hơn là đề xuất của trình tạo sprite CSS SpriteMe. Với trình tạo này, bạn có thể dễ dàng tạo các họa tiết bạn cần. Nhưng nó chẳng giúp được gì cho tôi nên tôi phải tự mình làm mọi việc.
Cách tạo CSS spriteBây giờ tôi sẽ cố gắng giải thích một cách hình tượng cách thức hoạt động của nó. Vì vậy, hãy tưởng tượng - toàn bộ mẫu trang web là một khung vững chắc với nhiều ô để chèn yếu tố đồ họa. Và đằng sau khung hình này là một hình ảnh rắn chắc với nhiều yếu tố thiết kế đồ họa. Và hình ảnh này được điều khiển bởi Trợ giúp CSS phong cách. Nghĩa là, bằng cách sử dụng các kiểu CSS, bạn có thể chèn đoạn hình ảnh mong muốn vào bất kỳ cửa sổ nào của khung. Tôi hy vọng tôi đã giải thích nó rõ ràng. Vậy hãy bắt đầu.
Sau khi dịch vụ GTmetrix nhắc bạn hoặc bạn đã quyết định những tập tin nào cần được kết hợp thành các sprite, bạn nên bắt đầu tạo một sprite (trống).
Vì vậy, tôi phân tích trang web trong dịch vụ GTmetrix và lần lượt lưu nó thư mục riêng trên máy tính, hình ảnh gợi ý.
Lưu hình ảnh vào một thư mục riêng
Chính từ những hình ảnh riêng lẻ này mà chúng ta sẽ tạo ra một sprite.
Tạo một hình ảnh mới với nền trong suốt. Chọn kích thước phù hợp với tất cả các hình ảnh. Chà, ví dụ: nếu tất cả hình ảnh của bạn là 32x32 và 16x16 pixel và có một hình ảnh 380x150, thì hãy tạo hình ảnh của bạn sao cho vừa với tất cả những hình ảnh này trong một.
Và hãy chắc chắn để tạo một nền trong suốt.
Nhưng ngay cả khi bạn mắc lỗi về kích thước, bạn luôn có thể sửa nó thông qua mục menu “Hình ảnh” - “Kích thước hình ảnh”.
Bây giờ, lần lượt hiển thị tất cả các hình ảnh mà bạn đã chuẩn bị trước đó.
Mục menu “Tệp” > “Mở hình ảnh”. Một hình ảnh sẽ mở ra, chọn nó CTRL+A và sao chép nó vào clipboard CTRL+C. Đi tới mẫu và dán hình ảnh CTRL+V. Và như vậy với tất cả các hình ảnh.
Nó sẽ trông giống như thế này.
Bây giờ bạn nên cắt bỏ tất cả phần thừa. Để thực hiện việc này, hãy sử dụng công cụ Cắt.
Khi phôi đã sẵn sàng, chúng tôi lưu nó vào định dạng PNG và một nửa công việc đã hoàn thành. Mục menu “Tệp” > “Lưu”. Đừng quên về định dạng.
Bây giờ ảnh cần upload lên hosting trong thư mục chứa ảnh chủ đề:
http://yourdomain/wp-content/themes/vahatema/images/
Xin lưu ý rằng có thể có sự khác biệt về tên của thư mục lưu trữ hình ảnh chủ đề.
Tải tập tin lên hosting của bạn có thể được thực hiện thông qua quản lý tập tin hosting, trong trường hợp của tôi là . Hoặc thông qua . Tùy bạn đấy.
Bây giờ đến phần khó khăn, bạn cần thay thế hình ảnh mẫu bằng một sprite. Ví dụ: hãy lấy tiêu đề khối trong thanh trang web trên blog của tôi và kiểm tra mã thành phần. Để làm điều này bạn cần phải bấm vào nút bên phải di chuột vào phần tử mong muốn và trong menu phân biệt ngữ cảnh, hãy chọn “Xem mã phần tử” (đối với Chrome) hoặc “Kiểm tra phần tử” (đối với Firefox). Nó khá giống với các trình duyệt khác.
Kiểm tra một phần tử trong một mẫu
Tại đây bạn có thể thấy mã HTML và kiểu CSS. Nghĩa là, bạn sẽ thấy tệp chịu trách nhiệm xuất ra các kiểu và số dòng để tìm lớp chịu trách nhiệm cho đoạn này. Từ ảnh chụp màn hình, rõ ràng lớp thanh bên và cụ thể là tiêu đề h2 nằm trong tệp style.css trên dòng 339. Đây là nơi bạn cần nhập mọi thứ sự thay đổi cần thiết phong cách.
Nhưng ở đây, trong cửa sổ nghiên cứu phần tử, bạn có thể thử nghiệm các kiểu và chọn kiểu bạn cần. Sau đó bạn chỉ cần chuyển các style này vào file style.css.
Trước khi bạn bắt đầu bước này Tôi thực sự khuyên bạn nên làm điều đó bản sao lưu tập tin style.css.
Bây giờ nhiệm vụ của bạn là mở tệp style.css và thực hiện các thay đổi cần thiết. Bạn có thể thực hiện việc này bằng Notepad++ (rất trình soạn thảo thuận tiện và hiển thị số dòng) hoặc thông qua trình chỉnh sửa trong bảng quản trị WordPress.
Vì vậy, hãy mở bảng điều hành WP– « Vẻ bề ngoài» > "Trình chỉnh sửa" > "style.css". Vì không có đánh số dòng ở đây, bạn nên tìm vị trí mong muốn bằng cách sử dụng tìm kiếm CTRL + F và nhập lớp CSS mong muốn (trong trường hợp của tôi - thanh bên h2).
Thực hiện các thay đổi đối với mã style.css
Bạn chỉ cần đổi tên file ảnh và nhập các thông số vị trí tương ứng với trục tọa độ. Nếu cái của bạn không giống cái của tôi trong ảnh chụp màn hình thì bạn nên hiểu rằng tham số chịu trách nhiệm hiển thị hình ảnh (nền): nền: url('images/spriteme.png');
Và tham số chịu trách nhiệm về vị trí của hình ảnh là: Background-position: -0px -0px; với các giá trị âm. Số đầu tiên là độ lệch dọc theo trục X, số thứ hai là độ lệch dọc theo trục Y.
Bằng cách này, bạn có thể thay thế nhiều hình ảnh mẫu bằng một hình ảnh, sự khác biệt duy nhất sẽ nằm ở vị trí của hình ảnh này. Công việc này rất vất vả nhưng ai cũng có thể làm được.
Điều này hoàn thành việc tạo CSS sprite cho trang web. Hãy làm theo hướng dẫn và bạn sẽ thành công.
Sắp tới tôi sẽ quay một video hướng dẫn trong đó tôi sẽ cố gắng trình bày và nói chi tiết về tạo CSS spryov.
Và đây là video hướng dẫn đã hứa:
Và một tờ giấy nhỏ phong cách css và danh sách được sử dụng trong video hướng dẫn, bạn có thể tải xuống spur tại đây.
Đó là tất cả đối với tôi ngày hôm nay. Các bạn ơi, tôi chúc các bạn may mắn!
Có nhiều phương pháp để tối ưu hóa trang web. Một số trong số chúng hoạt động, một số thì không. Tuy nhiên, có một số phương pháp bắt buộc đối với bất kỳ trang web và blog nào. Tôi muốn nói chuyện với bạn về một trong số họ.
Một trong những phương pháp chính để tối ưu hóa các trang web. Vì vậy, hôm nay chúng ta sẽ nói về cách kết hợp các họa tiết hình ảnh trên một trang web bằng CSS, từ đó tăng tốc độ tải của chúng.
Một ít lịch sửTrong quá khứ xa xôi, khi các modem phát ra tiếng bíp trong các căn hộ và tốc độ kết nối không vượt quá 5 Kbps, mọi người đã miệt mài với nhiệm vụ khó khăn là làm thế nào để các trang web tải nhanh hơn mà không phải trả số tiền cắt cổ cho lưu lượng truy cập đến. Họ nghĩ, tức là họ nghĩ, và họ nảy ra ý tưởng ghép những hình ảnh được sử dụng trên trang thành các họa tiết.
Và chúng ta đi xa...
Kết hợp hình ảnh thành spriteVà như vậy, như chúng ta đã biết trước đây, sprite là một số hình ảnh được sắp xếp thành một tổng thể trên nền trong suốt, có thể được truy cập bằng cách sử dụng Thuộc tính CSS vị trí nền. Nhưng xin đừng nhầm lẫn nó với ảnh ghép. Sprite ≠ ảnh ghép.
Để có được một sprite, bạn cần phải lắp tất cả các nút, biểu tượng, dấu đầu dòng và những thứ linh tinh khác càng gọn càng tốt vào một tập tin PNG. Đừng quên, nền phải trong suốt. Bây giờ hãy xem xét nó với một ví dụ.
Hãy nói rằng chúng ta có tập tin PSDÔi có nút 3 trạng thái đẹp thế này.
Blogger bố cục tự học trung bình làm gì? Nó cắt nút ở mỗi trạng thái và lưu nó vào các tệp riêng biệt. Tức là, một nút sẽ chụp 3 bức ảnh của người đàn ông tốt bụng này. Và nếu bạn cảm thấy căng thẳng, hãy nhớ rằng mỗi bức ảnh trên trang web là một yêu cầu HTTP bổ sung tải máy chủ và blog của bạn hoạt động ngày càng chậm hơn và chậm hơn và chậm hơn và chậm hơn và chậm hơn...
Để ngăn điều này xảy ra, sẽ hợp lý hơn nhiều nếu lưu nút vào một tệp . Để thực hiện việc này, chúng tôi mở cùng một tệp PSD, xóa các mũi tên, dòng chữ và nền vô dụng khỏi tệp đó và sắp xếp tất cả các trạng thái nút càng gần nhau càng tốt mà không bị chồng chéo.
Đây là những gì chúng tôi đã kết thúc với. Trong mọi trường hợp, các nút không được chồng lên nhau.
Tuyệt vời, tập tin đồ họa Chúng tôi đã chuẩn bị xong, bây giờ hãy để tôi chỉ cho bạn cách bố trí nó.
Bố cục spriteBố cục của CSS sprite không khác gì bố cục hình ảnh bình thường, ngoại trừ một NHƯNG. Bạn cần biết không chỉ kích thước chính xác của hình ảnh bạn muốn hiển thị mà còn cả tọa độ của nó. Ví dụ: toàn bộ sprite của chúng tôi rộng 330 px và cao 150 px.
Nhưng chúng ta chỉ cần hiển thị một nút rộng 227 px và cao 41 px, chỉ định tọa độ chính xác của nó. Nếu bạn không có html tốt biên tập viên - tôi có thể.
Tạo một tập tin chỉ mục.html và viết vào đó những dòng mã cần thiết, loại tài liệu và tất cả những thứ đó.
Sau tất cả mọi thứ hành động tiêu chuẩn Xong, hãy thử hiển thị nút của chúng tôi.
Sau thẻ thân hình tạo một thùng chứa div với lớp cái nút– đây sẽ là nút của chúng tôi.
| 1 |
Đây là nơi html của chúng ta kết thúc và bây giờ chúng ta cần thêm các kiểu CSS cho nút.
Đoạn mã dưới đây cho thấy rằng đầu tiên chúng ta khai báo một lớp cái nút. Sau đó sử dụng thuộc tính chiều cao và chiều rộngđặt kích thước của nút của chúng tôi. Tài sản lý lịch cho phép chúng tôi chọn tệp mà chúng tôi sẽ sử dụng làm sprite và vị trí nền thiết lập tọa độ của hình ảnh chúng ta cần trong sprite này. Nó đơn giản.
| 1 2 3 4 | .button ( chiều cao : 41px ; chiều rộng : 227px ; nền : url (img/sprite.png ) ; vị trí nền : 0px -12px ; ) |
Chúng ta hãy xem xét kỹ hơn về tài sản vị trí nền.
Như bạn có thể thấy từ đoạn mã trên, nó có hai ý nghĩa. Giá trị đầu tiên cho phép bạn đặt tọa độ hình ảnh dọc theo trục X và do đó, giá trị thứ hai dọc theo trục Y. Nút của chúng tôi không nhảy đến bất kỳ đâu dọc theo trục X, vì tất cả các trạng thái đều nằm bên dưới nhau. Do đó, để trạng thái thứ hai của nút xuất hiện khi di chuột, chúng ta cần thay đổi giá trị chịu trách nhiệm cho trục Y.
| 1 2 | .button :hover ( vị trí nền : 0px -56px ; ) .button :active ( vị trí nền : 0px -98px ; ) |
Như bạn đã biết, và nếu không thì đúng vậy, mỗi nút có một số trạng thái.
Chúng tôi đã tận dụng những đặc tính này.
Nếu bạn quá lười tạo các họa tiết theo cách thủ công và thường bận tâm đến Photoshop, một công cụ tuyệt vời dịch vụ miễn phí: spritepad.wearekiss.com. Chỉ cần ném nó vào khu vực làm việc những hình ảnh cần thiết và anh ấy sẽ tạo ra một sprite cho bạn.
Bị giam giữCSS sprites rất giai đoạn quan trọngđang trên đường tăng tốc trang web. Hãy đối xử với nó một cách tôn trọng và cố gắng sử dụng nó ở mọi nơi.
Ma ( đô họa may tinh)
Hình vẽ trong đồ họa 2DBan đầu, sprite có nghĩa là những bức vẽ nhỏ được hiển thị trên màn hình bằng cách sử dụng khả năng tăng tốc phần cứng. Trên một số máy (MSX 1, NES) kết xuất phần mềm dẫn đến một số hạn chế nhất định, nhưng các mô hình phần cứng không có giới hạn này. Sau đó, với sự gia tăng sức mạnh của CPU, các họa tiết phần cứng đã bị loại bỏ và khái niệm "sprite" được mở rộng cho tất cả các ký tự hai chiều. Đặc biệt, trong các trò chơi điện tử Super Mario và Heroes of Might and Magic, tất cả đồ họa đều dựa trên sprite.
Họ quay trở lại với các sprite được tăng tốc phần cứng vào giữa những năm 1990, khi sự phát triển của đa phương tiện và sự gia tăng bùng nổ về độ phân giải và độ sâu màu đòi hỏi một bộ xử lý chuyên dụng trong card màn hình. Sau đó, DirectDraw được phát hành dưới dạng trình bao bọc trên bộ tăng tốc phần cứng 2D. DirectX 8 đã giới thiệu một API chung cho đồ họa 2D và 3D, đồng thời trong các trò chơi dựa trên sprite hiện đại, các sprite 2D được hiển thị chính xác như các sprite 3D - dưới dạng một hình chữ nhật có kết cấu.
CSS spriteĐược sử dụng trên web. Một số hình ảnh được đặt trong một tập tin đồ họa. Để cắt phần mong muốn từ một tệp, CSS được sử dụng - do đó có tên là công nghệ.
CSS sprite tiết kiệm lưu lượng truy cập và tăng tốc độ tải - trình duyệt sẽ cần yêu cầu ít tệp hơn.
Sprites trong đồ họa 3D Động cơ thế hệ đầu tiênTrước hết trò chơi 3D, chẳng hạn như Wolfenstein 3D () và Doom (), các ký tự được thể hiện dưới dạng hình vẽ hai chiều có kích thước thay đổi tùy theo khoảng cách.
Trên máy gia tốc 3DMáy gia tốc 3D sử dụng kỹ thuật sau: đối tượng được vẽ dưới dạng một mặt phẳng với kết cấu có các vùng trong suốt được đặt lên trên đó. Công nghệ này được sử dụng trong ba trường hợp.
Tối ưu hóaSprites có thể được sử dụng để tối ưu hóa lõi đồ họa, khi hiển thị mô hình chi tiết ba chiều quá tốn kém và có thể dẫn đến tốc độ hiển thị giảm đáng kể. Đó là:
- Các vật thể hiện diện với số lượng lớn trong cảnh và là vật thể ba chiều, sẽ có số lượng cạnh lớn và sẽ ảnh hưởng lớn đến hiệu suất - ví dụ: khán giả (Hình 1), cỏ, v.v.
- Các vật thể ở xa được vẽ ở gần bằng mô hình đa giác.
Để làm cho hình ảnh trở nên đáng tin cậy hơn, một số lượng lớn các họa tiết tương đối nhỏ (được gọi là hệ thống hạt) được sử dụng.
Chụp trực tiếpĐôi khi, các họa tiết được sử dụng để thêm ảnh hoặc video trực tiếp vào trò chơi. Ví dụ:
- Các diễn viên trực tiếp, ví dụ như trong realMyst (Hình 4).
- Cần điều khiển trong mô phỏng máy bay, tàu hỏa, v.v., được chụp ảnh trong buồng lái thực.
Điều đáng chú ý là trong một số trò chơi dựa trên sprite, chẳng hạn như Rise of the Triad, các sprite được chụp từ các diễn viên chứ không phải từ mô hình, đồ chơi hoặc hình vẽ.
Sự ra đời của trình đổ bóng giúp loại bỏ một phần nhu cầu chụp ảnh trực tiếp - nhiều sắc thái của ảnh chụp đã có thể được truyền tải bằng các mô hình đa giác trong thời gian thực.
Phá vỡ ảo tưởngXem sprite từ một góc độ không phù hợp sẽ làm hỏng ảo ảnh. Tùy thuộc vào công cụ kết xuất toán học (“động cơ”), sự phá hủy có thể xảy ra theo hai cách.
Thuật ngữ- Biển quảng cáo là một hình ảnh liên tục hướng về phía camera (tương tự như biển quảng cáo trên đường cao tốc, được quay ở góc thuận lợi nhất).
- Kẻ mạo danh là một sprite thay thế mô hình ba chiều ở khoảng cách rất xa.
Đã thích:
27
Không thích: 4
Không có bản dịch có sẵn.
ma
trước hoặc sau "trước" "sau" "sau"
Angry_bird tức giận.png. chỉ mục.html
Không có bản dịch có sẵn.
CSS sprites là đồ họa cho trang Web của bạn, được kết hợp thành một tệp đồ họa. "Tại sao lại là một tập tin?" - bạn hỏi. Thực tế là phương pháp lưu trữ hình ảnh này cho phép bạn cải thiện hiệu suất của các trang web cũng như lưu trữ Hình ảnh đồ hoạ có tổ chức hơn. Chúng ta hãy xem xét một số thực hành tốt nhất sử dụng sprite. Chính cái tên của các sprite có thể khiến bạn nhớ đến các sprite chơi game, retro bảng điều khiển trò chơi và thậm chí cả các trò chơi trình duyệt rất phổ biến hiện nay:
Vì vậy, khi áp dụng vào thiết kế Web, sprite chỉ là một tập tin lớn, chứa một số hình ảnh cho trang web của bạn, tiết kiệm thời gian tải xuống và truyền tệp qua mạng. Ví dụ: khi một sprite chứa 20-30 hình ảnh, điều này có thể giảm tải đáng kể cho máy chủ, vì nếu những hình ảnh này được lưu trữ riêng biệt, máy chủ sẽ phải tạo 20-30 hình ảnh tương ứng. yêu cầu cá nhânđể có được mỗi hình ảnh như vậy. Nhờ sprite, chỉ có một yêu cầu HTTP được gửi đến máy chủ - để nhận một hình ảnh duy nhất. Một sprite có thể không “đọc được” bằng mắt thường, vì nhiệm vụ chính của nó chỉ là lắp ráp các “mảnh” khác nhau trong thiết kế của bạn lại với nhau. Ví dụ: một sprite có thể trông như thế này:
Sprites được sử dụng bởi hầu hết các trang web hiện đại và VKontakte nổi tiếng cũng không ngoại lệ. Ví dụ: đây là cách nó lưu trữ “các phần” của giao diện trong một tệp - cụ thể là các biểu tượng quen thuộc:
Điều tuyệt vời khi sử dụng CSS sprite là bạn chỉ cần gửi cho máy chủ một tệp đồ họa chứa tất cả hình ảnh của bạn, thay vì nhiều hình ảnh riêng lẻ - và thông qua CSS, bạn có thể hiển thị bất kỳ đoạn nhỏ nào của tệp đồ họa đó làm nền cho một phần tử. Một số người nghĩ rằng từng hình ảnh tải nhanh hơn nhưng điều này không đúng. Khi tải một tệp đồ họa có nhiều hình ảnh, chúng tôi chỉ gửi một yêu cầu đến máy chủ và khi tải số lượng lớn hình ảnh - chúng tôi gửi nhiều yêu cầu hơn đến máy chủ. Việc kết hợp các hình ảnh vào một tệp không chỉ có thể làm giảm đáng kể số lượng yêu cầu HTTP mà còn giảm kích thước tổng thể tập tin hình ảnh.
Hãy để tôi cho bạn một ví dụ khác về sprite. Đây là cách một trang web nổi tiếng của phương Tây dành riêng cho việc thiết kế lưu trữ các yếu tố đồ họa:
Bạn có thể hỏi khi nào Cách tốt nhất có thể chuẩn bị một sprite? Có hai cách tiếp cận khác nhau cho việc này.
Các cách tiếp cận khác nhau - tạo sprite trước và sau khi tạo trang webCó hai cách tiếp cận phổ biến khi tạo bảng sprite - thực hiện trước hoặc sau khi tạo trang web của bạn. Bạn có thể đặt tất cả hình ảnh vào một bảng sprite trước khi tạo trang web. Đây là những gì chúng tôi gọi là cách tiếp cận "trước". Ngoài ra, bạn có thể tạo tất cả các hình ảnh dưới dạng tập tin riêng biệt, điều này làm cho việc chỉnh sửa chúng dễ dàng hơn. Sau khi trang web được xây dựng và tất cả các hình ảnh đã được chuẩn bị, bạn có thể nhanh chóng và dễ dàng tạo một bảng sprite theo cách thủ công hoặc sử dụng một trong nhiều công cụ. Chúng tôi sẽ gọi đây là cách tiếp cận “sau”. Nếu bạn chưa quen với sprite sheet hoặc chưa quen với thiết kế Web thì cách tiếp cận “sau” sẽ phù hợp hơn với bạn. Có rất nhiều tiện ích, dịch vụ và chương trình giúp bạn tạo sprite, hầu hết chúng đều được phân phối và cung cấp miễn phí.
Sắp xếp các hình ảnh trong sprite một cách có tổ chứcKhi tạo sprite trong Photoshop, bạn nên đặt ngay tất cả các hình ảnh một cách có tổ chức và theo một trình tự nhất định do bạn chọn để sau này làm việc với chúng sẽ dễ dàng và đơn giản. Cố gắng luôn làm tròn không gian cho mỗi hình ảnh sprite đến 10 pixel gần nhất hoặc để lại nhiều không gian hơn xung quanh họ nếu tất cả họ đều cùng cỡ. Khi viết kiểu CSS, bạn sẽ không phải ghi lại số đo tọa độ và bạn sẽ ít có khả năng quên số tọa độ hình ảnh cần thiết. Đây là một ví dụ về việc đặt thành công các hình ảnh khác nhau trong một sprite:
Như vậy, chúng ta đã làm quen với khái niệm sprite trong thiết kế Web, nhưng lý thuyết mà không thực hành thì chẳng là gì cả. Vì vậy, bây giờ bạn và tôi sẽ tạo sprite đầu tiên của mình và học cách tạo hoạt hình đơn giản trên trang HTML. Ví dụ của chúng tôi sẽ dựa trên một nhân vật trong trò chơi Angry Birds - đây là một con chim màu đỏ ngộ nghĩnh. Trước tiên, hãy chuẩn bị một hình ảnh sprite ở định dạng .PNG chứa 4 giai đoạn hoạt hình của chú chim:
Hãy tạo một thư mục Angry_bird ở đâu đó trên đĩa - chúng tôi sẽ đặt các tệp mẫu của mình ở đó. Chúng ta lưu sprite có hình chim vào thư mục này và gọi tệp là Angry.png. Bước tiếp theo- tạo một tệp trong cùng thư mục có tên là index.html - đây sẽ là trang thử nghiệm của chúng tôi có hoạt ảnh. Tiếp theo, mở tệp này trong trình chỉnh sửa và đặt đoạn mã sau vào đó:
Bài học trên trang web - Minh họa cách làm việc với các sprite $(document).ready(function() ( // đây sẽ là mã jQuery tạo hoạt ảnh ));
Hãy để tôi giải thích một chút những gì chúng tôi đã làm bây giờ. Đầu tiên, chúng tôi đặt tài liệu HTML của mình thành mã hóa UTF-8, có nghĩa là chúng tôi phải lưu index.html của mình trong mã hóa đó. Bạn cũng có thể đặt một cái khác, chẳng hạn như windows-1251 - đối với nhiệm vụ của chúng tôi, điều này không quan trọng. Tiếp theo, chúng tôi đã kết nối tệp style.css với tài liệu (nó chưa có trong thư mục Angry_bird của chúng tôi, chúng tôi sẽ tạo nó sau). Chúng tôi cũng đã cung cấp một liên kết đến tập lệnh bên ngoài và kết nối thư viện jQuery- Với sử dụng jQuery Chúng tôi sẽ tự động thay đổi hình ảnh của con chim và thay đổi các “giai đoạn” của nó từ hình ảnh. Chúng tôi cũng đã chuẩn bị một khối JavaScript nội bộ, nơi chúng tôi sẽ đặt mã tạo hoạt ảnh cho chú chim. Và cuối cùng, phần chính của tài liệu chứa một siêu liên kết duy nhất, bên trong là một khối DIV và ID của nó được đặt thành birdImage và lớp mặc định là bird-sleeping . Điều này có nghĩa là con chim của chúng ta sẽ “ngủ” khi mở trang - điều này tương ứng với hình ảnh phía dưới bên trái bên trong sprite - nơi mắt nó nhắm lại. Bây giờ là lúc để “cắt” sprite của chúng ta, tức là. chọn hình ảnh riêng lẻ từ nó.
Cắt sprite bằng dịch vụ SpriteCow.ComNhiệm vụ "cắt lát" một sprite khá tốn công sức - nó đòi hỏi phải cẩn thận để không mắc sai lầm với tọa độ xác định từng hình ảnh trong sprite. May mắn thay, ngày nay có những dịch vụ giúp loại bỏ hoàn toàn vấn đề đau đầu này của người thiết kế và thiết kế bố cục. Mình sử dụng dịch vụ cắt lát http://spritecow.com và giới thiệu cho các bạn. Bản chất của dịch vụ là đơn giản và rất tiện lợi - chúng tôi chọn từng hình ảnh con chim bằng chuột và SpriteCow cung cấp cho chúng tôi mã CSS tạo sẵn có tọa độ. Tất cả những gì chúng ta phải làm chỉ đơn giản là thiết lập 4 kiểu cho từng giai đoạn của con chim! Sau khi vào trang web, chúng tôi thấy 2 nút - “Mở hình ảnh” và “Hiển thị ví dụ”. Chúng ta cần nút đầu tiên, nhấp vào nó:
Trong hộp thoại mở ra, hãy chọn tệp sprite Angry.png của chúng tôi, sau đó chúng tôi sẽ xem sprite của chúng tôi đã được tải như thế nào trên trang web. Tiếp theo, chúng ta cần xác định màu nền, để thực hiện việc này, hãy nhấp vào thanh công cụ “Chọn nền” và chỉ vào vùng màu trắng của hình ảnh của chúng ta - điều này sẽ cho phép chúng ta cắt từng giai đoạn của con chim một cách chính xác:
Chọn hình ảnh đầu tiên và tự động lấy mã CSS cho nó:
Bây giờ là lúc tạo tệp style.css trong thư mục Angry_bird của chúng ta. Ở đó, chúng tôi chèn tuần tự 4 đoạn mã CSS được tạo, nhưng thay vì lớp .sprite tiêu chuẩn do SpriteCow cung cấp cho chúng tôi, hãy gọi các kiểu của chúng tôi rõ ràng hơn. Ngoài ra, vì chúng tôi lưu trữ hình ảnh sprite trực tiếp trong thư mục gốc nên chúng tôi sẽ xóa phần tử đường dẫn không cần thiết - imgs/ khỏi thuộc tính nền. Tôi đã nhận được nó như thế này:
/* chim "bình thường". Hình ảnh trên cùng bên trái trong sprite */ .bird-normal ( nền: url("angry.png") no-repeat -12px -16px; width: 97px; Height: 94px; ) /* "Happy" bird. Hình ảnh trên cùng bên phải trong sprite */ .bird-happy ( nền: url("angry.png") no-repeat -118px -17px; width: 97px; Height: 94px; ) /* "Sleeping" bird. Hình ảnh phía dưới bên trái trong sprite */ .bird-sleeping ( nền: url("angry.png") no-repeat -12px -120px; width: 97px; Height: 94px; ) /* "Angry" bird. Hình ảnh dưới cùng bên phải trong sprite */ .bird-angry ( nền: url("angry.png") no-repeat -118px -120px; width: 97px; Height: 94px; )
Bước cuối cùng là viết mã jQuery để tạo hoạt ảnh.
Bây giờ chúng ta đã cắt thành công sprite và đặt 4 kiểu cho mỗi hình ảnh trong tệp style.css của mình, tất cả những gì chúng ta cần làm là viết một số mã jQuery sẽ thêm hoạt ảnh khi siêu liên kết của chúng ta được di chuột qua và khi liên kết được nhấp vào. Như chúng ta nhớ, theo mặc định chúng ta có lớp bird-sleeping , tức là. chú chim đỏ của chúng ta sẽ "ngủ" khi mở một tài liệu :)
Tất cả hoạt ảnh sẽ dựa trên 3 phương thức jQuery:
- di chuột - trình xử lý để di con trỏ qua một liên kết và để di chuyển con trỏ ra khỏi liên kết. Khi chúng ta di con trỏ, con chim sẽ “thức dậy” - tức là. lớp học sẽ trở nên bình thường như chim
- mousedown - trình xử lý để nhấp chuột trái vào một liên kết. Trong trường hợp này, con chim sẽ trở nên “hạnh phúc” - tức là. Khối DIV sẽ được gán lớp bird-happy
- mouseup - trình xử lý nhả nút chuột trái. Khi được thả ra, con chim sẽ trở nên “tức giận” - tức là. Khối DIV được gán lớp chim giận dữ
Vì vậy, hãy dán đoạn mã sau vào nơi chúng tôi đã chuẩn bị đơn vị trong nhà JavaScript được đặt trên trang:
$(document).ready(function() ( // đây là mã jQuery tạo hoạt ảnh $("#birdImage").hover(function() ( $(this).removeClass("bird-sleeping"); $ (this).removeClass("bird-angry"); $(this).removeClass("bird-happy"); $(this).addClass("bird-normal"); ), function() ( $( this ).removeClass("bird-normal"); $(this).removeClass("bird-angry"); $(this).removeClass("bird-happy"); $(this).addClass("bird- đang ngủ "); )); $("#birdImage").mousedown(function() ( $(this).removeClass("bird-sleeping"); $(this).removeClass("bird-normal"); $ ( this).removeClass("bird-angry"); $(this).addClass("bird-happy"); )).mouseup(function() ( $(this).removeClass("bird-sleeping"); $ (this).removeClass("bird-normal"); $(this).removeClass("bird-happy"); $(this).addClass("bird-angry"); )); ));
Sẵn sàng! Kiểm tra hoạt ảnh
Được rồi, mọi chuyện đã kết thúc rồi! Con chim của chúng tôi đã sẵn sàng và đã mang lại sự sống cho trang giấy bằng hình ảnh động của nó! :) Bạn có thể xem bản demo. Tải về kho lưu trữ với một ví dụ ở cuối bài viết.
