精灵图为什么叫雪碧图（精灵图的历史）

精灵图（英语：Sprite），又被称为雪碧图或拼合图。在计算机图形学中，当一张二维图像集成进场景中，成为整个显示图像的一部分时，这张图就称为精灵图[1]。

常见碳酸饮料雪碧的英文名也是 Sprite，因此也有人会使用雪碧图的非正式译名。

历史

精灵图源于1974年左右街机的兴起，其中的只读存储器使得精灵图被广泛使用。Taito当时发售了最早使用精灵图的电子游戏。

二十世纪七十年代中期，Signetics设计出第一款支持生成精灵图形的视频/图形处理器。

1977年发售的Atari 2600以其硬件精灵图为卖点，支持五个图形对象同时在游戏场景中独立移动。

“精灵图”一词首次作为图形术语出现，是在德州仪器的9918(A)视频显示处理器上[2]。使用“精灵图”作为术语，是因为精灵图并不是帧缓冲中位图数据的一部分，而是“悬浮”于帧缓冲中数据之上，不影响其中数据，就像幽灵或精灵一样。

应用

精灵图多用于游戏中的人物和可移动物品，也可以用于显示鼠标指针和输入的文字。如果屏幕上的可移动物体的尺寸比一个精灵图要大，可由若干个精灵图缩放/拼接而成。

广告牌（billboards）实现的是3D场景中的一种精灵图。正如高速公路旁的广告牌总是朝向驾驶员一样，3D精灵图总是朝向摄像机。使用广告牌技术不仅能够获得更高的性能，同时还能使得画面更加美观。相对于其它类型的3D对象，大多数3D渲染引擎处理这类“3D精灵图”时处理得更快。从美学角度看，有时精灵图也很占优，因为多边形渲染很难实现一些类似于火焰的效果。

CSS拼合图

CSS拼合图（CSS Sprites）技术，是将需要分别显示的多张图像集成为单一图像，然后利用层叠样式表分别定位显示各部分图的技术，以减少下载图像数量，提高网页显示速度。

精灵图为什么叫雪碧图（精灵图的历史）相关推荐

前端css基础知识点之sprite——雪碧（精灵）
前端css基础知识点之sprite--雪碧(精灵) css sprite css精灵或css雪碧把网页中一些背景图片整合到一个大文件中,然后利用 background-image.backgroun ...
html雪碧图效果,8.使用背景图，制作雪碧图效果
本文将为您描述8.使用背景图,制作雪碧图效果,具体操作方法: 使用背景图,制作雪碧图效果: Document .img{ width:150px; height:150px; border:2px s ...
html网站雪碧图素材,webpack雪碧图实现（webpack管理小图标素材）
雪碧图也叫CSS精灵, 是一CSS图像合成技术,这里介绍webpack实现雪碧图这是我的文件目录: // 在上个实例项目上增加了icons文件夹: // dist/sprites/目录是后面执行we ...
雪碧图移动端雪碧图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
Web 图集应用，属于非游戏类的图集/雪碧图对象/JS雪碧图/前端图集/JS图集
在非游戏领域其实也是存在很多细小的图标需求的.但是找遍全网却没有方便简洁的图集插件. 所以在此特写一个属于前端的图集插件,该插件使用非常简单. 首先准备需要打成图集的小图标若干再使用国际标准的图集打 ...
html雪碧图效果,综合雪碧图
~~~ $(function(){ var index=0; var timer; // 1.点击next $("#next").click(function(){ index++ ...
【前端基础知识】精灵图/雪碧图的实现以及优缺点
精灵图/雪碧图的实现以及优缺点是什么? 为什么?(优点) 如何使用? 是什么? 精灵图也称雪碧图,就是很多张图片放在一张图片上,用户只需请求一张图片就可以拿到所有需要的图片.开发人员利用背景图的位置 ...
PS的安装、背景、背景练习、雪碧图/精灵图、线性渐变、径向渐变、电影卡片练习——06fontbackground
目录一.PS的安装二.背景(background-color.background-image. background-repeat.background-position.background- ...
CSS3—雪碧图和滑动门
一.CSS Sprite(雪碧图) CSS Sprite也叫CSS精灵.CSS雪碧图,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时, ...

精灵图为什么叫雪碧图（精灵图的历史）

历史

应用

CSS拼合图

精灵图为什么叫雪碧图（精灵图的历史）相关推荐

最新文章

热门文章