Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Как использовать sprit'ы? (https://javascript.ru/forum/misc/30476-kak-ispolzovat-sprit%27y.html)

Hekumok 05.08.2012 22:45

Как использовать sprit'ы?
 
Вложений: 2
Искал в гугле как использовать спрайты... Про то как использовать css-спрайты мне известно, но тут-то так не сделаешь...В общем, в гугле нашел ток какую-то библиотеку для создания анимации с помощью спрайтов, но даже на примере, который был в архиве с библиотекой, нифига не понял, тем более, что там используется jquery, а я с этим вабще не знаком... В общем, прошу помощи - объясните, позязя, мне-слоупоку, как всё-таки сделать анимацию из спрайтов с помощью этой библиотеки...и можно ли вабще без нее (еси да, то объясните, плз, как)? И как использовать спрайты в canvas'е (я знаю, что в canvas'е можно спрайты использовать, где-то видел, но тож не знаю как)? Помогите, позязя)))
Зы: внизу прикрепил библиотеку и один спрайт, на примере которого прошу показать, как это делается...
И да, в примере из архива с библиотекой есть часть кода, где написано, чтобы в ишаке с фоном не было проблем - мне на ишак срать, так что можно не изворачиваться =)

Deff 05.08.2012 23:15

Hekumok,
лениво смотреть

Основа - это позиционирование фона
http://htmlbook.ru/css/background-position
т.е любое изо больше размера элемента - по сути явлется спрайтом

элемент - кадр - можно, к примеру, - создать вытянутый спрайт слево направо из кадров мультика и передвигая его с нужной скоростью(покадрово) - мы можем получить анимационную картинку - ну или,
- к примеру - из одной картинки моря (раза в два - три более кадра(ну или размера элемента по горизонтали) - плавно двигая(уже не покадрово) можно получить - волнение моря...

Hekumok 05.08.2012 23:23

Deff,
background-position это с css-спрайтами... И то, что вы написали, я знаю, но я не знаю, как это сделать!

Deff 05.08.2012 23:30

Hekumok,
2-я картинка(прелоадер) http://s1.uploads.ru/i/nkepo.png просто двигает начальное смещение по Х в бекграуде
вот этого элемента <div id="preloader" style="background-position: -8px 0px"/> - красным - меняющаяся позиция
Первая картинка - делает тож самое - ток передвигает покадрово http://s1.uploads.ru/i/rZNAR.jpg (справо - налево
карочь -я походу не глядя описал оба случая

Hekumok 05.08.2012 23:34

Deff, я знаю, что там идет смещение по иксу, но a как это сделать посекундно, чтоб как анимация? И как это сделать с другим спрайтом?

Deff 05.08.2012 23:45

Hekumok,
движок выставляет setInerval
далее в нему(setInerval ) наращиваешь i++ и добавляешь к текущей позиции -выставляешь background-position: -XXXpx и смотришь: сравнялся ли правый край картинки( длина её известна) с правым краем твоего div - если сравнялся - сбрасываешь i на 0 и продолжаешь тоже самое. (*По кнопке стоп сlearInterval - что не ясно ?

Hekumok 05.08.2012 23:48

Deff, просто я тупой слоупок))) огромное вам спасибо =)

Deff 05.08.2012 23:50

Hekumok,
Там ксать движение влево(у прелоадера) - поэтому к позиции не добавляешь - а вычитаешь - тогда картинка от 0 - движецо влево до упора правым краем
а у анимашки первой смещение не на 1 пиксел за такт - а на ширину кадра

Hekumok 05.08.2012 23:52

Deff, еще раз спасибо)))

Hekumok 06.08.2012 21:37

а как это сделать в canvas'е - там же низзя спрайт в див загнать и background-position смещать?


Часовой пояс GMT +3, время: 19:55.