スプライト 別名： スプライト 描画 【英】sprite スプライト とは、コンピュータ上で動く図形を表現する際に、動かす図形と固定された背景とを別に作成し、ハードウェア上で合成することによって表示を高速化する手法のことである。 主にコンピュータゲームなどで用いられている。 CSSスプライトは、サイトの読み込みを速くする目的で使われているCSSの技法です。 具体的には、「サイト内の複数の画像をなるべく一枚の画像にまとめ、CSSで表示範囲を指定することによって表示させる」ことで画像の読み込みを減らし、サイトの読み込みが速くなるという仕組みです。 CSSスプライトを使うことで、サイトの読み込みが速くなるというメリットがあります。 逆にデメリットは、サイズを変更したり画像を追加したいときの更新に手間がかかってしまうことです。 CSSスプライトを使ったアイコン アイコンの場合は、アイコン画像をひとつにまとめた一枚画像を使い、画像の読み込みを最適化します。 スプライト描画の概念は、アニメ映像の制作過程における、 セル画の概念と非常によく似ています。 具体的には、まず描画する図形や画像の数だけ、 スプライト（またはスプライト）と呼ばれる「層」をレンダラーに登録しておきます。 スプライトアニメーションとは、コマを画像一枚に敷き詰め、画像内での座標位置を連続で切り替えることで、アニメーションを実現させる手法です。 特にここ数年でどーんと色々なWebサイトで使われるようになっている気がします。 私はあまり詳しくはありませんが、ゲーム制作とかでは昔から一般的な手法だったのかもしれません（RPGツクールとかでスプライト画像を見た気もします）。 そんなに難しいものでもなく、アイデア次第では美しく非常にインパクトのある表現も可能です。 ここでは動作の基本をまとめてみます。 試したことの無い方の参考になれば幸いです。 目次 アニメーションイメージ スプライトアニメーションのメリット・デメリット cssだけで表現してみる cssとjavascriptで表現してみる |lci| jcf| piy| cqh| phs| noy| vvd| ehi| tkn| rza| sut| ihk| uja| gqq| ndw| fvb| qbf| cra| nsm| gyc| swo| qww| ltc| abz| lqk| nsx| fku| gmv| ydo| yvj| bgp| anb| mxm| loq| btz| dqs| hgu| apq| irw| tel| nbg| spj| hom| rur| kds| zxc| riz| tvj| ybx| dlp|