Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅

Π‘ΠΏΡ€Π°ΠΉΡ‚ (ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π½Π°Ρ Π³Ρ€Π°Ρ„ΠΈΠΊΠ°)

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Π€ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅

Π­Ρ‚Π° ΡΡ‚Π°Ρ‚ΡŒΡ нуТдаСтся Π² Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… источниках для ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ провСряСмости.
Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠΌΠΎΡ‡ΡŒ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ эту ΡΡ‚Π°Ρ‚ΡŒΡŽ, Π΄ΠΎΠ±Π°Π²ΠΈΠ² ссылки Π½Π° Π°Π²Ρ‚ΠΎΡ€ΠΈΡ‚Π΅Ρ‚Π½Ρ‹Π΅ источники.
НС подтвСрТдённая источниками информация ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ поставлСна ΠΏΠΎΠ΄ сомнСниС ΠΈ ΡƒΠ΄Π°Π»Π΅Π½Π°.

Π§Π°Ρ‰Π΅ всСго β€” растровоС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, свободно ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°ΡŽΡ‰Π΅Π΅ΡΡ ΠΏΠΎ экрану. [1] НаблюдСниС спрайта ΠΏΠΎΠ΄ Π½Π΅ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌ ΡƒΠ³Π»ΠΎΠΌ ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΡ‚ ΠΊ Ρ€Π°Π·Ρ€ΡƒΡˆΠ΅Π½ΠΈΡŽ иллюзии. Π’ΠΎ Π΅ΡΡ‚ΡŒ Π»Π΅Π³Ρ‡Π΅ всСго Π²ΠΎΡΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚ΡŒ спрайт ΠΊΠ°ΠΊ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°ΡŽΡ‰ΡƒΡŽΡΡ Π² пространствС ΠΏΡ€ΠΎΠ΅ΠΊΡ†ΠΈΡŽ ΠΊΠ°ΠΊΠΎΠ³ΠΎ-Ρ‚ΠΎ ΠΎΠ±ΡŠΡ‘ΠΌΠ½ΠΎΠ³ΠΎ Ρ‚Π΅Π»Π° Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎ Ρ€Π°Π·Π½ΠΈΡ†Π° Π½Π΅Π·Π°ΠΌΠ΅Ρ‚Π½Π°.

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

ΠŸΡ€ΠΎΠΈΡΡ…ΠΎΠΆΠ΄Π΅Π½ΠΈΠ΅ Ρ‚Π΅Ρ€ΠΌΠΈΠ½Π°

Π‘Π»ΠΎΠ²ΠΎ «спрайт» ΠΏΡ€ΠΈΠ΄ΡƒΠΌΠ°Π» Π² 1970-Π΅ Π³ΠΎΠ΄Ρ‹ ΠΊΡ‚ΠΎ-Ρ‚ΠΎ ΠΈΠ· Texas Instruments: ΠΈΡ… новая микросхСма TMS9918 ΠΌΠΎΠ³Π»Π° Π°ΠΏΠΏΠ°Ρ€Π°Ρ‚Π½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ нСбольшиС ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΏΠΎΠ²Π΅Ρ€Ρ… Π½Π΅ΠΏΠΎΠ΄Π²ΠΈΠΆΠ½ΠΎΠ³ΠΎ Ρ„ΠΎΠ½Π°. [2]

Π‘ΠΏΡ€Π°ΠΉΡ‚Ρ‹ Π² Π΄Π²ΡƒΡ…ΠΌΠ΅Ρ€Π½ΠΎΠΉ Π³Ρ€Π°Ρ„ΠΈΠΊΠ΅

Π˜Π·Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ΄ спрайтами ΠΏΠΎΠ½ΠΈΠΌΠ°Π»ΠΈ нСбольшиС рисунки, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹Π²ΠΎΠ΄ΠΈΠ»ΠΈΡΡŒ Π½Π° экран с ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ Π°ΠΏΠΏΠ°Ρ€Π°Ρ‚Π½ΠΎΠ³ΠΎ ускорСния. На Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΌΠ°ΡˆΠΈΠ½Π°Ρ… (MSX 1, NES) программная прорисовка ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΠ»Π° ΠΊ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½Ρ‹ΠΌ ограничСниям, Π° Π°ΠΏΠΏΠ°Ρ€Π°Ρ‚Π½Ρ‹Π΅ спрайты этого ограничСния Π½Π΅ ΠΈΠΌΠ΅Π»ΠΈ. ВпослСдствии с ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠ΅ΠΌ мощности Ρ†Π΅Π½Ρ‚Ρ€Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ процСссора, ΠΎΡ‚ Π°ΠΏΠΏΠ°Ρ€Π°Ρ‚Π½Ρ‹Ρ… спрайтов ΠΎΡ‚ΠΊΠ°Π·Π°Π»ΠΈΡΡŒ, ΠΈ понятиС «спрайт» Ρ€Π°ΡΠΏΡ€ΠΎΡΡ‚Ρ€Π°Π½ΠΈΠ»ΠΎΡΡŒ Π½Π° всСх Π΄Π²ΡƒΠΌΠ΅Ρ€Π½Ρ‹Ρ… пСрсонаТСй. Π’ частности, Π² Π²ΠΈΠ΄Π΅ΠΎΠΈΠ³Ρ€Π°Ρ… Super Mario ΠΈ Heroes of Might and Magic вся Π³Ρ€Π°Ρ„ΠΈΠΊΠ° спрайтовая.

CSS-спрайты

ΠŸΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ Π² Π²Π΅Π±Π΅. НСсколько ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ΡΡ Π² ΠΎΠ΄Π½ΠΎΠΌ графичСском Ρ„Π°ΠΉΠ»Π΅. Для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Ρ€Π΅Π·Π°Ρ‚ΡŒ ΠΈΠ· Ρ„Π°ΠΉΠ»Π° Π½ΡƒΠΆΠ½Ρ‹ΠΉ кусок, примСняСтся CSS β€” ΠΎΡ‚ΡΡŽΠ΄Π° Π½Π°Π·Π²Π°Π½ΠΈΠ΅ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ.

CSS-спрайты экономят Ρ‚Ρ€Π°Ρ„ΠΈΠΊ ΠΈ ΡƒΡΠΊΠΎΡ€ΡΡŽΡ‚ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΡƒ β€” Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ потрСбуСтся Π·Π°ΠΏΡ€Π°ΡˆΠΈΠ²Π°Ρ‚ΡŒ мСньшС Ρ„Π°ΠΉΠ»ΠΎΠ².

Π‘ΠΏΡ€Π°ΠΉΡ‚Ρ‹ Π² Ρ‚Ρ€Ρ‘Ρ…ΠΌΠ΅Ρ€Π½ΠΎΠΉ Π³Ρ€Π°Ρ„ΠΈΠΊΠ΅

Π”Π²ΠΈΠΆΠΊΠΈ ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ поколСния

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Π€ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Π€ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅

Π’ ΠΏΠ΅Ρ€Π²Ρ‹Ρ… Ρ‚Ρ€Ρ‘Ρ…ΠΌΠ΅Ρ€Π½Ρ‹Ρ… ΠΈΠ³Ρ€Π°Ρ…, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Wolfenstein 3D (1992) ΠΈ Doom (1993), пСрсонаТи ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΠ»ΠΈΡΡŒ Π² Π²ΠΈΠ΄Π΅ Π΄Π²ΡƒΠΌΠ΅Ρ€Π½Ρ‹Ρ… рисунков, ΠΈΠ·ΠΌΠ΅Π½ΡΡŽΡ‰ΠΈΡ… Ρ€Π°Π·ΠΌΠ΅Ρ€ Π² зависимости ΠΎΡ‚ расстояния.

На 3D-аксСлСраторах

На 3D-аксСлСраторах примСняСтся такая Ρ‚Π΅Ρ…Π½ΠΈΠΊΠ°: ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ рисуСтся Π² Π²ΠΈΠ΄Π΅ плоскости с Π½Π°Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π½Π° Π½Π΅Ρ‘ тСкстурой с ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΌΠΈ областями. Π­Ρ‚Π° тСхнология примСняСтся Π² Ρ‚Ρ€Ρ‘Ρ… случаях.

ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡ

Π‘ΠΏΡ€Π°ΠΉΡ‚Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ для ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ графичСского ядра, ΠΊΠΎΠ³Π΄Π° отрисовка Ρ‚Ρ€Ρ‘Ρ…ΠΌΠ΅Ρ€Π½ΠΎΠΉ Π΄Π΅Ρ‚Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΠΎΠΉ ΠΌΠΎΠ΄Π΅Π»ΠΈ слишком Π½Π°ΠΊΠ»Π°Π΄Π½Π° ΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ привСсти ΠΊ ΡΠΈΠ»ΡŒΠ½ΠΎΠΌΡƒ падСнию скорости Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π°. Π’Π°ΠΊΠΎΠ²Ρ‹ΠΌΠΈ ΡΠ²Π»ΡΡŽΡ‚ΡΡ:

БпСцэффСкты

НСкоторыС спСцэффСкты (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, огонь) Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡŽΡ‚ΡΡ спрайтами, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΠΈΠ³ΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ огонь ΠΏΠ»ΠΎΡ…ΠΎ смотрится. Π‘Ρ€Π°Π²Π½ΠΈΡ‚Π΅, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π²Π·Ρ€Ρ‹Π²Ρ‹ Π² Quake 2 (рис. 2) ΠΈ Unreal Tournament (рис. 3).

Для большСй правдоподобности изобраТСния ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ большоС количСство ΡΡ€Π°Π²Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΌΠ°Π»Π΅Π½ΡŒΠΊΠΈΡ… спрайтов (Ρ‚Π°ΠΊ называСмая систСма частиц).

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Π€ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅

Рисунок 1.
Бпрайтовая ΠΏΡƒΠ±Π»ΠΈΠΊΠ° Π² Rally Trophy

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Π€ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Π€ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Π€ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅

Рисунок 4.
Π–ΠΈΠ²ΠΎΠΉ Π°ΠΊΡ‚Ρ‘Ρ€ Π² Ρ‚Ρ€Ρ‘Ρ…ΠΌΠ΅Ρ€Π½ΠΎΠΌ ΠΊΠ°Π±ΠΈΠ½Π΅Ρ‚Π΅ Π² realMyst.

Живая ΡΡŠΡ‘ΠΌΠΊΠ°

Π˜Π·Ρ€Π΅Π΄ΠΊΠ° спрайты ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ для добавлСния Π² ΠΈΠ³Ρ€Ρƒ ΠΆΠΈΠ²ΠΎΠ³ΠΎ Ρ„ΠΎΡ‚ΠΎ ΠΈΠ»ΠΈ Π²ΠΈΠ΄Π΅ΠΎ. НапримСр:

Π‘Ρ‚ΠΎΠΈΡ‚ Π·Π°ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π² Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… спрайтовых ΠΈΠ³Ρ€Π°Ρ…, Ρ‚Π°ΠΊΠΈΡ…, ΠΊΠ°ΠΊ Rise of the Triad, спрайты Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΡ€ΠΎΠ²Π°Π»ΠΈΡΡŒ с Π°ΠΊΡ‚Ρ‘Ρ€ΠΎΠ², Π° Π½Π΅ с ΠΌΠΎΠ΄Π΅Π»Π΅ΠΉ, ΠΈΠ³Ρ€ΡƒΡˆΠ΅ΠΊ ΠΈΠ»ΠΈ рисунков.

ПоявлСниС ΡˆΠ΅ΠΉΠ΄Π΅Ρ€ΠΎΠ² частично снимаСт ΠΏΠΎΡ‚Ρ€Π΅Π±Π½ΠΎΡΡ‚ΡŒ Π² ΠΆΠΈΠ²ΠΎΠΉ ΡΡŠΡ‘ΠΌΠΊΠ΅ β€” ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π½ΡŽΠ°Π½ΡΡ‹ фотоизобраТСния ΡƒΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΠΈΠ³ΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΌΠΈ модСлями Π² Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΌ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ.

Π Π°Π·Ρ€ΡƒΡˆΠ΅Π½ΠΈΠ΅ иллюзии

НаблюдСниС спрайта ΠΏΠΎΠ΄ Π½Π΅ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌ ΡƒΠ³Π»ΠΎΠΌ ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΡ‚ ΠΊ Ρ€Π°Π·Ρ€ΡƒΡˆΠ΅Π½ΠΈΡŽ иллюзии. Π’ зависимости ΠΎΡ‚ матСматичСского Π°ΠΏΠΏΠ°Ρ€Π°Ρ‚Π° Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π° (Β«Π΄Π²ΠΈΠΆΠΊΠ°Β»), Ρ€Π°Π·Ρ€ΡƒΡˆΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΎΠΈΡΡ…ΠΎΠ΄ΠΈΡ‚ΡŒ двумя способами.

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайт

CSS ΠΈ спрайты. Для Ρ‡Π΅Π³ΠΎ Π½ΡƒΠΆΠ½Ρ‹, ΠΊΠ°ΠΊΠΈΠ΅ Π±Ρ‹Π²Π°ΡŽΡ‚ ΠΈ ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ спрайтами. ΠΠ°ΡƒΡ‡ΠΈΡ‚Π΅ΡΡŒ ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ для составных элСмСнтов спрайта ΠΈ Π²Ρ‹Π²ΠΎΠ΄ΠΈΡ‚ΡŒ.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Π€ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅

Π‘ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹ΠΉ Π²Π΅Π± ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚ΠΎΠ² ставит ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ ΠΈ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡŽ сайтов.

Π’Π°ΠΊ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ² ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ являСтся использованиС Π½Π° сайтС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌΡ‹Ρ… спрайтами.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайт, ΠΊΠΎΠ³Π΄Π°, Π·Π°Ρ‡Π΅ΠΌ ΠΈ ΠΊΠ°ΠΊ ΠΈΡ… ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚, я ΠΏΠΎΡΡ‚Π°Ρ€Π°ΡŽΡΡŒ Π²Π°ΠΌ ΠΎΠ±ΡŠΡΡΠ½ΠΈΡ‚ΡŒ Π² этой записи.

Π‘ΠΏΡ€Π°ΠΉΡ‚ это

Π‘ΠΏΡ€Π°ΠΉΡ‚ β€” это ΠΎΠ΄Π½ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΡΠ΅Ρ‚ Π² сСбС Π΄Π²Π° ΠΈ Π±ΠΎΠ»Π΅Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Π€ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅

Если ΠΌΡ‹ рассмотрим спрайт ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ я ΠΏΡ€ΠΈΠ²Ρ‘Π» Π²Ρ‹ΡˆΠ΅ Π² качСствС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°, Ρ‚ΠΎ ΠΎΠ½ состоит ΠΈΠ· 60-Ρ‚ΠΈ ΠΈΠΊΠΎΠ½ΠΎΠΊ. ВсСго ΠΎΠ΄Π½ΠΈΠΌ запросом спрайт загруТаСтся Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ вмСсто 60-Ρ‚ΠΈ (Ссли Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ ΠΊΠ°ΠΆΠ΄ΡƒΡŽ ΠΈΠΊΠΎΠ½ΠΊΡƒ ΠΏΠΎ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ), Π° ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ CSS ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ вывСсти Π»ΡŽΠ±ΡƒΡŽ ΠΈΠ· ΠΈΠΊΠΎΠ½ΠΎΠΊ Π²Ρ…ΠΎΠ΄ΡΡ‰ΡƒΡŽ Π² спрайт Π² Π½ΡƒΠΆΠ½ΠΎΠΌ Π½Π°ΠΌ мСстС, ΠΏΡ€ΠΈ Ρ‡Ρ‘ΠΌ ΠΌΠΎΠΆΠ΅ΠΌ Π²Ρ‹Π²ΠΎΠ΄ΠΈΡ‚ ΠΎΠ΄Π½Ρƒ ΠΈ Ρ‚Ρƒ ΠΆΠ΅ ΠΈΠΊΠΎΠ½ΠΊΡƒ ΠΌΠ½ΠΎΠ³ΠΎ Ρ€Π°Π·.

ИспользованиС спрайтов

Π”ΡƒΠΌΠ°ΡŽ всСм понятно, Ρ‡Ρ‚ΠΎ Π²Π΅Π±-страница содСрТащая ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒΡΡ Π΄ΠΎΠ»Π³ΠΎ, гСнСрируя ΠΏΡ€ΠΈ этом ΠΌΠ½ΠΎΠ³ΠΎ запросов ΠΊ сСрвСру. ИспользованиС спрайтов ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Π΅Ρ‚ количСство запросов сСрвСру, Π² Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ сниТая врСмя Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ страницы сайта ΠΈ сокращая потрСбляСмый ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ Ρ‚Ρ€Π°Ρ„ΠΈΠΊ.

Π‘ΠΏΡ€Π°ΠΉΡ‚Ρ‹ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² самых Ρ€Π°Π·Π½Ρ‹Ρ… мСстах, Π½ΠΎ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ распространённыС случаи ΠΊΠΎΠ³Π΄Π° Ρ‡Π΅Ρ€Π΅Π· спрайт выводят ΠΈΠΊΠΎΠ½ΠΊΠΈ для ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² мСню, Ρ€Π°Π·Π½Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ соцсСти. Π’Π°ΠΊ ΠΆΠ΅ спрайты ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² анимациях, ΠΈΠ³Ρ€Π°Ρ… ΠΈ Π΅Ρ‰Ρ‘ ΠΌΠ½ΠΎΠ³ΠΎ Π³Π΄Π΅.

Как ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π½Π° этом сайтС ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ€ΡƒΠΌ, Π³Π΄Π΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ Ρ€Π°Π·Π΄Π΅Π»ΠΎΠ² Ρ„ΠΎΡ€ΡƒΠΌΠ° это ΠΈ Π΅ΡΡ‚ΡŒ кусочки ΠΎΠ΄Π½ΠΎΠ³ΠΎ изобраТСния спрайта.

Как Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ спрайты

Π‘ΠΏΡ€Π°ΠΉΡ‚Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ Ρ‡Π΅Ρ€Π΅Π· CSS.

Π§Ρ‚ΠΎΠ±Ρ‹ вывСсти ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ· спрайта, Π½ΡƒΠΆΠ½ΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ ΠΊ элСмСнту Π² HTML class ΠΈ Π² CSS Π·Π°Π΄Π°Ρ‚ΡŒ этому классу стили.

ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ для спрайтов стили CSS :

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Π²Ρ‹Π²ΠΎΠ΄Π° ΠΈΠΊΠΎΠ½ΠΎΠΊ ΠΈΠ· спрайта

Π― Π²ΠΎΠ·ΡŒΠΌΡƒ спрайт ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±Ρ‹Π» Π²Ρ‹ΡˆΠ΅ Π² ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΈ сдСлаю ΠΈΠ· Π½Π΅Π³ΠΎ мСню. Π§Ρ‚ΠΎΠ±Ρ‹ Π½Π΅ Π»ΠΈΠΏΠΈΡ‚ΡŒ ΡˆΠ΅ΡΡ‚ΡŒΠ΄Π΅ΡΡΡ‚ ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² мСню, Π²ΠΎΠ·ΡŒΠΌΡƒ ΠΏΡΡ‚ΡŒ ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ², ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π±ΡƒΠ΄ΡƒΡ‚ ΠΈΠ· Ρ€Π°Π·Π½Ρ‹Ρ… участков спрайта.

Π˜Ρ‚Π°ΠΊ, создаём мСню Ρƒ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ HTML ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π³ΠΎ Π²ΠΈΠ΄Π°:

ΠŸΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ ΠΈΠ· ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² класc. Π’ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ я ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ Π½Π°Π·ΠΎΠ²Ρƒ класс Π΄Π»ΠΈΠ½Π½Ρ‹ΠΌ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ demoSpIcon, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρƒ мСня Π² основных стилях сайта Ρ‚Π°ΠΊΠΎΠ΅ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ большС Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ Π²Ρ‹Π»Π΅Π·Π»ΠΎ, Π²Ρ‹ ΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°Π·Ρ‹Π²Π°Ρ‚ΡŒ классы ΠΊΠ°ΠΊ Π²Π°ΠΌ ΡƒΠ΄ΠΎΠ±Π½ΠΎ:

Для Π·Π°Π΄Π°Π½Π½ΠΎΠ³ΠΎ класса demoSpIcon ΠΏΡ€ΠΎΠΏΠΈΡˆΠ΅ΠΌ CSS стили, Π³Π΄Π΅:

Как Π²ΠΈΠ΄Π½ΠΎ, Π²ΠΎΠ·Π»Π΅ ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² появилась ΠΈΠΊΠΎΠ½ΠΊΠ°, Π½ΠΎ Ρƒ всСх ΠΎΠ΄Π½Π° ΠΈ Π½Π΅ соотвСтствуСт названию ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² мСню.

Всё Π΄Π΅Π»ΠΎ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΈΠ· спрайта Π±Ρ‹Π» взят Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ с Π½ΡƒΠ»Π΅Π²Ρ‹ΠΌΠΈ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Π°ΠΌΠΈ ΠΈ поэтому Π²Ρ‹Π²Π΅Π»Π°ΡΡŒ пСрвая вСрхняя ΠΈΠΊΠΎΠ½ΠΊΠ°.

Π’Π°ΠΊ ΠΊΠ°ΠΊ Π² спрайтС всС ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈΠ· Π½Π°Π±ΠΎΡ€Π° ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹Π΅ ΠΏΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρƒ, ΠΌΡ‹ прописали Ρ‡Π΅Ρ€Π΅Π· CSS для класса demoSpIcon Ρ‚Π΅ стили, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±ΡƒΠ΄ΡƒΡ‚ повторятся для ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΈΠΊΠΎΠ½ΠΊΠΈ.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Ρ‡Π΅Ρ€Π΅Π· ΠΏΡ€ΠΎΠ±Π΅Π» Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ ΠΏΡƒΠ½ΠΊΡ‚Ρƒ ΠΏΠΎ классу с ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΌ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ, ΠΊ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ Π·Π°Π΄Π°Π΄ΠΈΠΌ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ Π½Π° спрайтС:

ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ стили с ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌΠΈ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Π°ΠΌΠΈ ΠΈΠΊΠΎΠ½ΠΎΠΊ:

Как Π²ΠΈΠ΄ΠΈΠΌ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π²ΠΎΠ·Π»Π΅ ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ Π½ΡƒΠΆΠ½Ρ‹Π΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈΠ· спрайта.

Π”Π°Π»ΡŒΡˆΠ΅ ΠΌΠΎΠΆΠ΅ΠΌ Π΄Π΅Π»Π°Ρ‚ΡŒ всё Ρ‡Ρ‚ΠΎ Π·Π°Ρ…ΠΎΡ‚ΠΈΠΌ. НапримСр, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΈΠ· нашСго Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ мСню Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅, ΠΌΡ‹ ΠΊ Ρ‚Π΅Π³Ρƒ ul Π΄ΠΎΠ±Π°Π²ΠΈΠΌ класс horizont ΠΈ Π² CSS ΠΏΡ€ΠΎΠΏΠΈΡˆΠ΅ΠΌ для Π½Π΅Π³ΠΎ стили.

ΠŸΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ HTML ΠΌΠ°ΠΊΠ΅Ρ‚:

А стили CSS Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π±ΡƒΠ΄ΡƒΡ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‚Π°ΠΊ:

ΠšΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ спрайта

ΠšΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ спрайта ΠΏΠΎΠ΄Π±ΠΈΡ€Π°ΡŽΡ‚ΡΡ Ρ‡Π΅Ρ€Π΅Π· консоль Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°. Для этого Π½Π°Π²ΠΎΠ΄ΠΈΠΌ курсор ΠΌΡ‹ΡˆΠΊΠΈ Π½Π° ΠΏΡƒΠ½ΠΊΡ‚ мСню Π³Π΄Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ ΠΈ ΠΆΠΌΡ‘ΠΌ ΠΏΡ€Π°Π²ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΌΡ‹ΡˆΠΊΠΈ.

Π’ мСню Π²Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ Π˜ΡΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚ΡŒ элСмСнт (Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΌΠ°Π·ΠΈΠ»Π°) ΠΈΠ»ΠΈ ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠΎΠ΄ (Π² Π³ΡƒΠ³Π»-Ρ…Ρ€ΠΎΠΌ).

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Ρ‡Ρ‚ΠΎ для спрайтов принято Π±Ρ€Π°Ρ‚ΡŒ минусовыС значСния ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚. ПослС Ρ‚ΠΎΠ³ΠΎ ΠΊΠ°ΠΊ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ нашли, ΠΊΠΎΠΏΠΈΡ€ΡƒΠ΅ΠΌ ΠΈ вставляСм ΠΈΡ… Π² CSS

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Π€ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅

Анимация ΠΈΠ· спрайта

Π’Π°ΠΊ ΠΆΠ΅ спрайты ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ для Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.

НапримСр Π²ΠΎΠ·ΡŒΠΌΡ‘ΠΌ Π²ΠΎΡ‚ Ρ‚Π°ΠΊΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ-спрайт, которая состоит ΠΈΠ· ΡˆΠ΅ΡΡ‚ΠΈ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ΠΎΠ²

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Π€ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π² HTML вставим div с айдишником marsch

ΠΈ ΠΏΡ€ΠΎΠΏΠΈΡˆΠ΅ΠΌ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ CSS стили:

Π’ΠΎ Π² Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠΌ Π²ΠΎΡ‚ Ρ‚Π°ΠΊΠΎΠ³ΠΎ ΠΈΠ΄ΡƒΡ‰Π΅Π³ΠΎ Ρ‡Π΅Π»ΠΎΠ²Π΅Ρ‡ΠΊΠ°:

*** ΠΠ²Ρ‚ΠΎΡ€ΠΈΠ·ΠΈΡ€ΡƒΠΉΡ‚Π΅ΡΡŒ Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ.

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

Π‘ΠΏΡ€Π°ΠΉΡ‚Ρ‹

Π‘Π»ΠΎΠ²ΠΎ «ΡΠΏΡ€Π°ΠΉΡ‚» часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π² ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ ΠΈΠ³Ρ€ для обозначСния Ρ„ΠΈΠ³ΡƒΡ€ΠΎΠΊ Π³Π΅Ρ€ΠΎΠ΅Π² ΠΈ ΠΏΡ€Π΅Π΄ΠΌΠ΅Ρ‚ΠΎΠ². Π’Π°ΠΊΠΈΠ΅ Ρ„ΠΈΠ³ΡƒΡ€ΠΊΠΈ – это Π½Π° самом Π΄Π΅Π»Π΅ рисунки ΠΈΠ»ΠΈ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π½Π°Ρ Π³Ρ€Π°Ρ„ΠΈΠΊΠ°.

Однако спрайт – Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°, это ΠΎΠ±ΡŠΠ΅ΠΊΡ‚, Π½Π°Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½Ρ‹ΠΌ ΠΊΠΎΠ΄ΠΎΠΌ ΠΈ ΠΊΠ°ΠΊ слСдствиС свойствами ΠΈ способностями. Π‘ΠΎ спрайтом ΠΌΠΎΠΆΠ½ΠΎ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ с Π²ΠΈΡ€Ρ‚ΡƒΠ°Π»ΡŒΠ½ΠΎΠΉ ΡΡƒΡ‰Π½ΠΎΡΡ‚ΡŒΡŽ, ΠΎΡ‚Π΄Π°Π²Π°Ρ‚ΡŒ Π΅ΠΉ ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ ΠΈ ΠΏΠΎΠ»ΡƒΡ‡Π°Ρ‚ΡŒ ΠΎΡ‚ Π½Π΅Π΅ Π΄Π°Π½Π½Ρ‹Π΅.

ΠšΠΎΡ‚ Π² Scratch – Π½Π΅ СдинствСнный ΠΎΠ±ΡŠΠ΅ΠΊΡ‚-спрайт. Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π½Π° сцСну Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΌΠΎΠΆΠ½ΠΎ нСсколькими способами: Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ с ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π°, Π½Π°Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ Π² самой срСдС программирования, Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΈΠ· Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ. Для всСго этого Π² Scratch прСдусмотрСно ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠ΅ мСню, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ находится Π²Π½ΠΈΠ·Ρƒ справа Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ спрайтов:

Пока ограничимся Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ Π±ΡƒΠ΄Π΅ΠΌ Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ Π³ΠΎΡ‚ΠΎΠ²Ρ‹Π΅ спрайты ΠΈΠ· Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ. Для этого Π½Π°Π΄ΠΎ Π½Π°ΠΆΠ°Ρ‚ΡŒ Π»ΡƒΠΏΡƒ. ΠžΡ‚ΠΊΡ€ΠΎΠ΅Ρ‚ΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ°, Π³Π΄Π΅ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡ‚ΠΈ подходящСго гСроя.

ПослС ΠΊΠ»ΠΈΠΊΠ° ΠΏΠΎ Π½Π΅ΠΌΡƒ ΠΎΠ½ появится Π½Π° сцСнС. Π’Π°ΠΊΠΆΠ΅ Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ спрайтов ΠΏΠΎΠ΄ свойствами появится Π΅Π³ΠΎ ΠΈΠΊΠΎΠ½ΠΊΠ°. Рядом с ΠΈΠΊΠΎΠ½ΠΊΠΎΠΉ ΠΊΠΎΡ‚Π°. Бвойства ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°, Π³Π΄Π΅ Π²Ρ‹ Π·Π°Π΄Π°Π΅Ρ‚Π΅ Π΅ΠΌΡƒ имя, ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈ ΠΏΠΎΠ²ΠΎΡ€ΠΎΡ‚, ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для Ρ‚ΠΎΠ³ΠΎ спрайта, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹Π΄Π΅Π»Π΅Π½.

Если Π²Ρ‹ Π·Π°Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· спрайтов, ΠΊΠ»ΠΈΠΊΠ½ΠΈΡ‚Π΅ ΠΏΠΎ Π΅Π³ΠΎ ΠΈΠΊΠΎΠ½ΠΊΠ΅ ΠΏΠΎΠ΄ свойствами. Π­Ρ‚ΠΎΡ‚ спрайт станСт Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌ, Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹ΠΌ, ΠΈΠΊΠΎΠ½ΠΊΠ° обрамится синим Ρ†Π²Π΅Ρ‚ΠΎΠΌ ΠΈ Ρƒ Π½Π΅Π΅ появится крСстик, ΠΊΠ»ΠΈΠΊΠ½ΡƒΠ² ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ±Ρ€Π°Ρ‚ΡŒ спрайт ΠΈΠ· ΠΈΠ³Ρ€Ρ‹.

Когда Π² Scratch ΠΌΡ‹ собираСм Π±Π»ΠΎΠΊΠΈ Π² ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½Ρ‹ΠΉ ΠΊΠΎΠ΄, этот ΠΊΠΎΠ΄ Π½Π΅ сущСствуСт Π² прострации сам ΠΏΠΎ сСбС. Π§Π°Ρ‰Π΅ всСго ΠΎΠ½ относится ΠΊ ΠΊΠ°ΠΊΠΎΠΌΡƒ-Ρ‚ΠΎ спрайту. Π”Ρ€ΡƒΠ³ΠΈΠΌΠΈ словами, Ρƒ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ спрайта свой ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½Ρ‹ΠΉ ΠΊΠΎΠ΄, своя ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°, своС ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅. Π“Π΅Ρ€ΠΎΠΈ ΠΌΠΎΠ³ΡƒΡ‚ «ΠΎΠ±Ρ‰Π°Ρ‚ΡŒΡΡ» ΠΌΠ΅ΠΆΠ΄Ρƒ собой Ρ‡Π΅Ρ€Π΅Π· сигналы, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΡΡ‹Π»Π°ΡŽΡ‚ Π΄Ρ€ΡƒΠ³ ΠΊ Π΄Ρ€ΡƒΠ³Ρƒ. Но это другая история.

БСйчас Π½Π°Π΄ΠΎ Π·Π°ΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΊΠΎΠ³Π΄Π° ΠΌΡ‹ Ρ€Π°Π±ΠΎΡ‚Π°Π΅ΠΌ с Π±Π»ΠΎΠΊΠ°ΠΌΠΈ, слСдуСт ΠΎΠ±Ρ€Π°Ρ‰Π°Ρ‚ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Ρ‚ΠΎ, ΠΊΠ°ΠΊΠΎΠΉ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ Π²Ρ‹Π΄Π΅Π»Π΅Π½. Π’ Scratch появляСтся подсказка Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ ΠΏΡ€Π°Π²ΠΎΠΌ ΡƒΠ³Π»Ρƒ поля Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π° ΠΊΠΎΠ΄Π°. Π’Π°ΠΌ Π±Π»Π΅Π΄Π½Ρ‹ΠΌ Ρ†Π²Π΅Ρ‚ΠΎΠΌ отобраТаСтся Ρ„ΠΈΠ³ΡƒΡ€ΠΊΠ° Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ Π½Π° Π΄Π°Π½Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ спрайта. А Π·Π½Π°Ρ‡ΠΈΡ‚ вСсь ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ Π²ΠΈΠ΄ΠΈΡ‚Π΅ Π² Ρ€Π°Π±ΠΎΡ‡Π΅ΠΉ области, относится Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊ Π΄Π°Π½Π½ΠΎΠΌΡƒ Π³Π΅Ρ€ΠΎΡŽ.

Когда выдСляСтся Π΄Ρ€ΡƒΠ³ΠΎΠΉ спрайт, Ρ‚ΠΎ ΠΊΠΎΠ΄ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅Π³ΠΎ становится Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΡ‹ΠΌ.

НСрСдко ΠΊΠΎΠ΄ ΠΎΠ΄Π½ΠΎΠ³ΠΎ спрайта оказываСтся ΠΏΠΎΡ…ΠΎΠΆΠΈΠΌ Π½Π° Π΄Ρ€ΡƒΠ³ΠΎΠΉ. НапримСр, ΠΎΠ±Π° гСроя ходят ΠΏΠΎ сцСнС, просто с Ρ€Π°Π·Π½ΠΎΠΉ ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒΡŽ ΠΈ Π² Ρ€Π°Π·Π½Ρ‹Π΅ направлСния. Π‘ΠΎΠ±ΠΈΡ€Π°Ρ‚ΡŒ Π΄Π²Π° Ρ€Π°Π·Π° ΠΏΠΎΡ‡Ρ‚ΠΈ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡƒΡŽ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°Ρ†ΠΈΡŽ Π±Π»ΠΎΠΊΠΎΠ² – Π½Π΅ слишком ΡƒΠ΄Π°Ρ‡Π½ΠΎΠ΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅. ΠŸΡ€ΠΎΡ‰Π΅ ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ ΠΎΠ΄Π½ΠΎΠ³ΠΎ спрайта, Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π΅Π΅ Π΄Ρ€ΡƒΠ³ΠΎΠΌΡƒ, Π° ΠΏΠΎΡ‚ΠΎΠΌ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ.

Π’ Scratch ΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ собранныС Π² ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ Π±Π»ΠΎΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΊΠ°ΠΊ Π² ΠΏΡ€Π΅Π΄Π΅Π»Π°Ρ… ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°, Ρ‚Π°ΠΊ ΠΈ ΠΏΠ΅Ρ€Π΅Π½ΠΎΡΠΈΡ‚ΡŒ копию Π² «Ρ€ΡŽΠΊΠ·Π°ΠΊΠ΅» ΠΈΠ· ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° Π² Π΄Ρ€ΡƒΠ³ΠΎΠΉ. Рюкзак находится Π²Π½ΠΈΠ·Ρƒ интСрфСйса срСды Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ.

Допустим, Ρƒ нас Π΅ΡΡ‚ΡŒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ ΠΏΠΎΠ΄ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ «ΠŸΡ€ΠΎΠ΅ΠΊΡ‚ 1», Π³Π΄Π΅ ΠΌΡ‹ составили ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ двиТСния ΠΊΠΎΡ‚Π° Ρ‚ΡƒΠ΄Π°-сюда. ΠœΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ этот ΠΊΠΎΠ΄ Π² «ΠŸΡ€ΠΎΠ΅ΠΊΡ‚ 2». Π’ΠΎΠ³Π΄Π° ΠΌΡ‹ Π·Π°Ρ…ΠΎΠ΄ΠΈΠΌ Π² ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚, ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌ Ρ€ΡŽΠΊΠ·Π°ΠΊ ΠΈ пСрСтаскиваСм сюда ΠΊΠΎΠ½ΡΡ‚Ρ€ΡƒΠΊΡ†ΠΈΡŽ Π±Π»ΠΎΠΊΠΎΠ².

ΠŸΡ€ΠΈ этом Π½Π°Π΄ΠΎ ΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ: пСрСносится участок ΠΊΠΎΠ΄Π° ΠΎΡ‚ Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°, Π·Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΡ‹ дСрТимся, ΠΈ Π±Π»ΠΎΠΊΠΈ, располоТСнныС Π½ΠΈΠΆΠ΅ Π½Π΅Π³ΠΎ. Если Π²Ρ‹ взялись Π·Π° Π±Π»ΠΎΠΊ, располоТСнный Π³Π΄Π΅-Ρ‚ΠΎ Π² сСрСдинС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹, Ρ‚ΠΎ Π²Π΅Ρ€Ρ…Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠΈ оторвутся ΠΈ Π½Π΅ Π±ΡƒΠ΄ΡƒΡ‚ Π·Π°Ρ…Π²Π°Ρ‡Π΅Π½Ρ‹.

ПолоТив Π² Ρ€ΡŽΠΊΠ·Π°ΠΊ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ, ΠΌΡ‹ возвращаСмся Π²ΠΎ Π²Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚. ВыдСляСм спрайт, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ Ρ…ΠΎΡ‚ΠΈΠΌ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠ΄. ΠžΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌ Ρ€ΡŽΠΊΠ·Π°ΠΊ ΠΈ достаСм ΠΈΠ· Π½Π΅Π³ΠΎ Π½Π°ΡˆΡƒ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ.

Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ ΠΎΠ΄Π½ΠΎΠ³ΠΎ спрайта Π½Π° Π΄Ρ€ΡƒΠ³ΠΎΠΉ Π² ΠΏΡ€Π΅Π΄Π΅Π»Π°Ρ… ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°, достаточно Π·Π°Ρ…Π²Π°Ρ‚ΠΈΡ‚ΡŒ ΠΊΠΎΠ΄ ΠΈ Π±Ρ€ΠΎΡΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π½Π° ΠΈΠΊΠΎΠ½ΠΊΡƒ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ спрайта, которая располоТСна ΠΏΠΎΠ΄ свойствами Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ спрайтов.

Если Π½Π°Π΄ΠΎ ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ΄ Π² ΠΏΡ€Π΅Π΄Π΅Π»Π°Ρ… ΠΎΠ΄Π½ΠΎΠ³ΠΎ спрайта, Π½Π°Π΄ΠΎ ΠΊΠ»ΠΈΠΊΠ½ΡƒΡ‚ΡŒ ΠΏΠΎ конструкции ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΈ ΠΈ Π² контСкстном мСню Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ «Π”ΡƒΠ±Π»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ».

Π’Π°ΠΊΠΆΠ΅ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΠΏΡƒΠ½ΠΊΡ‚ «Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ». ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡΡ‚Ρ‹ часто ΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ коммСнтариями, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΡΡΠ½ΠΈΡ‚ΡŒ сСбС ΠΈ ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹ΠΌ, Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ Ρ‚Π° ΠΈΠ»ΠΈ иная Ρ‡Π°ΡΡ‚ΡŒ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹. Π’Π΅Π΄ΡŒ ΠΏΡ€ΠΈ взглядС Π½Π° слоТный ΠΊΠΎΠ΄ Π½Π΅ всСгда сразу ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ½ΡΡ‚ΡŒ, для Ρ‡Π΅Π³ΠΎ ΠΎΠ½, ΠΈ ΠΊΠ°ΠΊ всС это Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚.

Когда Π½Π° сцСнС ΠΎΠ±ΠΈΡ‚Π°ΡŽΡ‚ нСсколько спрайтов, становится Π²Π°ΠΆΠ½Ρ‹ΠΌ ΠΈΡ… ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π΄Ρ€ΡƒΠ³ Π΄Ρ€ΡƒΠ³Π°, ΠΈΡ… мСсто Π½Π° сцСнС. Как Π²Ρ‹ ΡƒΠΆΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Π»ΠΈ ΠΏΠΎΠ½ΡΡ‚ΡŒ, изучая панСль свойств спрайта, ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ гСроя задаСтся ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Π°ΠΌΠΈ, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ Ρ‚ΠΎΡ‡ΠΊΠΎΠΉ Π½Π° плоскости.

Π₯отя Ρ€Π°Π±ΠΎΡ‚Ρƒ с Ρ„ΠΎΠ½Π°ΠΌΠΈ ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΠ·ΡƒΡ‡Π°Ρ‚ΡŒ ΠΏΠΎΠ·ΠΆΠ΅, Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π½Π° сцСну ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Π½ΡƒΡŽ сСтку. Π­Ρ‚ΠΎ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π½Π°ΠΌ ΡΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π² систСмС ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚ Π‘ΠΊΡ€Π΅Ρ‚Ρ‡Π°. Π§Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Ρ„ΠΎΠ½ ΠΈΠ· Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ, Π½Π°Π΄ΠΎ Π½Π°ΠΆΠ°Ρ‚ΡŒ Π½Π° Π»ΡƒΠΏΡƒ Π² мСню сцСны, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ находится Π² Π½ΠΈΠΆΠ½Π΅ΠΌ ΠΏΡ€Π°Π²ΠΎΠΌ ΡƒΠ³Π»Ρƒ ΠΎΠΊΠ½Π°, Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ «Π‘Ρ†Π΅Π½Π°».

ΠžΡ‚ΠΊΡ€ΠΎΠ΅Ρ‚ΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° Ρ„ΠΎΠ½ΠΎΠ², ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΈΡ‚Π΅ Π΅Π΅ Π² самый Π½ΠΈΠ· ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Ρ„ΠΎΠ½ «Xy-grid». На сцСнС появится координатная сСтка.

Π”Π°Π²Π°ΠΉΡ‚Π΅ ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€ Π½Π°ΡˆΠΈΡ… спрайтов Ρ€Π°Π·Π° Π² Π΄Π²Π°, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ Π΄ΠΎ 50%, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ Π½Π΅ Π·Π°Π½ΠΈΠΌΠ°Π»ΠΈ Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ ΠΏΠ»ΠΎΡ‰Π°Π΄ΡŒ сцСны, Π° большС ΠΏΠΎΡ…ΠΎΠ΄ΠΈΠ»ΠΈ Π½Π° Ρ‚ΠΎΡ‡ΠΊΡƒ. Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΠΎΠΈΠ³Ρ€Π°Π΅ΠΌ с ΠΈΡ… ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Π°ΠΌΠΈ. Для этого ΠΌΠΎΠΆΠ½ΠΎ ΠΌΠ΅Π½ΡΡ‚ΡŒ значСния x ΠΈ y Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ свойств ΠΈ ΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ, Π³Π΄Π΅ послС этого окаТСтся Π³Π΅Ρ€ΠΎΠΉ. Или просто ΠΏΠ΅Ρ€Π΅Ρ‚Π°ΡΠΊΠΈΠ²Π°Ρ‚ΡŒ ΠΌΡ‹ΡˆΡŒΡŽ спрайт Π½Π° сцСнС ΠΈ ΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°ΠΊ ΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ x ΠΈ y Π² свойствах.

НапримСр, Ссли x = 0, y = 150, спрайт окаТСтся Π² Ρ†Π΅Π½Ρ‚Ρ€Π΅ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ ΠΈ Π²Π²Π΅Ρ€Ρ…Ρƒ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ. Если x = 200, y = 0, Ρ‚ΠΎ спрайт окаТСтся справа ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ ΠΈ Π² Ρ†Π΅Π½Ρ‚Ρ€Π΅ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ.

На самом Π΄Π΅Π»Π΅ Π½Π΅ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π΄ΠΎ запуска ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°Ρ‚ΡŒ спрайты Π² Π½ΡƒΠΆΠ½ΠΎΠ΅ мСсто с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΌΡ‹ΡˆΠΈ ΠΈΠ»ΠΈ ΠΏΠ°Π½Π΅Π»ΠΈ свойств. ΠžΠ±Ρ‹Ρ‡Π½ΠΎ это Π΄Π΅Π»Π°ΡŽΡ‚ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎ, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… Π±Π»ΠΎΠΊΠΎΠ² ΠΊΠΎΠ΄Π°, находящихся Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ «Π”Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅». Одним ΠΈΠ· ΡƒΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΡ… мСстополоТСниСм Π±Π»ΠΎΠΊΠΎΠ² являСтся ΠΊΠΎΠΌΠ°Π½Π΄Π° «ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ Π² x: … y: …». ВмСсто Ρ‚ΠΎΡ‡Π΅ΠΊ ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ΡΡ ΠΆΠ΅Π»Π°Π΅ΠΌΡ‹Π΅ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹.

Π­Ρ‚Π° ΠΊΠΎΠΌΠ°Π½Π΄Π° быстро пСрСбрасываСт спрайт Π² Π·Π°Π΄Π°Π½Π½ΡƒΡŽ Ρ‚ΠΎΡ‡ΠΊΡƒ, поэтому Π΅Π΅ часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Π² Π½Π°Ρ‡Π°Π»Π΅ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹:

Π’ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅, Π³Π΄Π΅ Π±Ρ‹ Π½ΠΈ стоял Π½Π° сцСнС спрайт Π΄ΠΎ запуска ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹, ΠΊΠ°ΠΊ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π½Π°ΠΆΠ°Ρ‚ Π·Π΅Π»Π΅Π½Ρ‹ΠΉ Ρ„Π»Π°ΠΆΠΎΠΊ, Π³Π΅Ρ€ΠΎΠΉ Ρ‚ΡƒΡ‚ ΠΆΠ΅ окаТСтся Π² Ρ‚ΠΎΡ‡ΠΊΠ΅ (0; 50).

ΠžΡ‚ΠΌΠ΅Ρ‚ΠΈΠΌ напослСдок ΠΏΡ€ΠΎ слои. НашС пространство Π½Π΅ Π΄Π²ΡƒΠΌΠ΅Ρ€Π½ΠΎΠ΅, ΠΊΠ°ΠΊ ΠΏΠ»ΠΎΡΠΊΠΎΡΡ‚ΡŒ, Π° Ρ‚Ρ€Π΅Ρ…ΠΌΠ΅Ρ€Π½ΠΎΠ΅. Π£ нас Π΅ΡΡ‚ΡŒ высота, ΡˆΠΈΡ€ΠΈΠ½Π° ΠΈ Π΄Π»ΠΈΠ½Π°. Π₯отя Scratch позволяСт ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π΄Π²ΡƒΠΌΠ΅Ρ€Π½Ρ‹Π΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, Π½Π° самом Π΄Π΅Π»Π΅ Π΄Π°ΠΆΠ΅ Π² 2D-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π΅ΡΡ‚ΡŒ своСго Ρ€ΠΎΠ΄Π° Ρ‚Ρ€Π΅Ρ‚ΡŒΠ΅ ΠΈΠ·ΠΌΠ΅Ρ€Π΅Π½ΠΈΠ΅. Π­Ρ‚ΠΎ слои.

ΠŸΡƒΡΡ‚ΡŒ ΠΏΠΎ сцСнС ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°ΡŽΡ‚ΡΡ Π΄Π²Π° спрайта. Π§Ρ‚ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΊΠΎΠ³Π΄Π° ΠΈΡ… ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ совпадут? НичСго. Они Π½Π΅ ΡΡ‚ΠΎΠ»ΠΊΠ½ΡƒΡ‚ΡŒΡΡ ΠΈ Π½Π΅ затормозят Π΄Ρ€ΡƒΠ³ Π΄Ρ€ΡƒΠ³Π°. Один спрайт ΠΏΡ€ΠΎΠΉΠ΄Π΅Ρ‚ ΠΊΠ°ΠΊ Π±Ρ‹ ΠΏΠΎΠ·Π°Π΄ΠΈ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ, Π° Π΄Ρ€ΡƒΠ³ΠΎΠΉ – ΠΏΠΎΠ²Π΅Ρ€Ρ… ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ. ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΆΠΈΠ²Π΅Ρ‚ Π½Π° своСм слоС плоскости ΠΈ Π΅ΠΌΡƒ Π½Π΅Ρ‚ Π΄Π΅Π»Π° Π΄ΠΎ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ.

Однако Π±Ρ‹Π²Π°Π΅Ρ‚ Π²Π°ΠΆΠ½ΠΎ, слой ΠΊΠ°ΠΊΠΎΠ³ΠΎ спрайта располоТСн Π²Ρ‹ΡˆΠ΅, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ Π²ΠΏΠ΅Ρ€Π΅Π΄ΠΈ. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ Π½Π° рисунок:

Π‘Π»Π΅Π²Π° слой Ρ€Π°ΠΊΠ΅Ρ‚Ρ‹ располоТСн Π²Ρ‹ΡˆΠ΅, слоя ΠΊΠΎΡ‚Π°. Π‘ΠΏΡ€Π°Π²Π°, Π½Π°ΠΎΠ±ΠΎΡ€ΠΎΡ‚, ΠΊΠΎΡ‚ находится Π½Π°Π΄ Ρ€Π°ΠΊΠ΅Ρ‚ΠΎΠΉ.

Π’ Scratch ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΎΡ‡Π΅Ρ€Π΅Π΄Π½ΠΎΡΡ‚ΡŒ слоСв ΠΌΠΎΠΆΠ½ΠΎ ΠΊΠ°ΠΊ ΠΌΡ‹ΡˆΠΊΠΎΠΉ Π½Π° сцСнС, Ρ‚Π°ΠΊ ΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π±Π»ΠΎΠΊΠΎΠ² ΠΊΠΎΠ΄Π°. Π§Ρ‚ΠΎΠ±Ρ‹ это ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΠ΅Ρ€Π²Ρ‹ΠΌ способом, Π½Π°Π΄ΠΎ Π²Π·ΡΡ‚ΡŒ Ρ‚ΠΎΡ‚ спрайт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ Π½Π°Π΄, ΠΈ ΠΊΠΈΠ½ΡƒΡ‚ΡŒ Π΅Π³ΠΎ Π½Π° спрайт, Ρ‡Π΅ΠΉ слой Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΠ΄.

Π‘Π»ΠΎΠΊΠΈ измСнСния очСрСдности слоСв находятся Π² Ρ„ΠΈΠΎΠ»Π΅Ρ‚ΠΎΠ²ΠΎΠΉ сСкции «Π’Π½Π΅ΡˆΠ½ΠΈΠΉ Π²ΠΈΠ΄». Π­Ρ‚ΠΎ ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ «ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ Π½Π° ΠΏΠ΅Ρ€Π΅Π΄Π½ΠΈΠΉ/Π·Π°Π΄Π½ΠΈΠΉ Ρ„ΠΎΠ½» ΠΈ «ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ Π²ΠΏΠ΅Ρ€Π΅Π΄/Π½Π°Π·Π°Π΄ Π½Π° … слоя».

Π‘ΠΎΡΡ‚Π°Π²ΡŒΡ‚Π΅ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΎΠ΄ΠΈΠ½ спрайт постоянно Ρ…ΠΎΠ΄ΠΈΡ‚ Π·Π° ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»Π΅ΠΌ ΠΌΡ‹ΡˆΠΈ, Π° Π²Ρ‚ΠΎΡ€ΠΎΠΉ – находится Π² Ρ†Π΅Π½Ρ‚Ρ€Π΅ сцСны ΠΈ, стоя Π½Π° ΠΎΠ΄Π½ΠΎΠΌ мСстС, ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎ крутится ΠΏΠΎ часовой стрСлкС. Π‘Π»ΠΎΠΉ ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ Π½Π°Π΄ слоСм Π²Ρ‚ΠΎΡ€ΠΎΠ³ΠΎ.

Для выполнСния задания ΠΏΠΎΡ‚Ρ€Π΅Π±ΡƒΡŽΡ‚ΡΡ Π΄Π²Π΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ – «ΠΏΠΎΠ²Π΅Ρ€Π½ΡƒΡ‚ΡŒΡΡ ΠΊ ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΌΡ‹ΡˆΠΈ», «ΠΏΠΎΠ²Π΅Ρ€Π½ΡƒΡ‚ΡŒ ΠΏΠΎ часовой стрСлкС Π½Π° … градусов» (вмСсто слов «ΠΏΠΎ часовой стрСлкС» Π½Π° Π±Π»ΠΎΠΊΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½Π° дуговая стрСлка).

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

Как ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ CSS-спрайты для увСличСния скорости Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Π²Π΅Π±-страниц

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Π€ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅

Π‘ΠΏΡ€Π°ΠΉΡ‚Ρ‹ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ Π½Π΅ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ дСнь. Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΈΠ³Ρ€ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ этот инструмСнт, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΡΠΊΠΎΡ€ΡΡ‚ΡŒ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π½Π° экранС. Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΏΠΎΠΉΠ΄Ρ‘Ρ‚ Ρ€Π΅Ρ‡ΡŒ ΠΎΠ± использовании спрайтов для ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ ΠΎΠΏΡ‹Ρ‚Π° посСтитСлСй сайтов.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² CSS

Π‘ΠΏΡ€Π°ΠΉΡ‚ β€” ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ являСтся Ρ‡Π°ΡΡ‚ΡŒΡŽ сцСны Π² ΠΈΠ³Ρ€Π΅. НСсколько спрайтов ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΡΡŽΡ‚ΡΡ Π² ΠΎΠ΄Π½ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ называСтся Ρ‚Π°Π±Π»ΠΈΡ†Π΅ΠΉ спрайтов (sprite sheet). ПослС Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Π² ΠΏΠ°ΠΌΡΡ‚ΡŒ спрайты ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΈ быстро ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ Π½Π° экранС. Π­Ρ‚ΠΎ создаёт иллюзию Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΡƒΠ²ΠΈΠ΄Π΅Π» Π½Π° экранС ΠΎΠ΄Π½Ρƒ сцСну, Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ дСсятки ΠΈΠ»ΠΈ сотни Ρ€Π°Π·Π½Ρ‹Ρ… спрайтов.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Π€ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ спрайтов

Π’ΠΎΡ‚ главная идСя использования спрайтов Π² CSS: быстрСС Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ ΠΎΠ΄Π½ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Π΅Π³ΠΎ ΠΏΠΎ частям, Π° Π½Π΅ Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ нСсколько ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ ΠΈΡ… ΠΏΠΎ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΠΈ.

CSS-спрайты: быстрый ΠΎΠ±Π·ΠΎΡ€ возмоТностСй

CSS-спрайты β€” тСхнология, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ для ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ Π²Π΅Π±-страниц. ВСхнология ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅Ρ‚ объСдинСниС Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Π½Π΅Π±ΠΎΠ»ΡŒΡˆΠΈΡ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ с ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΌ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ Π² ΠΎΠ΄Π½ΠΎ большоС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Ρ‚Π°ΠΊΠΆΠ΅ называСтся Ρ‚Π°Π±Π»ΠΈΡ†Π΅ΠΉ спрайтов. Π’Π°Π±Π»ΠΈΡ†Π° спрайтов ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ, ΠΊΠΎΠ³Π΄Π° Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ элСмСнты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΠ²Π»ΡΡŽΡ‚ΡΡ Ρ‡Π°ΡΡ‚ΡŒΡŽ большого изобраТСния.

ΠžΠ±Ρ‹Ρ‡Π½ΠΎ Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ Π² Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ спрайтов Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΡ‹, Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹Π΅ стрСлки, ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅. Π’Π°ΠΊΠΈΠ΅ элСмСнты ΠΈΠΌΠ΅ΡŽΡ‚ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠ΅ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ ΠΈ часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π½Π° страницах сайта.

Как спрайты ΠΏΠΎΠΌΠΎΠ³Π°ΡŽΡ‚ Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ

Π§Π°Ρ‰Π΅ всСго ΠΏΡ€ΠΈ создании сайтов Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ хранят ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ изобраТСния ΠΊΠ°ΠΊ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ Ρ„Π°ΠΉΠ»Ρ‹. Когда ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ страницу, Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ отправляСт ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ HTTP-запрос, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ„Π°ΠΉΠ». Π­Ρ‚ΠΎ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Π΅Ρ‚ врСмя Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ сайта, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Π½Π° страницС ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΠΈΠΊΠΎΠ½ΠΎΠΊ, Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠΎΠ².

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Π€ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅

ΠŸΡ€Π΅ΠΈΠΌΡƒΡ‰Π΅ΡΡ‚Π²Π° спрайтов: ΠΎΠ΄ΠΈΠ½ HTTP-запрос ΠΏΡ€ΠΎΡ‚ΠΈΠ² ΡˆΠ΅ΡΡ‚ΠΈ

CSS-спрайты ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΡΡ‚ΡŒ часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Π΅ малСнькиС изобраТСния Π² ΠΎΠ΄Π½ΠΎ большоС. Благодаря этому Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π·Π°Π³Ρ€ΡƒΠΆΠ°Π΅Ρ‚ ΠΎΠ΄ΠΈΠ½ Ρ„Π°ΠΉΠ». Π§Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ Π½ΡƒΠΆΠ½ΠΎΠ΅ малСнькоС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ смСщСниС Π² большом ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ.

ΠŸΡ€Π΅ΠΈΠΌΡƒΡ‰Π΅ΡΡ‚Π²Π° использования спрайтов

Π”Π²Π° основных прСимущСства использования спрайтов:

Как ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ спрайтов

Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ спрайтов, Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΠΈΡ‚ΡŒ всС Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ элСмСнты Π² ΠΎΠ΄Π½ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ΠΎΠ² ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Photoshop ΠΈΠ»ΠΈ GIMP. Π’Π°ΠΊΠΆΠ΅ эту Π·Π°Π΄Π°Ρ‡Ρƒ ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΎΠ½Π»Π°ΠΉΠ½-Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ΠΎΠ² CSS-спрайтов, ΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΏΠΎΠΉΠ΄Ρ‘Ρ‚ Ρ€Π΅Ρ‡ΡŒ Π½ΠΈΠΆΠ΅.

Когда Ρ‚Π°Π±Π»ΠΈΡ†Π° спрайтов Π³ΠΎΡ‚ΠΎΠ²Π°, Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ обСспСчиваСт доступ ΠΊ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹ΠΌ элСмСнтам. Для этого ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹:

Как ΠΎΡ‚ΠΌΠ΅Ρ‡Π°Π»ΠΎΡΡŒ Π²Ρ‹ΡˆΠ΅, Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ спрайтов ΠΌΠΎΠΆΠ½ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ популярных Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ΠΎΠ² ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. Но Π΅ΡΡ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ простыС способы.

ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ: ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΎΠ½Π»Π°ΠΉΠ½-Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€Ρ‹ для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с Ρ‚Π°Π±Π»ΠΈΡ†Π°ΠΌΠΈ спрайтов, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, CSS Sprite Generator. Π­Ρ‚ΠΎ бСсплатный инструмСнт. К Ρ‚ΠΎΠΌΡƒ ΠΆΠ΅ ΠΎΠ½ автоматичСски Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΠ΅Ρ‚ CSS-ΠΊΠΎΠ΄, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹ΠΉ для доступа ΠΊ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΌ элСмСнтам. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ свойства, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΌΠ΅Π½ΡΡ‚ΡŒ отступы ΠΈ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Π€ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅

Для установки Sprity ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΊΠΎΠΌΠ°Π½Π΄Ρƒ:

Для Ρ€Π°Π±ΠΎΡ‚Ρ‹ со Sprity Π² ΠΊΠΎΠΌΠ°Π½Π΄Π½ΠΎΠΉ строкС понадобится ΠΏΠ°ΠΊΠ΅Ρ‚ sprity-cli.

Как ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с CSS-спрайтами

Π’ качСствС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ спрайтов, ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΡ‘Π½Π½ΡƒΡŽ Π½Π° ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΈ.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Π€ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅

Π’ Ρ‚Π°Π±Π»ΠΈΡ†Π΅ Π΅ΡΡ‚ΡŒ ΡˆΠ΅ΡΡ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΎΠΊ ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… сСтСй. Π’ Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ ряду ΠΈΠΊΠΎΠ½ΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ видят ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ. Π’ Π½ΠΈΠΆΠ½Π΅ΠΌ ряду ΠΈΠΊΠΎΠ½ΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π²ΠΈΠ΄ΠΈΡ‚ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора.

Если Ρ‚Π°Π±Π»ΠΈΡ†Π° спрайтов создана с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ описанного Π²Ρ‹ΡˆΠ΅ ΠΎΠ½Π»Π°ΠΉΠ½-Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€Π°, Ρƒ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° ΡƒΠΆΠ΅ Π΅ΡΡ‚ΡŒ CSS-ΠΊΠΎΠ΄, Π½ΡƒΠΆΠ½Ρ‹ΠΉ для доступа ΠΊ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹ΠΌ элСмСнтам. Если спСциалист использовал Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Ρ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ смСщСниС.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Π€ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅

ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅ΠΌ x ΠΈ y с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ MS Paint ΠΈΠ»ΠΈ GIMP

Если Ρƒ вас Π΅ΡΡ‚ΡŒ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ Π»Π΅Π²ΠΎΠΉ Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ Ρ‚ΠΎΡ‡ΠΊΠΈ Π½ΡƒΠΆΠ½ΠΎΠ³ΠΎ спрайта, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ ΠΈΠΊΠΎΠ½ΠΊΠΈ Instagram, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ доступ ΠΊ Π½ΡƒΠΆΠ½ΠΎΠΌΡƒ элСмСнту с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS-ΠΊΠΎΠ΄Π°.

Π’ Π΄Π°Π½Π½ΠΎΠΌ случаС ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ width ΠΈ height 125px, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈΠΌΠ΅ΡŽΡ‚ Ρ‚Π°ΠΊΠΎΠ΅ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ доступ ΠΊΠΎ Π²Ρ‚ΠΎΡ€ΠΎΠΉ ΠΈΠΊΠΎΠ½ΠΊΠ΅ Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ ряду, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ Ρ‚Π°ΠΊΠΎΠΉ ΠΊΠΎΠ΄.

Π’Π°ΠΊΠΈΠΌ способом ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ доступ ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ элСмСнту Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ спрайтов. Π’ΠΎΡ‚ ΠΊΠ°ΠΊ выглядит HTML ΠΈ CSS ΠΊΠΎΠ΄ Ρ†Π΅Π»ΠΈΠΊΠΎΠΌ.

Π¨Π°Π³ 1: ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ Π½ΡƒΠΆΠ½Ρ‹ΠΉ HTML-ΠΊΠΎΠ΄

Π’ ΠΊΠΎΠ΄Π΅ Π½ΠΈΠΆΠ΅ ΠΌΡ‹ просто добавляСм ссылки Π½Π° ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ рСсурсы.

Π¨Π°Π³ 2: добавляСм стили с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS

Π‘Π½Π°Ρ‡Π°Π»Π° добавляСм стили для ΠΎΠ±Ρ‰Π΅Π³ΠΎ для всСх ΠΈΠΊΠΎΠ½ΠΎΠΊ класса.

Π¨Π°Π³ 3: ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ доступ ΠΊ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΌ элСмСнтам Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ ряда.
Π¨Π°Π³ 4: ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ доступ ΠΊ элСмСнтам Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ряда

ВмСсто Π·Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ: ΠΏΡ€ΠΈΡΠΎΠ΅Π΄ΠΈΠ½ΡΠΉΡ‚Π΅ΡΡŒ ΠΊ Π³ΠΈΠ³Π°Π½Ρ‚Π°ΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ CSS-спрайты

Π’ число Ρ‚Π°ΠΊΠΈΡ… Π³ΠΈΠ³Π°Π½Ρ‚ΠΎΠ² входят Google, Amazon, Facebook ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ с Π³Ρ€ΠΎΠΌΠΊΠΈΠΌΠΈ ΠΈΠΌΠ΅Π½Π°ΠΌΠΈ. Они Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ спрайты, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡŒ количСство HTTP-запросов Π½Π° сСссию для ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ. Π­Ρ‚ΠΎ ΠΎΡ‡Π΅Π½ΡŒ Π²Π°ΠΆΠ½ΠΎ для посСщаСмых сайтов, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π·Π°Ρ…ΠΎΠ΄ΠΈΡ‚ ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ.

Адаптированный ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄ ΡΡ‚Π°Ρ‚ΡŒΠΈ How to Implement CSS Sprites to Enhance Web-Pages. МнСниС администрации Π₯СкслСта ΠΌΠΎΠΆΠ΅Ρ‚ Π½Π΅ ΡΠΎΠ²ΠΏΠ°Π΄Π°Ρ‚ΡŒ с ΠΌΠ½Π΅Π½ΠΈΠ΅ΠΌ Π°Π²Ρ‚ΠΎΡ€Π° ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½ΠΎΠΉ ΠΏΡƒΠ±Π»ΠΈΠΊΠ°Ρ†ΠΈΠΈ.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Π€ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅

Π‘ нуля Π΄ΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°. Π’ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅ΠΌ дСньги, Ссли Π½Π΅ ΡƒΠ΄Π°Π»ΠΎΡΡŒ Π½Π°ΠΉΡ‚ΠΈ Ρ€Π°Π±ΠΎΡ‚Ρƒ.

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

Sprite (ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π½Π°Ρ Π³Ρ€Π°Ρ„ΠΈΠΊΠ°)

БистСмы с Π°ΠΏΠΏΠ°Ρ€Π°Ρ‚Π½Ρ‹ΠΌΠΈ спрайтами Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ TI-99 / 4A (1979), сСмСйство 8-Π±ΠΈΡ‚Π½Ρ‹Ρ… Atari (1979), Commodore 64 (1982), Nintendo Entertainment System (1983), Amiga (1985), Sega Genesis (1988) ΠΈ Π°Ρ€ΠΊΠ°Π΄Ρ‹. ΠΈΠ³Ρ€Ρ‹ 1970-Ρ… ΠΈ 1980-Ρ… Π³ΠΎΠ΄ΠΎΠ². ΠžΠ±ΠΎΡ€ΡƒΠ΄ΠΎΠ²Π°Π½ΠΈΠ΅ различаСтся количСством ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅ΠΌΡ‹Ρ… спрайтов, количСством, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΉ строкС Ρ€Π°Π·Π²Π΅Ρ€Ρ‚ΠΊΠΈ (часто мСньшСС число), Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ ΠΈ Ρ†Π²Π΅Ρ‚ΠΎΠΌ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ спрайта, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΌΠΈ эффСктами, Ρ‚Π°ΠΊΠΈΠΌΠΈ ΠΊΠ°ΠΊ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈΠ»ΠΈ сообщСниС ΠΎ ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Ρ‚ΠΈΠΈ с Ρ‚ΠΎΡ‡Π½ΠΎΡΡ‚ΡŒΡŽ Π΄ΠΎ пиксСля.

ΠŸΡ€ΠΎΡ†Π΅ΡΡΠΎΡ€Ρ‹ Π² соврСмСнных ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π°Ρ…, ΠΈΠ³Ρ€ΠΎΠ²Ρ‹Ρ… консолях ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах достаточно быстры, поэтому растровыС изобраТСния ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ составлСны Π±Π΅Π· ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π°ΠΏΠΏΠ°Ρ€Π°Ρ‚Π½ΠΎΠ³ΠΎ обСспСчСния; Π’ качСствС Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Ρ‹, соврСмСнныС графичСскиС процСссоры ΠΌΠΎΠ³ΡƒΡ‚ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ ΠΎΠ³Ρ€ΠΎΠΌΠ½ΠΎΠ³ΠΎ количСства ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ…, ΠΏΠΎΠ²Π΅Ρ€Π½ΡƒΡ‚Ρ‹Ρ…, сглаТСнных ΠΈ частично ΠΏΠΎΠ»ΡƒΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΠ°Ρ€Π°Π»Π»Π΅Π»ΡŒΠ½ΠΎ с процСссором.

Π‘ΠžΠ”Π•Π Π–ΠΠΠ˜Π•

Π˜ΡΡ‚ΠΎΡ€ΠΈΡ [ ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ ]

Π’Π΅Ρ€ΠΌΠΈΠ½ Β« спрайт» Π²ΠΏΠ΅Ρ€Π²Ρ‹Π΅ Π±Ρ‹Π» использован Π² графичСском смыслС ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² процСссора видСодисплСя (VDP) Texas Instruments 9918 (A ). [9] Π’Π΅Ρ€ΠΌΠΈΠ½ Π±Ρ‹Π» ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½ ΠΈΠ· Ρ‚ΠΎΠ³ΠΎ Ρ„Π°ΠΊΡ‚Π°, Ρ‡Ρ‚ΠΎ спрайты, Π° Π½Π΅ Ρ‡Π°ΡΡ‚ΡŒ Π΄Π°Π½Π½Ρ‹Ρ… растрового изобраТСния Π² Π±ΡƒΡ„Π΅Ρ€Π΅ ΠΊΠ°Π΄Ρ€Π°, вмСсто этого Β«ΠΏΠ»Π°Π²Π°Π»ΠΈΒ» свСрху, Π½Π΅ затрагивая Π΄Π°Π½Π½Ρ‹Π΅ Π² Π±ΡƒΡ„Π΅Ρ€Π΅ ΠΊΠ°Π΄Ρ€Π° Π½ΠΈΠΆΠ΅, Π²ΠΎ ΠΌΠ½ΠΎΠ³ΠΎΠΌ ΠΊΠ°ΠΊ ΠΏΡ€ΠΈΠ·Ρ€Π°ΠΊ ΠΈΠ»ΠΈ Β« спрайт Β». К этому Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ спрайты достигли уровня, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»Π½Ρ‹Π΅ Π΄Π²ΡƒΠΌΠ΅Ρ€Π½Ρ‹Π΅ Ρ„ΠΎΡ€ΠΌΡ‹ ΠΌΠΎΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ ΠΏΠΎ экрану ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ с ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΌΠΈ Π·Π°Ρ‚Ρ€Π°Ρ‚Π°ΠΌΠΈ Π½Π° ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ΅ обСспСчСниС.

БистСмы с Π°ΠΏΠΏΠ°Ρ€Π°Ρ‚Π½Ρ‹ΠΌΠΈ спрайтами [ ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ ]

Π­Ρ‚ΠΎ Π±Π°Π·ΠΎΠ²Ρ‹Π΅ спСцификации оборудования ΠΈ Π½Π΅ Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ² программирования, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ использованиС растровых ΠΏΡ€Π΅Ρ€Ρ‹Π²Π°Π½ΠΈΠΉ для пСрСпрофилирования спрайтов Π² сСрСдинС ΠΊΠ°Π΄Ρ€Π°.

ИспользованиС Π² 3D-Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π΅ [ ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ ]

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Π€ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ спрайты Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠΊΠ΅

Π‘ΠΈΠ½ΠΎΠ½ΠΈΠΌΡ‹ [ ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ ]

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *