Здравей, моят Potato Imaginator и аз съм youtuber, който е експерт в анимирането с помощта на TIC-80. Този блог е за всеки, който иска да прави анимации, игри и не е нужно да имате предварителни познания по кодиране. До края на тази публикация в блога ще сте направили проста анимация на топка, която отскача от краищата на екрана.
За да направим тази анимация, ще използваме скриптов език, наречен „Lua“. Lua е език, използван предимно за правене на игри, но аз го използвам за създаване на анимации 🙃 Можете да научите за Lua от тук: https://www.lua.org/manual/5.4/
Програмата, която ще използваме, за да направим Ball Animation, е TIC-80 версия 1.0.2164 или по-нова. TIC-80 е фентъзи конзола с отворен код, използвана за създаване на игри, анимации, инструменти и музика. Можете да научите повече за TIC-80 на официалния му уебсайт тук: https://tic80.com/learn и това е документация на Github: https://github.com/nesbox/TIC-80/wiki
За да използвате TIC-80, можете да използвате версията на уеб браузъра тук: https://tic80.com/create или да го изтеглите за Windows, Linux, Mac, Android, Raspberry Pi и т.н. от тук: https:// tic80.com/create
Когато за първи път стартирате TIC-80, получавате Конзола за TIC-80:
Когато натиснете ‘Esc’ или ‘F1’, получавате Редактор на код:
Това е мястото, където пишете кода за създаване на игри, анимации и т.н.
Преди да започнем да кодираме, трябва да знаем няколко неща за TIC-80. TIC-80 има размер на екрана 240x136 пиксела, което означава, че има 240 пиксела хоризонтално (посока x) и 136 пиксела вертикално (посока y). Освен това, TIC-80 работи като 60 FPS, което означава, че работи с 60 кадъра в секунда, т.е., за да играе вашата игра/анимация, програмата се изпълнява „60 пъти всяка секунда“. Това също означава, че за да стартирате вашата игра/анимация, тя рисува целия екран (240x136 пиксела = 32640 пиксела) 60 пъти всяка секунда. Това не е ли нещо 🙂
TIC-80 също има 16 цветови палитри, номерирани от 0-15
Сега научаваме координатната система на TIC-80. Той рисува всеки кадър отляво надясно, отгоре надолу ред по ред. Екранът има (x,y) координати. Горният ляв е (0,0), горният десен е (239,0), долният ляв е (0,135), долният десен е (239,135). Изглежда нещо подобно:
Сега нека започнем да кодираме, изтрийте всичко в редактора на кодове и въведете функцията BOOT() и функцията TIC(). Трябва да изглежда нещо подобно:
Всичко във функцията BOOT() се извиква само веднъж в началото на стартиране на програмата (инициализация), а всичко във функцията TIC()се извиква 60 пъти всяка секунда.
Сега нека напишем cls(10) във функцията TIC(). Трябва да изглежда нещо подобно:
cls()е вградена функция, която приема цвят 0–15 и изчиства екрана с цвета. Над cls(10) изчиства екрана с цвят „10“ (син) 60 пъти всяка секунда, тъй като е записан във функцията TIC().
Сега нека стартираме кода. За да го стартирате, натиснете Ctrl + Rили натиснете бутона за възпроизвеждане (триъгълник) в горната лента. Трябва да изглежда нещо подобно:
За да се върнете към редактора на кодове, първо натиснете „Esc“ и изберете „Затваряне на играта“, след което се връщате обратно към конзолата. Натиснете „Esc“ / „F1“, за да отидете в редактора на кодове
Сега, нека нарисуваме топка. За да начертаем топка, имаме нужда от (x,y) позиция и радиус на топката ‘r’. Във функцията BOOT() въведете x=120, y=68, r=8, всеки на нов ред без запетаи. Трябва да изглежда нещо подобно:
В изображението по-горе x, y и rсе наричат променливи и са като празни кутии, които могат да съдържат стойности (числа, знаци, низове, bools и т.н.).
Сега нека изтеглим топката. Въведете circ( x, y, r, 2)във функцията TIC() след cls(10). Трябва да изглежда нещо подобно:
circ()е вградена функция на TIC-80която чертае кръг. Има параметри circ ( x позиция, y позиция, радиус на кръга, цвят на кръга). В горното, когато въведете circ( x, y, r, 2), той замества x = 120, y = 68 и r = 8 стойности в circ(), което става circ( 120, 68, 8, 2) , което е чертащ кръг на позиция (120,68) с радиус 8 и цвят 2 > (Червено) .
и когато го стартирате с помощта на Ctrl+R, получавате кръг в центъра на екрана по следния начин:
Имайте предвид, че ( 120, 68 ) е в центъра на екрана. Също така имайте предвид, че редът на рисуване е важен. Функцията circ() трябва да е след функцията cls(), в противен случай няма да видите кръга/топката.
Сега, за да направим анимация, нека преместим топката. За да преместим топката, трябва да актуализираме нейната (x,y) позиция във всеки кадър.
Нека първо преместим топката хоризонтално. За целта трябва да актуализираме позицията „x“ на топката всеки кадър. За да направите това, въведете x=x+1след функциятаcirc() във функциятаTIC(). Трябва да изглежда така:
и когато го стартирате, виждате, че топката се движи надясно хоризонтално. В изображението по-горе x=x+1 означава, че стойността на 'x' се добавя с '1' и се присвоява на ' Отново самият x. По същия начин, за да го преместите наляво, използвайте x=x-1 и за Нагоре използвайте y=y-1 и за Надолу вместо това използвайте y=y+1. Забележете, че топката се движи извън екрана, но ще поправим това по-късно.
Вместо да увеличавате с ‘1’, можете също да използвате различни стойности като x=x+2 или x=x+1/3.
Сега, за да го преместите по диагонал, напишете y=y+1 след x=x+1, което означава едновременно x и y се увеличават със стойност '1' всеки кадър. Трябва да изглежда нещо подобно:
Когато го стартирате, виждате, че топката се движи диагонално. (Не е необходимо и двете да се увеличават с еднаква скорост, може да бъде и x=x+2 и y=y+3).
Сега нека напишем код, така че топката да не се движи извън екрана и да се отразява, когато удари границите на екрана. За да направим това, имаме нужда от още две нови променливи 'dx' и 'dy', т.е. x скорост и y скорост.
Сега въведете dx=1 и dy=1 в отделни редове във функцията BOOT() и нека заменим x=x+1 и y=y+1 с x=x+dx и y=y+dy. Трябва да изглежда по следния начин:
Сега, за да предотвратим изместването на топката от екрана и да я накараме да се отрази, когато достигне границите, ние използваме нещо, наречено израз „if else“. Ние използваме израза „if else“ като този:
if (условието е вярно) then изпълнете 1-ви код else изпълнете 2-ри код end
Пример за „if else“ в TIC-80 е:
Сега, обратно към нашия код, за да накарате топката да се отрази от екрана, първо проверете ако x›239 (топката излезе извън екрана в дясната граница), след което задайте x=239 ( накарайте го да остане на екрана) и променете x скорост 'dx' на -1 (движение наляво)
Кодът за това е:
if x>239 then x=239 dx=-1 end
Напишете този код след y=y+dy във функцията TIC(). Трябва да изглежда така:
В кода по-горе проверяваме дали Ball x position е по-голямо от 239 и ако е вярно, тогава задаваме x позиция на 239 и промяна на x-скорост, dx на -1 (премества го наляво от всеки кадър)
По същия начин за лявата граница кодът е:
if x<0 then x=0 dx=1 end
Трябва да изглежда нещо подобно:
По подобен начин в кода по-горе проверяваме дали x позиция на топката е по-малка от 0 и ако е вярно, тогава задаваме x позиция на 0 и промяна на x-скорост, dx на 1 (премества го надясно всеки кадър).
Сега кодът за отражение на горната и долната граница е:
if y<0 then y=0 dy=1 end if y>135 then y=135 dy=-1 end
Добавяйки горния код във функцията TIC(), изглежда така:
Когато стартирате този код, забелязвате, че топката се отразява, но не взема предвид радиуса на топката ‘r’. За да накараме топката да отразява правилно, ще трябва да променим горния код за горна, долна, лява и дясна граници на:
if x<r then x=r dx=1 end if x>239-r then x=239-r dx=-1 end if y<r then y=r dy=1 end if y>135-r then y=135-r dy=1 end
Когато замените своя код с горния код, забелязвате, че топката се отразява правилно, дори когато промените стойността на радиуса ‘r’ във функцията BOOT().
Поздравления 🎉🎊, направихте първата си анимация с помощта на програмиране в Lua в TIC-80!
Сега можете да експериментирате с програмата, да промените стойността на радиуса 'r' във функцията BOOT(), вместо да задавате dx =1, dx = -1, dy =1, dy = -1, можете да използвате нова променлива 'spd' с всяка стойност в BOOT() като spd=2 и задайте dx = spd, dx = -spd, dy = spd, dy = -spd
Можете също да промените стойностите за цветовете нафона и топката :)
Въпреки че този урок беше дълъг, надявам се, че си е заслужавал времето ви! Скоро ще направя повече уроци за TIC-80 тук и можете да намерите моя плейлист за начинаещи TIC-80 тук: https://www.youtube.com/playlist?list=PL5VlvsnKT2RptXohkDdgXvmCfdchRZ4hl
и можете да намерите други софтуери като Blender Animations, p5.js Animations, GPT-4 и т.н. видеоклипове в моя канал тук: https://www.youtube.com/channel/UCWv8HI0x4ZlPYl-uMbdcUhQ
Бях начинаещ в TIC-80 през 2019 г. и сега го усвоих, а вие също можете 🙃
Това са няколко от 500+ анимации, които съм направил с помощта на TIC-80 и това дори не са най-добрите ми: https://tic80.com/play?cart=2077 , https://tic80.com/ play?cart=2375 , https://tic80.com/play?cart=2523 , https://tic80.com/play?cart=1636 , https://tic80.com/play? cart=3033
